React Native Integration

React Native Integration

Use @onairos/react-native when your app already runs on React Native and you want the current Persona mobile flow.

1. Install the SDK

npm install @onairos/react-native

2. Initialize the SDK once

import { initializeApiKey } from '@onairos/react-native';

await initializeApiKey({
  apiKey: 'your_api_key'
});

3. Wrap your app with PortalHost

import { PortalHost } from '@onairos/react-native';

export default function App() {
  return (
    <PortalHost>
      {/* your app */}
    </PortalHost>
  );
}

If you skip PortalHost, the Onairos modal and overlays may not render.

4. Render OnairosButton

import React, { useEffect } from 'react';
import { View } from 'react-native';
import {
  PortalHost,
  OnairosButton,
  initializeApiKey
} from '@onairos/react-native';

export default function App() {
  useEffect(() => {
    initializeApiKey({ apiKey: 'your_api_key' });
  }, []);

  const handleComplete = (result) => {
    console.log('Token:', result.token);
    console.log('API URL:', result.apiUrl);
    console.log('Approved data:', result.approved);
    console.log('API response:', result.apiResponse);
  };

  return (
    <PortalHost>
      <View>
        <OnairosButton
          AppName="YourApp"
          autoFetch={false}
          requestData={{
            personality: {
              name: 'Personality traits',
              description: 'Use traits and summaries in your app',
              reward: 'Deeper personalization'
            },
            preferences: {
              name: 'Preferences',
              description: 'Use inferred tastes and scoring signals',
              reward: 'Better recommendations'
            }
          }}
          allowedPlatforms={['chatgpt', 'youtube', 'linkedin']}
          recommendedPlatforms={['chatgpt', 'linkedin']}
          onComplete={handleComplete}
        />
      </View>
    </PortalHost>
  );
}

Main props

Prop	Required	What it does
AppName	Yes	The app name shown inside the Onairos flow.
requestData	No	An object keyed by consent ids such as personality, preferences, and rawMemories.
onComplete	No	Called when the flow finishes. You receive token, apiUrl, approved scopes, and optional apiResponse.
autoFetch	No	Defaults to false. If enabled, the SDK fetches the API response and places it in result.apiResponse.
allowedPlatforms	No	Shows only the connector ids you pass, in the same order you pass them.
recommendedPlatforms	No	Adds the Highly Recommended badge to matching connector ids without changing their order.

Connector customization

• allowedPlatforms filters the connector list and preserves the exact order you pass in.
• recommendedPlatforms adds the Highly Recommended badge to matching connector ids.
• recommendedPlatforms does not move connectors to the front; it only adds the badge.
• The legacy preferredPlatform prop still appears in older examples, but it does not currently reorder the React Native connector UI. Use allowedPlatforms instead.

What onComplete returns

Field	Meaning
token	Short-lived JWT for API calls
apiUrl	The API URL returned for this request
approved	The approved data types
userData	User email, username, and connected accounts
apiResponse	The fetched API response when autoFetch is enabled

When autoFetch is false

const handleComplete = async (result) => {
  const response = await fetch(result.apiUrl, {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + result.token,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      Input: {
        item1: { text: 'Example content', category: 'fashion' }
      }
    })
  });

  const data = await response.json();
  console.log(data);
};

Optional Google setup

import { updateGoogleClientIds } from '@onairos/react-native';

updateGoogleClientIds({
  iosClientId: 'your-ios-client-id.apps.googleusercontent.com',
  webClientId: 'your-web-client-id.apps.googleusercontent.com'
});