# Run sample app

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

The Video SDK for React Native sample app demonstrates many of the features you can integrate into your app.

Prerequisites:

-   [Environment setup](https://reactnative.dev/docs/environment-setup) for React Native.
    -   _Since the Zoom Video SDK uses native dependencies, you can use Expo with "[prebuild](https://docs.expo.dev/workflow/prebuild/)", but you cannot use the Expo Go app._
-   Node (LTS) & Yarn.
-   A Zoom [Video SDK Account](/docs/video-sdk/get-credentials/).

_See [Video SDK Plans & Pricing for Developer](https://zoom.us/pricing/developer) for pricing._

## 1. Create account and download SDK

-   Create a [Video SDK developer account](/docs/video-sdk/developer-accounts/).
-   Log in to [marketplace.zoom.us](https://marketplace.zoom.us/) with your Video SDK developer account.
-   Download the latest version of React Native Video SDK.
-   Unzip the file to your working directory.

## 2. Install platform SDK files

The React Native SDK is a wrapper for the Video SDK for Android and the Video SDK for iOS. The platform SDK files are not included in the wrapper, but you can install these as dependencies from remote repositories. We recommend that you use **yarn** rather than **npm** for the installation process as it installs dependency packages in parallel, resulting in better speed and performance.

## 3. Configure and run the sample app

-   Fill in the SDK Key & Secret in `config.ts`. For example, `react-native-zoom-video-sdk-1.13.10/example/config.ts`
-   Verify that the configuration is correct in `react-native-zoom-video-sdk-1.13.10/src/hooks/useSdkHandler.ts`:

```javascript
const DEFAULT_CONFIG: InitConfig = {
  domain: 'zoom.us',
  enableLog: true,
};
```

-   Verify that the example configuration is correct in `react-native-zoom-video-sdk-1.13.10/example/app.tsx`:

```tsx
export default function App() {
    return (
        <NavigationContainer>
            <ZoomVideoSdkProvider
                config={{
                    appGroupId: "group.test.sdk",
                    domain: "zoom.us",
                    enableLog: true,
                }}
            >
                <Navigation />
            </ZoomVideoSdkProvider>
        </NavigationContainer>
    );
}
```

Follow these steps to run the sample app.

1. From the root of the working directory, run `yarn install`
2. Navigate to the `example` directory in the working directory and run `yarn install`
    - If you're building for iOS, navigate to `example/ios` in the working directory and run `pod install`. You must do this once to run the iOS app. If you are using a Apple Silicon or experience an issue running the above, try this instead: `arch -x86_64 pod install`
3. To run the sample app, enter the command for Android or iOS from the `example` directory:
    - Android: `yarn run android`
    - iOS: `yarn run ios`

To see more details about the sample app as it's running, run the Android sample app in Android Studio and the iOS sample app on Xcode. Be sure to run the [React Native Metro Server](https://facebook.github.io/metro/) (using `yarn start`) before you run the sample apps in these IDEs. See the [Sample app walkthrough](#sample-app-walkthrough) for more details about the sample.

### Troubleshoot the sample app

For help setting up the development environment, see [Setting up the development environment](https://reactnative.dev/docs/environment-setup) in the React Native documentation. To install an iOS Simulator in Xcode, open **Xcode > Windows > Devices & Simulators**. Choose a simulator with the corresponding version of iOS you wish to use.

## Sample app walkthrough

The sample app provides code that shows how to use the Video SDK in a basic React Native application. You can [download the React Native sample app from your Video SDK app](https://marketplace.zoom.us/user/build).

### Folder Structure

The sample app's folder structure is set up like this:

```plaintext
example
|-- android
|-- ios
|-- src
|   |-- components
|   |   |-- icon
|   |   |-- menu-drawer
|   |   |-- text-input-row
|   |   |-- video-view
|   |-- screens
|   |-- utils
|   |-- app.tsx
|   |-- navigation.tsx
|-- app.json
|-- babel.config.js
|-- config.ts
|-- index.js
|-- metro.config.js
|-- package.json
|-- yarn.lock
```

The sections below go into more detail.

### android and ios

This application began as a vanilla React Native project using the TypeScript template (npx react-native init example --template react-native-template-typescript) which includes the android and ios folders. The native Zoom SDK was installed for both platforms in these folders. For example, the native SDK for Android was installed under android/mobilertc.

### `src/components`

This folder contains four components that handle UI throughout the application. The icon, menu-drawer, and text-input-row components have no dependencies on the React Native SDK. The video-view component demonstrates how to interact with the react native SDK and set up event listeners. The video-view component is exported as VideoView.

### `src/screens`

There are three screens used for this application:

-   `call-screen`- UI for video conferencing, chat and screen sharing.
-   `intro-screen`- Sets permissions for video/audio and provides UI to
    start or join a video session.
-   `join-screen`- Form for values used to start or join a video session.

### `src/utils`

Shared hooks live in `hooks.ts`. A handy JWT generation function is provided in `jws.ts`, but in a real-world production application, JWTs should be consumed from a secure, server-side source as outlined in the Zoom Marketplace Video SDK Authentication.

### `src/app.tsx`

This is the entry point for the `example` application. The context wrapper for the entire application, named `ZoomVideoSdkProvider`, is imported from the React Native SDK on line 2:

```javascript
import { ZoomVideoSdkProvider } from "@zoom/react-native-videosdk";
```

See [Import SDK](/docs/video-sdk/react-native/get-started/#import-sdk) for details.

### `src/navigation.tsx`

This simple navigation file creates a stack navigator with 3 screens and a drawer navigator implemented as a component.

### `package.json`

This file lists package dependencies as well as command line scripts that you can run.

-   Start an iOS emulator session with this command: `yarn ios`
-   Start an Android emulator session with this command: `yarn android`
-   Or start the Metro packager without starting an emulator session with this command: `yarn start`

### Remaining root level files

The remaining files such as `app.json`, `babel.config.js` and so on are used for configuration of a vanilla React Native project.