Prebuilt Quickstart

Prerequisites

• A 100ms account if you don't have one already.
• Working React Native Development Environment for React Native CLI
• Familiar with basics of React Native.
• VS code or any other IDE / code editor

Create a React Native app

Once you have the prerequisites, follow the steps below to create a React Native app. This guide will use VS code but you can use any code editor or IDE.

1. Open your Terminal and navigate to directory/folder where you would like to create your app.

2. Run the below command to create React Native app:

npx react-native init PrebuiltSampleApp --version 0.68.5 --npm && cd ./PrebuiltSampleApp

3. Once the app is created, open it in VS code.

4. Test run your app

   a. Build the App ​

   AndroidiOS

   npx react-native run-android
   

   npx react-native run-ios --simulator="iPhone 14"
   

   b. Start Metro Bundler if it is not already started ​

   npx react-native start
   

   or follow instructions printed in Terminal to start the Metro Bundler or Run the Application.

Install the Dependencies

After the Test run of your app is successful, you can install 100ms React Native Room Kit package in your app.

npm install --save @100mslive/react-native-room-kit

Install the Peer Dependencies

1. react-native-permissions package Since the app and @100mslive/react-native-room-kit package requires Camera & Microphone permissions, a package for requesting these permissions from users should also be installed. We recommend using the react-native-permissions package.

npm install react-native-permissions@3.4.0

Native File Changes for react-native-permissions package -

<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

buildscript {
  ext {
    ...
    minSdkVersion = 24
    ...
  }
}

<key>NSCameraUsageDescription</key>
<string>Please allow access to Camera to enable video conferencing</string>

<key>NSMicrophoneUsageDescription</key>
<string>Please allow access to Microphone to enable video conferencing</string>

<key>NSLocalNetworkUsageDescription</key>
<string>Please allow access to network usage to enable video conferencing</string>

target 'PrebuiltSampleApp' do
...
  permissions_path = '../node_modules/react-native-permissions/ios'

  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"
...
end

If you see any permission related error, then check out react-native-permissions library setup guide for v3.4.0.

2. react-native-reanimated package react-native-reanimated package is required for adding animated views.

npm install react-native-reanimated@2.17.0

Add Reanimated's babel plugin to your babel.config.js

module.exports = {
  presets: [
    ...
  ],
  plugins: [
    ...
    'react-native-reanimated/plugin',
  ],
};

For iOS, do run pod install in the ios/ directory.

Install the dependencies of react-native-room-kit package

react-native-room-kit package depends upon many other packages. These packages to be your app's direct dependencies so that react-native can link them.

npm install @100mslive/react-native-hms \
  @100mslive/types-prebuilt \
  @react-native-community/blur@^4.3.2 \
  @react-native-masked-view/masked-view@^0.2.9 \
  @shopify/flash-list@1.4.3 \
  lottie-react-native@5.1.6 \
  react-native-gesture-handler@2.12.1 \
  react-native-linear-gradient@2.8.3 \
  react-native-modal \
  react-native-safe-area-context@3.3.0 \
  react-native-simple-toast@1.1.3 \
  react-native-webview@^13.8.7

1. Native File Changes for @100mslive/react-native-hms package

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '13.0'
install! 'cocoapods', :deterministic_uuids => false

Follow the official installation steps of these libraries if you encounter any problems in setup.

Configure Inter Font Family

react-native-room-kit package uses 'Inter' font family for texts. You need to add 'Inter' fonts in your app. You can download Inter font family from Google Fonts.

Enable Background modes for iOS

You can enable background modes for audio in iOS. so that when you minimze the app, room audio can still be heared by the users.

Paste the following in your Info.plist file -

<dict>
  ...
<key>UIBackgroundModes</key>
  <array>
    <string>audio</string>
  </array>
  ...
</dict>

Additional Setup

You can follow ScreenShare setup and AudioShare setup guides to add ScreenShare and Audio Share features in your app.

After doing changes related to ScreenShare feature, To use screenshare feature on iOS, pass appGroup and preferredExtension options to HMSPrebuilt componnets -

<HMSPrebuilt
  roomCode="..."
  options={{
    ...
    ios: {
      appGroup: "...";
      preferredExtension: "...";
    }
  }}
/>

Prebuilt Properties

 <HMSPrebuilt
      roomCode={roomCode} // You can pass `roomCode` OR `token` prop, If you pass both `token` prop will be used
      token={authToken} // You can pass `roomCode` OR `token` prop, If you pass both `token` prop will be used
      options={{
        userName: "John Appleseed",
        userId: "My_Unique_UserId",    
        ios: {
            appGroup: 'group....',
            preferredExtension: '...',
        },
      }}
      onLeave={handleRoomLeave}
      handleBackButton={isScreenFocused}
      autoEnterPipMode={true}
/>

const handleRoomLeave: OnLeaveHandler = useCallback((reason) => {
    console.log(':: Reason for Leaving the Room > ', reason);
    navigation.navigate('HomeScreen');
}, []);

Complete code example

Now that your project setup is complete -

1. add react-native-gesture-handler import statement at the top in index.js file

import 'react-native-gesture-handler';

...

AppRegistry.registerComponent(appName, () => App);

2. let's replace the code in the App.js file with the complete code sample below -

import React, { useState, useCallback } from 'react';
import {
  StatusBar,
  StyleSheet,
  Button,
  View,
  Alert,
  Platform,
} from 'react-native';
import { HMSPrebuilt } from '@100mslive/react-native-room-kit';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { PERMISSIONS, requestMultiple } from 'react-native-permissions';

const App = () => {
  const [showHMSPrebuilt, setShowHMSPrebuilt] = useState(false);

  const start = () => {
    if (Platform.OS === "ios") {
      setShowHMSPrebuilt(true);
      return;
    }

    requestMultiple([
      PERMISSIONS.ANDROID.CAMERA,
      PERMISSIONS.ANDROID.RECORD_AUDIO
    ])
      .then((data) => {
        const cameraPermissionStatus = data[PERMISSIONS.ANDROID.CAMERA];
        const audioPermissionStatus = data[PERMISSIONS.ANDROID.RECORD_AUDIO];
        if (
          cameraPermissionStatus === "granted" &&
          audioPermissionStatus === "granted"
        ) {
          setShowHMSPrebuilt(true);
        } else {
          Alert.alert('Permission Not Granted', "Camera and Audio permissions are required!");
        }
      })
      .catch((error) => {
        Alert.alert('Error', error.description);
      });
  };

  const handleRoomLeave = useCallback((reason) => {
    console.log(':: Reason for Leaving the Room > ', reason);
    setShowHMSPrebuilt(false);
  }, []);

  return (
    <GestureHandlerRootView style={styles.container}>
      <SafeAreaProvider>
        <View style={styles.container}>
          <StatusBar barStyle={'dark-content'} />

          {showHMSPrebuilt ? (
            <HMSPrebuilt
              roomCode={"rlk-lsml-aiy"}
              options={{ userName: "John Appleseed" }}
              onLeave={handleRoomLeave}
            />
          ) : (
            <View style={styles.joinContainer}>
              <Button title='Start' onPress={start} />
            </View>
          )}
        </View>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  joinContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default App;

Test the app

Follow the instructions in one of the tabs below based on the target platform you wish to test the app.

a. Build the App

npx react-native run-android

npx react-native run-ios --simulator="iPhone 14"

b. Start Metro Bundler if it is not already started

npx react-native start

or follow instructions printed in Terminal to start the Metro Bundler or Run the Application.