npm package: @squer/react-native-jitsi
Description: Squer React Native Jitsi module
Author: Squer
Latest version: 1.0.5

# @squer/react-native-jitsi

Squer React Native Jitsi module

## Installation

```sh
npm install @squer/react-native-jitsi --save
```

## Usage (>=v1.0.5)

#### JitsiMeetView - `import {JitsiMeetView} from '@squer/react-native-jitsi';`
```javascript
      <JitsiMeetView
        onConferenceTerminated={conferenceTerminatedCallback}
        onConferenceJoined={conferenceJoinedCallback}
        onConferenceWillJoin={conferenceWillJoinCallback}
      />
```

#### JitsiApi - `import JitsiApi from '@squer/react-native-jitsi';`
- videoCall
- audioCall
- endCall
- setAudioMuted
- setVideoMuted

The following component is an example of use:

```js
import React, {useEffect} from 'react';
import {StyleSheet, View} from 'react-native';
import JitsiApi, {JitsiMeetView} from '@squer/react-native-jitsi';

const JitsiMeeting = () => {
  useEffect(() => {
    setTimeout(() => {
      const url = 'https://meet-ionos.seahagen.in/test'; // can also be only room name and will connect to jitsi meet servers
      const userInfo = {
        displayName: 'User',
        email: 'user@example.com',
        avatar: 'https:/gravatar.com/avatar/abc123',
      };
      JitsiApi.videoCall(url, userInfo);
      /* You can also use JitsiApi.audioCall(url) for audio only call */
      /* You can programmatically end the call with JitsiApi.endCall() */
    }, 1000);
  }, []);

  const conferenceTerminated = nativeEvent => {
    /* Conference terminated event */
    console.log('conferenceTerminated callback');
  };

  const conferenceJoined = nativeEvent => {
    /* Conference joined event */
    console.log('conferenceJoined callback');
  };

  const conferenceWillJoin = nativeEvent => {
    /* Conference will join event */
    console.log('conferenceWillJoin callback');
  };

  return (
    <View style={styles.container}>
      <JitsiMeetView
        onConferenceTerminated={conferenceTerminated}
        onConferenceJoined={conferenceJoined}
        onConferenceWillJoin={conferenceWillJoin}
        style={styles.box}
      />
    </View>
  );
};

export default JitsiMeeting;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    flex: 1,
    height: '100%',
    width: '100%',
  },
});
```

You can also check the [Example](https://github.com/apavaskar/jitsi/tree/master/example)

### Events

You can add listeners for the following events:
- onConferenceJoined
- onConferenceTerminated
- onConferenceWillJoin

## iOS Configuration

1) Navigate to `<ProjectFolder>/ios/<ProjectName>/`
2) edit `Info.plist` and add the following lines

```
<key>NSCameraUsageDescription</key>
<string>Camera Permission</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone Permission</string>
```
3) in `Info.plist`, make sure that
```
<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
  <string>voip</string>
</array>
```

4) The 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.
   ([Jitsi iOS SDK doc](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-ios-sdk))
```
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
```

5) Modify your Podfile to have `platform :ios, '11.0'` and execute `pod install`

*Jitsi iOS SDK version [`3.7.0`](https://github.com/jitsi/jitsi-meet/tree/master/ios)*

## Android Configuration
**TODO**
1) User *react-native* version [`0.63.4`]

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

*Inspired by [skrafft/react-native-jitsi-meet](https://github.com/skrafft/react-native-jitsi-meet)*