@vanira/sdk-react-native

Voice AI + interactive presets for React Native (calendar, forms, upload, camera, navigation, live vision).

Web apps use @vanira/sdk — this package is React Native only.

Install

npm install @vanira/sdk-react-native

The SDK uses peer dependencies for native modules (your app installs them — not bundled into the SDK). npm may print peer warnings until you add the ones you need.

Voice calls (required)

npm install react-native-webrtc react-native-incall-manager react-native-permissions
cd ios && pod install

Add to index.js before any SDK import:

import {registerGlobals} from 'react-native-webrtc';
registerGlobals();

Presets (install only what you use)

| Feature | Package | |---------|---------| | Upload / camera | react-native-image-picker, @react-native-documents/picker | | Screenshot / clip region | react-native-view-shot | | Live vision camera | react-native-vision-camera |

Example — upload + camera:

npm install react-native-image-picker @react-native-documents/picker
cd ios && pod install

iOS permissions — in ios/Podfile:

require_relative '../node_modules/react-native-permissions/scripts/setup'
setup_permissions(['Camera', 'Microphone', 'PhotoLibrary'])

Android — in AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />

Quick start

1. Wrap the app

import {PresetHostProvider} from '@vanira/sdk-react-native';

export default function App() {
  return (
    <PresetHostProvider>
      <YourApp />
    </PresetHostProvider>
  );
}

2. Start a voice call

import {useRef} from 'react';
import {
  createReactNativeAI,
  usePresetHost,
  type VaniraAI,
} from '@vanira/sdk-react-native';

function YourApp() {
  const {setAiClient, setActiveToolCall} = usePresetHost();
  const aiRef = useRef<VaniraAI | null>(null);

  async function startCall() {
    const ai = createReactNativeAI({
      agentId: 'YOUR_AGENT_ID',
      apiKey: 'pk_live_...',
      backendUrl: 'https://api.vanira.io',
    });

    ai.on('preset', ({toolCall}) => setActiveToolCall(toolCall));
    ai.on('tool_call', tc => setActiveToolCall(tc));
    ai.on('disconnected', () => {
      aiRef.current = null;
      setAiClient(null);
    });

    aiRef.current = ai;
    setAiClient(ai);
    await ai.start();
  }

  function stopCall() {
    aiRef.current?.stop();
    setAiClient(null);
  }

  // your UI…
}

That’s it — preset modals (upload, calendar, form, etc.) render automatically when the agent triggers them. You only route tool calls with setActiveToolCall().

Metro

If Metro fails to resolve the SDK, add this to metro.config.js:

const path = require('path');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {unstable_enablePackageExports: true},
  watchFolders: [
    path.resolve(__dirname, 'node_modules/@vanira/sdk-react-native'),
  ],
});

API reference

| Export | Description | |--------|-------------| | createReactNativeAI() | Voice client — start here | | PresetHostProvider | Root wrapper for preset UI | | usePresetHost() | {setAiClient, setActiveToolCall, clearPreset} | | createReactNativeClient() | Lower-level WebRTC client | | sendToolResult() | Reply to blocking agent tools | | uploadMedia() | Send files during a call |

Resume a previous call

import {
  createReactNativeAI,
  createSyncStorageAdapter,
  reactNativeRuntime,
} from '@vanira/sdk-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const ai = createReactNativeAI({
  agentId: 'YOUR_AGENT_ID',
  apiKey: 'pk_live_...',
  backendUrl: 'https://api.vanira.io',
  sessionBehavior: 'continue',
  runtime: {
    ...reactNativeRuntime,
    storage: createSyncStorageAdapter(AsyncStorage),
  },
});

Presets

| Preset | Needs | |--------|-------| | Voice | react-native-webrtc | | Upload | react-native-image-picker, @react-native-documents/picker | | Camera | react-native-image-picker | | Live vision | react-native-vision-camera | | Calendar, form, navigate | SDK only (no extra native deps) |

Links

• Web SDK: @vanira/sdk
• Docs: vanira.io