$3

- 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

$3

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:
​

`bash section=CreateRnApp
npx react-native init PrebuiltSampleApp --version 0.77.3 --npm && cd ./PrebuiltSampleApp
`

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

4. Test run your app

a. Build the App
​

#### For Android

`bash section=BuildApp sectionIndex=1 tab=Android
npx react-native run-android
`

#### For iOS

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

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

`bash
npx react-native start
`

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

$3

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

`bash
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.

`bash
npm install react-native-permissions@3.4.0
`

Native File Changes for react-native-permissions package -

#### For Android

1. Allow camera, recording audio and internet permissions by adding the below snippet to the AndroidManifest.xml file (at the application tag level).

`xml section=androidPermissions















`

2. Change minSdkVersion to 24 in the android/build.gradle file

`json{4}
buildscript {
ext {
...
minSdkVersion = 24
...
}
}
`

#### For iOS

1. Allow camera, recording audio and internet permissions

Add the below snippet in the info.plist file -

`xml section=ForIOSPermissions sectionIndex=1
NSCameraUsageDescription
Please allow access to Camera to enable video conferencing

NSMicrophoneUsageDescription
Please allow access to Microphone to enable video conferencing

NSLocalNetworkUsageDescription
Please allow access to network usage to enable video conferencing
`

2. Add the below snippet in the ios/Podfile file -

`json{3-6}
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.

> 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.

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

`bash
npm install react-native-reanimated@2.17.0
`

Follow official installation steps for v2.17.0.

> 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.

`bash
npm install @100mslive/react-native-hms
@shopify/flash-list@1.4.3
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
`

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

#### For iOS

Change ios target platform version to '16.0' in the ios/Podfile file

`json{4}
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '16.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 -

`xml{3-6}

...
UIBackgroundModes

audio

...

`

#### 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 -

`js{6-7}
roomCode="..."
options={{
...
ios: {
appGroup: "...";
preferredExtension: "...";
}
}}
/>
`

$3

Now that your project setup is complete, let's replace the code in the App.js file with the complete code sample below -

`js section=completeCodeExample
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 (



{showHMSPrebuilt ? (
roomCode="mki-scw-wnw"
options={{ userName: 'John Appleseed' }}
/>
) : (

setShowHMSPrebuilt(true)} />

)}

);
};

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

export default App;
`

$3

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

a. Build the App

#### For Android

`bash section=BuildApp sectionIndex=1 tab=Android
npx react-native run-android
`

#### For iOS

`bash section=BuildApp sectionIndex=1 tab=iOS
npx react-native run-ios --simulator="iPhone 14"
`

b. Start Metro Bundler if it is not already started

`bash section=BuildApp sectionIndex=2
npx react-native start
``

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

$3

You can download and check out the 100ms React Native deployed apps -

🤖 Download the Sample Android App here

📲 Download the Sample iOS App here