React native wrapper for Jitsi Meet SDK Library that rely on the native view (Activity / ViewController)

Overview

react-native-jitsi-meet-sdk

React native wrapper for Jitsi Meet SDK Library. This Library implements the Jitsi SDK with a native activity on the Android side and a viewController for iOS part, which gives you a better experience and less problems.

Installation

npm install react-native-jitsi-meet-sdk

Important

We faced some issues with RN >= 0.64 and JitsiSDK, we recommend using a version 0.60 <= RN < 0.64

Android Configuration:(MinSdk: 23)

Add this to your android/build.gradle :

allprojects {
    repositories {
        mavenCentral()
        mavenLocal()
        maven {
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        maven {
            url "https://github.com/jitsi/jitsi-maven-repository/raw/master/releases" // <---- Add this line
        }
        google()
        maven { url 'https://www.jitpack.io' }
        jcenter()

    }
}

Add tools:replace="android:allowBackup" to your AndroidManifest.xml :

  <application
      ...
      tools:replace="android:allowBackup"  // <---- Add this line
      >  

iOS Configuration:(Min Target: 12)

Add this to your Info.plist :

<key>NSCameraUsageDescription</key>
<string>Camera permission description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone permission description</string>

Usage

Start meeting :

import { startCall, endCall } from 'react-native-jitsi-meet-sdk';

// ...

  // Start the call with url and user

startCall("https://meet.jit.si/react-native-jitsi-meet-sdk", {
      name: "name",
      email: "[email protected]",
      avatar: "https://avatar.png"
    })


  // Call this to end the call programmatically 
endCall()

Implement listeners :

import JitsiMeetSdk from 'react-native-jitsi-meet-sdk';

// ...

  useEffect(() => {

    const subscription_will_join = eventManagerEmitter.addListener(
      JitsiMeetSdk.CONST_JS_CONFERENCE_WILL_JOIN_EVENT_NAME,
      (e) => {
        console.log("CONFERENCE_WILL_JOIN_EVENT");
      }
    );

    const subscription_terminated = eventManagerEmitter.addListener(
      JitsiMeetSdk.CONST_JS_CONFERENCE_TERMINATED_EVENT_NAME,
      (e) => {
        console.log("CONFERENCE_TERMINATED_EVENT");
      }
    );

    const subscription_joined = eventManagerEmitter.addListener(
      JitsiMeetSdk.CONST_JS_CONFERENCE_JOINED_EVENT_NAME,
      (e) => {
        console.log("CONFERENCE_JOINED_EVENT");
      }
    );

    const subscription_participant_left = eventManagerEmitter.addListener(
      JitsiMeetSdk.CONST_JS_PARTICIPANT_LEFT_EVENT_NAME,
      (e) => {
        console.log("PARTICIPANT_LEFT_EVENT", e);
      }
    );

    const subscription_participant_joined = eventManagerEmitter.addListener(
      JitsiMeetSdk.CONST_JS_PARTICIPANT_JOINED_EVENT_NAME,
      (e) => {
        console.log("PARTICIPANT_JOINED_EVENT", e);
      }
    );


    //This method called from android for ios you must see example below
    const subscription_retrieve_participants = eventManagerEmitter.addListener(
      JitsiMeetSdk.CONST_JS_RETRIEVE_PARTICIPANT_INFO_EVENT_NAME,
      (e) => {
        console.log("RETRIEVE_PARTICIPANT_INFO_EVENT", e);
      }
    );


    return () => {
      subscription_will_join.remove();
      subscription_joined.remove();
      subscription_terminated.remove();
      subscription_participant_left.remove();
      subscription_participant_joined.remove()
      subscription_retrieve_participants.remove()
    };
  });

Retrieve participants info :

import { retrieveParticipantsInfo } from 'react-native-jitsi-meet-sdk';

// ...

   // For Android you must implement the "subscription_retrieve_participants" listener in order to retrieve the participants.
retrieveParticipantsInfo((retrieveParticipant)=>{

})

Generating release APK

If your having problems with duplicate_classes errors, try exclude them from the react-native-jitsi-meet-sdk project implementation with the following code:

// You may face the same problem in other libraries too, just exclude it like the example below 

implementation(project(':react-native-jitsi-meet-sdk')) {
  // Un-comment below if using hermes
  exclude group: 'com.facebook',module:'hermes'
  // Un-comment any used packages below
   exclude group: 'com.facebook.react',module:'react-native-community-async-storage'
  // exclude group: 'com.facebook.react',module:'react-native-locale-detector'
  // exclude group: 'com.facebook.react',module:'react-native-vector-icons'
  // 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'
}

ProGuard rules

In order to avoid necessary code being stripped. Add the following to your project's rules file: https://github.com/SabriGhazali/react-native-jitsi-meet-sdk/blob/main/example/android/app/proguard-rules.pro

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

You might also like...

CO1212 - Stack Operations Activity

StackOperations Download this two java files and implement the methods which are mentioned inside the class. Just use the basic things that I have tau

Apr 26, 2022

React wrapper for android and ios

Deepvue Aadhaar Offline e-KYC React Native SDK This is a wrapper over Android and iOS SDK for react native. Aadhaar Paperless Offline eKYC is a secure

May 10, 2022

An awesome native wheel picker component for React Native.

An awesome native wheel picker component for React Native.

⛏️ react-native-picky An awesome native wheel picker component for react-native. Features Supports multiple columns ✅ Supports looping ✅ Native Androi

Dec 4, 2022

Android Library to create Lottie animation view dialog easily with a lot of customization

Android Library to create Lottie animation view dialog easily with a lot of customization

LottieDialog Android Library to create Lottie animation view dialog easily with a lot of customization Why you should use Lottie Dialog You have no li

Oct 7, 2022

Python wrapper around the BoofCV Computer Vision Library

PyBoof is Python wrapper for the computer vision library BoofCV. Since this is a Java library you will need to have java and javac installed. The form

Dec 30, 2022

A simple java wrapper library for alquran-cloud api 🤍☕

A simple java wrapper library for alquran-cloud api 🤍☕

A simple java wrapper library for alquran-cloud api 🤍 It is still under development. 🚧 How to add this library into your project Maven Step 1. Add t

Oct 9, 2022

This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database

This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database. The example that will be shown here focuses on the ability of two people to message each other in a chat room.

Jan 30, 2022

Example React Native library written with JSI

react-native-jsi-example This is an example JSI Module for React Native that returns a value from C++ to JS synchronously. Implemented for just iOS. T

Mar 3, 2022

Projeto criado na semana Spring React organizado pela escola Dev Superior com foco na prática/aprendizado das tecnologias Spring e React.

DSVendas Projeto criado na semana Spring React organizado pela escola Dev Superior com foco na prática/aprendizado das tecnologias Spring e React. htt

May 18, 2021
Comments
  • Not working with @react-native-community/netinfo

    Not working with @react-native-community/netinfo

    Not working with the netinfo. already excluded netinfo in the build.gradle

    com.facebook.react.bridge.NativeArgumentsParseException: RNCNetInfo.getCurrentState got 2 arguments, expected 3 at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:348) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150) at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:883) at android.os.Handler.dispatchMessage(Handler.java:100) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26) at android.os.Looper.loop(Looper.java:214) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225) at java.lang.Thread.run(Thread.java:919)

    opened by ydv0121 2
