Expo Integration Guide

For AI Coding Agents: This document provides everything needed to integrate on-device AI (LLM, STT, TTS) into a React Native app using the RunAnywhere SDK.

Working Starter Project

Check out the RunAnywhere Expo Demo on GitHub for a working Expo starter template with pre-built Android APK available for download.

RunAnywhere AI Studio App

You MUST use the “RunAnywhere AI Studio” app to run your React Native app. This is a custom fork of Expo Go that includes the native libraries required for the RunAnywhere SDK.

Standard Expo Go does NOT include RunAnywhere native modules
The AI Studio app contains: LlamaCPP (LLM), ONNX Runtime (STT/TTS), NativeAudioModule
Your JS bundle connects to Metro, but runs inside AI Studio which provides the native layer

Quick Start

Package Version Compatibility: Since your app runs inside AI Studio (not a standalone build), native libraries must match pre-installed versions. Most critically: use react-native-reanimated@^3.16.0, not 4.x. See Package Compatibility section for details.

1. Install Dependencies

# Core SDK plus the backends you need
npm install @runanywhere/core @runanywhere/llamacpp @runanywhere/onnx

# Required peer: the JSI bridge
npm install react-native-nitro-modules

# Optional peer: lets the SDK self-heal an interrupted download
npm install react-native-fs@^2.20.0

# Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-safe-area-context react-native-screens

# Optional: animations (use 3.x, NOT 4.x, to match AI Studio)
npm install react-native-reanimated@^3.16.0 react-native-gesture-handler@^2.20.2

react-native-nitro-modules is the only hard native peer dependency. Model downloads go through the SDK’s own native download bridge; react-native-fs is optional and only clears oversize partial files when a resumed download plan is rejected.

2. Initialize SDK (App.tsx)

import React, { useEffect } from 'react'
import { RunAnywhere, SDKEnvironment } from '@runanywhere/core'

const App = () => {
  useEffect(() => {
    const init = async () => {
      await RunAnywhere.initialize({
        environment: SDKEnvironment.SDK_ENVIRONMENT_DEVELOPMENT,
      })

      const { LlamaCPP } = await import('@runanywhere/llamacpp')
      const { ONNX } = await import('@runanywhere/onnx')
      await LlamaCPP.register()
      await ONNX.register()

      await registerModels()
    }
    void init()
  }, [])

  return <YourApp />
}

register() is async on every backend package and returns a boolean. Initialization is two-phase: initialize() resolves once the native core is up, and Phase 2 continues in the background while every capability API waits on it internally.

3. Register Models

import { RunAnywhere } from '@runanywhere/core'
import {
  InferenceFramework,
  ModelArtifactType,
  ModelCategory,
} from '@runanywhere/proto-ts/model_types'
import type { ModelInfo } from '@runanywhere/proto-ts/model_types'

export const MODEL_IDS = {
  llm: 'lfm2-350m-q8_0',
  stt: 'sherpa-onnx-whisper-tiny.en',
  tts: 'vits-piper-en_US-lessac-medium',
} as const

export async function registerModels(): Promise<Record<string, ModelInfo>> {
  const [llm, stt, tts] = await Promise.all([
    RunAnywhere.registerModel({
      id: MODEL_IDS.llm,
      name: 'LiquidAI LFM2 350M',
      url: 'https://huggingface.co/LiquidAI/LFM2-350M-GGUF/resolve/main/LFM2-350M-Q8_0.gguf',
      framework: InferenceFramework.INFERENCE_FRAMEWORK_LLAMA_CPP,
      memoryRequirement: 400_000_000,
    }),
    RunAnywhere.registerModel({
      id: MODEL_IDS.stt,
      name: 'Whisper Tiny EN',
      url: 'https://github.com/RunanywhereAI/sherpa-onnx/releases/download/runanywhere-models-v1/sherpa-onnx-whisper-tiny.en.tar.gz',
      framework: InferenceFramework.INFERENCE_FRAMEWORK_SHERPA,
      modality: ModelCategory.MODEL_CATEGORY_SPEECH_RECOGNITION,
      artifactType: ModelArtifactType.MODEL_ARTIFACT_TYPE_TAR_GZ_ARCHIVE,
      memoryRequirement: 75_000_000,
    }),
    RunAnywhere.registerModel({
      id: MODEL_IDS.tts,
      name: 'Piper TTS EN-US',
      url: 'https://github.com/RunanywhereAI/sherpa-onnx/releases/download/runanywhere-models-v1/vits-piper-en_US-lessac-medium.tar.gz',
      framework: InferenceFramework.INFERENCE_FRAMEWORK_SHERPA,
      modality: ModelCategory.MODEL_CATEGORY_SPEECH_SYNTHESIS,
      artifactType: ModelArtifactType.MODEL_ARTIFACT_TYPE_TAR_GZ_ARCHIVE,
      memoryRequirement: 65_000_000,
    }),
  ])
  return { llm, stt, tts }
}

