React native wrapper for Jitsi Meet SDK
yarn add git+https://github.com/bayazetyan/rn-jitsi-meet.git
Add the following piece of code in your metro.config.js file to avoid conflicts between rn-jitsi-meet and react-native in metro bundler.
const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
resolver: {
blacklistRE: blacklist([
/ios\/Pods\/JitsiMeetSDK\/Frameworks\/JitsiMeet.framework\/assets\/node_modules\/react-native\/.*/,
]),
},
}The following component is an example of use:
import React from 'react';
import { View } from 'react-native';
import JitsiMeet, { JitsiMeetView } from 'rn-jitsi-meet';
function VideoCall() {
React.useEffect(() => {
const url = 'roomURL';
const userInfo = {
displayName: 'User Name',
email: '[email protected]',
serviceName: 'Service name',
avatar: 'https:/gravatar.com/avatar/abc123',
};
/* You can also use JitsiMeet.audioCall(url) for audio only call */
/* You can programmatically end the call with JitsiMeet.endCall() */
setTimeout(() => {
JitsiMeet.call(url, userInfo)
}, 1000)
}, [])
function onConferenceTerminated(nativeEvent) {
/* Conference terminated event */
}
function onConferenceJoined(nativeEvent) {
/* Conference joined event */
}
function onConferenceWillJoin(nativeEvent) {
/* Conference will join event */
}
return (
<View style={{ flex: 1 }}>
<JitsiMeetView
onConferenceJoined={onConferenceJoined}
onConferenceWillJoin={onConferenceWillJoin}
onConferenceTerminated={onConferenceTerminated}
style={{ flex: 1, height: '100%', width: '100%' }}
/>
</View>
)
}
export default VideoCall;You can add listeners for the following events:
-
onConferenceJoined
-
onConferenceTerminated
-
onConferenceWillJoin
1.) navigate to <ProjectFolder>/ios/<ProjectName>/
2.) edit Info.plist and add the following lines
<key>NSCameraUsageDescription</key>
<string>Camera Permission</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone Permission</string>3.) in Info.plist, make sure that
<key>UIBackgroundModes</key>
<array>
//... other keys
<string>voip</string>
</array>4.) Modify your Podfile to have platform :ios, '10.0' and execute pod install
5.) In Xcode, under Build setting set Enable Bitcode to No
6.) Open terminal and run:
chmod +rx ./node_modules/rn-jitsi-meet/script.sh && ./node_modules/rn-jitsi-meet/script.sh
1.) In android/app/build.gradle, add/replace the following lines:
project.ext.react = [
entryFile: "index.js",
bundleAssetName: "app.bundle",
]2.) In android/app/src/main/java/com/xxx/MainApplication.java add/replace the following methods:
import androidx.annotation.Nullable; // <--- Add this line if not already existing
...
@Override
protected String getJSMainModuleName() {
return "index";
}
@Override
protected @Nullable String getBundleAssetName() {
return "app.bundle";
}3.) In android/build.gradle, add the following code
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
maven {
url "https://maven.google.com"
}
maven { // <---- Add this block
url("$rootDir/../node_modules/rn-jitsi-meet/jitsi-sdk")
}
maven { url "https://jitpack.io" }
}
}1.) In android/app/src/main/AndroidManifest.xml add these permissions
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" // <--- Add this line if not already existing
...
<uses-permission android:name="android.permission.CAMERA" />
<application
<!-- .... -->
tools:replace="android:allowBackup"
<!-- .... -->
/>3.) In android/settings.gradle, include rn-jitsi-meet module
include ':rn-jitsi-meet'
project(':rn-jitsi-meet').projectDir = new File(rootProject.projectDir, '../node_modules/rn-jitsi-meet/android')
4.) In android/app/build.gradle, add rn-jitsi-meet to dependencies
android {
...
packagingOptions {
pickFirst 'lib/x86/libc++_shared.so'
pickFirst 'lib/x86/libjsc.so'
pickFirst 'lib/x86_64/libjsc.so'
pickFirst 'lib/arm64-v8a/libjsc.so'
pickFirst 'lib/arm64-v8a/libc++_shared.so'
pickFirst 'lib/x86_64/libc++_shared.so'
pickFirst 'lib/armeabi-v7a/libc++_shared.so'
pickFirst 'lib/armeabi-v7a/libjsc.so'
}
}and set your minSdkVersion to be at least 21.
If your app already includes react-native-locale-detector or react-native-vector-icons, you must exclude them from the rn-jitsi-meet project implementation with the following code (even if you're app uses autolinking with RN > 0.60):
implementation(project(':rn-jitsi-meet')) {
exclude group: 'com.facebook.react',module:'react-native-locale-detector'
exclude group: 'com.facebook.react',module:'react-native-vector-icons'
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent