import React, {useEffect, useState} from 'react';
import { useNavigation } from '@react-navigation/core';
import {View, StyleSheet, Button, Alert} from 'react-native';
import {Text, IconButton} from 'react-native-paper';
import InCallManager from 'react-native-incall-manager';
import HuddleClient, { emitter } from 'react-native-huddle-client';
} from 'react-native-webrtc';
export default function RoomScreen({...props}) {
const navigation = useNavigation();
const params = props.route.params;
[huddle, setHuddle] = useState(null);
[remoteStream, setRemoteStream] = useState({toURL: () => null});
[localStream, setLocalStream] = useState({toURL: () => null});
[peer, setPeer] = useState(null);
[isMute, setMute] = useState(true);
[isCameraOn, setCameraOn] = useState(false);
[isOpenWaitingRoom, setOpenWaitingRoom] = useState(false);
[lobbyPeers, setLobbyPeers] = useState([]);
React.useLayoutEffect(() => {
navigation.push('Waiting', {huddle, lobbyPeers});
}} title="Waiting Room" />
let roomId = params.roomId;
const userName = params.userName;
const userId = generateId(8);
hostname: 'alpha.huddle01.com:4443',
const h = new HuddleClient(config);
navigation.setOptions({ title: roomId });
InCallManager.start({media: 'audio'});
InCallManager.setForceSpeakerphoneOn(true);
InCallManager.setSpeakerphoneOn(true);
generateId = (length) => {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
const enableDataProducers = async () => {
await huddle.enableChatDataProducer();
await huddle.enableBotDataProducer();
await huddle.enableMiscDataProducer();
await huddle.enableRaiseHandDataProducer();
await huddle.enableReactionsDataProducer();
await huddle.enableMiroDataProducer();
const setupEventListeners = async () => {
emitter.on("roomState", async (state) => {
console.log('emitter::roomState: ', state);
if (state === 'connected') {
await enableDataProducers();
await huddle.enableMic();
emitter.on("error", (error) => {
console.log('emitter::error: ', JSON.stringify(error));
emitter.on("addPeer", (peer) => {
console.log('emitter::addPeer: ', JSON.stringify(peer));
emitter.on("addProducer", (producer) => {
console.log('emitter::addProducer: ', JSON.stringify(producer));
if (producer.type === 'camera') {
const track = producer.track;
const stream = new MediaStream();
emitter.on("addConsumer", (consumer) => {
console.log('emitter::addConsumer: ', JSON.stringify(consumer));
const track = consumer.track;
const stream = new MediaStream();
emitter.on("removePeer", (peer) => {
console.log('emitter::removePeer: ', JSON.stringify(peer));
emitter.on("removeProducer", (producer) => {
setLocalStream({toURL: () => null});
console.log('emitter::removeProducer: ', JSON.stringify(producer));
emitter.on("removeConsumer", (consumer) => {
setRemoteStream({toURL: () => null});
console.log('emitter::removeConsumer: ', JSON.stringify(consumer));
emitter.on("newLobbyPeer", (peers) => {
const lobbyPeers = peers.peers;
setLobbyPeers(lobbyPeers);
emitter.on("updatedPeersArray", (peers) => {
const lobbyPeers = peers.peers;
setLobbyPeers(lobbyPeers);
const joinRoom = async () => {
const leaveRoom = async () => {
const enableCamera = async () => {
await huddle.enableCamera();
const disableCamera = async () => {
await huddle.disableCamera();
const enableMic = async () => {
// await huddle.enableMic();
await huddle.unmuteMic();
const disableMic = async () => {
// await huddle.disableMic();
const sendMsg = async () => {
await huddle.sendReaction("😂");
const changeCamera = async () => {
await huddle.changeCamera();
const changeCameraResolution = async () => {
await huddle.changeCameraResolution();
const onToggleCamera = () => {
const onToggleAudio = () => {
const onSwitchCamera = () => {
const onAction = async () => {
await huddle.sendReaction("😂");
const onRaiseHand = async () => {
await huddle.raiseHand("true");
<View style={styles.root}>
<View style={[styles.videoContainer]}>
<RTCView streamURL={localStream.toURL()} style={styles.localVideo} />
<View style={{position: 'absolute', top: 20, right: 5}}>
style={styles.controlIcon}
icon={ isCameraOn ? 'camera' : 'camera-off' }
onPress={onToggleCamera} />
style={styles.controlIcon}
icon={isMute ? 'microphone-off' : 'microphone'}
onPress={onToggleAudio} />
style={styles.controlIcon}
onPress={onSwitchCamera} />
style={styles.controlIcon}
style={styles.controlIcon}
<View style={[styles.videoContainer]}>
<Text>{(peer ?? {}).displayName ?? 'Friends Video'}</Text>
streamURL={remoteStream.toURL()}
style={styles.remoteVideo}
const styles = StyleSheet.create({
backgroundColor: '#f2f2f2',
backgroundColor: '#f2f2f2',
backgroundColor: '#d0d0d0',