Model registration lives on RunAnywhere, not on the backend packages. There is no LlamaCPP.addModel or ONNX.addModel. registerModel returns the resolved ModelInfo, which is what downloadModel takes.

API Reference

Model management

import { RunAnywhere } from '@runanywhere/core'
import {
  ModelCategory,
  ModelGetRequest,
  ModelLoadRequest,
  ModelUnloadRequest,
} from '@runanywhere/proto-ts/model_types'

// Is it on disk?
const get = await RunAnywhere.getModel(ModelGetRequest.fromPartial({ modelId }))
const isDownloaded = get.found && Boolean(get.model?.localPath)

// Download, taking the ModelInfo that registerModel returned
await RunAnywhere.downloadModel(model, (p) => {
  console.log(`${(p.overallProgress * 100).toFixed(0)}%`)
})

// Load. One call per modality, differing only by category.
await RunAnywhere.loadModel(
  ModelLoadRequest.fromPartial({ modelId, category: ModelCategory.MODEL_CATEGORY_LANGUAGE })
)

// Unload
await RunAnywhere.unloadModel(
  ModelUnloadRequest.fromPartial({ category: ModelCategory.MODEL_CATEGORY_LANGUAGE })
)

loadModel and unloadModel take a proto request, not a file path, and return a result rather than throwing. Check result.success. There is no getModelInfo, loadSTTModel, loadTTSModel, unloadSTTModel, or unloadTTSModel.

LLM streaming

generateStream is synchronous and returns an AsyncIterable<LLMStreamEvent>.

import { RunAnywhere } from '@runanywhere/core'

const events = RunAnywhere.generateStream(prompt, { maxTokens: 256, temperature: 0.8 })

const result = await RunAnywhere.aggregateStream(prompt, events, (transcript) => {
  updateUI(transcript)
})

console.log(result.tokensPerSecond, result.generationTimeMs)

To drive the iterator yourself, use manual next() calls. Hermes does not support for await...of over NitroModules iterables.

const iterator = events[Symbol.asyncIterator]()
let text = ''
try {
  for (;;) {
    const { value, done } = await iterator.next()
    if (done) break
    text += value.token
    if (value.isFinal) break
  }
} finally {
  await iterator.return?.() // cancels the native generation
}

await RunAnywhere.cancelGeneration() cancels without an iterator reference.

Speech to text

transcribe takes a Uint8Array of audio bytes, not base64.

import { RunAnywhere } from '@runanywhere/core'
import { STTLanguage } from '@runanywhere/proto-ts/stt_options'
import { ModelCategory } from '@runanywhere/proto-ts/model_types'

const loaded = await RunAnywhere.modelInfoForCategory(
  ModelCategory.MODEL_CATEGORY_SPEECH_RECOGNITION
)

const result = await RunAnywhere.transcribe(pcmBytes, {
  language: STTLanguage.STT_LANGUAGE_EN,
  sampleRate: 16000,
})
console.log(result.text)

For live partials, feed transcribeStream from a pushable stream.

Text to speech

import { RunAnywhere, AudioPlaybackManager } from '@runanywhere/core'

