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

Optional React Navigation Peers

You only need these packages when you want MiniappComponent to render with navigationEngine="react-navigation" or "auto" in an app that has React Navigation available. If you stay on the built-in portable renderer, you can skip them.

Terminal

npm install @react-navigation/native @react-navigation/native-stack
npm install @react-navigation/bottom-tabs @react-navigation/material-top-tabs
expo install react-native-screens react-native-gesture-handler react-native-pager-view

Choosing an engine: the portable renderer works with no extra navigation setup. React Navigation peers are only required when you want native stacks or tabs from the host app.

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 />;
}

Miniapp Navigation Setup

Manifest-backed miniapps can now arrive from the server with a navigation payload in addition to components[]. That payload is handled automatically by MiniappComponent.

TSX

<MiniappComponent
  miniappId="support-center"
  navigationEngine="auto"
  initialTarget="/tickets/details"
/>

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.