Sample code

Warning

Please contact ZEGO technical support to obtain the sample code package, and then unzip it to retrieve the sample code folder.
The sample code provided in this example is only for demonstrating the functionality of the Super Whiteboard product. The sample code is open to the public for reference when developers integrate it. However, the example sample code itself has not undergone rigorous testing. If developers plan to use this example source code in a production environment, please ensure that you conduct sufficient testing before deployment to avoid potential issues that may result in losses.
This sample source code has only been adapted for desktop browsers. If you need to use it on mobile devices, developers need to adapt it for mobile themselves.

Preparing the environment

Before starting the integration of the SDK, please ensure that the development environment meets the following technical requirements:

React Native version 0.60 or above.
iOS 11.0 or above, with iOS devices or simulators that support audio and video (real devices are recommended).
Android version not lower than 5.0, with Android devices or simulators that support audio and video (real devices are recommended). If using a real device, please enable the "Allow Debugging" option.
iOS/Android devices are connected to the Internet.
Install Node.js，and it is recommended to use the long-term support version displayed on its official website homepage.

Prerequisites

A project has been created in the ZEGOCLOUD console and applied for a valid AppID and AppSign. For details, please refer to Admin console - How to view project information.

Sample source code directory structure

zego_superboard_rn_example
├─ Gemfile
├─ README.md
├─ app.json
├─ babel.config.js
├─ index.js
├─ metro.config.js
├─ package.json
├─ src
│  ├─ App.tsx
│  └─ config.ts
└─ yarn.lock

zego_superboard_rn_example
├─ Gemfile
├─ README.md
├─ app.json
├─ babel.config.js
├─ index.js
├─ metro.config.js
├─ package.json
├─ src
│  ├─ App.tsx
│  └─ config.ts
└─ yarn.lock

Run the sample code

Get the sample source code zip package from the beginning of this article.

Fill in the configuration file

In the “src/config.ts” file, fill in the AppID and appSign obtained in this article Prerequisites.

Install dependencies

After completing the configuration. Enter the project root directory, start the terminal and enter:
```
yarn
```
```
yarn
```
(Optional) If you need to run an iOS app, enter the following command in the terminal:
```
cd ios
pod install
```
```
cd ios
pod install
```
After completing the install, enter the following command to return to the upper level page
```
cd ..
```
```
cd ..
```

Runs on Android devices

Configure the development environment according to the guidelines of React Native official documentation Setting up the development environment - React Native CLI Quickstart.
Connect an Android device (a real device is recommended) to the computer.
Enter the following command in the terminal:
```
yarn android
```
```
yarn android
```

Runs on iOS devices

Configure the development environment according to the guidelines of React Native official documentation Setting up the development environment - React Native CLI Quickstart.
Connect an iOS device (a real device is recommended) to the computer.
Enter the following command in the terminal:
```
yarn ios
```
```
yarn ios
```