Expo Integration

This guide walks through integrating @dpage-ai/react-native-dpage into modern Expo (SDK 51+) applications.

Installation

Use expo install to automatically pin compatible versions:

Terminal

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

Expo will automatically pin the peer dependency versions that match your SDK version.

Basic Setup

1. Initialize the SDK

App.tsx

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

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

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

2. Use Dynamic Components

TSX

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

function HomeScreen() {
  return (
    <View>
      <DynamicComponent name="PromoBanner" />
      <DynamicComponent 
        name="ProductList" 
        data={{ category: 'featured' }} 
      />
    </View>
  );
}

Expo Configuration

Store your credentials in app.json or app.config.js:

app.json

{
  "expo": {
    "extra": {
      "dpage": {
        "projectId": "acme-prod",
        "apiToken": "dpage_live_XXXXXXXXXXXXXXXX"
      }
    }
  }
}

Then access in your code:

TSX

import Constants from 'expo-constants';
import { initDPage } from '@dpage-ai/react-native-dpage';

const { projectId, apiToken } = Constants.expoConfig?.extra?.dpage || {};

initDPage({
  projectId,
  apiToken,
});

Environment-Specific Config

Use app.config.js for dynamic configuration:

app.config.js

export default ({ config }) => ({
  ...config,
  extra: {
    dpage: {
      projectId: process.env.DPAGE_PROJECT_ID || 'demo',
      apiToken: process.env.DPAGE_API_TOKEN || '',
    },
  },
});

Working Across Expo Environments

📱

Expo Go / Dev Client

Works out of the box. AsyncStorage and safe area context are bundled with Expo.

🚀

EAS Build / Production

Use the same install commands. No extra native configuration required.

🌐

Web

Fetch and AsyncStorage operations run in the browser. Ensure CORS is configured.

Expo Router Integration

Works seamlessly with Expo Router:

app/_layout.tsx

import { Slot } from 'expo-router';
import { initDPage, preloadComponents } from '@dpage-ai/react-native-dpage';
import { useEffect } from 'react';

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

export default function RootLayout() {
  useEffect(() => {
    // Preload critical components
    preloadComponents(['Header', 'Footer', 'BottomTabs']);
  }, []);

  return <Slot />;
}

app/(tabs)/home.tsx

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

export default function HomeScreen() {
  return (
    <ScrollView>
      <DynamicComponent name="HomeHero" />
      <DynamicComponent name="FeaturedProducts" />
    </ScrollView>
  );
}

Development Tips

📦

Preload on App Launch

Use preloadComponents in your root layout to warm up cache entries.

🎨

Match Your Design System

Use renderLoading and renderError props to match your app's design.

🔗

Use with Navigation

Combine with Expo Router or React Navigation as you would any other component.

📊

Monitor with Events

Wire up event handlers for analytics, log cache hits, and monitor fallbacks.

EAS Build Configuration

For EAS builds, ensure environment variables are set:

eas.json

{
  "build": {
    "production": {
      "env": {
        "DPAGE_PROJECT_ID": "my-production-project",
        "DPAGE_API_TOKEN": "dpage_live_xxx"
      }
    },
    "preview": {
      "env": {
        "DPAGE_PROJECT_ID": "my-staging-project",
        "DPAGE_API_TOKEN": "dpage_staging_xxx"
      }
    }
  }
}

Troubleshooting

AbortController not defined

This occurs on older Expo SDK versions. Ensure you're on the latest Expo SDK. For custom web builds, include a polyfill.

Missing peer dependency warning

Re-run the installation command:

Terminal

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

API requests blocked

Check your Expo dev server proxy settings or configure HTTPS/CORS on your backend. For web builds, ensure the API supports CORS.

Next Steps

Caching →

Learn about the multi-layer caching system

Custom Runtime Deps →

Inject your own libraries into dynamic components

Events & Monitoring →

Track component loading for analytics

Security →

Secure your dynamic components