const output = await RunAnywhere.synthesize(text, {
  speakingRate: 1.0,
  pitch: 1.0,
  volume: 1.0,
})

// output.audioData: Uint8Array, output.sampleRate: number, output.durationMs: number
const playback = new AudioPlaybackManager()
await playback.play(
  output.audioData.buffer.slice(
    output.audioData.byteOffset,
    output.audioData.byteOffset + output.audioData.byteLength
  ) as ArrayBuffer,
  output.sampleRate
)

Or let the SDK synthesize and play in one call:

await RunAnywhere.speak(text)
await RunAnywhere.stopSpeaking()

The option is speakingRate, not rate. There is no RunAnywhere.Audio namespace; the PCM helpers are RunAnywhere.pcm16ToFloat32 and RunAnywhere.pcm16ToWav.

Voice agent

Load STT, LLM, and TTS into their category slots first, then compose the pipeline and start the microphone driver.

import { RunAnywhere, VoiceAgentMicDriver } from '@runanywhere/core'

await RunAnywhere.initializeVoiceAgentWithLoadedModels()

const driver = new VoiceAgentMicDriver()
const started = await driver.start({
  onTurn: ({ userText, assistantText }) => appendTurn(userText, assistantText),
  onPhase: (phase) => setStatus(phase), // 'listening' | 'processing' | 'speaking'
  onError: (error) => console.error(error),
})
if (!started) {
  // Microphone permission denied.
}

// Teardown
driver.stop()
await RunAnywhere.cleanupVoiceAgent()

There is no startVoiceSession. The C ABI owns no microphone, so VoiceAgentMicDriver is what supplies audio; subscribing to streamVoiceAgent() alone is dead air.

Complete package.json

{
  "dependencies": {
    "@react-navigation/native": "^7.1.24",
    "@react-navigation/native-stack": "^7.8.5",
    "@runanywhere/core": "^0.20.11",
    "@runanywhere/llamacpp": "^0.20.11",
    "@runanywhere/onnx": "^0.20.11",
    "react": "19.2.0",
    "react-native": "0.83.1",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-nitro-modules": "^0.33.9",
    "react-native-reanimated": "^3.16.0",
    "react-native-safe-area-context": "~5.6.2",
    "react-native-screens": "~4.19.0"
  }
}

react-native-nitro-modules is the SDK’s only required native peer dependency. react-native-fs is optional. react-native-reanimated must be ^3.16.0, not 4.x, to match the native code in AI Studio.

Project Structure

src/
├── App.tsx                 # SDK init + navigation
├── services/
│   └── ModelService.tsx    # Model state management (Context)
├── screens/
│   ├── ChatScreen.tsx      # LLM chat with streaming
│   ├── SpeechToTextScreen.tsx
│   ├── TextToSpeechScreen.tsx
│   └── VoicePipelineScreen.tsx
├── theme/
│   └── colors.ts
└── navigation/
    └── types.ts

ModelService pattern (React Context)

One provider that registers the catalog, tracks per-modality download and load state, and exposes a single prepare(kind) call. The three modalities differ only by category, so they share one code path.

// src/services/ModelService.tsx
import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
import { RunAnywhere } from '@runanywhere/core'
import {
  ModelCategory,
  ModelGetRequest,
  ModelLoadRequest,
} from '@runanywhere/proto-ts/model_types'
import type { ModelInfo } from '@runanywhere/proto-ts/model_types'
import { MODEL_IDS, registerModels } from './registerModels'

type Kind = 'llm' | 'stt' | 'tts'

const CATEGORY: Record<Kind, ModelCategory> = {
  llm: ModelCategory.MODEL_CATEGORY_LANGUAGE,
  stt: ModelCategory.MODEL_CATEGORY_SPEECH_RECOGNITION,
  tts: ModelCategory.MODEL_CATEGORY_SPEECH_SYNTHESIS,
}

interface ModelState {
  loaded: Record<Kind, boolean>
  progress: Record<Kind, number>
  prepare: (kind: Kind) => Promise<void>
}

const ModelContext = createContext<ModelState | null>(null)

