Add Voice & Video calling Feature in React Native using ZEGOCLOUD
Tags: reactnative, mobile, zegocloud, javascript
Published: 2022-12-10 20:21:08


On one of my **_React Native_** project related to Medical field required to add a Video calling feature in Mobile application & for that I search some third part libraries/SDKs. I found [**_ZEGOCLOUD_**](https://www.zegocloud.com/) SDK for React Native Video calling and turn out it was pretty simple and easy to integrate in React Native for Android & IOS

## Setup ZEGOCLOUD Account/Project

After signup to ZEGOCLOUD you will landed to Admin panel from where create a project with suitable name.

![create project screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4aj2kz1emigi4p13ota.PNG)

Their will be multiple options like Video calling, Live Streaming, In App Chatting etc., we will select [**_Video Chat_**](https://www.zegocloud.com/product/video-call)

![select use case for you pproject](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3vhf90g36bjz0g5jlly.PNG)

Click the next button and select Start with UIKits

![select name and UIKits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a21fj8xjbnmv0iipip7z.PNG)

![select mobile application tech stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjzhibxv3nva2thftg34.PNG)
1. Select React Native option for React Native Video Calling mobile application

You can also do some basic configuration from right side panel

![select app configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhx8mfwzya4v89idthwv.PNG)

2. Click save button on bottom right
3. Click on Quick start button but before click save the _**AppID **_and **_AppSign_**

4. Open `package.json` and add this all libraries & run command `npm i`

```
"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.9.1",
"@zegocloud/zego-uikit-prebuilt-call-rn": "^1.2.1",
"@zegocloud/zego-uikit-rn": "^1.2.0",
"react-delegate-component": "^1.0.0",
"react-native-gesture-handler": "^2.8.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-navigation": "^4.4.4",
"zego-express-engine-reactnative": "^0.21.0"
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uufps4b73m4kwh2xeva.PNG)

5. Create a component and add following code, it will show a button to join a call

```
import { NavigationContainer, useNavigation} from '@react-navigation/native';
import React from "react";
import { Button, View} from 'react-native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="HomePage">
        <Stack.Screen name="HomePage" component={HomePage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomePage(props) {
    const navigation = useNavigation();
    return (
        <View style={{flex: 1,alignItems: 'center',justifyContent: 'space-around'}}>
            <Button title="Call" onPress={() => { navigation.navigate('CallPage') }} />
        </View>
    )
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr7ptctv3qkkhxhjy33i.PNG)

6. Add a component for Video calling 

```
import ZegoUIKitPrebuiltCall, {GROUP_VOICE_CALL_CONFIG} from '@zegocloud/zego-uikit-prebuilt-call-rn';
function CallPage(props) {
  randomUserID = String(Math.floor(Math.random() * 100000))
  return (
      <View style={{flex: 1}}>
          <ZegoUIKitPrebuiltCall
            appID={1484647939}
            appSign='16e1c2b4d4c6345c8644546e8fe636d8b7e47d010e9b4a8825439ecd64ccee6f'
            userID={randomUserID}
            userName={'user_'+randomUserID}

            config={{
              ...GROUP_VOICE_CALL_CONFIG,
              onHangUp: () => {props.navigation.navigate('HomePage')},
            }}
          />
      </View>
  )
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz09co9j9kjlmhmjchl3.PNG)

## Add Device permission 

### Android
7. Go to file `project-name/android/app/src/main/AndroidManifest.xml `and add below code

```
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpc96lt5etou5lz2vuws.PNG)
 
8. Go to file `my_project/android/app/proguard-rules.pro` and add below code

```
-keep class **.zego.**  { *; }
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3zxrg5spggyktln82o1.PNG)

### IOS
9.Go to this file `my_project/ios/my_project/Info.plist`  and add below code

```
<key>NSCameraUsageDescription</key>
<string>We need to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need to use the microphone</string>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsfw6dyq621uft377oao.PNG)

## Run Application
Run on an iOS device: `yarn ios`
Run on an Android device: `yarn android`

Checkout [**ZEGOCLOUD**](https://www.zegocloud.com/) documentation for more understanding and other common use cases. You can get a sample [**source code**](https://github.com/DavidReloo/call_kit_demo_react_native) for React Native Voice & Video Calling demo from their documentation a