Ninchat Jitsi Meet React Native SDK

Ninchat Jitsi Meet React Native SDK allows us to integrate Jitsi Meet video conferencing capabilities into React Native applications. This document provides step-by-step instructions for installation and integration.

Table of Contents

1. Installation
2. Platform Specific Configurations
   • iOS
   • Android
3. Integration
4. Usage

Installation

• Install the SDK:

npm i @ninchat/jitsi-meet-rnsdk

• Installing the package will add a installsdk script in the host package.json. This script will install the SDK's dependencies and link the native modules. To run the script, execute the following command:

npm run installsdk

Might need to install react-dom as well as a dependency if it is not already used in the project

Metro Bundler Configurations

Because of SVG use in react native, we need to update metro.config of our project's file:

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
    const {
        resolver: {sourceExts, assetExts},
    } = await getDefaultConfig();

    return {
        server: {
            rewriteRequestUrl: url => {
                if (!url.endsWith('.bundle')) {
                    return url;
                }
                // https://github.com/facebook/react-native/issues/36794
                // JavaScriptCore strips query strings, so try to re-add them with a best guess.
                return (
                    url +
                    '?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true'
                );
            }, // ...
        },
        transformer: {
            babelTransformerPath: require.resolve('react-native-svg-transformer'),
            getTransformOptions: async () => ({
                transform: {
                    experimentalImportSupport: false,
                    inlineRequires: true,
                },
            }),
        },
        resolver: {
            assetExts: assetExts.filter(ext => ext !== 'svg'),
            sourceExts: [...sourceExts, 'svg']
        }
    }
})();

Platform Specific Configurations

iOS

Update Project Info.plist:

• Camera Permission: Add a Privacy - Camera Usage Description to explain why our app uses the camera.
• Microphone Permission: Add a Privacy - Microphone Usage Description to explain why our app uses the microphone.

<key>NSCameraUsageDescription</key>
<string>Cam</string>
<key>NSMicrophoneUsageDescription</key>
<string>Mic</string>
<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
    <string>fetch</string>
    <string>voip</string>
</array>

Update Podfile:

The SDK require minimum iOS version 12.4

• Minimum iOS version:

  • platform :ios, '12.4'

• We also need to update the podspec after installing the npm package:

cd ios && pod install && cd ..

Android

Update build.gradle:

SDK require minimum api level 24. So, ensure our project has the following minimum SDK version:

minSdkVersion 24

Update AndroidManifest.xml:

Add the following permissions under the </application> tag:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />

Integration

To integrate the Jitsi Meet functionality in our app:

1. Import JitsiMeeting from @ninchat/jitsi-meet-rnsdk.

import {JitsiMeeting} from '@ninchat/jitsi-meet-rnsdk';

2. Add the JitsiMeeting view component to our app's UI:

// sdk specific code starts ...
const jitsiMeeting = useRef(null);

const close = () => {
    jitsiMeeting.current.close()
}
const muteAudio = () => {
    jitsiMeeting.current.setAudioMuted(true)
}

const meetingOptions = {
    onReadyToClose: () => {
        console.log('ready to close')
        // some additional actions like hide or show the jitsi view
    },
};

<JitsiMeeting
  meetingOptions={meetingOptions}
  style={{width: 390, height: 444}}
  ref={jitsiMeeting}
/>

Usage

• meetingOptions: An object that can have multiple properties.

  • onReadyToClose: A callback function that gets triggered when the conference is about to end. Useful for hiding the view or performing other cleanup operations.
  • More callback options will be added in future versions.

• style: Define the appearance of the Jitsi Meeting view. For instance, {{width: 390, height: 444}} sets a fixed size for the view.

• ref: This allows you to get the instance of the JitsiMeeting view. With this instance, we can execute various methods available: