# Integrate the SDK into your app

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

Your React Native application communicates with the Meeting SDK over the React Native bridge
primarily through the Meeting SDK instance.

The React Native SDK is a wrapper for the Meeting SDK for Android and the Meeting SDK for iOS.

The Meeting SDK for React Native is based on the same version of the native Video SDK. For example,
Meeting SDK for React Native 6.2.10 is based on the Meeting SDK for Android or iOS version 6.2.10.

The Meeting SDK for React Native is based on the same version of the native Video SDK.

For example, Meeting SDK for React Native 6.2.10 is based on the Meeting SDK for Android or iOS version 6.2.10.

> We currently support React Native up to version 0.75.4. Expo is currently not supported.

## Add the Meeting SDK to your project

Create a new project using the React Native CLI. If you have an existing project, skip this step.
npx react-native@latest init zoom-meeting-sdk

1. Install the Meeting SDK for React Native.
    ```shell
    npm i @zoom/meetingsdk-react-native
    ```
1. Add `implementation 'us.zoom.meetingsdk:zoomsdk:<SDK_VERSION>'` to the `dependencies` in the `android/app/build.gradle` file.

    Use the version number matching the NPM package, such as `implementation 'us.zoom.meetingsdk:zoomsdk:6.4.10`'.

1. To add permissions for the camera and microphone, add the required permissions from the list to your `android/app/src/main/AndroidManifest.xml` file.

    ```xml
    <!-- In Meeting Share/Annotation/VirtualBackground will need the following Permissions -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
    <!-- "Connect to the network" will need the following Permissions -->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- In Meeting "Audio With VOIP" will need the following Permissions -->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <!-- In Meeting "Device/Audio with bluetooth" will need the following Permissions -->
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
    <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
    <!-- In Meeting "Audio With VOIP/Share Screen Audio" will need the following Permissions -->
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <!-- "Preview/In Meeting Video/VirtualBackground/Share Camera" will need the following Permissions -->
    <uses-permission android:name="android.permission.CAMERA" />
    <!-- "Keep the CPU on in meeting when screen off" will need the following Permissions -->
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <!-- In Meeting "audio with Dial in" will need the following Permissions -->
    <uses-permission android:name="android.permission.CALL_PHONE" />
    <!-- In Meeting "share screen/MiniMeeting" will need the following Permissions -->
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <!-- "Foreground services and notifications"  will need the following Permissions -->
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
    <!-- In Meeting PIP Mode will need the following Permissions -->
    <uses-permission android:name="android.permission.REORDER_TASKS" />
    ```

1. Make sure to use at least `minSdkVersion = 26` & `targetSdkVersion = 35` in your `android/build.gradle` file.

    ```diff
    buildscript {
        ext {
    +       minSdkVersion = 26
    +       targetSdkVersion = 35
            ...
        }
    }
    ```

1. For security reasons, the Meeting SDK doesn't support cleartext traffic. To disable it, edit the `android/app/src/debug/AndroidManifest.xml` file.

    ```diff
    <application
            android:usesCleartextTraffic="true"
    +       tools:replace="android:usesCleartextTraffic"
            ...
    ```

1. Create a new project using the React Native CLI. If you have an existing project, skip this step.

    ```shell
    npx react-native@latest init zoom-meeting-sdk
    ```

1. Install the Zoom Meeting SDK for React Native.

    ```shell
    npm i @zoom/meetingsdk-react-native
    ```

1. Install the pods.

    ```shell
    npx pod install
    ```

1. To add permissions for the camera and microphone, add `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` to your `Info.plist` file.

    ```xml
    <key>NSBluetoothPeripheralUsageDescription</key>
    <string>We will use your Bluetooth to access your Bluetooth headphones.</string>
    <key>NSCameraUsageDescription</key>
    <string>For people to see you during meetings, we need access to your camera.</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>For people to hear you during meetings, we need access to your microphone.</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>For people to share, we need access to your photos</string>
    ```

## Import the SDK

After installing the Meeting SDK for React Native in your project, import `ZoomSDKProvider`.

```typescript
import { ZoomSDKProvider } from "@zoom/meetingsdk-react-native";
```

Wrap your app in `ZoomSDKProvider` and set the `ZoomSDKProvider` configuration properties.

```tsx
<ZoomSDKProvider
    config={{
        jwtToken: ZOOM_JWT_TOKEN,
        domain: "zoom.us",
        enableLog: true,
        logSize: 5,
    }}
>
    ...
</ZoomSDKProvider>
```

Get the SDK instance with the `useZoom` hook.

```typescript
import { useZoom } from "@zoom/meetingsdk-react-native";

const zoom = useZoom();
```

This context wrapper is required for the screens and components within the application that make use of the Meeting SDK for React Native. The values passed into the config property are used throughout your application, and are required to initialize the native SDK that is wrapped by this React Native SDK. Use `useZoomhook` from components that are wrapped by the `ZoomSDKProvider`.

To join a Zoom meeting, call the `joinMeeting` function.

```typescript
function YourApp() {
  const zoom = useZoom();
  const handleJoin = async () => {
     await zoom.joinMeeting({
          userName: "your-name",
          meetingNumber: "123456789",
          password: "password",
          userType: 1,
        });
  }
  ...
```

## Run the app

Bundle the JavaScript code before you run the app.

```shell
npm run react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
npm run android
```

Run the app.

```shell
npm run ios
```

## Table of `ZoomSDKProvider` config properties

This table lists the available config properties.

| Property  | Description                                                                                                                                                                                                                      |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| jwtToken  | Use your Client ID and Client Secret app credentials [to generate a JWT token](/docs/meeting-sdk/auth/) that your application passes into the Meeting SDK.                                                                       |
| domain    | Set this value to zoom.us as instructed in the Zoom Marketplace Video SDK guides to initialize the Android SDK and initialize the iOS SDK.                                                                                       |
| enableLog | Set to true to enable debugging if you wish to do so.While you are getting started, we recommend setting this property to `true`. Otherwise, explicitly set it to `false` so other developers will know why logging is disabled. |
| logSize   | The maximum number of log files.                                                                                                                                                                                                 |