Skip to main content

React Native SDK

The Jitsi React Native SDK provides the same user experience as the Jitsi Meet app, in a customizable way which you can embed in your React Native apps.

Sample application using the React Native SDK​

If you want to see how easy integrating the Jitsi React Native SDK into a React Native application is, take a look at the
sample applications repository.

Usage​

While this is a published library, you can npm i @jitsi/react-native-sdk.
Dependency conflicts may occur between RNSDK and your app.
If that is the case, please run npm i @jitsi/react-native-sdk --force.
To check if some dependencies need to be added, please run the following script node node_modules/@jitsi/react-native-sdk/update_dependencies.js.
This will sync all of our peer dependencies with your dependencies.
Next you will need to do npm install.

Because our SDK uses SVG files, you will need to update your metro bundler configuration accordingly:

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

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

  return {
    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']
    }
  }
})();

Android​

Permissions​

  • In android/app/src/debug/AndroidManifest.xml and android/app/src/main/AndroidManifest.xml, under the </application> tag, please include
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.BLUETOOTH" />
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.MANAGE_OWN_CALLS" />
     <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.WAKE_LOCK" />
     <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
  • For screen share feature: 
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

Services​

  • To enables the screen share feature you now need to go to your MainApplication.java file and:

    1. import com.oney.WebRTCModule.WebRTCModuleOptions; that comes from react-native-webrtc dependency.

    2. WebRTCModuleOptions options = WebRTCModuleOptions.getInstance(); instance it.

    3. options.enableMediaProjectionService = true; enable foreground service that takes care of screen-sharing feature.

API​

  • Our app use react-native-orientation-locker dependency that uses API 33 features. Make sure that your app, in android\build.gradle, targets, at least, that version:
      buildscript {
          ext {
              compileSdkVersion = 33
              targetSdkVersion = 33
          }
      }

iOS​

Permissions​

  • React Native SDK requests camera and microphone access, make sure to include the required entries for NSCameraUsageDescription and NSMicrophoneUsageDescriptionin your Info.plist file.
  • React Native SDK shows and hides the status bar based on the conference state, you may want to set UIViewControllerBasedStatusBarAppearance to NO in your Info.plist file.
  • For starting screen sharing React Native SDK provides the UI to present the RPSystemBroadcastPickerView to the user. By default, the picker will display a list of all the available broadcast providers. In order to limit the picker to our particular broadcast provider, we have to set preferredExtension to the bundle identifier of the broadcast extension. We are doing this by adding a new key named RTCScreenSharingExtension to the app's Info.plist and setting the broadcast extension bundle identifier as the value.
  • Make sure voip is added to UIBackgroundModes, in the app's Info.plist, in order to work when the app is in the background.

Build Phases​

Run Script Phases​
  • For the sounds to work, please add the following script in Xcode:
      SOUNDS_DIR="${PROJECT_DIR}/../node_modules/@jitsi/react-native-sdk/sounds"
      cp $SOUNDS_DIR/* ${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/

JitsiMeeting props​

Our JitsiMeeting component renders the full meeting experience. This has some customizable properties:

config​

Object - Overwrite different config options.

  • For example:
<JitsiMeeting
    config = {{
        hideConferenceTimer: true,
        subject: "React Native SDK",
        customToolbarButtons: [
            {
                icon: "https://w7.pngwing.com/pngs/987/537/png-transparent-download-downloading-save-basic-user-interface-icon-thumbnail.png",
                id: "btn1",
                text: "Button one"
            }, {
                icon: "https://w7.pngwing.com/pngs/987/537/png-transparent-download-downloading-save-basic-user-interface-icon-thumbnail.png",
                id: "btn2",
                text: "Button two"
            }
        ]
    }} />

flags​

Object - Add different feature flags that your meeting experience would like to have.

  • For example: 
<JitsiMeeting 
    flags={{
    'call-integration.enabled': true, 
    'fullscreen.enabled': false, 
    'invite.enabled': true }} />

eventListeners​

Object - Options that personalize your meeting experience:

  • onConferenceBlurred Function - Takes a function that gets triggered when CONFERENCE_BLURRED action is dispatched, more exactly when a conference screen is out of focus, more exactly when navigation to another screen is initiated.

  • onConferenceFocused Function - Takes a function that gets triggered when CONFERENCE_FOCUSED action is dispatched, more exactly when a conference screen is focused.

  • onAudioMutedChanged Function - Takes a function that gets triggered when SET_AUDIO_MUTED action is dispatched, more exactly when audio mute state is changed.

  • onConferenceJoined Function - Takes a function that gets triggered when CONFERENCE_JOINED action is dispatched, more exactly when a conference was joined.

  • onConferenceLeft Function - Takes a function that gets triggered when CONFERENCE_LEFT action is dispatched, more exactly when a conference was left.

  • onConferenceWillJoin Function - Takes a function that gets triggered when CONFERENCE_WILL_JOIN action is dispatched, more exactly when a conference will be joined.

  • onEnterPictureInPicture Function - Takes a function that gets triggered when ENTER_PICTURE_IN_PICTURE action is dispatched, more exactly when entering picture-in-picture is initiated.

  • onParticipantJoined Function - Takes a function that gets triggered when PARTICIPANT_JOINED action is dispatched, more exactly when a specific participant joined a conference.

  • onReadyToClose Function - Takes a function that gets triggered when READY_TO_CLOSE action is dispatched, more exactly when one exits a conference.

  • onVideoMutedChanged Function - Takes a function that gets triggered when SET_VIDEO_MUTED action is dispatched, more exactly when video mute state is changed.

room​

string - Name of the room where the conference takes place.

serverURL​

string - Server where the conference should take place.

style​

Object - CSS your meeting experience.

token​

string - JWT token used for authentication.

userInfo​

  • avatarUrl string - Path to participant's avatar.

  • displayName string - Default participant name to be displayed.

  • email string - Default email for participant.