Gathering detailed insights and metrics for @100mslive/react-native-room-kit
Gathering detailed insights and metrics for @100mslive/react-native-room-kit
Gathering detailed insights and metrics for @100mslive/react-native-room-kit
Gathering detailed insights and metrics for @100mslive/react-native-room-kit
React Native Live Streaming, Video Conferencing SDK & Sample App
npm install @100mslive/react-native-room-kit
Typescript
Module System
Min. Node Version
Node Version
NPM Version
TypeScript (75.64%)
Swift (8.47%)
Kotlin (8.4%)
JavaScript (3.73%)
Java (1.37%)
Objective-C (1.22%)
Ruby (0.48%)
Objective-C++ (0.3%)
C++ (0.22%)
Starlark (0.08%)
Makefile (0.05%)
Shell (0.04%)
C (0.01%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
90 Stars
4,068 Commits
35 Forks
8 Watchers
100 Branches
16 Contributors
Updated on Jul 08, 2025
Latest Version
1.2.3
Package Id
@100mslive/react-native-room-kit@1.2.3
Unpacked Size
6.80 MB
Size
1.15 MB
File Count
2,889
NPM Version
10.2.4
Node Version
18.19.1
Published on
Oct 29, 2024
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
14
22
Integrate Real Time Audio and Video conferencing, Interactive Live Streaming, and Chat in your apps with 100ms React Native SDK.
With support for HLS and RTMP Live Streaming and Recording, Picture-in-Picture (PiP), one-to-one Video Call Modes, Audio Rooms, Video Player and much more, add immersive real-time communications to your apps.
📖 Read the Complete Documentation here: https://www.100ms.live/docs/react-native/v2/foundation/basics
Package | Version |
---|---|
@100mslive/react-native-room-kit | |
@100mslive/react-native-hms | |
@100mslive/react-native-video-plugin |
📲 Download the Example iOS app here: https://testflight.apple.com/join/v4bSIPad
🤖 Download the Example Android app here: https://appdistribution.firebase.dev/i/7b7ab3b30e627c35
To get a better understanding of how the example app is structured, what to do on onJoin
, onTrack
and onPeer
listeners, creating PeerTrackNodes
, how to use Redux, and what type of layouts and sorting you can implement in your app, checkout Example App's README
The Android SDK supports Android API level 21 and higher. It is built for armeabi-v7a, arm64-v8a, x86, and x86_64 architectures. Devices running Android OS 11 or above is recommended.
iPhone & iPads with iOS version 12 or above are supported. Devices running iOS 16 or above is recommended.
1npm install @100mslive/react-native-room-kit --save
📲 Download the Sample iOS App here: https://testflight.apple.com/join/v4bSIPad
🤖 Download the Sample Android App here: https://appdistribution.firebase.dev/i/7b7ab3b30e627c35
More information about Integrating the SDK is available here.
Add following lines in Info.plist
file
1<key>NSCameraUsageDescription</key> 2<string>Please allow access to Camera to enable video conferencing</string> 3<key>NSMicrophoneUsageDescription</key> 4<string>Please allow access to Microphone to enable video conferencing</string> 5<key>NSLocalNetworkUsageDescription</key> 6<string>Please allow access to network usage to enable video conferencing</string>
Add following permissions in AndroidManifest.xml
1<uses-feature android:name="android.hardware.camera.autofocus"/> 2<uses-permission android:name="android.permission.CAMERA"/> 3<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/> 4<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 5<uses-permission android:name="android.permission.RECORD_AUDIO"/> 6<uses-permission android:name="android.permission.INTERNET"/> 7<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 8<uses-permission android:name="android.permission.FOREGROUND_SERVICE" /> 9<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" /> 10<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" /> 11<uses-permission android:name="android.permission.VIBRATE" /> 12<uses-permission android:name="android.permission.POST_NOTIFICATIONS" /> 13<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 14<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
You will also need to request Camera and Record Audio permissions at runtime before you join a call or display a preview. Please follow Android Documentation for runtime permissions.
We suggest using react-native-permission to acquire permissions from both platforms.
More information about Audio Video Permission on iOS & Android is available here.
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.
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.
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:
1npx 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
1npx react-native run-android
1npx react-native run-ios --simulator="iPhone 14"
b. Start Metro Bundler if it is not already started
1npx react-native start
or follow instructions printed in Terminal to start the Metro Bundler or Run the Application.
After the Test run of your app is successful, you can install 100ms React Native Room Kit package in your app.
1npm install --save @100mslive/react-native-room-kit
@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.1npm install react-native-permissions@3.4.0
Native File Changes for react-native-permissions
package -
AndroidManifest.xml
file (at the application tag level).1<uses-feature android:name="android.hardware.camera"/> 2<uses-feature android:name="android.hardware.camera.autofocus"/> 3<uses-permission android:name="android.permission.CAMERA"/> 4<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/> 5<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 6<uses-permission android:name="android.permission.RECORD_AUDIO"/> 7<uses-permission android:name="android.permission.INTERNET"/> 8<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 9<uses-permission android:name="android.permission.FOREGROUND_SERVICE" /> 10<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" /> 11<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" /> 12<uses-permission android:name="android.permission.VIBRATE" /> 13<uses-permission android:name="android.permission.POST_NOTIFICATIONS" /> 14<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 15<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
minSdkVersion
to 24 in the android/build.gradle
file1buildscript { 2 ext { 3 ... 4 minSdkVersion = 24 5 ... 6 } 7}
Add the below snippet in the info.plist
file -
1<key>NSCameraUsageDescription</key> 2<string>Please allow access to Camera to enable video conferencing</string> 3 4<key>NSMicrophoneUsageDescription</key> 5<string>Please allow access to Microphone to enable video conferencing</string> 6 7<key>NSLocalNetworkUsageDescription</key> 8<string>Please allow access to network usage to enable video conferencing</string>
ios/Podfile
file -1target 'PrebuiltSampleApp' do 2... 3 permissions_path = '../node_modules/react-native-permissions/ios' 4 5 pod 'Permission-Camera', :path => "#{permissions_path}/Camera" 6 pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone" 7... 8end
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 is required for adding animated views.1npm 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.
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.
1npm install @100mslive/react-native-hms 2 @shopify/flash-list@1.4.3 3 react-native-keyboard-controller@^1.6.1 4 react-native-linear-gradient@2.7.3 5 react-native-modal@12.1.0 6 react-native-safe-area-context@3.3.0 7 react-native-simple-toast@1.1.3
@100mslive/react-native-hms
packageChange ios target platform version to '13.0' in the ios/Podfile
file
1require_relative '../node_modules/react-native/scripts/react_native_pods' 2require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 4platform :ios, '13.0' 5install! '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.
react-native-room-kit
package uses 'Inter' font family for texts. You need to add 'Inter' fonts in your app.
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 -
1<dict> 2 ... 3 <key>UIBackgroundModes</key> 4 <array> 5 <string>audio</string> 6 </array> 7 ... 8</dict>
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 -
1<HMSPrebuilt 2 roomCode="..." 3 options={{ 4 ... 5 ios: { 6 appGroup: "..."; 7 preferredExtension: "..."; 8 } 9 }} 10/>
Now that your project setup is complete, let's replace the code in the App.js
file with the complete code sample below -
1import React, { useState } from 'react'; 2import { StatusBar, StyleSheet, Button, View } from 'react-native'; 3import { HMSPrebuilt } from '@100mslive/react-native-room-kit'; 4 5const App = () => { 6 const [showHMSPrebuilt, setShowHMSPrebuilt] = useState(false); 7 8 return ( 9 <View style={styles.container}> 10 <StatusBar barStyle={'dark-content'} /> 11 12 {showHMSPrebuilt ? ( 13 <HMSPrebuilt 14 roomCode="mki-scw-wnw" 15 options={{ userName: 'John Appleseed' }} 16 /> 17 ) : ( 18 <View style={styles.joinContainer}> 19 <Button title="Start" onPress={() => setShowHMSPrebuilt(true)} /> 20 </View> 21 )} 22 </View> 23 ); 24}; 25 26const styles = StyleSheet.create({ 27 container: { 28 flex: 1, 29 }, 30 joinContainer: { 31 flex: 1, 32 alignItems: 'center', 33 justifyContent: 'center', 34 }, 35}); 36 37export default 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
1npx react-native run-android
1npx react-native run-ios --simulator="iPhone 14"
b. Start Metro Bundler if it is not already started
1npx react-native start
Follow the instructions printed in the Terminal to start the Metro Bundler or Run the Application.
You can download and check out the 100ms React Native deployed apps -
🤖 Download the Sample Android App here
📲 Download the Sample iOS App here
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
Found 5/8 approved changesets -- score normalized to 6
Reason
binaries present in source code
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
40 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More