@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
• Hooks — session, participants, tracks, media (mic/camera/devices), services (recording, stats), permissions, and chat (useChat, useChatTyping, useChatUnread, useChatModeration, useChatActive)
• Components — track renderers, participant tiles, layouts (DuoLayout), 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

Development

Setup

1. Clone this repository and install dependencies with pnpm install.
2. Ensure a local checkout of vroom-sdk-client-js resides alongside this repository. The TypeScript configuration maps @true-vroom/client-js to ../vroom-sdk-client-js/dist.

Build client-js first before building this package:

cd ../vroom-sdk-client-js && npx tsc
cd ../vroom-react-native && pnpm build

Once @true-vroom/client-js is available on npm, remove the path mapping and install via:

pnpm add @true-vroom/client-js @true-vroom/react-native

Scripts

• pnpm dev – Watch build for active development.
• pnpm build – Generate production bundles (CJS, ESM, and types).
• pnpm typecheck – Verify TypeScript types via tsc --noEmit.
• pnpm clean – Remove the dist output directory.

Directory structure

• src/ – Hooks, providers, components, platform utilities, and prefabs exported by the package.
• dist/ – Build artifacts generated by pnpm build (not checked into the repo).
• example/ – React Native app that resolves directly to the local source.

Examples

A standalone example app lives under example/. See example/README.md for setup and run instructions.

Contributing

1. Create a feature branch and ensure your changes pass pnpm typecheck.
2. Provide context in your pull request, especially if the change depends on updates in @true-vroom/client-js.
3. Keep documentation up to date when public APIs evolve.

License

MIT