npm package: @ninchat/jitsi-meet-rnsdk
Description: React Native SDK for Jitsi Meet.
Latest version: 0.2.2

# 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](#installation)
2. [Platform Specific Configurations](#platform-specific-configurations)
    - [iOS](#ios)
    - [Android](#android)
3. [Integration](#integration)
4. [Usage](#usage)

## Installation

- Install the SDK:
```bash
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:

```bash
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:

```javascript
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.

```Podfile
<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:

```bash
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:

```gradle
minSdkVersion 24
```

#### Update AndroidManifest.xml:

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

```xml
<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`.
```typescript
import {JitsiMeeting} from '@ninchat/jitsi-meet-rnsdk';
```
2. Add the `JitsiMeeting` view component to our app's UI:

```jsx
// 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: