Installation

Install @dpage-ai/react-native-dpage and its peer dependencies in your React Native or Expo project.

Package Installation

npm

Terminal

npm install @dpage-ai/react-native-dpage

yarn

Terminal

yarn add @dpage-ai/react-native-dpage

Expo

Terminal

expo install @dpage-ai/react-native-dpage
expo install @react-native-async-storage/async-storage react-native-safe-area-context

Note: Expo will automatically pin the peer dependency versions that match your SDK. For bare React Native apps, install peer dependencies manually.

Peer Dependencies

The SDK requires these peer dependencies for caching and safe area handling:

Terminal

npm install @react-native-async-storage/async-storage react-native-safe-area-context

iOS Setup

For React Native 0.60+, install pods:

Terminal

cd ios && pod install && cd ..

NPM Registry Configuration

If you're using GitHub Packages registry, configure your .npmrc:

.npmrc

@dpage-ai:registry=https://npm.pkg.github.com

Basic Setup

Initialize the SDK once at your app's entry point:

App.tsx

import { initDPage, initLifecycleListener } from '@dpage-ai/react-native-dpage';

initDPage({
  projectId: 'my-project',
  apiToken: 'dpage_live_xxx',
});

// Enable auto-save on app background (for persistent state)
initLifecycleListener();

export default function App() {
  return <YourApp />;
}

Verification

Test your installation by rendering a dynamic component:

TestScreen.tsx

import { DynamicComponent } from '@dpage-ai/react-native-dpage';

function TestScreen() {
  return (
    <DynamicComponent
      name="TestComponent"
      renderLoading={() => <Text>Loading...</Text>}
      renderError={(error) => <Text>Error: {error.message}</Text>}
    />
  );
}

Next Steps

Now that you've installed the SDK, learn about configuration options or dive into using components.