@hiyve/rn-react

React Native provider, hooks, and pre-built UI components for Hiyve video conferencing.

Provides HiyveRNProvider with 18 hooks and 5 components covering the core mobile video calling experience: video tiles, grid layout, control bar, participant list, and waiting room.

Installation

npm install @hiyve/rn-react @hiyve/rn-core @hiyve/rtc-client-rn react-native-webrtc react-native-safe-area-context @react-native-vector-icons/material-design-icons
Copy

iOS Setup

After installing, link the native pods:

cd ios && pod install
Copy

The ControlBar component uses Material Design Icons. You must register the font in your Info.plist:

UIAppFonts

    MaterialDesignIcons.ttf

Copy

Without this entry, icons will render as "?" placeholders. CocoaPods copies the font file into your app bundle automatically, but iOS requires UIAppFonts to load it at runtime.

Android Setup

No additional setup needed — the font is bundled automatically via Gradle.

Quick Start

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {
  HiyveRNProvider,
  useConnection,
  useLocalMedia,
  useParticipants,
  VideoGrid,
  ControlBar,
} from '@hiyve/rn-react';

const options = {
  generateRoomToken: async () => {
    const res = await fetch('https://your-api.com/token', { method: 'POST' });
    return res.json();
  },
  onError: (err) => console.error('Hiyve:', err.message),
};

function VideoRoom() {
  const { isConnected, createRoom, leaveRoom } = useConnection();
  const { isAudioMuted, isVideoMuted, localStream, toggleAudio, toggleVideo, switchCamera } = useLocalMedia();
  const { participants, localUserId } = useParticipants();

  if (!isConnected) {
    return <Button title="Create Room" onPress={() => createRoom('my-room', 'user1')} />;
  }

  return (
    <View style={{ flex: 1 }}>
      <VideoGrid
        localStream={localStream}
        localUserId={localUserId}
        isLocalAudioMuted={isAudioMuted}
        isLocalVideoMuted={isVideoMuted}
        participants={participants}
      />
      <ControlBar
        isAudioMuted={isAudioMuted}
        isVideoMuted={isVideoMuted}
        onToggleAudio={toggleAudio}
        onToggleVideo={toggleVideo}
        onFlipCamera={switchCamera}
        onLeave={leaveRoom}
      />
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <HiyveRNProvider options={options}>
        <VideoRoom />
      </HiyveRNProvider>
    </SafeAreaProvider>
  );
}
Copy

Provider

HiyveRNProvider

Wrap your app (or the screen that uses video) with the provider:

<HiyveRNProvider options={options}>
  <YourApp />
</HiyveRNProvider>
Copy

Hooks

All hooks must be used within a HiyveRNProvider.

useConnection

Connection state and room management.

useRoom

Room info and ownership.

useParticipants

Remote participants in the room.

useParticipant(userId)

Single participant lookup.

useLocalMedia

Local media state and controls (RN-extended).

useLocalStream

Convenience hook returning just the local MediaStream.

const stream = useLocalStream();
Copy

useRecording

Recording state with auto-incrementing duration.

useStreaming

Live streaming state with duration.

useTranscription

Real-time transcription.

useChat

Text chat messaging.

useWaitingRoom

Waiting room management.

useHandRaise

Hand raise feature.

useLayout

Layout and dominant speaker.

useAudioProcessing

Audio feedback detection state.

useWaitForHost

Wait-for-host state when joining before the host starts the room.

useRemoteMute

Host-only actions for remotely muting participants. Actions are no-ops when called by a non-owner.

useClient

Escape hatch for accessing the raw store and client instances. Prefer the typed hooks for most cases.

usePermissions

Android/iOS permission requests.

Components

VideoTile

Renders a participant's video using RTCView, with avatar fallback and mute indicators.

<VideoTile
  stream={participant.videoStream}
  userId={participant.userId}
  displayName="Alice"
  isAudioMuted={participant.isAudioMuted}
  isVideoMuted={participant.isVideoMuted}
/>
Copy

VideoGrid

Auto-layout grid for local + remote video tiles.

<VideoGrid
  localStream={localStream}
  localUserId={localUserId}
  localDisplayName="Me"
  isLocalAudioMuted={isAudioMuted}
  isLocalVideoMuted={isVideoMuted}
  participants={participants}
  gap={4}
  maxColumns={2}
/>
Copy

ControlBar

Bottom control bar with mic, camera, flip, and leave buttons.

<ControlBar
  isAudioMuted={isAudioMuted}
  isVideoMuted={isVideoMuted}
  onToggleAudio={toggleAudio}
  onToggleVideo={toggleVideo}
  onFlipCamera={switchCamera}
  onLeave={leaveRoom}
/>
Copy

ControlBarButton

Reusable circular button used inside the ControlBar. Can also be used standalone to build custom control bar layouts.

<ControlBarButton
  icon={<Icon name="microphone" size={24} color="#fff" />}
  label="Mute"
  onPress={toggleAudio}
  backgroundColor="#333"
  textColor="#fff"
/>
Copy

DurationBadge

Small badge showing a pulsing dot, a label, and a formatted timer. Used to indicate active recording or streaming.

<DurationBadge duration={recordingDuration} label="REC" />
<DurationBadge duration={streamingDuration} label="LIVE" backgroundColor="#22c55e" />
Copy

ParticipantList

Scrollable list of participants with avatar, name, and status.

<ParticipantList
  participants={participants}
  localUserId={localUserId}
  ownerId={room?.owner}
/>
Copy

WaitingRoom

Dual-mode waiting room for guests and hosts.

Guest mode — shows a waiting spinner or rejection message:

<WaitingRoom
  mode="guest"
  isWaitingForAdmission={isWaitingForAdmission}
  wasRejected={wasRejected}
  onGoBack={() => navigation.goBack()}
/>
Copy

Host mode — shows list of waiting users with admit/reject buttons:

<WaitingRoom
  mode="host"
  waitingUsers={waitingUsers}
  onAdmitUser={admitUser}
  onRejectUser={rejectUser}
/>
Copy

Utility Functions

requestCameraAndMicPermissions

Requests camera and microphone permissions from the OS. On Android, prompts via the native permission dialog. On iOS, returns true immediately since react-native-webrtc handles prompts automatically on first access. For a reactive hook-based API, use usePermissions instead.

import { requestCameraAndMicPermissions } from '@hiyve/rn-react';

const granted = await requestCameraAndMicPermissions();
if (!granted) {
  Alert.alert('Permissions required', 'Camera and microphone access are needed.');
}
Copy

Customization

All components accept colors, labels, and icons props. Pass partial objects to override only what you need:

<ControlBar
  colors={{
    background: '#1e1e3f',
    leaveBackground: '#dc2626',
  }}
  labels={{
    mute: 'Stummschalten',
    unmute: 'Mikrofon ein',
    leave: 'Verlassen',
  }}
  icons={{
    mic: <Icon name="microphone" size={24} color="#fff" />,
    micOff: <Icon name="microphone-off" size={24} color="#fff" />,
  }}
  // ... other props
/>
Copy

Requirements

• React 18+
• React Native 0.70+
• react-native-webrtc >= 118.0.0
• react-native-safe-area-context >= 4.0.0
• @react-native-vector-icons/material-design-icons >= 12.0.0
• @hiyve/rn-core
• @hiyve/rtc-client-rn