export const useModelService = (): ModelState => {
  const ctx = useContext(ModelContext)
  if (ctx === null) throw new Error('useModelService must be inside ModelServiceProvider')
  return ctx
}

export const ModelServiceProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [loaded, setLoaded] = useState<Record<Kind, boolean>>({
    llm: false,
    stt: false,
    tts: false,
  })
  const [progress, setProgress] = useState<Record<Kind, number>>({ llm: 0, stt: 0, tts: 0 })
  const [catalog, setCatalog] = useState<Record<string, ModelInfo> | null>(null)

  const prepare = useCallback(
    async (kind: Kind) => {
      const models = catalog ?? (await registerModels())
      if (catalog === null) setCatalog(models)

      const model = models[kind]
      const modelId = MODEL_IDS[kind]

      const existing = await RunAnywhere.getModel(ModelGetRequest.fromPartial({ modelId }))
      if (!existing.found || !existing.model?.localPath) {
        await RunAnywhere.downloadModel(model, (p) => {
          setProgress((prev) => ({ ...prev, [kind]: p.overallProgress * 100 }))
        })
      }

      const result = await RunAnywhere.loadModel(
        ModelLoadRequest.fromPartial({
          modelId,
          category: CATEGORY[kind],
          validateAvailability: true,
        })
      )
      if (!result.success) throw new Error(result.errorMessage)

      setLoaded((prev) => ({ ...prev, [kind]: true }))
    },
    [catalog]
  )

  const value = useMemo(() => ({ loaded, progress, prepare }), [loaded, progress, prepare])
  return <ModelContext.Provider value={value}>{children}</ModelContext.Provider>
}

Put MODEL_IDS and registerModels in their own module, as shown in Register Models above.

ChatScreen example

// src/screens/ChatScreen.tsx
import React, { useCallback, useState } from 'react'
import { View, Text, TextInput, TouchableOpacity, FlatList } from 'react-native'
import { RunAnywhere } from '@runanywhere/core'
import { useModelService } from '../services/ModelService'

interface Message {
  text: string
  isUser: boolean
}

export const ChatScreen = () => {
  const { loaded, progress, prepare } = useModelService()
  const [messages, setMessages] = useState<Message[]>([])
  const [input, setInput] = useState('')
  const [generating, setGenerating] = useState(false)
  const [partial, setPartial] = useState('')

  const send = useCallback(async () => {
    const prompt = input.trim()
    if (prompt === '' || generating) return

    setMessages((m) => [...m, { text: prompt, isUser: true }])
    setInput('')
    setGenerating(true)
    setPartial('')

    try {
      const events = RunAnywhere.generateStream(prompt, { maxTokens: 256, temperature: 0.8 })
      const result = await RunAnywhere.aggregateStream(prompt, events, setPartial)
      setMessages((m) => [...m, { text: result.text, isUser: false }])
    } catch (e) {
      setMessages((m) => [...m, { text: `Error: ${(e as Error).message}`, isUser: false }])
    } finally {
      setPartial('')
      setGenerating(false)
    }
  }, [input, generating])

  if (!loaded.llm) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Language model required</Text>
        {progress.llm > 0 && progress.llm < 100 ? (
          <Text>Downloading {progress.llm.toFixed(0)}%</Text>
        ) : (
          <TouchableOpacity onPress={() => prepare('llm')}>
            <Text>Download and load</Text>
          </TouchableOpacity>
        )}
      </View>
    )
  }

  const rows = generating ? [...messages, { text: partial || '…', isUser: false }] : messages

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={rows}
        keyExtractor={(_, i) => String(i)}
        renderItem={({ item }) => (
          <View style={{ padding: 8, alignSelf: item.isUser ? 'flex-end' : 'flex-start' }}>
            <Text>{item.text}</Text>
          </View>
        )}
      />
      <View style={{ flexDirection: 'row', padding: 8 }}>
        <TextInput
          style={{ flex: 1, borderWidth: 1, borderRadius: 8, padding: 8 }}
          value={input}
          onChangeText={setInput}
          placeholder="Type a message"
        />
        <TouchableOpacity
          onPress={generating ? () => void RunAnywhere.cancelGeneration() : send}
          style={{ padding: 8 }}
        >
          <Text>{generating ? 'Stop' : 'Send'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

STT screen example

AudioCaptureManager handles the microphone permission and emits 16 kHz mono Int16 chunks, which is exactly what transcribe expects.

// src/screens/SpeechToTextScreen.tsx
import React, { useCallback, useRef, useState } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { RunAnywhere, AudioCaptureManager } from '@runanywhere/core'
import { STTLanguage } from '@runanywhere/proto-ts/stt_options'
import { useModelService } from '../services/ModelService'

function concat(chunks: Uint8Array[]): Uint8Array {
  const total = chunks.reduce((n, c) => n + c.length, 0)
  const out = new Uint8Array(total)
  let offset = 0
  for (const c of chunks) {
    out.set(c, offset)
    offset += c.length
  }
  return out
}

export const SpeechToTextScreen = () => {
  const { loaded, prepare } = useModelService()
  const [recording, setRecording] = useState(false)
  const [transcription, setTranscription] = useState('')
  const capture = useRef(new AudioCaptureManager()).current
  const chunks = useRef<Uint8Array[]>([])

  const start = useCallback(async () => {
    if (!(await capture.requestPermission())) return
    chunks.current = []
    await capture.startRecording((chunk) => chunks.current.push(chunk))
    setRecording(true)
  }, [capture])

  const stopAndTranscribe = useCallback(async () => {
    capture.stopRecording()
    setRecording(false)

    const result = await RunAnywhere.transcribe(concat(chunks.current), {
      language: STTLanguage.STT_LANGUAGE_EN,
      sampleRate: 16000,
    })
    setTranscription(result.text || '(no speech detected)')
  }, [capture])

  if (!loaded.stt) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity onPress={() => prepare('stt')}>
          <Text>Download and load STT model</Text>
        </TouchableOpacity>
      </View>
    )
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{transcription}</Text>
      <TouchableOpacity onPress={recording ? stopAndTranscribe : start}>
        <Text>{recording ? 'Stop and transcribe' : 'Start recording'}</Text>
      </TouchableOpacity>
    </View>
  )
}

TTS screen example

// src/screens/TextToSpeechScreen.tsx
import React, { useCallback, useState } from 'react'
import { View, Text, TextInput, TouchableOpacity } from 'react-native'
import { RunAnywhere } from '@runanywhere/core'
import { useModelService } from '../services/ModelService'

export const TextToSpeechScreen = () => {
  const { loaded, prepare } = useModelService()
  const [text, setText] = useState('')
  const [speaking, setSpeaking] = useState(false)

  const speak = useCallback(async () => {
    if (text.trim() === '') return
    setSpeaking(true)
    try {
      await RunAnywhere.speak(text)
    } finally {
      setSpeaking(false)
    }
  }, [text])

  if (!loaded.tts) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity onPress={() => prepare('tts')}>
          <Text>Download and load TTS model</Text>
        </TouchableOpacity>
      </View>
    )
  }

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Enter text"
        multiline
        style={{ borderWidth: 1, borderRadius: 8, padding: 8, minHeight: 100 }}
      />
      <TouchableOpacity onPress={speak} disabled={speaking}>
        <Text>{speaking ? 'Speaking…' : 'Speak'}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => void RunAnywhere.stopSpeaking()}>
        <Text>Stop</Text>
      </TouchableOpacity>
    </View>
  )
}

speak synthesizes and plays through the SDK’s internal AudioPlaybackManager. Use synthesize instead when you need the raw Uint8Array audio.

Theme Colors

// src/theme/colors.ts
export const AppColors = {
  primaryDark: '#0A0E1A',
  primaryMid: '#141B2D',
  surfaceCard: '#1C2438',
  surfaceElevated: '#242F4A',
  accentCyan: '#00D9FF',
  accentViolet: '#8B5CF6',
  accentPink: '#EC4899',
  accentGreen: '#10B981',
  textPrimary: '#F1F5F9',
  textSecondary: '#94A3B8',
  textMuted: '#64748B',
  error: '#EF4444',
}

