DPage Logo
react-native-dpage

Dynamic Components
for React Native

Create dynamic pages in your React Native apps in real-time. Load components from API, cache intelligently, and deliver seamless offline experiences.

View Documentation

Everything you need

Powerful features for dynamic component management

🌐

API-First Loading

Load component templates from remote APIs with configurable endpoints and account IDs.

💾

Intelligent Caching

Automatic caching with AsyncStorage ensures fast loading and offline availability.

⚡

Runtime Factory

Compile and execute components at runtime with full dependency injection support.

🔧

Configurable

Customize API endpoints, cache behavior, and timeouts at runtime or build time.

📘

TypeScript Ready

Full TypeScript support with type-safe component props and configuration.

📦

Offline-First

Graceful fallback to cached templates and hardcoded components when offline.

Simple to use

Get started in minutes with our intuitive API

1

Basic Usage

import DynamicComponent from 'react-native-dpage';

function App() {
  return (
    <DynamicComponent
      template="AddOne"
    />
  );
}

Load any component template dynamically with a simple template name.

2

Component with Props

<DynamicComponent
  template="Counter"
  data={{
    initialValue: 100
  }}
/>

Pass data to your dynamic components just like regular React components.

3

Preload Components

import { preloadComponents } from 'react-native-dpage';

useEffect(() => {
  preloadComponents([
    'AddOne',
    'Counter'
  ]);
}, []);

Preload components on app start for instant rendering later.

4

Cache Management

import {
  getCacheStats,
  clearComponentCache
} from 'react-native-dpage';

const stats = await getCacheStats();
console.log(`Cached: ${stats.count}`);

await clearComponentCache('AddOne');

Full control over caching with utilities for stats and cleanup.

Quick Installation

Get up and running in less than a minute

1Install the package

npm install react-native-dpage
yarn add react-native-dpage

2Install peer dependencies

npm install @react-native-async-storage/async-storage

3Start using it

import DynamicComponent from 'react-native-dpage';

function MyScreen() {
  return <DynamicComponent template="YourComponent" />;
}

💡 Tip: Check out the documentation for advanced configuration, cache management, and API setup.