Onlo Mobile SDK for React Native

Before you start

• React Native 0.79+, React 19+, and Node.js 20+
• iOS 15+ or Android API 24+
• A development or release build; Expo Go cannot load this native SDK

Quick start

Start anonymously even if your app has accounts. This proves the package, public key, network path, Messenger UI, and Inbox delivery before identity or push adds more moving parts.

1. Step 1

   Create a React Native Mobile SDK key

   In Onlo, open WebChat → Install → Mobile app, choose React Native, and select Generate key. Copy the public SDK key. It identifies this integration and is safe in app configuration; it is not the customer identity secret.

   Expected resultOnlo shows an active React Native SDK key and the released package version.

2. Step 2

   Install the released package

   Add the package exactly once. Wrapper apps must not install the iOS or Android core separately.

   Install React Native SDK 0.3.2typescript

   Copy

   npm install @onlo-ai/react-native@0.3.2

   Expected resultThe React Native project resolves the Onlo import and builds.

3. Step 3

   Initialize, start an anonymous session, and open Messenger

   Initialize once during app startup. Start the customer session before the Support control calls present. Replace the example key with the public key copied from Onlo.

   React Native · first working integrationtypescript

   Copy

   import {Onlo} from '@onlo-ai/react-native'; // React Native SDK 0.3.2
   
   export async function connectOnlo() {
     await Onlo.initialize({sdkKey: 'onlo_public_sdk_key_from_dashboard'});
     await Onlo.loginUnidentifiedUser();
   }
   
   export async function openSupport() {
     await Onlo.present();
   }

   Expected resultTap Support and the native Onlo Messenger opens with a message composer.

4. Step 4

   Prove the complete message path

   On the phone, send “Where is order #5832?”. Open Onlo Inbox and reply “Your order shipped this morning.” Return to WebChat → Install → Mobile app and refresh the SDK status.

   Expected resultThe conversation appears in Inbox, the reply appears in Messenger, and the target shows Connected with a recent Last seen time.

Identity verification

Do this only if customers already sign in to your app. Identity keeps conversations attached to the same customer across devices and app reinstalls. Anonymous apps can skip this section.

1. Step 1

   Generate the identity secret in Onlo

   Open WebChat → Install → Mobile app → React Native → Identity verification and select Generate secret. Copy it directly into your backend secret manager. Never put this secret in the app, source code, build configuration, logs, or analytics.

   Expected resultOnly your authenticated backend can read the identity secret.

2. Step 2

   Mint a short-lived customer JWT on your backend

   Authenticate the app request first. Sign HS256 with the Onlo identity secret, use onlo-messenger as the audience, use your stable customer ID as sub, and expire the token within five minutes.

   Node.js backend · create userJwttypescript

   Return userJwt to the authenticated customer. Never return ONLO_MOBILE_IDENTITY_SECRET.

   Copy

   import {SignJWT} from 'jose';
   
   // Run on your backend after authenticating the app customer.
   const secret = new TextEncoder().encode(
     process.env.ONLO_MOBILE_IDENTITY_SECRET,
   );
   
   const userJwt = await new SignJWT({
     name: 'Alex Morgan',
     email: 'alex@example.com',
     customAttributes: {plan: 'pro'},
   })
     .setProtectedHeader({alg: 'HS256'})
     .setSubject('customer_12345')
     .setAudience('onlo-messenger')
     .setIssuedAt()
     .setExpirationTime('5m')
     .sign(secret);

   Expected resultThe app receives a fresh userJwt for customer_12345, not the signing secret.

3. Step 3

   Identify the customer and clear Onlo on logout

   Pass the fresh JWT straight to Onlo after your app signs in. Before your app switches accounts or finishes logout, wait for Onlo logout to complete.

   React Native · login and logouttypescript

   Copy

   export async function connectSignedInCustomer(userJwt: string) {
     await Onlo.loginIdentifiedUser({userJwt});
   }
   
   export async function disconnectCustomer() {
     await Onlo.logout();
   }

   Expected resultOnlo Inbox shows Alex Morgan instead of an anonymous installation, and the next app account cannot inherit that conversation.

Push notifications

Push is optional. Add it after chat works so customers receive reply alerts while the app is in the background or terminated. Onlo should not show a system alert while the customer is already reading that conversation.

Before this section, configure each native runtime you ship: a Firebase project for Android and an Apple Developer APNs setup for iOS. Use a native development or release build, not Expo Go.

1. Step 1

   Configure the native push provider

   For Android, add the matching Firebase app, google-services.json, Google services plugin, and Firebase Messaging. For iOS, add the Push Notifications capability and register for APNs. Use a native development or release build.

   Expected resultYour push library returns an FCM token on Android or the hexadecimal APNs token on iOS.

2. Step 2

   Give Onlo the provider credentials

   In Onlo, open WebChat → Install → Mobile app → React Native → Push notifications. Upload Firebase service-account JSON for Android and/or an APNs .p8 key with its IDs and environment for iOS. Provider credentials belong only in Onlo—not JavaScript, the app bundle, or Git.

   Expected resultOnlo shows FCM ready, APNs ready, or both for the runtimes you ship.

3. Step 3

   Tell Onlo where this device can receive notifications

   Ask for notification permission from a clear customer action. After the Onlo customer session is ready, forward the current provider token and every later token rotation. Forward Onlo payloads when the customer taps a notification.

   React Native · token and notification taptypescript

   Copy

   import {Platform} from 'react-native';
   import {Onlo} from '@onlo-ai/react-native';
   
   // Your push library requests permission and supplies this device token.
   const provider = Platform.OS === 'ios' ? 'apns' : 'fcm';
   await Onlo.setPushToken({provider, token: deviceToken});
   
   // Forward an Onlo notification when the customer taps it.
   await Onlo.handlePushNotification(payload);

   Expected resultThe current device appears under registered installations in the Onlo push status.

4. Step 4

   Test the provider, then test a real reply

   First use Send to selected installation. Then send a customer message, background or close the app, and reply from Inbox. Test the real reply path because the provider test and conversation delivery are separate server paths.

   Expected resultThe selected-device test arrives, the real Inbox reply arrives while the app is backgrounded or closed, and tapping it opens the intended conversation.

Error codes

Use the stable code to decide what the app should do. Show customers a plain Support-unavailable message; record only the code, SDK version, platform, time, and request ID. Never log customer JWTs, push tokens, messages, Firebase credentials, or APNs keys.

Versions

These snippets target the latest public release, 0.3.2. Upgrade the package before debugging a client-version error. Onlo publishes a migration guide only when a release changes an installation step or public API.

The wrapper resolves the native Onlo core. Measure both archived iOS and Android release builds; do not add either native core separately.

• React Native 0.79+
• React 19+
• Node.js 20+
• iOS 15+ or Android API 24+
• Not supported in Expo Go