@edge-base/react-native brings the EdgeBase client model to React Native environments.

It keeps the familiar browser SDK shape while adding the pieces mobile apps need:

• AsyncStorage token persistence
• deep-link based OAuth callbacks
• AppState lifecycle handling
• React Native friendly push registration
• Turnstile support through react-native-webview

If you are building a browser-only app, use @edge-base/web instead.

EdgeBase is the open-source edge-native BaaS that runs on Edge, Docker, and Node.js.

This package is one part of the wider EdgeBase platform. For the full platform, CLI, Admin Dashboard, server runtime, docs, and all public SDKs, see the main repository: edge-base/edgebase.

Beta: the package is already usable, but some APIs may still evolve before general availability.

Documentation Map

• Quickstart Project creation and local development
• Authentication Email/password, OAuth, MFA, sessions, captcha
• Database Client SDK Query and mutation patterns that also apply on React Native
• Room Client SDK Presence, signals, state, and media-ready room flows
• Push Client SDK General client push concepts

For AI Coding Assistants

This package ships with an llms.txt file for AI-assisted React Native integration.

You can find it:

• after install: node_modules/@edge-base/react-native/llms.txt
• in the repository: llms.txt

Use it when you want an agent to:

• set up createClient() with the right React Native adapters
• handle deep-link OAuth callbacks correctly
• wire push registration without guessing native token APIs
• avoid accidentally using browser-only assumptions like localStorage

Installation

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

If you want Turnstile-based captcha, also install:

npm install react-native-webview

For iOS, remember to install pods:

cd ios && pod install

Quick Start

import { createClient } from '@edge-base/react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { AppState, Linking } from 'react-native';

const client = createClient('https://your-project.edgebase.fun', {
  storage: AsyncStorage,
  linking: Linking,
  appState: AppState,
});

await client.auth.signIn({
  email: '[email protected]',
  password: 'pass1234',
});

const posts = await client
  .db('app')
  .table('posts')
  .where('published', '==', true)
  .getList();

console.log(posts.items);

Core API

Once you create a client, these are the main surfaces you will use:

• client.auth Mobile-friendly auth with deep-link OAuth support
• client.db(namespace, id?) Query and mutate data
• client.storage Upload files and resolve URLs
• client.functions Call app functions
• client.room(namespace, roomId, options?) Join realtime rooms
• client.push Register device tokens and listen for app messages
• client.analytics Track client analytics

OAuth With Deep Links

client.auth.signInWithOAuth('google', {
  redirectUrl: 'myapp://auth/callback',
});

Linking.addEventListener('url', async ({ url }) => {
  const result = await client.auth.handleOAuthCallback(url);
  if (result) {
    console.log('OAuth success:', result.user);
  }
});

In React Native, the app is responsible for registering the deep link scheme in the platform configuration.

Turnstile Captcha

import { Button } from 'react-native';
import { WebView } from 'react-native-webview';
import { TurnstileWebView, useTurnstile } from '@edge-base/react-native';

function SignUpScreen() {
  const captcha = useTurnstile({
    baseUrl: 'https://your-project.edgebase.fun',
    action: 'signup',
  });

  return (
    <>
      {captcha.siteKey && (
        <TurnstileWebView
          siteKey={captcha.siteKey}
          action="signup"
          WebViewComponent={WebView}
          onToken={captcha.onToken}
          onError={captcha.onError}
          onInteractive={captcha.onInteractive}
        />
      )}
      <Button
        title="Sign Up"
        onPress={() =>
          void client.auth.signUp({
            email: '[email protected]',
            password: 'pass1234',
            captchaToken: captcha.token ?? undefined,
          })
        }
      />
    </>
  );
}

Push Notifications

import messaging from '@react-native-firebase/messaging';

client.push.setTokenProvider(async () => ({
  token: await messaging().getToken(),
  platform: 'android',
}));

await client.push.register();

const unsubscribe = client.push.onMessage((message) => {
  console.log(message.title, message.body);
});

You bridge native push providers into the SDK. The SDK does not hard-depend on Firebase Messaging.

Lifecycle Management

When you pass appState to createClient(), the SDK automatically coordinates mobile lifecycle behavior:

• background/inactive: disconnect realtime transports to reduce battery and network use
• foreground: refresh auth state and reconnect realtime transports

Room Media Transports

React Native now exposes the same top-level room media transport entrypoint as the web SDK:

const room = client.room('calls', 'demo');
await room.join();

const transport = room.media.transport({
  provider: 'cloudflare_realtimekit',
});

await transport.connect({
  name: 'June',
  customParticipantId: 'mobile-june',
});

await transport.enableAudio();
await transport.enableVideo();

Available providers:

• cloudflare_realtimekit Uses Cloudflare RealtimeKit for managed media sessions
• p2p Uses direct peer-to-peer media with signaling through room.signals

Install the matching optional peer dependencies for the transport you use:

npm install @cloudflare/realtimekit-react-native
npm install @cloudflare/react-native-webrtc

Practical integration notes from the current host-app smoke matrix:

• cloudflare_realtimekit currently expects React Native 0.77+
• iOS needs the usual cd ios && pod install
• Android apps using @cloudflare/realtimekit-react-native need a blob_provider_authority string resource
• current host-app smoke builds succeeded on both iOS simulator and Android debug

<string name="blob_provider_authority">${applicationId}.blobs</string>

For setup details and provider tradeoffs, see the room media docs:

• Room Media Overview
• Room Media Setup

Platform Differences vs @edge-base/web

| Feature | Web | React Native | | --- | --- | --- | | Token storage | localStorage | AsyncStorage | | OAuth redirect | browser redirect | Linking.openURL() + deep-link callback | | Lifecycle | document visibility | AppState | | Captcha | DOM-based widget | react-native-webview | | Push | web push | native token provider integration |

License

MIT