Configuration

Configure the SDK with initDPage() at your app's entry point. All settings are optional except projectId and apiToken for production use.

Full Configuration

App.tsx

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

initDPage({
  // Required
  projectId: 'my-project',
  apiToken: 'dpage_live_xxx',

  // Optional: Enable cloud state sync
  cloudSync: true,

  // Optional: Enable error reporting (default: true)
  errorReporting: true,

  // Optional: Device ID (set for all users, authenticated or anonymous)
  deviceId: 'device-uuid',

  // Optional: User auth (set together via setUserAuth after login)
  userAuth: {
    userId: user?.id,
    authToken: session?.access_token,
  },

  // Optional: Fetch settings
  fetch: {
    enabled: true,           // Enable API fetching (default: true)
    timeout: 10000,          // Request timeout in ms (default: 10000)
    baseUrl: 'https://c.dpage.ai',  // API base URL
  },

  // Optional: Cache settings
  cache: {
    enabled: true,           // Enable caching (default: true)
    ttl: 3600000,            // Cache TTL in ms (0 = no expiry)
    namespace: '@dpage:',    // Cache key prefix
  },

  // Optional: Custom runtime dependencies
  runtimeDeps: myCustomDeps,

  // Optional: Log level
  logLevel: 'warn',  // 'none' | 'error' | 'warn' | 'info' | 'debug'
});

// Enable automatic state saves on app background
initLifecycleListener();

Configuration Options

Core Settings

Option	Type	Default	Description
projectId	string	-	Your DPage project identifier
apiToken	string	-	API token for authentication
logLevel	string	'warn'	Logging verbosity level

Cloud Sync Settings

Option	Type	Default	Description
cloudSync	boolean	false	Enable cloud state sync (warns if deviceId/userAuth not set)
deviceId	string	-	Device identifier (set for all users, authenticated or anonymous)
userAuth	{ userId, authToken }	-	User auth for authenticated cloud sync (userId + Supabase JWT)

Error Reporting Settings

Option	Type	Default	Description
errorReporting	boolean	true	Enable automatic error reporting to the DPage dashboard. When enabled, miniapp crashes are sent to the server for monitoring.

Fetch Settings

Option	Type	Default	Description
fetch.enabled	boolean	true	Enable API fetching
fetch.timeout	number	10000	Request timeout in milliseconds
fetch.baseUrl	string	https://c.dpage.ai	API base URL
fetch.customFetch	function	-	Custom fetch implementation
fetch.requestTransform	function	-	Transform request before sending

Cache Settings

Option	Type	Default	Description
cache.enabled	boolean	true	Enable AsyncStorage caching
cache.ttl	number	0	Cache TTL in ms (0 = no expiry)
cache.namespace	string	@dpage:	Cache key prefix

Adding Auth Headers

Use requestTransform to add custom headers to all requests:

TSX

initDPage({
  projectId: 'my-project',
  apiToken: 'dpage_live_xxx',
  fetch: {
    requestTransform: ({ options }) => ({
      options: {
        ...options,
        headers: {
          ...options.headers,
          'X-Custom-Header': 'value',
          Authorization: `Bearer ${getToken()}`,
        },
      },
    }),
  },
});

Custom Fetch Implementation

Replace the default fetch with your own implementation for retries, instrumentation, etc.:

TSX

initDPage({
  projectId: 'my-project',
  apiToken: 'dpage_live_xxx',
  fetch: {
    customFetch: async (url, options) => {
      // Custom logic: retries, logging, etc.
      return fetch(url, options);
    },
  },
});

Environment-Specific Config

TSX

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

initDPage({
  projectId: Config.DPAGE_PROJECT_ID,
  apiToken: Config.DPAGE_API_TOKEN,
  logLevel: __DEV__ ? 'debug' : 'error',
  cache: {
    ttl: __DEV__ ? 0 : 3600000,  // No expiry in dev
  },
});

Helper Functions

TSX

import {
  getProjectId,
  isInitialized,
  isCloudSyncEnabled,
  isErrorReportingEnabled,
  initLifecycleListener,
  resetDPageConfig,
  // Auth helpers
  getUserId,
  getDeviceId,
  getAuthToken,
  setDeviceId,
  setUserAuth,
} from '@dpage-ai/react-native-dpage';

// Enable auto-save on app background (call once at startup)
initLifecycleListener();

// Check if SDK is initialized
if (isInitialized()) {
  console.log('Current project:', getProjectId());
  console.log('Cloud sync enabled:', isCloudSyncEnabled());
  console.log('Error reporting enabled:', isErrorReportingEnabled());
}

// Set device ID at app startup (for all users)
setDeviceId(await getOrCreateDeviceId());

// Set user auth on login (userId + authToken together)
setUserAuth({ userId: user.id, authToken: session.access_token });

// Clear user auth on logout
setUserAuth(null);

// Reset to defaults (clears all config!)
resetDPageConfig();

Warning: Calling resetDPageConfig() clears all configuration including apiToken. Make sure to call initDPage() with full config afterwards.