React Native SDK Implementation
Leave Room

Leaving the Room

Once the call is finished or when a user decides to exit the room, it is essential to provide a mechanism for them to leave the room gracefully. This ensures that resources are released, and the user is properly disconnected from the session.

Closing the Room

A moderator(room admin) can decide to close a room at any point in time. In case of room close, all users are forced to leave the room, all server side resources are released, and the room is brought back to the original state. As we now support multiple user roles(Moderator/Participant/Attendee), this can be useful feature for the moderator to close the room when a meeting is over. When all users leave room, we implicitely trigger a room closure even if this functionality is not explicitely used.

Sample Code for Leaving / Closing a Room

Here's how to implement room leaving and closing functionality in a React Native component:

import React from 'react';
import { View, Button } from 'react-native';
import samvyo from 'basic-rn-sdk-3.0';
 
const VideoCall = () => {
  const samvyoInstance = /* initialized samvyoInstance instance */;
 
  const handleLeaveRoom = async () => {
    try {
      await samvyoInstance.leaveRoom();
      console.log('Successfully left the room');
    } catch (error) {
      console.error('Error leaving room:', error);
    }
  };
 
  const handleCloseRoom = async () => {
    try {
      await samvyoInstance.closeRoom();
      console.log('Successfully closed the room');
    } catch (error) {
      console.error('Error closing room:', error);
    }
  };
 
  return (
    <View style={{ flex: 1 }}>
      <Button 
        title="Leave Room" 
        onPress={handleLeaveRoom} 
      />
      <Button 
        title="Close Room" 
        onPress={handleCloseRoom}
      />
    </View>
  );
};
 
export default VideoCall;

Usage with Custom Components

You can also create custom buttons with styling:

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import samvyo from 'basic-rn-sdk-3.0';
 
const VideoCallControls = () => {
  const samvyoInstance = /* initialized samvyoInstance instance */;
 
  const handleLeaveRoom = async () => {
    try {
      await samvyoInstance.leaveRoom();
      // Handle navigation after leaving room
      navigation.navigate('Home');
    } catch (error) {
      console.error('Error leaving room:', error);
    }
  };
 
  return (
    <View style={styles.container}>
      <TouchableOpacity 
        style={styles.button} 
        onPress={handleLeaveRoom}
      >
        <Text style={styles.buttonText}>Leave Room</Text>
      </TouchableOpacity>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  button: {
    backgroundColor: '#FF0000',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
});
 
export default VideoCallControls;

Summary

By implementing these room management functions in your React Native application, you provide users with the ability to leave or close rooms gracefully. The leaveRoom function is available for all participants, while closeRoom should only be accessible to moderators. Remember to handle the navigation flow after leaving/closing the room according to your application's requirements.

These examples demonstrate how to integrate Samvyo SDK's room management features within the React Native component lifecycle and UI patterns.