@dpage-ai/react-native-dpage
react-native-dpage
Dynamic component system with caching for React Native. Load server-driven UI components at runtime without app store updates.
Quick Start
Get your first dynamic component running in under a minute with just a few lines of code.
App.tsx
import { initDPage, initLifecycleListener, DynamicComponent } from '@dpage-ai/react-native-dpage';
// 1. Initialize once at app startup
initDPage({
projectId: 'my-project',
apiToken: 'dpage_live_xxx',
});
// 2. Enable auto-save on app background (for persistent state)
initLifecycleListener();
// 3. Render dynamic components anywhere
<DynamicComponent name="MyComponent" />Features
🔄
Server-driven UI
Load UI components from your server at runtime without app updates
💾
Smart Caching
Multi-layer caching with AsyncStorage for offline-first experiences
⚡
Preloading
Preload components at app startup for instant display when needed
📊
Events & Monitoring
Built-in event system for observability, analytics, and debugging
🔒
Type Safety
Full TypeScript support with type-safe component props
🛡️
Error Boundaries
Graceful error handling with customizable fallback components
💾
Persistent State
Save miniapp state locally with optional cloud sync hooks
How It Works
The dynamic component system uses a multi-layer caching strategy for optimal performance:
┌──────────────────────────┐
│ Request Component │
└───────────┬──────────────┘
│
▼
┌──────────────────────────┐
│ In Memory? │──Yes──► Return (instant)
└───────────┬──────────────┘
│ No
▼
┌──────────────────────────┐
│ In Cache? │──Yes──► Load & Return (~10ms)
└───────────┬──────────────┘
│ No
▼
┌──────────────────────────┐
│ Fetch from API │──Yes──► Cache & Return (~200ms)
└───────────┬──────────────┘
│ Failed
▼
┌──────────────────────────┐
│ Use Fallback │────────► Return (graceful)
└──────────────────────────┘
Performance
| Scenario | Latency | Source |
|---|---|---|
| First load | ~200ms | Network fetch + cache |
| Cached (warm) | ~10ms | AsyncStorage cache |
| Memory (hot) | <1ms | In-memory cache |