Prebuilt Quickstart
Overview
This guide will walk you through simple instructions to create a Video Conferencing app using the 100ms Prebuilt and test it using an Emulator or your Mobile Phone. Ensure that you are using the latest versions of the packages.
Create a sample app
This section contains instructions to create a simple React Native Video Conferencing app. We will help you with instructions to understand the project setup and complete code sample to implement this quickly.
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.
-
Open your Terminal and navigate to directory/folder where you would like to create your app.
-
Run the below command to create React Native app:
npx react-native init PrebuiltSampleApp --version 0.68.5 --npm && cd ./PrebuiltSampleApp
-
Once the app is created, open it in VS code.
-
Test run your app
a. Build the App
npx react-native run-android
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
- 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 -
- Allow camera, recording audio and internet permissions by adding the below snippet to the
AndroidManifest.xml
file (at the application tag level).
<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" />
- Change
minSdkVersion
to 24 in theandroid/build.gradle
file
buildscript { ext { ...
minSdkVersion = 24... } }
If you see any permission related error, then check out react-native-permissions
library setup guide for v3.4.0
.
Note: If you have already setup the react-native-permissions
package, then you can continue with your existing setup.
Note: iOS simulator and android emulator doesn't support actual video, you need actual devices to see your video in real-time.
- 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.
Note: If you already have the setup for react-native-reanimated
package, then you can continue with your existing setup. We recommend using >= 2.x.x
versions.
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@0.0.4 @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-keyboard-controller@^1.6.1 react-native-linear-gradient@2.7.3 react-native-modal@12.1.0 react-native-safe-area-context@3.3.0 react-native-simple-toast@1.1.3
Ensure that the final package.json
file contains the following dependencies -
"@100mslive/react-native-room-kit": "^0.0.4", "@100mslive/react-native-hms": "^1.7.2", "@100mslive/types-prebuilt": "^0.0.4", "@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-keyboard-controller": "^1.6.1", "react-native-linear-gradient": "2.7.3", "react-native-modal": "12.1.0", "react-native-permissions": "3.4.0", "react-native-reanimated": "2.17.0", "react-native-safe-area-context": "3.3.0", "react-native-simple-toast": "1.1.3"
- Native File Changes for
@100mslive/react-native-hms
package
Change ios target platform version to '13.0' in the ios/Podfile
file
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 official installation steps of these libraries if you encounter any problem in setup.
Note: If you already have the setup for any of the listed package, then you may continue with your existing setup. If some problem occurs then try using specified version for the package.
Configure Inter Font Family
react-native-room-kit
package uses 'Inter' font family for texts. You need to add 'Inter' fonts in your app.
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: "...";} }} />
Complete code example
Now that your project setup is complete, let's replace the code in the App.js
file with the complete code sample below -
import React, { useState } from 'react'; import { StatusBar, StyleSheet, Button, View } from 'react-native'; import { HMSPrebuilt } from '@100mslive/react-native-room-kit'; const App = () => { const [showHMSPrebuilt, setShowHMSPrebuilt] = useState(false); return ( <View style={styles.container}> <StatusBar barStyle={'dark-content'} /> {showHMSPrebuilt ? ( <HMSPrebuilt roomCode='abc-lmno-xyz' options={{ userName: 'John Appleseed' }} /> ) : ( <View style={styles.joinContainer}> <Button title='Start' onPress={() => setShowHMSPrebuilt(true)} /> </View> )} </View> ); }; 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
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.
Check Deployed Sample Apps
You can download and check out the 100ms React Native deployed apps -
🤖 Download the Sample Android App here
📲 Download the Sample iOS App here