Managed UI Preview Available

React Native SDK

Use the React Native SDK when a customer app shares one TypeScript codebase across Android and iOS. It supports Managed UI for fast installs and Headless SDK objects for custom screens, with native adapters only where the platform needs them.

Start Integration Wizard Backend token guide

Use this page for app implementation

React Native setup, Managed UI components, Headless object methods, native module behavior, permission flow, ringtone, push token registration, and video renderer examples belong in this guide.

Use Scalar for REST details

Open Scalar when you need exact endpoint fields, response schemas, auth schemes, status codes, or generated client details.

Open Scalar API Reference

Chat

Create support conversations and messages from React Native screens.

AI

Ask AI and receive streaming-style callback events without handling transport details.

Calls

Create audio/video call sessions behind a simple calls API.

Token flow

The app requests a short-lived token from the customer backend. The customer backend calls Ringnity Server API and keeps the Server API key out of the mobile bundle.

Build backend token endpoint Server API guide

Package shape

Download the React Native source package from the SDK downloads page, then install it from a local package path during pilot installs. It provides the TypeScript object model, generated operation wiring, chat subscription fallback, and Android/iOS native call module sources.

Managed UI: fastest setup

import {
  RingnityWidget,
  createRingnityReactNativeCallAdapter,
} from '@ringnity/react-native-sdk';

const mediaAdapter = createRingnityReactNativeCallAdapter();

const config = {
  tokenProvider: fetchRingnityToken,
  callMode: 'basic',
  mediaAdapter,
  notificationAdapter: mediaAdapter,
};

export function SupportScreen() {
  return (
    <RingnityWidget
      config={config}
      mode="full"
      conversationSubject="Mobile customer support"
    />
  );
}

Smaller managed surfaces

<RingnityWidget config={config} mode="chat" />
<RingnityWidget config={config} mode="aiChat" />
<RingnityWidget config={config} mode="call" />

const ringnity = await Ringnity.create(config);

return (
  <>
    <RingnityChatWidget ringnity={ringnity} />
    <RingnityCallWidget ringnity={ringnity} />
  </>
);

Custom video renderer

<RingnityWidget
  config={config}
  mode="call"
  remoteVideo={<YourRemoteVideoView />}
  localPreview={<YourLocalPreviewView />}
/>

<RingnityVideoView
  session={callSession}
  remoteVideo={<YourRemoteVideoView />}
  localPreview={<YourLocalPreviewView />}
/>

Headless object model

import {
  Ringnity,
  createRingnityReactNativeCallAdapter,
} from '@ringnity/react-native-sdk';

const mediaAdapter = createRingnityReactNativeCallAdapter();
const permissions = await mediaAdapter.permissions({ video: true });

if (!permissions.canStartVideo) {
  // Request microphone/camera permission with your app permission flow.
}

const ringnity = await Ringnity.create({
  apiBaseUrl: 'https://api.ringnity.com',
  tokenProvider: async () => {
    const response = await fetch('https://your-backend.example.com/ringnity/runtime-token', {
      method: 'POST'
    });
    const data = await response.json();
    return {
      token: data.token,
      expiresIn: data.expiresIn,
      tokenType: 'Bearer'
    };
  },
  callMode: 'basic',
  mediaAdapter,
  notificationAdapter: mediaAdapter,
  notifications: {
    incomingCall: {
      soundName: 'ringnity_default',
      vibrate: true
    }
  }
});

const readiness = await ringnity.account.readiness();

const conversation = await ringnity.chat.createConversation({
  subject: 'Need help'
});
const conversationId = conversation.conversationId;

await ringnity.devices.registerPushToken({
  platform: 'react_native',
  provider: 'fcm',
  token: firebaseMessagingToken,
  audience: 'customer',
  externalId: 'customer-123',
  appId: 'com.example.customer',
});

await ringnity.chat.sendMessage({
  conversationId,
  body: 'Hi, I need help.'
});

await ringnity.ai.streamChat(
  {
    conversationId,
    message: 'Summarize the customer issue.'
  },
  {
    onDelta: (event) => appendToChat(event.data.delta),
    onDone: (event) => setAiAnswer(event.data.message)
  }
);

const updates = await ringnity.chat.subscribe(conversationId);

const call = await ringnity.calls.startVideo({
  conversationId,
});
await call.mute();
await call.setVideoEnabled(false);
await call.end();

updates.unsubscribe();

Ringtone behavior

// Add Android asset: android/app/src/main/res/raw/ringnity_default.*
// Add iOS asset: ringnity_default.caf in the app bundle.

await ringnity.notifications.previewRingtone();

await ringnity.notifications.playIncomingRingtone();

// Stop when the customer answers, declines, or the call expires.
await ringnity.notifications.stopRingtone();

Production readiness notes

The React Native SDK includes Managed UI preview, custom video renderer injection, generated OpenAPI operation wiring, device push token registration, a chat subscription fallback, Android/iOS native call module sources, and a basic example. Production readiness work continues through device QA, deeper native media renderer adapters, token exchange smoke testing, and a fuller Expo or bare React Native sample.

Open API Reference

Turn Your Website Into a Real-Time Call Center

Let customers call your team directly from your website, no phone numbers and no apps required. Just add one <script>.

Talk to Sales Register Now