React Native Video Calling App – Part 8

Welcome to the 8th part of React Native Video Calling App tutorial. In this part of tutorial we will convert the web video calling client to mobile video calling client. So lets get started.

First we will install the required packages. We will install socket.io package and lodash package. Socket.io  will help us to create a client that can communicate with the server that we wrote earlier. Lodash will help us to do some object and array based operation/conversion in a single line of code, thus,  making our life easier and making coding process faster. To install the two package we will use the following commands :

Now, we can start with the coding process, and, this is how our web client looks once its converted to React Native :

In the above code you will notice that most of the function and coding logic are same as our web client. The most important change is that we are using React Native components instead of web controls. We are using Text, TouchableOpacity, View, TextInput, ListView, Button, Dimensions, StatusBar, and Alert Component instead of the html controls used in web client.

Second thing you will notice that, in web client we were loggin users username in console log, whereas, here we are using ListView Component. Now, don’t have to manually copy username from console log to call a user, instead, clicking on a username takes us to VideoCalling view so that we can make a call.

Apart from above two changes, we have created ‘VideoCallingApp’ component for what we were using a html web page in our web client, because, react works with concept of components.

So, our mobile video calling client is working almost same as the web client and it has all the features of web client. So, we have successfully converted our web client to react native mobile client. Now we just have to merger the calling feature with the video calling package, that, we installed in our previous tutorial. This we will continue in our next tutorials. Thank you so much for going through this part of tutorial.

Video Tutorial