react-native-meeting-sdk v0.0.25

React Native Meeting SDK

A simple few steps to integrate our React Native SDK and enjoy the seamless meetings in your app.

Installation

Install react-native-meeting-sdk with npm

  1. Run => npm i react-native-meeting-sdk

  2. Dependency conflicts may occur between RNSDK and your app.
     If that is the case, please run npm i react-native-meeting-sdk --force.

  3. add this script to your package.json scripts =>
  "update-deps": "node node_modules/react-native-meeting-sdk/update_dependencies.js"

  4.To check if some dependencies need to be added, please run the following script 
  => npm run update-deps.
  
  This will sync all of our peer dependencies with your dependencies.
  Next you will need to do npm install.

A few more steps...

• For Android, In android/app/src/debug/AndroidManifest.xml and android/app/src/main/AndroidManifest.xml, under the 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" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

• For IOS, SDK requests camera and microphone access, make sure to include the required entries for NSCameraUsageDescription and NSMicrophoneUsageDescriptionin your Info.plist file.

For Expo sdk > 50

• React Native uses event-target-shim@5 which is not compatible with react-native-webrtc's dependency on event-target-shim@6. To fix this, you may need to add a redirection in your metro.config.js file:

// metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
const resolveFrom = require("resolve-from");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (
    // If the bundle is resolving "event-target-shim" from a module that is part of "react-native-webrtc".
    moduleName.startsWith("event-target-shim") &&
    context.originModulePath.includes("react-native-webrtc")
  ) {
    // Resolve event-target-shim relative to the react-native-webrtc package to use v6.
    // React Native requires v5 which is not compatible with react-native-webrtc.
    const eventTargetShimPath = resolveFrom(
      context.originModulePath,
      moduleName
    );

    return {
      filePath: eventTargetShimPath,
      type: "sourceFile",
    };
  }

  // Ensure you call the default resolver.
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

• For Android,For icons to work, you should add these lines to app/build.gradle

project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf', 'AntDesign.ttf', 'Entypo.ttf',  'Feather.ttf', 'FontAwesome.ttf', 'FontAwesome5_Brands.ttf', 'FontAwesome5_Regular.ttf', 'FontAwesome5_Solid.ttf', 'Foundation.ttf', 'Ionicons.ttf', 'MaterialCommunityIcons.ttf', 'SimpleLineIcons.ttf', 'Octicons.ttf', 'Zocial.ttf' ]
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

• For IOS, for icons to work. Edit Info.plist and add a property called Fonts provided by application

List of all available fonts to copy & paste in Info.plist
<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>FontAwesome6_Brands.ttf</string>
  <string>FontAwesome6_Regular.ttf</string>
  <string>FontAwesome6_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

Potential issues

• React-native-reanimated failed to create a worklet :https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting/#failed-to-create-a-worklet

Usage/Examples

import {MeetingSDK} from 'react-native-meeting-sdk';

function App() {
  return (
    <>
      <MeetingSDK />
    </>
  );
}