@volorio/react-native

React Native and Expo helpers for Volorio RTC sessions.

Install

npm install @volorio/[email protected]

Runtime and security

• Runtime: React Native application
• Source version: 0.2.3
• Registry status: published as 0.2.3
• API base URL for server calls: https://api.volor.io
• License: proprietary commercial SDK; see the included LICENSE and Volorio Terms.
• Never expose a Volorio API key in browser, React Native, or Flutter code. Create short-lived sessions in your backend.
• Capability note: Requested products must be granted to the API key and accepted by the session endpoint.

Public API

• VolorioNativeRoomStatus
• VolorioMediaQuality
• VolorioReactNativeSession
• VolorioReactNativeAdapter
• VolorioReactNativeRoomClient
• VolorioNativeMediaRoomLike
• createVolorioNativeMediaAdapter
• VolorioClassroomRole
• VolorioClassroomLayout
• VolorioSpatialAudioPosition
• VolorioWhiteboardPoint
• VolorioWhiteboardStroke
• VolorioWhiteboardEvent
• VolorioClassroomState
• EnableFlexibleClassroomInput

import { VolorioReactNativeRoomClient } from "@volorio/react-native";

Expo Go and native media

@volorio/react-native can be used in Expo Go for typed state, backend session loading, feature toggles, and API demos. Real camera, microphone, remote audio, remote video, screen share, and native track rendering require an Expo Development Build or a bare React Native build because those capabilities need a native RTC room implementation compiled into the app.

Native room source

createVolorioNativeMediaAdapter receives a room object that implements VolorioNativeMediaRoomLike. The current package is the official Volorio React Native control adapter; it does not create the underlying native media room by itself. In production, provide a Volorio-compatible native room implementation from your app's native media layer and keep provider-specific code inside that layer. Application screens should call VolorioReactNativeRoomClient, not provider APIs.

For the official native media runtime package, install @volorio/[email protected]. Keep this package for typed state and controls; add the media package when the app must create the native room and render local or remote video.

The minimum room contract is:

import {
  createVolorioNativeMediaAdapter,
  VolorioReactNativeRoomClient,
  type VolorioNativeMediaRoomLike,
  type VolorioReactNativeSession,
} from "@volorio/react-native";

const nativeRoom: VolorioNativeMediaRoomLike = createNativeRoomSomewhereInYourApp();

const client = new VolorioReactNativeRoomClient(
  createVolorioNativeMediaAdapter({ room: nativeRoom }),
);

const session: VolorioReactNativeSession = await fetch("/api/volorio/session", {
  method: "POST",
}).then((response) => response.json());

await client.join(session);
await client.enableMicrophone(true);
await client.enableCamera(true);

Local and remote video rendering

@volorio/[email protected] is headless and does not export a built-in video view. Use NativeVolorioVideoView from @volorio/[email protected] when your app needs the official Volorio native video wrapper.

import { useEffect, useMemo, useState } from "react";
import { Button, View } from "react-native";
import {
  VolorioReactNativeRoomClient,
  createVolorioNativeMediaAdapter,
  type VolorioNativeMediaRoomLike,
  type VolorioReactNativeSession,
} from "@volorio/react-native";

type TrackRef = { participantIdentity: string; trackId: string };

function NativeVolorioVideoView(props: { track: TrackRef; mirror?: boolean }) {
  return <View nativeID={`volorio-video-${props.track.trackId}`} />;
}

export function DatingVideoCall({
  room,
  session,
  localTrack,
  remoteTracks,
}: {
  room: VolorioNativeMediaRoomLike;
  session: VolorioReactNativeSession;
  localTrack: TrackRef;
  remoteTracks: TrackRef[];
}) {
  const client = useMemo(
    () => new VolorioReactNativeRoomClient(createVolorioNativeMediaAdapter({ room })),
    [room],
  );
  const [cameraEnabled, setCameraEnabled] = useState(false);
  const [microphoneEnabled, setMicrophoneEnabled] = useState(false);

  useEffect(() => {
    void client.join(session);
    return () => {
      void client.leave();
    };
  }, [client, session]);

  return (
    <View>
      <NativeVolorioVideoView track={localTrack} mirror />
      {remoteTracks.map((track) => (
        <NativeVolorioVideoView key={track.trackId} track={track} />
      ))}
      <Button
        title={microphoneEnabled ? "Mute" : "Unmute"}
        onPress={async () => {
          await client.enableMicrophone(!microphoneEnabled);
          setMicrophoneEnabled(!microphoneEnabled);
        }}
      />
      <Button
        title={cameraEnabled ? "Camera off" : "Camera on"}
        onPress={async () => {
          await client.enableCamera(!cameraEnabled);
          setCameraEnabled(!cameraEnabled);
        }}
      />
    </View>
  );
}

Session products for dating calls

For a standard one-to-one dating video call, request products: ["rtc_voice", "rtc_video_hd"] with quality: "hd" from your backend. Add signaling for call controls and presence, chat_mau for durable chat, and screen_share only if screen sharing is a paid feature in your product.

Compatibility

The 0.2.3 compatibility line is: @volorio/[email protected], @volorio/[email protected], @volorio/[email protected], @volorio/[email protected], and @volorio/[email protected]. Keep @volorio/rtc on 0.2.1 until a newer browser RTC package is published.

Dependencies

• react >=18.0.0
• react-native >=0.73.0

Documentation

• Volorio npm integration guide
• REST and SDK documentation
• Volorio Console