Sample app

Here we provide you with a sample application to experience ZEGOCLOUD's In-app Chat, and also describe how to run the sample code with React Native.

Prerequisites

• Go to ZEGOCLOUD Admin Console, and do the following:
  • Create a project, get the AppID and AppSign.
  • Subscribe to the In-app Chat service (contact us if the subscription doesn't go well).

• Platform-specific requirements:
  • React Native 0.60.0 or later
  • A real iOS device that is running on iOS 9.0 or later and supports audio and video.
  • An Android device or Simulator that is running on Android 4.1 or later and supports audio and video. We recommend you use a real device (enable the "USB Debugging" option).
  • Your device is connected to the internet.
  • Configure Visual Studio Code, search for the "React Native Tools" extension and install it.

Sample code structure

The following structure shows the subdirectory structure of the In-app Chat sample code:

react-native
├── App.js
├── Gemfile
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── main.js
├── metro.config.js
├── package-lock.json
├── package.json
├── react-native.config.js
├── src
│   ├── assets
│   │   └── js
│   │       ├── config.js
│   ├── components
│   ├── hooks
│   │   └── zim.js
│   └── pages
│       ├── action
│       ├── chat
│       ├── group
│       ├── home
│       └── login
├───────

Run the sample code

1. In Visual Studio Code, import the sample code package file.

2. Modify the config.js file under the src/assets/js folder with the AppID and AppSign that you get in the Prerequisites steps.

   export const appConfig = {
       appID: , // Fill in the AppID you get. 
       serverSecret: , // Fill in the ServerSecret you get. 
   }; 

   export const appConfig = {
       appID: , // Fill in the AppID you get. 
       appSign: , // Fill in the AppSign you get. 
   }; 

   If your project uses the "Token-based authentication mode", please go to the ZEGOCLOUD Admin Console to get a temporary Token for debugging.

3. Enter the root directory of the project, and run the yarn install to install dependencies. (for iOS devices, run the pod install command instead.)

4. In the root directory, run the yarn ios or the yarn android command to run the sample code.