react-native-jitsi-meet

React native wrapper for Jitsi Meet SDK

Install

npm install react-native-jitsi-meet --save

If you are using React-Native < 0.60, you should use a version < 2.0.0.
For versions higher than 2.0.0, you need to add the following piece of code in your

metro.config.js

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([
      /ios/Pods/JitsiMeetSDK/Frameworks/JitsiMeet.framework/assets/node_modules/react-native/.*/,
    ]),
  },
};

Although most of the process is automated, you still have to follow the platform install guide below (iOS and Android) to get this library to work.

Use (>= 2.0.0)

The following component is an example of use:

import React from 'react';
import { View } from 'react-native';
import JitsiMeet, { JitsiMeetView } from 'react-native-jitsi-meet';

class VideoCall extends React.Component {
  constructor(props) {
    super(props);
    this.onConferenceTerminated = this.onConferenceTerminated.bind(this);
    this.onConferenceJoined = this.onConferenceJoined.bind(this);
    this.onConferenceWillJoin = this.onConferenceWillJoin.bind(this);
  }
  componentDidMount() {
    setTimeout(() => {
      const url = 'https://your.jitsi.server/roomName'; // can also be only room name and will connect to jitsi meet servers
      const userInfo = { displayName: 'User', email: '[email protected]', avatar: 'https:/gravatar.com/avatar/abc123' };
      JitsiMeet.call(url, userInfo);
      /* You can also use JitsiMeet.audioCall(url) for audio only call /
      / You can programmatically end the call with JitsiMeet.endCall() */
    }, 1000);
  }
  onConferenceTerminated(nativeEvent) {
    /* Conference terminated event */
  }
  onConferenceJoined(nativeEvent) {
    /* Conference joined event */
  }
  onConferenceWillJoin(nativeEvent) {
    /* Conference will join event */
  }
  render() {
    return (
      
        
      
    );
  }
}
export default VideoCall;

You can also check the ExampleApp

Events

You can add listeners for the following events: - onConferenceJoined - onConferenceTerminated - onConferenceWillJoin

Use (< 2.0.0 and RN<0.60)

In your component,

1.) import JitsiMeet and JitsiMeetEvents:

import JitsiMeet, { JitsiMeetEvents } from 'react-native-jitsi-meet';

2.) add the following code:

  const initiateVideoCall = () => {
    JitsiMeet.initialize();
    JitsiMeetEvents.addListener('CONFERENCE_LEFT', (data) => {
      console.log('CONFERENCE_LEFT');
    });
    setTimeout(() => {
      JitsiMeet.call(``);
    }, 1000);
  };

Events

You can add listeners for the following events: - CONFERENCEJOINED - CONFERENCELEFT - CONFERENCEWILLJOIN

iOS Configuration

1.) navigate to

/ios//

Info.plist

NSCameraUsageDescription
Camera Permission
NSMicrophoneUsageDescription
Microphone Permission

3.) in

Info.plist

UIBackgroundModes

voip

iOS Install for RN >= 0.60

1.) Modify your Podfile to have

platform :ios, '10.0'

pod install

iOS Install for RN < 0.60

Step 1. Add Files Into Project

• 1-1.) in Xcode: Right click

  Libraries

  ➜

  Add Files to [project]

  
  
• 1-2.) choose

  node_modules/react-native-jitsi-meet/ios/RNJitsiMeet.xcodeproj

  then

  Add

  
  
• 1-3.) add

  node_modules/react-native-jitsi-meet/ios/WebRTC.framework

  and

  node_modules/react-native-jitsi-meet/ios/JitsiMeet.framework

  to the Frameworks folder
• 1-4.) add

  node_modules/react-native-jitsi-meet/ios/JitsiMeet.storyboard

  in the same folder as AppDelegate.m
• 1-5.) Replace the following code in AppDelegate.m:

  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;

with this one

  UIViewController *rootViewController = [UIViewController new];
  UINavigationController *navigationController = [[UINavigationController alloc]initWithRootViewController:rootViewController];
  navigationController.navigationBarHidden = YES;
  rootViewController.view = rootView;
  self.window.rootViewController = navigationController; 

This will create a navigation controller to be able to navigate between the Jitsi component and your react native screens.

Step 2. Add Library Search Path

2-1.) select

Build Settings

Search Paths

Framework Search Paths

Library Search Paths

$(SRCROOT)/../node_modules/react-native-jitsi-meet/ios

recursive

Step 3. Change General Setting and Embed Framework

3-1.) go to

General

Deployment Target

8.0

WebRTC.framework

JitsiMeet.framework

Embedded Binaries

Step 4. Link/Include Necessary Libraries

• 4-1.) click

  Build Phases

  tab, open

  Link Binary With Libraries

  
  
• 4-2.) add

  libRNJitsiMeet.a

  
  
• 4-3.) make sure

  WebRTC.framework

  and

  JitsiMeet.framework

  linked
  
• 4-4.) add the following libraries depending on your version of XCode, some libraries might exist or not:
  

AVFoundation.framework
AudioToolbox.framework
CoreGraphics.framework
GLKit.framework
CoreAudio.framework
CoreVideo.framework
VideoToolbox.framework
libc.tbd
libsqlite3.tbd
libstdc++.tbd
libc++.tbd

• 4-5.) Under

  Build setting

  set

  Dead Code Stripping

  to

  No

  , set

  Enable Bitcode

  to

  No

  and

  Always Embed Swift Standard Libraries

  to

  Yes

• 4-6.) Add the following script in a new "Run Script" phase in "Build Phases":

echo "Target architectures: $ARCHS"

APP_PATH="${TARGET_BUILD_DIR}/${WRAPPER_NAME}"
find "$APP_PATH" -name '*.framework' -type d | while read -r FRAMEWORK
do
FRAMEWORK_EXECUTABLE_NAME=$(defaults read "$FRAMEWORK/Info.plist" CFBundleExecutable)
FRAMEWORK_EXECUTABLE_PATH="$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME"
echo "Executable is $FRAMEWORK_EXECUTABLE_PATH"
echo $(lipo -info "$FRAMEWORK_EXECUTABLE_PATH")
FRAMEWORK_TMP_PATH="$FRAMEWORK_EXECUTABLE_PATH-tmp"
remove simulator's archs if location is not simulator's directory
case "${TARGET_BUILD_DIR}" in
*"iphonesimulator")
echo "No need to remove archs"
;;
*)
if $(lipo "$FRAMEWORK_EXECUTABLE_PATH" -verify_arch "i386") ; then
lipo -output "$FRAMEWORK_TMP_PATH" -remove "i386" "$FRAMEWORK_EXECUTABLE_PATH"
echo "i386 architecture removed"
rm "$FRAMEWORK_EXECUTABLE_PATH"
mv "$FRAMEWORK_TMP_PATH" "$FRAMEWORK_EXECUTABLE_PATH"
fi
if $(lipo "$FRAMEWORK_EXECUTABLE_PATH" -verify_arch "x86_64") ; then
lipo -output "$FRAMEWORK_TMP_PATH" -remove "x86_64" "$FRAMEWORK_EXECUTABLE_PATH"
echo "x86_64 architecture removed"
rm "$FRAMEWORK_EXECUTABLE_PATH"
mv "$FRAMEWORK_TMP_PATH" "$FRAMEWORK_EXECUTABLE_PATH"
fi
;;
esac
echo "Completed for executable $FRAMEWORK_EXECUTABLE_PATH"
echo $
done

This will run a script everytime you build to clean the unwanted architecture

Android Install

1.) In

android/app/build.gradle

project.ext.react = [
    entryFile: "index.js",
    bundleAssetName: "app.bundle",
]

2.) In

android/app/src/main/java/com/xxx/MainApplication.java

  import androidx.annotation.Nullable; // 
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 { // 

Android Additional Install for RN < 0.60

1.) In 
android/app/src/main/AndroidManifest.xml
 add these permissions









2.) In the 
 section of 
android/app/src/main/AndroidManifest.xml
, add
 
xml
 


3.) In 
android/settings.gradle
, include react-native-jitsi-meet module
gradle
include ':react-native-jitsi-meet'
project(':react-native-jitsi-meet').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-jitsi-meet/android')


4.) In 
android/app/build.gradle
, add react-native-jitsi-meet to dependencies
gradle
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'
  }
}
dependencies {
  ...
    implementation(project(':react-native-jitsi-meet'))
}


and set your minSdkVersion to be at least 24.

5.) In 
android/app/src/main/java/com/xxx/MainApplication.java
import com.reactnativejitsimeet.RNJitsiMeetPackage;  //  getPackages() {
      return Arrays.asList(
        new MainReactPackage(),
        new RNJitsiMeetPackage()                  // 
Side-note

If your app already includes 
react-native-locale-detector
 or 
react-native-vector-icons
, you must exclude them from the 
react-native-jitsi-meet
 project implementation with the following code (even if you're app uses autolinking with RN > 0.60):
    implementation(project(':react-native-jitsi-meet')) {
      exclude group: 'com.facebook.react',module:'react-native-locale-detector'
      exclude group: 'com.facebook.react',module:'react-native-vector-icons'
      // Un-comment below if using hermes
      //exclude group: 'com.facebook',module:'hermes'
      // Un-comment any packages below that you have added to your project to prevent `duplicate_classes` errors
      //exclude group: 'com.facebook.react',module:'react-native-community-async-storage'
      //exclude group: 'com.facebook.react',module:'react-native-community_netinfo'
      //exclude group: 'com.facebook.react',module:'react-native-svg'
      //exclude group: 'com.facebook.react',module:'react-native-fetch-blob'
      //exclude group: 'com.facebook.react',module:'react-native-webview'
      //exclude group: 'com.facebook.react',module:'react-native-linear-gradient'
      //exclude group: 'com.facebook.react',module:'react-native-sound'
    }