// src/navigation/types.ts
export type RootStackParamList = {
  Home: undefined
  Chat: undefined
  SpeechToText: undefined
  TextToSpeech: undefined
  VoicePipeline: undefined
}

Model URLs Reference

Model	ID	URL
LLM (LFM2 350M)	`lfm2-350m-q8_0`	`https://huggingface.co/LiquidAI/LFM2-350M-GGUF/resolve/main/LFM2-350M-Q8_0.gguf`
STT (Whisper)	`sherpa-onnx-whisper-tiny.en`	`https://github.com/RunanywhereAI/sherpa-onnx/releases/download/runanywhere-models-v1/sherpa-onnx-whisper-tiny.en.tar.gz`
TTS (Piper)	`vits-piper-en_US-lessac-medium`	`https://github.com/RunanywhereAI/sherpa-onnx/releases/download/runanywhere-models-v1/vits-piper-en_US-lessac-medium.tar.gz`

API quick reference

Action	Code
Initialize	`await RunAnywhere.initialize({ environment: SDKEnvironment.SDK_ENVIRONMENT_DEVELOPMENT })`
Register LLM backend	`await LlamaCPP.register()`
Register ONNX backend	`await ONNX.register()`
Register a model	`await RunAnywhere.registerModel({ id, name, url, framework, modality?, artifactType?, memoryRequirement? })`
Look one up	`await RunAnywhere.getModel(ModelGetRequest.fromPartial({ modelId }))`
Download	`await RunAnywhere.downloadModel(modelInfo, (p) => p.overallProgress)`
Load	`await RunAnywhere.loadModel(ModelLoadRequest.fromPartial({ modelId, category }))`
Unload	`await RunAnywhere.unloadModel(ModelUnloadRequest.fromPartial({ category }))`
Generate	`await RunAnywhere.generate(prompt, { maxTokens, temperature })`
Stream	`RunAnywhere.generateStream(prompt, options)` then `RunAnywhere.aggregateStream(...)`
Cancel generation	`await RunAnywhere.cancelGeneration()`
Transcribe	`await RunAnywhere.transcribe(pcmBytes, { language, sampleRate })`
Stream transcription	`RunAnywhere.transcribeStream(audioIterable, options)`
Synthesize	`await RunAnywhere.synthesize(text, { speakingRate, pitch, volume })`
Speak	`await RunAnywhere.speak(text)`
Compose the voice agent	`await RunAnywhere.initializeVoiceAgentWithLoadedModels()`
Run voice turns	`new VoiceAgentMicDriver().start({ onTurn, onPhase, onError })`
PCM to WAV	`RunAnywhere.pcm16ToWav(int16Bytes, 16000)`

Enums and request messages come from @runanywhere/proto-ts. SDKEnvironment, ErrorCode, ErrorCategory, SDKException, isSDKException, EventBus, AudioCaptureManager, AudioPlaybackManager, VoiceAgentMicDriver, and createPushableAudioStream come from @runanywhere/core.

Audio

The SDK ships its own capture and playback. Use these rather than a third-party recorder, which tends to break on iOS New Architecture, and note that the Web Audio AudioContext does not exist in React Native at all.

import { AudioCaptureManager, AudioPlaybackManager } from '@runanywhere/core'

const capture = new AudioCaptureManager()
await capture.requestPermission()
await capture.startRecording((chunk) => push(chunk)) // 16 kHz mono Int16 LE Uint8Array
capture.stopRecording()

const playback = new AudioPlaybackManager()
await playback.play(float32PcmBuffer, 22050) // ArrayBuffer or base64; read as float32 PCM
await playback.playWav(wavBuffer) // already carries a RIFF header
await playback.playFile(path)
playback.pause()
playback.resume()
playback.stop()

Audio crosses the bridge as binary, not base64. Capture defaults to 16000 Hz mono; playback assumes 22050 Hz when a TTS backend reports no rate.

Package Compatibility

