Inside your project, run;
npm i @jitsi/react-native-sdk
If there are conflicts, you can use --force
Additionally, if not already installed, some dependencies will need to be added.
This can be done by running the following script:
node node_modules/@jitsi/react-native-sdk/update_dependencies.js
This will check and update all your dependencies.
After that you need to npm i
, if some dependency versions were updated.
Because of SVG use in react native, you need to update metro.config your project's file:
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']
}
}
})();
- Add a Privacy - Camera Usage Description
- Add a Privacy - Microphone Usage Description
- Signing & capabilites:
- Add Background modes
- Audio
- Voice over IP
- Background fetch
- Add Background modes
Run;
cd ios && pod install && cd ..
-
In your build.gradle have at least
minSdkVersion = 24
-
In
android/app/src/debug/AndroidManifest.xml
andandroid/app/src/main/AndroidManifest.xml
, under the</application>
tag, include<uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.CAMERA" />
-
Go to your
MainApplication.java
file and add:-
import com.oney.WebRTCModule.WebRTCModuleOptions;
that comes fromreact-native-webrtc
dependency. -
WebRTCModuleOptions options = WebRTCModuleOptions.getInstance();
instance it. -
options.enableMediaProjectionService = true;
enable foreground service that takes care of screen-sharing feature.
-
-
Go to your
android/app/src/main/AndroidManifest.xml
, under the</application>
tag and include<uses-permission android:name="android.permission.FOREGROUND_SERVICE" /> <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />
If you want to test all the steps before applying them to your app, you can check our React Native SDK sample app here: https://github.com/jitsi/jitsi-meet-sdk-samples/tree/master/react-native
- If you are planning to use tokens or another domain, you can do that by updating the following props, as shown below.
- For example:
<JitsiMeeting
room = { 'ThisIsNotATestRoomName' }
serverURL = { 'https://meet.jit.si/' }
token={ 'dkhalhfajhflahlfaahalhfahfsl' } />
- If you are planning to add custom overflow menu buttons, you can do that by updating the
config
prop, as shown below. - For example:
<JitsiMeeting
config = {{
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"
}
]
}}
room = { 'ThisIsNotATestRoomName' }
serverURL = { 'https://meet.jit.si/' }
token = { 'dkhalhfajhflahlfaahalhfahfsl' } />
For more details on how you can use React Native SDK with React Native app, you can follow this link: https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-react-native-sdk