@true-vroom/react-native

React Native hooks, components, providers, and prefabricated layouts for building real-time audio/video experiences on top of @true-vroom/client-js.

Requirements

• Node.js >=20.19.0
• React Native >=0.74 (recommended >=0.85)
• iOS 13+ / Android 5.0+

Installation

pnpm add @true-vroom/react-native @true-vroom/client-js \
  @livekit/react-native @livekit/react-native-webrtc \
  react-native-permissions react-native-svg

# Optional: only needed if you use the VideoCall prefab gradients
pnpm add react-native-linear-gradient

# iOS native modules
cd ios && pod install

The LiveKit RTC packages must be installed at the app level so React Native's autolinking can pick up their native modules. You do not need to call registerGlobals() yourself — Vroom.init() handles WebRTC global setup internally.

Metro configuration

// metro.config.js
const { getDefaultConfig } = require('@react-native/metro-config')
const { withVroomMetroConfig } = require('@true-vroom/react-native/metro')

module.exports = withVroomMetroConfig(getDefaultConfig(__dirname))

Works with both bare React Native (@react-native/metro-config) and Expo (expo/metro-config). Preserves your existing watchFolders, nodeModulesPaths, and resolveRequest.

iOS setup

Add to ios/Podfile:

permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"

Add to Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera access is required for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for audio in calls</string>

Android setup

Add to android/app/src/main/AndroidManifest.xml:

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

Quick start

import { Vroom } from '@true-vroom/client-js'
import { VroomProvider } from '@true-vroom/react-native'
import { VideoCall } from '@true-vroom/react-native/prefabs'

await Vroom.init({
  apiKey: '...',
  platformInfo: { platform: 'ios', bundleId: 'com.example.app' },
  // Android: { platform: 'android', packageName: 'com.example.app' }
})

function App() {
  return (
    <VroomProvider theme="dark">
      <VideoCall
        connectParams={{
          roomName: 'demo',
          user: { id: 'u1', displayName: 'Me', role: 'member' },
          type: 'p2p',
          media: { audio: true, video: true },
        }}
        chat={true}
      />
    </VroomProvider>
  )
}

VideoCall is exported via the /prefabs subpath to avoid resolver issues with its optional native dependencies (react-native-linear-gradient). Root imports (@true-vroom/react-native) remain stable for all other hooks and components.

Features

• Providers — VroomProvider, SessionProvider, ChatProvider, ModerationProvider
• Hooks — session, participants, tracks, media (mic/camera/devices), events (useActiveSpeaker, useNetworkQuality, useSessionEvent), services (useRecording, useStats, useModeration), permissions, and chat (useChat, useChatTyping, useChatUnread, useChatModeration, useChatActive)
• Components — track renderers, participant tiles, layouts (Duo, Grid, Spotlight, Sidebar), controls (Mic/Camera/Speaker/Disconnect/Chat toggles, ControlBar), indicators (timer, recording, network quality, connection state), and chat (ChatPanel, ChatMessageList, ChatInput, ChatTypingIndicator, ChatMessage)
• Prefabs — drop-in VideoCall 1-on-1 UI with optional chat panel (chat={true})
• Platform utilities — Permissions API, usePermissions hook, confirm(), ConfirmDialogs
• Metro helper — withVroomMetroConfig wraps your Metro config with all LiveKit resolver tweaks

Peer dependencies

Install these alongside the package (declared as peer dependencies; see package.json for the exact version ranges):

• @true-vroom/client-js
• react, react-native
• @livekit/react-native, @livekit/react-native-webrtc — keep WebRTC's major version aligned with the native LiveKit SDKs
• react-native-permissions
• react-native-svg
• react-native-linear-gradient (optional — only for the VideoCall prefab gradients)

License

Proprietary — © 2026 True Digital Group Co., Ltd. All rights reserved. See LICENSE.