Since your app runs inside the RunAnywhere AI Studio app (a custom Expo fork), any native libraries you use must match the versions pre-installed in AI Studio. Version mismatches will cause runtime errors.

react-native-reanimated

The RunAnywhere AI Studio app includes Reanimated 3.x. You CANNOT use Reanimated 4.x as it has breaking native changes.

# CORRECT - Compatible with AI Studio
npm install react-native-reanimated@^3.16.0

# WRONG - Will cause native module errors
npm install react-native-reanimated@^4.0.0

If you see errors like:

ReanimatedUIManager native module not found
_ReanimatedModule or ReanimatedCommitHook errors
NativeReanimated undefined errors
"Reanimated 2 failed to create a worklet" or worklet-related crashes

Solution: Downgrade to Reanimated 3.x:

npm uninstall react-native-reanimated
npm install react-native-reanimated@^3.16.0

Other Native Libraries

The same principle applies to any library with native code. If a library requires native compilation (has iOS/Android native code), you must use the version that matches what’s bundled in AI Studio.Libraries bundled in AI Studio (use these versions):

Library	Version	Notes
react-native-reanimated	^3.16.0	NOT 4.x
react-native-gesture-handler	^2.x	Standard Expo version
react-native-safe-area-context	~5.6.2	Standard Expo version
react-native-screens	~4.19.0	Standard Expo version

Pure JS libraries (any version is fine):

@react-navigation/* packages
UI libraries without native code (tailwind, styling)
State management (zustand, redux, mobx)
API clients, utilities

Troubleshooting

Issue	Solution
”Native module not found”	You must run in RunAnywhere AI Studio, not Expo Go
”ReanimatedUIManager” / “NativeReanimated” errors	You’re using Reanimated 4.x - downgrade to `^3.16.0` (see Package Compatibility section)
“react-native-fs not installed” warning	Optional peer. Install `react-native-fs@^2.20.0` to let the SDK clear oversize partials and re-plan
Model download fails	Check internet, ensure sufficient storage
Out of memory	Use smaller model, unload unused models first
STT returns empty	Feed 16 kHz mono PCM16 and confirm a speech-recognition model is loaded
TTS audio not playing	Play through `AudioPlaybackManager` or `RunAnywhere.speak`, not Web Audio

Getting Started

Swift SDK

Kotlin SDK

React Native SDK

Flutter SDK

Web SDK

Vibe Coding

Working Starter Project

RunAnywhere AI Studio App

Quick Start

1. Install Dependencies

2. Initialize SDK (App.tsx)

3. Register Models

API Reference

Model management

LLM streaming

Speech to text

Text to speech

Voice agent

Complete package.json

Project Structure

ModelService pattern (React Context)

ChatScreen example

STT screen example

TTS screen example

Theme Colors

Navigation Types

Model URLs Reference

API quick reference

Audio

Package Compatibility

react-native-reanimated

Other Native Libraries

Troubleshooting

​Working Starter Project

​RunAnywhere AI Studio App

​Quick Start

​1. Install Dependencies

​2. Initialize SDK (App.tsx)

​3. Register Models

​API Reference

​Model management

​LLM streaming

​Speech to text

​Text to speech

​Voice agent

​Complete package.json

​Project Structure

​ModelService pattern (React Context)

​ChatScreen example

​STT screen example

​TTS screen example

​Theme Colors

​Navigation Types

​Model URLs Reference

​API quick reference

​Audio

​Package Compatibility

​react-native-reanimated

​Other Native Libraries

​Troubleshooting

Working Starter Project

RunAnywhere AI Studio App

Quick Start

1. Install Dependencies

2. Initialize SDK (App.tsx)

3. Register Models

API Reference

Model management

LLM streaming

Speech to text

Text to speech

Voice agent

Complete package.json

Project Structure

ModelService pattern (React Context)

ChatScreen example

STT screen example

TTS screen example

Theme Colors

Navigation Types

Model URLs Reference

API quick reference

Audio

Package Compatibility

react-native-reanimated

Other Native Libraries

Troubleshooting