Releases(v0.1.2)
Owner
Full-time Developer. Software Engineering
null
React Native wrapper around Indy SDK Java and Objective-C wrappers.

React Native Indy SDK React Native Indy SDK wrapper. Installation with npm: $ npm install indy-sdk-react-native --save with Yarn: $ yarn add indy-sdk-

Hyperledger 21 Dec 5, 2022
An Android library for member secretGFX group, This can be used to growing your apps and get more install via a simple banner view & native view and interstitial dialog.

GFX-AdPromote An Android library for member secretGFX group, This can be used to growing your apps and get more install via a simple banner view & nat

SAID MOTYA 10 Dec 25, 2022
With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any other file server

React Native In-App update With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any o

Nepein Andrey 7 Dec 21, 2022
Lottie wrapper for React Native.

Lottie for React Native, iOS, and Android Lottie component for React Native (iOS and Android) Lottie is a mobile library for Android and iOS that pars

Lottie - React Native 15.6k Jan 7, 2023
Java wrapper for Agones client SDK.

agones4j How to Use (Developers) Code final class Server { public static void main( final String[] args ) { final var sdk = new tr.com.in

Infumia LTD 6 Dec 15, 2022
Sceneform React Native AR Component using ARCore and Google Filament as 3D engine. This the Sceneform Maintained Component for React Native

Discord Server Join us on Discord if you need a hand or just want to talk about Sceneform and AR. Features Remote and local assets Augmented Faces Clo

SceneView Open Community 42 Dec 17, 2022
☁ Tencent Cloud IM Server SDK in Java | 腾讯云 IM 服务端 SDK Java 版

Tencent Cloud IM Server SDK in Java The Tencent Cloud IM Server SDK for Java enables Java developers to easily work with Tencent Cloud IM. Requirement

Doocs 64 Dec 23, 2022
🔥 强大的动态线程池,并附带监控报警功能(没有依赖中间件),完全遵循阿里巴巴编码规范。Powerful dynamic thread pool, does not rely on any middleware, with monitoring and alarm function.

?? 动态线程池(DTP)系统,包含 Server 端及 SpringBoot Client 端需引入的 Starter. 这个项目做什么? 动态线程池(Dynamic-ThreadPool),下面简称 DTP 系统 美团线程池文章 介绍中,因为业务对线程池参数没有合理配置,触发过几起生产事故,进而

longtai 3.4k Dec 30, 2022
A suite of software tools and services created to support activity planning and sequencing needs of missions with modeling, simulation, scheduling and validation capabilities

Aerie A suite of software tools and services created to support activity planning and sequencing needs of missions with modeling, simulation, scheduli

NASA Advanced Multi-Mission Operations System 31 Jan 3, 2023
App to demonstrate the passage of adapter items into activity using interfaces

OnClickListenerExample This application shows how to pass adapter items into an activity using interfaces. The sample data set contains two fields rep

Rohan Bari 1 Feb 2, 2022