Let's build a VIDEO calling app with React Native (Tutorial for beginners) 🔴

what's going on just developers i'm super excited for today's build welcome here welcome to a new live stream and today we start a brand new tutorial a brand new build which has been requested so many times on this channel and i'm speaking about a video calling application similar to what similar to zoom similar to discord whatsapp skype viber and any other application that has an audio or video calling application we're gonna do it today guys so um what exactly we're gonna build today we're gonna build uh we're gonna start with at least a list of contacts that you have in your application then we're gonna go into the screens for uh calling someone and the screen here on the right is whenever you receive a call from someone an incoming call and lastly but uh very important is the call screen which is gonna have all the ui elements which will have the video stream of the person who is calling the caller and the colleague and so on so super excited about this build uh let me know down in the comments what do you think about this and if you waited for it um a little bit on the timeline so today we're gonna build only the ui for this project and in next week next friday at the same time which is 12 november at 3 pm gem team we are going to take this ui that we're going to build today and implement the video calling functionality to make this application um fully functional with both the front end and the back end this video is brought to you by vox implant uh vox implant we're going to speak more about that in the next video but shortly about them voximp vox implant provides a serverless communication platform and they provide api and sdks for video audio communication for sms chat and a lot of tools that improve the communication for your application such as language processing for example yeah what can be done with vox implant basically everything when it comes to communication being it in forms of text video or audio so starting from virtual call centers you can build this in cloud and allow your support team to communicate directly with people from your application you can build audio and video conferencing applications such as clubhouse which is for audio zoom google meets or even teams and also you can build peer-to-peer audio and video calling applications like whatsapp messenger facetime skype viber any other application and this is this is the scenario that we are going to use uh for our application to build this peer-to-peer audio and video calling functions you can also build a live streaming application like twitch or youtube and a lot of more application using the voximplant cloud cloud solution they have apis and sdks for a lot of languages and frameworks we have it for web for android ios react native flutter and even unity sdk so you are covered we're going to use the react native sdk so thank you very much vox implant for sponsoring this video we're gonna get into the details about how to use it how to implement and uh how to work with the documentation uh for voximplant in order to implement this peer-to-peer communication in the next video next week but back to our tutorial today what do you need in order to be able to follow along you will need the asset bundle at ss.nodejust.dev video call and also you'll need the react native environment setup uh if you didn't don't have it already set up on your machine check out this video i explained where step by step how to set up react native for windows so without further ado let's get started and jump into building our application [Applause] [Music] hello everyone how are you doing guys i see a lot of people today that's super nice your accent is super cute thank you very much okay can i add this with signal clone yeah definitely the feature that we're gonna build today you can integrate in the applications that you already build being it the signal clone or the whatsapp clone or the instagram clone any clones that you already built from from this channel you can integrate with the video and audio calling functionality that we're gonna learn today in the next video all right so um let's get started i'm gonna initialize the project and while we're waiting we're going to cover some questions from the live chat so here we have our first slide yeah let's start by initializing the react native project on our machine using the npx rack native init command so for that i'm going to open a terminal somewhere here come on i want to make it a little bit bigger so everyone can see this and let's do projects and here let's do npx react native ins in it and video call i don't know give it a name i'm gonna name it video call okay racknative started uh downloading the template and initializing all the javascript dependencies that it needs so let's wait a couple of minutes and then we can get started will you be using a library yes we're gonna use a vox implant sdk that will help us implement the video and audio calling functionality with twilio video no uh not we're not going to use twilio in this uh project we're going to use vox implant which is an alternative of twilio react native cli someone asked if we are going to use drag native cli or expo and for this project we're going to use react native cli mac os again windows suffers i'm using windows in that day-to-day job or if i'm recording videos uh pre i'm doing pre-recorded videos but when i'm doing live stream i'm trying to separate the workflow to two machines and my windows machine is now responsible only for the live streaming part and on the mac os system on the macbook pro i'm doing the coding so if i don't know for some reason macbook pro decides to stop working on crashes i still have a stream going on and i don't know i can run everything on windows or yeah it's just to separate everything there because i was doing everything on the mac os the live streaming and coding and it started from time to time it was overloading the machine and it started lagging and i got into the solutions of how to to improve that so that's why i don't know if it was interesting for anyone but here is the explanation uh sachin hi from batch zero hello how are you doing let me do some changes here i'm still waiting for uh for rack native to initialize the project so okay um could you build whatsapp uh without typescript with react native um i don't i don't remember if we use typescript for our whatsapp clone question to you did you see the whatsapp clone on the channel did you follow it because we did it will you add screen sharing and recordings uh i didn't plan for that yet um i intended i planned everything to be focused on one-on-one calling like peer-to-peer calling and that's going to be the focus of the live stream of the next live stream today we're going to do the ui uh but if you are interested in screen sharing and recording we we might do something about it actually hello how are you doing okay someone is suggesting me something related to the full screen but my audio becomes slow why is that happening oh yeah i was having some troubles with the live streaming software i don't know why but is it still happening that when i change scenes the volume changes i don't know you use typescript for all uh your applications no that's not true i use both javascript and typescript however i would recommend you to learn typescript and start using it in all your applications especially if your application is getting a little bit bigger it's going to save you a lot of time in future so all right yeah still change come on i don't see it from my software i'm gonna i'm gonna check it afterwards because i i also saw it but it changes so but back in our code everything has been installed uh so let's open our project let's first of all uh cd into the project and i called it video call and let's open it with our visual studio code i'll write code dot to open this directory if you don't have this alias you can open visual studio code and from there navigate and open your project so let me adjust a bit of sizes something like this and let's open the terminal i'm gonna go here on the top press terminal new terminal or you can do a command and the tick under the escape button okay so here let's start the development server for react native and here racknative will run and then we can open a new terminal by pressing on the plus sign and let's run our application on a device in my case uh i'm going to run it on ios because the ios simulator works a little bit faster on my system but this can work this will work both with ios and android so if you have an android emulator if you are developing on windows or linux you can do npm run android and run it on your android emulator all right something like this and now let's wait until the application is building who wants typescript tutorials now like i see that there are people who are saying that we don't understand typescript and so on uh if you are just getting started with react native or react.js i would recommend you to stick with javascript and don't over complicate your journey of learning recognitive or react.js by starting with typescript because you will have to learn both like two technologies at the same time react native and typescript so keep it simple start with javascript this way you will see some progress in your journey and after you get comfortable with react native or react just if you're learning react.js then and also once you start working with bigger projects with a bigger code base then i highly highly encourage you to get into typescript but once your react native fundamentals are uh well like you you you learn them well so after that get into typescript because it will improve your code quality uh by a lot it will save you a lot of time in future by catching the bugs early on in the development without having the unexpected bugs of working with different variable types and so on so it's it's a very very nice tool to have it under your belt um why it takes so long to build this application come on yeah like what christian is saying in the comments um is makes a lot of sense so typescript is basically the same javascript it's a superset of javascript so if you write javascript it's going to be a valid typescript code the only thing that is different in typescript is that you have to specify the type of all the variables uh you have to specify that type of for example very touring statement of a function and so on and this way you make your application type safe so if one function expects a string and in another place you are giving a number or an object it's going to tell you right away there that you're doing something wrong and like surprisingly enough like it catches a lot of bugs like uh it helps you a lot that's my two cents there we hate yes why are you going to cover calls even if the application is closed yeah voximplant supports calls whenever your application is closed the only thing that you have to do to pro to get this functionality is to integrate push notifications so for any new call that you receive once the application is closed you'll get a push notification and that will trigger the application to open and to show you the call so back to our code here i see that the application finished to build uh now it's bundling oh and we have it here all right so if you see this screen that means that you initialize the application correctly and um now let's have a look a little bit uh in the code that our application generated so here i'm going to start with abdojs because this is the entry file entry point in our application and as you can see if you scroll down a bit here is our application component and let's try to for example um i don't know here we see edit objects to change this screen so if i if i change some text here i should see it right away in our application changed so if that is done uh yeah you you are good to go what i usually like to do is to delete everything from the updates to start with a clean project so let's delete from application component i'm going to delete this scroll view everything that is inside scroll view so that we are left with a safe area view and status bar and that's it save uh let's scroll a bit to the top section this component we don't need it let's get rid of it like this uh application let's let's simplify everything here so let's delete that type of application because we don't need it i see people hate typescript is dark mode yeah let's also delete this one this one and the styles and for the status bar i'm gonna leave the probably light content save or dark to to be visible yeah dark content we don't need anything in the styles so i'm gonna delete everything here we might need the styles later on so let's leave the styles here now from the imports let's delete this import here everything that is not used that type let's save and now we have very very simple react native application to test if everything is working i should have left the text component and let's add here text hello world and i see the text hello world there that means that we have a very clean um project to start from and everything will make sense from here uh all right so uh let's have a look at the presentation there where do i have it okay so um we initialize the project we run the server we run the application on the emulator the next step is let's try to render a list of contacts as we can see here so the each row is pretty simple like it's just a text aligned to the left and we have a separator which is a simple line between them between the contacts okay so let's let's start to do it okay so um in this project yeah we're gonna start from something a little bit more complicated which is a flat list because we have to render a list of items to render a list of items in react native we can use the flat list which we will import from rec native flat list and instead of rendering the hello world let's render the flat list the flat list expects uh expects two properties it expects the data which is an array of data that we want to render on the screen so this array of data let's define it here i don't know const contacts equal an array of contacts i don't know add here some names so that we can test and see it there so the data is going to be our array of contacts contacts then it also expects a render item function this function is going to be called basically this is a component that is going to be rendered for each individual contact in our data array so for example uh if we have three items here this render item is going to be called three times and render the component that we are gonna give here 3 times for for each contact that we have here so let's define this function it's going to be a function like this which will return a text let's start like this contact contact let's save it put in the same line automatically so i already see three uh lines all of them saying contact contact contact that's okay but we are trying to actually render the name of that contact so to receive the item that we are currently rendering we can receive it here for the properties as item this item is going to be one of items from this array so let's render it here item i already see them oh god now it's better uh all right so here is the three lines with our contacts um let's let's give a style to the our safe area view and let's do it as page or something like this and also it's styles and also let's give a style to the text in order to increase a bit the font size styles dot contact name so back in our styles here below should i zoom in a bit is that good enough so in the styles let's define the style for our page and also the style for our contact name the page for the page i wanted to add some padding because everything is close to the border side now but i want to give some spacing around so page no probably we will have to put our flat list inside the view like this so let's import the view from react native here on top and let's take the style from the safe area view and put it to this view save and now it's better we see some spacing around even 15 is gonna be okay right okay so for the contact name uh i'm gonna do font size um 18. i've i thought that the 16 is by default but i see here that it's a little bit smaller by default so let's put it as 16. let's add some margin vertical in order to have space between the items themselves so margin vertical 5 is going to be good now what else do we have here we have this line separator between items uh to do that flat list has a item separator component item separator component which is going to be again a component that is going to render a line so how do we do the line i think we're going to do it with the help of a view we're just gonna have a view of one pixel height and this is going to be this line that we but we need between the items so style styles dot separator let's define the same operator style i'm going to start with just to see if it's there with 10 height background color back ground color let's do a light gray save yeah i see web v square pixel wear because we have width 10 height 10. so for our width we will need 100 like this good and for the height we will need probably one pixel yeah i think it's it's good uh the background color probably should be even a lighter shade of gray so let me try to to do a color picker and let's try to do a very light shade of gray here copy save even later come on like this hmm it's like almost white yeah i think this is this looks better uh okay so i think that we i'm okay with the styles of this um [Music] of these items now what i want to do is to bring in some dummy data in order to have a little bit more uh items here in this list so i'm gonna open our dummy data folder uh okay come on live streams and from data let's grab a context.json and i'm going to put them where let's uh create a folder new folder called assets and inside this assets folder let's add one more folder called the data now i'm going to bring the context.json in our data folder you can get the this file with the data screenshots and this pdf following the url in the description below so contacts contacts is a json that contains an array of objects for each individual contact so it's a little bit different from what we have here because here we have an array of strings but in context we have an array of objects and this is quite similar to what you would receive from an api after you request all your contacts so that's why i define them as objects all right let's go back in our app.js instead of declaring the contacts here i'm gonna import them so let's do import contacts from this directory assets than data then contacts now let's give them there and what we see here we see an error object are not a valid as a react child this is coming from trying to render the item here if we look what is an item in our contacts array we see that it is an object so we are trying to render an object when that's not possible in react native what we are actually trying to render is the user display name property of our item so let's do item dot user display name save and now we see the user display name when i see more lines like this i think that we can increase the margin vertical to 10 yes to to have a little bit more space there and if the list will is going to be very very long you're going to be able to scroll for it yeah i think that's that's good even more does it ask for more probably 10 is was ok so 10. hello rahul thank you very much why not using timescript that's a good question we discussed a little bit earlier so we have this flat list we have um the list of items now what i want to do is do you want me to implement the searching capabilities this was a very uh this was a assignment for the squid games video that is going to come very very soon on the channel and yep one of um games where was to implement the search functionality so let's let's cover it today here but before covering the searching functionality i want to start moving code from our application component because i like to keep the code clean and i would like to separate them into different files for each individual component so our application should be as minimal as possible because this is the entry point so from application we just do all the global stuff like defining context or rendering the navigation and so on but everything else i like to keep it in a source directory let's create a src directory and here i'm going to create a new folder called screens that will contain all the screens of our application and another folder component which will contain them individual components that we will need like technically both screens and components will be react native components but the screens are meant to handle the logic of each individual navigation screen so in the screens i'm going to define a folder for our contacts screen and let's in the context screen add the index.js and here let's do let's define the component for our contact screen so import react from react then react then let's define the contact contact screen which is going to be a functional component like this and this is going to return something on the screen and what is going to return everything that we already defined here in the application so let's copy the view the flat list the view and the flat list let's take it from here and let's bring it in our contacts screen let's paste and we're gonna have to import a couple of things here we will need to import a view a flat list and a text from react native save uh also the style sheet we need to import stylesheet like this i think in our application yeah all the styles uh from app.js they belong to the context screen so let's bring all of them here for the page contact name and separator what else we need to make sure that we export this file this component so let's go below and do export default our component context screen and i see here a red warning that context is not defined yeah that's because we need to import the contacts data from dummy data here but the relative path will be a little bit different so it's one folder up we go to screens one folder up we go to source one folder up we go to root and then assets i think it's it's this way yeah we're gonna see if it works now in our app.js i will not need these imports only these two and i will need import contacts screen from source screens contact screen and let's just render it in our application all right now we are back to where we started but our application file is only 24 lines of code and once we will develop more and more feature is going to be kept pretty clean here so i can close our update.js and as i said i wanted to show you how to implement searching functionality so let's start by by what uh here is the search bar okay let's start by defining this search input box to get the input from the user we have text input component in react native so let's start by text input render it with a placeholder because if we don't put a placeholder um we're not going to see anything and we will think but it's not working the placeholder will be search and i see the search placeholder perfect now uh what do we have to do to give some styles yeah probably we can add some styles too do this so text input style styles dot search input search input let's define the styles here and i'm gonna first add a background color background color light gray let's add some padding 10. uh let's make the corners round with border radius of five and yeah that's probably it i think that the light gray is too dark so if i use this one as a background color yeah i think this one looks a little bit better all right so now let's start as we have the styles already there let's start to implement some of the functionality so the first thing that we have to do is we need to bind a state variable to this text input because in the current circumstances if i write something here there is no way to know in our code what is the user writing if we want to keep track of what is the user writing and to take action based on the user input we will need a state variable so let's import use state from react and let's define it here as a first line in our component so const use state and the default value is going to be empty string because initially we're not searching anything the use state will return us an array of two values the first one is the value itself so search term and the second value is the setter the function that will update the value in state and will trigger a re-render so we usually call it set and the same name search term what we can do with this we can first give to the text input the value of our search term and secondly we the text input has a callback function which is on text on change this function will be called every time the text input changes so and it will give us that text of a change the new text so what do we have to do with whenever we change the text changes we need to update it in state so like this save and now if i write something it works as it was working before but also we uh i don't know we can do console log here as search term and we have an access to this search term in our code let me oh no open the debugger so command d on mac or control no it's not d debug with chrome so if i look here in our chrome console and if i write something here i don't see anything yeah i should have pressed on the messages and here i see the value of our text input updated perfect now uh now now now um what do we have to do now um we will also have to keep our contacts in state because they will the data that we want to render in the flat list will be dynamic so whenever you search you'll see less items in this in the list and that's why if this data is dynamic we need to keep it in state so whenever we will update it it will trigger a re-render and we will save updates directly on the screen so let's do let's rename this from import context to import constant contacts or import dummy contacts don't call them dummy because our state is going to be contacts where our state can be filtered contacts set fill third contacts use state and initially the initial value we can give dummy data we can give all of them here dummy data oh come on damn data so instead of giving context to the flat list i'm going to give a filtered context save so initially we don't see any changes because we didn't do anything now uh we need to add a dependency add a side effect on the search term state variable basically every time the search term changes we need to update the filtered contacts to add this kind of side effects we have a use effect hook they use effect if we use effect we'll receive first a function which is going to be called and secondly an array of dependencies our dependency is the search term so how does it work whenever the search term updates changes its value this function in our use effect is going to be called so whenever it updates we need to update the filtered contacts so const new i don't know contacts equal to to the filtered dummy contacts dummy contacts dot filter filter and for each contact how do we want to filter it how do we want to decide if we want to leave it in the list or not we need to decide it um if the contact name matches the search term so we can say contact dot user display name if it's equal to search term when we want to leave it in our new contacts and using the new contacts i can update the filtered contacts new contacts like this save let's see what's going on here with my application hey what's going on here uh let me check contact dot no i already updated it if it's equal to the search term okay so reload application reference co is not defined what kind of call yeah i think it's is the world version just all right let's try to restart the server and to run our application oh come on npm run ios i have a doubt not related to this project but is redux necessary for small project uh my answer is no i don't think it's necessary for small projects you you can implement the global state management in especially for small application in much easier way um i would recommend uh recoil for small projects and even bigger projects it's quite easy to to learn and recoil and it's very very similar to the standard state like local state that you know in react and rack native or if you don't want to learn anything you can go with a context api you can achieve some kind of global state management with context api but context api are not built for state management so downloading why so long come on it's 100 and it stops how can change package name of application with react native for android you can manually do that through android manifest but because the package name is used in a lot of in multiple places uh if i'm not mistaken there is a tool to rename your project so try to google it like rack native change package name or something like this and there should be a tool come on what's going on here let me try to comment out the use effect nothing nothing happens did i do an error somewhere it's weird so let's do with clean cash okay we're back to where we started let's uncomment our use effect save initially we don't see anything there but if i paste for example vadim 7 it will show me this this contact so as you see it works but this is not the best way to implement searching so one way one issue with researching is that if i write it with a different uh case for example not capital s but lowercase s it's not gonna return me the item so to fix that we're gonna compare the lowercase uh to lower case to lower case the lowercase version of both name and the search term so two lowercase it's important to convert both of them to lowercase in order for it to work and in this way like it doesn't matter what is the case it's going to return it another improvement here is to search to have partial matches not complete matches so for example if i write only vadim show me all the vadim that you have not don't ask me to write the full name there to implement that instead of checking with is equal if a name is equal to the search term we will compare them with that dot includes function and we'll say if the user display name includes the search term in in itself save then uh keep it there so that's why if i don't have anything it will gonna return all of them if i do a it's gonna return all the items with an a there so yeah as you can see searching now works yeah this is the challenge that um with people received in the squid games and a lot of people like had troubles with this and that's why i decided to cover it today okay so from this screen i think we we are good right yeah let's move to the next screen and because yeah we still have a lot of things to do today and later on we can improve and implement other features that you are interested in so the next screen is the calling screen the calling screen will first of all display the the video camera stream as a background then it's going to display on top the person that you are calling the name the the number and what's important here on the bottom is the icons as buttons like the buttons with icons so yeah we're gonna have a lot of things to do here what are we starting with very simple and useful search functionality yeah thank you very much okay so um in order to implement the calling screen let's start by defining a new screen in our source screens folder so let's do a new folder and it's going to be calling screen calling screen let's define the index.js and here i'm gonna use the code snippets to automatically generate this boilerplate you can copy it or check out the vs code extensions that i have published on the channel sometimes ago and where i explain how to set up this um this plugin that will help you generate the boilerplate so here in the text let's just say calling okay now let's go back in our up.js and import calling screen from from source screens calling screen and let's replace our contact screen with calling and if i do so i should see calling here on the top if you see this it's good let's close everything except the calling screen and we can start implementing here the features all right so what do we have there we have we have a background image for vet i'm not gonna implement the background image or video because this is gonna be this is gonna come from the vox implant sdk and we're going to implement in the next video today i'm just going to do um i don't know for example a view here a view a view with style let's say um camera preview and the text is going to be inside this camera preview okay camera styles dot camera preview styles dot camera preview the text is gonna be not calling but the name of a person um so styles styles dot name and there is one more text underneath there for the ringing and the name so ringing plus three one two two two two two two styles dot num phone number phone number okay let's start with this let's start with this and let's uh import the stylesheet from react native styleshed and let's define the styles here on the bottom styles equal stylesheet.create and here we will have a camera preview camera preview we will have the name and we will have the phone number phone number so for the camera preview i just want to add a background color i don't know give me some good background colors color picker it's gonna it looks bad probably but it's okay okay so let's do flex 1 in order for this to disappear that's not what i wanted to do camera preview yeah because this also needs a styles dot page page the page right here flags one did not work [Music] because the page as well should be flex one no calling screen where does it sit calling screen in the application.json calling screen save area view okay okay and i define height 100 for our page uh so that the page is going to take the whole space of our screen and for the camera preview now if i add one percent a flex one yes it will spawn now through all the available space um okay okay so it will also align the items align items center to make sure that the items are in the middle and it will have some padding i don't know 10 no 10 like 50 or something like this so for the name for the name uh it's going to be font size 30. uh font weight bold to make it bold and the color is going to be white like this okay and below is our phone number which is font size probably 25 we don't need a font weight for it i don't like having padding 50 to our camera preview so i'm gonna leave 10 and for the name itself i'm gonna add some margin top to move it a little bit to the lower so margin top 50 yeah something like this it's too much so for the phone number the font size 20 probably is going to be okay and margin bottom 10 to move them a little bit apart yeah probably that's that's okay i think even more here margin bottom 15 yeah like this okay so now we have our camera preview there um what do we need we need the next is on the bottom here to have this um box with all the icons that we need there so it's gonna be a view a view and here we're gonna have all the icons right i'm just gonna add a text here for now icons to see them there and i need to remove the background color red from our page so this view is gonna be the styles dot bottom um warp button container button button buttons container something like this buttons because there are multiple buttons there so the buttons container has a background color of what's there a very dark gray something like this or we can use dark gray now okay this is better uh let's add some parting to it like then what else does it have it has these round corners round corners but only on the top so we can do uh border top left radius to 15 and border right reduce as well to 15. save okay so i will also move this buttons container inside our camera preview here save and buttons container i need to align it to the bottom of the screen buttons container if i do align self flex end will it move to the bot no not the line itself a line not a line buttons container i can simply do here as a live hack not a life hack just a hack a view with a flex of one will move will be between everything and will move these icons there i don't like it it's not the best one but i forgot the align self version of the vertical stuff so having this view in between that will take all the available space it's going to move the icons container on the bottom and what i also want is to remove a padding of this container on the bottom so that the icons can sit flat to the screen so camera preview padding uh is gonna have padding top and also padding horizontal basically everything except the bottom now the icons are there and button container we can define a width of 100 percent save hmm i don't like this this part so we're gonna have to move some things around margin top auto oh justify self probably that's what people are saying that's what i want you to do with the button container just myself just if no there is no just myself here margin top can work margin top auto yes margin top auto no i will move a couple of things around um buttons container the buttons container i'll move them outside the camera preview like this and the background color i'm gonna add to the page itself so now everything is how i expect them to be and i don't even need the margin top there i don't need the weave 100 yeah and everything else should remain similar thank you very much guys for helping me in the chat okay for the icons um we are gonna have to install the react native vector icons in order to have access to a big set of icons so here it is um yeah it's called react native vector icons and it contains more than 3000 icons that you can use so let's start by installing the plugin in our project npm install react native vector icons uh someone told me that from the new version of vector icons you don't need to import this list of fonts so let's try that not sure give me a simple icon for example this one i'm gonna open react or vector icons directory and this is uh web but not for expo this one so here i can start searching an icon for example here i need what um camera right camera where from oh this one so yeah that's what i wanted the ios camera reverse okay and it's from ionicons okay let's do that one more step if you are working on a mac os system you also need to do npx pod install this will install the native dependencies need to install the following packages put install where it went because i had it okay never mind installing and yeah this is going to install the racknet to vector icons in your ios project uh put installation complete okay perfect now let's scroll here and let's do import your nikons ionicons from vector icons slash unicorns so here let's do like this the name is gonna be where camera reverse this one unrecognized phone family ionicons let's try to run again the project on our npm run ios to make sure that it includes the new dependency and if it doesn't work we're gonna have to make one more extra step i'm trying to see if it's actually not necessary that that step do you recommend learn first uh node before react native as a front-end developer if you want to be a front-end developer no like you don't need node.js however you need javascript so learn first of all javascript and then racknative let's say hydrated drink your water no actually i see the same error which means but someone just lied to me and we need to take this extra step so what we have to do is go back to our reaction to vector icons here and if we scroll down a bit uh for the here you should see list of all available fonts copy paste in info.plist so let's copy this one let's open our ios directory here ios can you see i hope so the name of our project video call in here there is the info file let's open this info file scroll down where you see the closing tag of dictionary verdict so let's add a couple of lines before it and let's paste the array also make sure to yeah so v here should be the key ui up fonts all the array of keys and then closing tag of dictionary let's save uh and let's run again the application npm run ios for android for android uh for android option with gradle recommended yes let's copy this line and we need to add it to android app build.gradle android folder application not this build.gradle but app then build.gradle and let's scroll down down here and as the last line we can add apply from rack native vector icons fonts and that's it uh at the end of the video i'm gonna try to run it on android but i can do it right now as well npm run android to see if they work so here on ios we work like it's super super small the icon but it works so i'm gonna go back in our uh calling screen and i'm gonna say size should be 30 yep probably like this and the color and color should be white like this yes now let's add them inside the view because we need that circle as a button so to style them like this i'm gonna add them inside the view this icon come on and this view is gonna contain style dot um icon button icon button yeah probably so let's style them here i can button first of all it should have a background color uh similar to this one but i don't know a bit lighter a bit lighter so color picker like this probably save okay um it should have a padding of 10 and it should have a border reduce of i don't know let's give it a lot because we just need it to be round like this um the android application ran but gave me an error so let me try to restart it and if i take this container and add more icons for example four save they will be stacked um from new line each of them so to fix that our buttons container buttons container should have a flex direction row to display all of them in the same row save perfect and on android it works as well i just ran them and i see the icons which means that we successfully uh linked the react native vector icons to our android project so i'm going to close this emulator for now and keep working for one ios another thing that the buttons container need is the justify content uh in order to [Music] to spread the items uh apart like not to put all of them at the beginning but to do a space between for example and this way they're all gonna be spread apart like this i think they should be a little bit bigger right padding i don't know 15 or something yeah and the padding of of a container as well 20 yeah probably this this is better um oh my god i see here a nice comment from one of the channel members so sergey is saying hello everyone i studied react uh for over a year started studying mobile development with adem i finally got my first offer thanks vadim you're the best everything you do makes you better oh my god these messages like mix makes it everything um everything that i'm doing here on the channel and all the effort that i'm putting in building all these projects and doing everything on the channel like everything now makes sense so congrats thank you very much for your message and i wish you good luck with your first job or first gig if you want to give some more details for other people that's going to be nice all right so back to our project let let's keep going because people need to get jobs and offers let's try to find uh other icons that we will need there just to make it look better so we need there what a camera camera camera camera i need it from somewhere that has both a camera and a camera crossed camera of this one uh camera and camera off from material community icons okay let's do that so from i'm gonna copy this one from material i'm gonna call material icons and it's gonna material community icons uh the second one here let's replace it hey sergey thank you very much for your donation oh my god thank you thank you all right so material community icons what do we have there camera off yes is this one mic microphone off or something like this let's just give it a try like this mic off no microphone off yes nailed it and last one is the red one with them how's it called i don't know call oh phone hang up like this also from material community i can i love it material community icons the name is phone hang up and here i will add some more styles to this button because it needs up to we need to override the background color so put the styles inside an array and the second the second object in this array is going to be the style that we want to override so background color let's do red like this and now it looks pretty similar probably the red is not perfect but i'm gonna keep going i'm not gonna stop for this one okay um what else the thing is that i would like everything to to go like below the notch you know in order not to have this wide on the top and on the bottom to do that um we need to go back in our uh app.js and here we have this safe area view this safe area view is the one that makes sure that our content inside does not go under the notch so we would have to delete the safe area view if i save now everything goes below and above the notch which is okay on this screen but if i do it on the contact screen now our search bar is under the notch so what i will do no go back in the context screen basically this is going to be fixed later in the video with a navigation so don't worry about this let's keep going so call here we have it all right perfect yeah i think we have everything from this screen i don't know we can increase the padding on the bottom there for the buttons container so we have padding and we will do padding bottom uh 40 to have it more like this yeah looks pretty good looks pretty good i'm interested in your course i will buy uh asap thank you very much i'm still i'm still working on it it's it's quite a lot of work there and i hope to to be done by the end of a year with a course and in the beginning of the next year i'm gonna open it to the public so you're gonna be able to join it but yeah everyone who is interested in joining the full stack mobile development developer course which is coming in the beginning of the next year and the course is going to cover uh it's going to be the similar format that you see here on youtube but it's going to cover 10 more 10x more content and more systems and features in um [Music] in by building two applications there so one of application is the dual lingo clone which will cover the rack native basics and vr i'm to go through all the details of the fundamentals of react native before jumping into these big projects yeah and that's going to be a best way for any beginners to get started and then the second project is going to be an intermediate to advanced course uh where we will build an instagram clone with with a lot of features there like the following system the animations like stories the liking system notification push notification building publishing testing um ci cd to automatically build your application and so on so if you want to learn all of this make sure to join the wait list by going to academy.notjust.dev join the waitlist and after that i'm gonna update you with when it comes when it's available a question how difficult would it be to implement this in the signal clone it would be cool for this type of new features to be implemented in that app to make it even more functional uh yes it's possible like everything that i'm doing here you can do invest signal clone so basically you define all these new screens for the calling features and in the next video you're gonna learn how to implement the actual calling functionality so yeah i encourage you to take this one and implement it in one of the application that you already have i decided to do it as a separate project so that everyone will be able to follow along even though we didn't follow other clones and projects from the channel all right so let's move one so what do we have here we are done with this screen right as i said yeah most probably yes so let's go to the next one it's the incoming call screen incoming call screen it's kind of the same it's kind of the same here on the bottom the buttons are different but everything else should be the same so for the incoming call uh the easiest way to go about it is to duplicate this one shall we or it's gonna be a lot now let's let's start it from scratch so in the screens let's go new folder it's gonna be incoming call screen incoming call screen here let's add the index.js index.js and let's do react native functional export let's rename it to incoming call screen let's do save to fix all the issues here in the text i'm going to do incoming call save now back in our app.js let's import the incoming call screen from incoming call screen let's copy the name here and let's render it instead of the calling okay i see it it's somewhere there which means that we can close our application and go here i'm going to try to bring some some of the styles from here for example for example this tool for the name and the phone number very similar there as well so like this let's define the styles by importing the stylesheet and const styles equal stylesheet.create now i'm going to bring in the name and phone number style from here from calling screen to our screen here save okay they are there the only difference is i like this background image i think it's from ios right shall we add it as a background image there ios background image uh something like this yeah let's let's work with this one so save as image okay i'm gonna bring it in our um let me close everything in our assets i'm gonna create a new folder images and i'm gonna bring this image here let me rename it to no no delete rename ios [Music] background and also in order to simplify your work workflow i'm gonna copy it and add it to the asset bundle there so just not to forget that but yeah so let's import that um that image so import background from from let's move a little bit here then assets images and what's the name ios bg and also make sure to add them png advanced okay we have a background so i'm gonna um you can start with an image so to render it as a image here image the source is going to be background save image source background and style styles dot image or background let's add a weave 100 percent um source bg styles bg background color red what's happening here view styles let's add styles dot root and in the root we have yeah height 100 percent here hmm what's going on red no something is not working function fb reload all right let's try to rerun our application fail to launch emulator oh no i don't need it on android come on i need it on ios why not image background bro yeah i want to get there i want to get there i want to show it with an image and i'll explain it just not to confuse everyone um what wrong am i doing here debugger what okay let's try to restart the development server and let's give it a go again could you do a booking up like buxy or you have it already uh we have done airbnb clone okay so here is the image perfect perfect perfect um now let's clean the roux doesn't need the background red the here i think it doesn't need a height and a width no it needs the background needs to be full width and height and one more thing the image needs a cover mode or a resize mode resize mode as cover in order to cover all the area okay so the thing is that now our our text is not visible because they are below our image so if i do height here 50 the text and if i do here background color red for example you will see the text here the thing is that we need the text to be on top of this background image so to fix that you could play around with some uh absolute positions matriarch native has a cool component called image background an image background uh has the same properties as the image itself however for the image background you can add components inside it and the components inside it are going to be rendered on top of the image background yeah like this you cannot do this with a image it's going to give you an error so i see already the text on top right so for the height 100 percent okay or is it better to play with flex one yeah let's leave it like this background color red for the root we don't need that uh okay so image background background here uh we will need to say that we want our items align items center like this and we want a name let's add some padding as well padding 10 and our name has margin top 50 is it being applied yeah margin top 50. i know 100 yeah probably this looks better all right so here is our screen now what we need to do is to display these icons here on the bottom my problem is there is no owner dashboard for airbnb application could you do one for smaller businesses and not property so for barbers and other services that's a good idea like like a booking service for yeah that's that's an interesting idea we can think about that okay so what do we have we need via the buttons themselves so remind me message decline accept uh okay it's also gonna be inside the image background but basically we don't need the root here because our image background is going to be the root so if i remove it we are good to go perfect now here we will have we will have either two rows or two columns like a basically a grid tube for two so let's start with the rows view the first row will contain two two buttons here remind me and message so it's a view with an icon and then a text i'm going to add vikon in a moment remind me and let's do another view here for what message message message remind me let's bring the icon clock i don't know how is it called alarm clock alarm oh here material community icons no let's go for ionicons so let's import from and for the remind me it's going to be a name alarm color and size i don't know 20 probably more 30 yes that's better we're gonna style it in a moment now let's bring all of them a message message nothing in ionicons and typo let's do in typo okay and the name is message yep all right and we need one more so this okay we need one more row of this view like this and here vikings is decline and accept the text let's remove the decline and accept okay the klein x oh this one tick i don't know okay let's import this one and for the decline it's gonna be x do you think it's v for valver one no it's not accept v i don't know how to to call it how to search for it check yes check why i wanted to write yeah check from here perfect thank you very much check checkmate okay now let's try to style them so basically styles this one is going to be style dot row we want to styles we want to display them in the same row okay um voter ones style dot icons container for this one as well uh the text a lot of styles here so the text is going to be icon text and here i can container for the text okay let's start by styling these ones so we have row we have icon container and we have icon text let's start with a row because this one is simple so justify content row will flex direction i wanted to say okay hey xdreamline just became a channel member thank you very much thank you and welcome to being a noja's developer member on youtube here daniel hello thank you very much for being here if you will stick around the live streams for a long period of time there is a chance that you'll become a developer soon uh what else i want justify content space between and i want the row to have a width of 100 percent e something like this no space between but let's do space around space around okay like this remind me all right and align items center no this is already not for the row i want to align the items inside the icon container so here align items center like this the icon text should be color white i can text nothing changed text style not styles make sure not to make this mistake style save okay for the text i can text i can do margin top 10 to add some space around them yeah like that so let's do the same for our buttons here you know what they should also be icons container items container this one icons container okay icons container let's do margin vertical 20 okay and in for these buttons we need to put the icons inside another view with this uh round corners and with red background and blue in that case so for the decline here let's put the icon inside another view only the icon should be there here styles uh i can button container so basically it's not just an icon it's an icon button container and let's do the same for the second one okay i can button container should be let's start with a background color red perfect should have padding 20 and border radius border radius are 50 like this okay the icon should be bigger there right to change the icon size we can go here what 50 yeah 50 but decrease web padding so padding to 15. yeah or even 20 was okay okay okay um and also let's add some margins to it margin 10. is it too big no i think it's okay for the text let's copy the style and give to the accept icon text and to the decline oh my god it's so much styles and jsx here only for a couple of buttons uh for this row in order to align them on the bottom let's add an inline style here as margin top auto and this will move everything down like this uh the background of the accept button should be changed as well so accept accept decline except here okay let's add one more style for the background color blue light blue light blue oh no not fat can i find it myself something like this yes it's almost identical you see the eye of an eagle how do you learn new technologies you follow tutorials or just read documentation and google it if you're asking me yeah nowadays i'm mostly learning from documentations especially when you're working with well documented technologies that's yeah but in in the beginning like when i started out i was following tutorials as everyone does because when you just start getting started all the documentation is kind of difficult and doesn't make a lot of sense for for newbies so stick to the video content if it works for you and vikon's too big vikings are too big oh no what happened okay we are back vikings are too big um do you think so i think the padding is too big so 10. and probably not 50 but 40 40 and here 40. and increase the padding again 15. yeah probably this is better okay does it look good i think it does the textviewer is different so the text is not ringing but what's up video and yeah everything else is perfect like this you know what before moving forward let's also just define them the click callback for these buttons because right now if we click nothing happens but later on in the next video we will have to implement the click handlers so let's do them now and so yeah it's going to be ready by the next by the next time in order to manage click click events like on press there is a component called pressable in react native so let's grab the pressable and let's which are our buttons i think we will need the decline so this is the decline let me add some comments here decline button this is accept button so for the decline button let's um replace the view that contains uh everything including with decline text and the icon let's replace this view with a pressable uh the pressable has similar properties as a view so if you just replace it and save nothing is gonna break because they are interchangeable however the pressable has one more extra property i mean it has a lot of them but one that we need today is on press event so one press is going to be a function that we define in a moment on decline let's say we're going to define it shortly but let's do the same for the accept so pressable on press on accept on press on accept now let's scroll down and before returning let's define this two functions that we used on decline decline it's going to be a arrow function and here let's simply console worn on the client i'm using coastal warn just in order for you to be able to see it on the screen here i forgot the equal sign and let's do const on accept the similar way now we don't have any functionality but let's just make sure that it's there and we can add functionality later accept save so if i press now on the decline i see the console worn here on decline and if i press on the accept i see on accept and you don't have to press specifically on this icon you can press on that decline text because we encapsulate it in repressible both the icon and that text so that's why it works like this all right so this screen i think it's done you could uh import alert alert and do alert the test to have more visual of it yeah you can do that as well but you have to import things and like i i it's a lot of work just to show that it's working you can do alert alert on on decline press or yeah this is first title and then decline pressed and when you press on the decline it's gonna show you this alert but we don't need it at the moment okay yeah the only thing is that this console worn uh will not show in production they are showing only in development mode however the alert is shown in production as well that's something to keep in mind all right guys so um should we raise it a bit to add some padding on the bottom not to touch the so bg bgbg padding bottom uh 30 or even 50 and this is going to be raised a bit yeah now it's better and what else the next screen the next screen is uh where i have a very fat face so it's the screen for the not the incoming call but the call itself the call screen here we will also display the same bottom buttons as we already saw and then our camera and also the camera of the person who are who we are talking with so this screen is quite simple and i think for this screen we can just let me try to uh calling screen i think it's very similar to this calling screen because it has it has these buttons it has a text and only the web yeah like one more camera here should be visible [Music] however instead of me copy pasting all of this screen just because it shares these buttons here i would better extract these buttons to a reusable component that we can reuse in the both screens because yeah as you can see mostly only these buttons are shared among between these two screens so let's uh extract from them calling screen this button container like everything here right so let's go ahead in components and you find a new folder called um call action [Music] action box call action box here you take the actions doesn't make sense probably and a new file index just there react native functional export call action box box save and from the calling screen let's copy this view make sure you have to take it from here up until this view so let's take everything and let's put it here instead inside their return statement so inside the return statement we put everything save now let's define this type shed const styles equal stylesheet.create and let's bring from the calling screen the styles for this so it's these two styles buttons container and icon button we're gonna bring them here and we also need to bring the imports of our icons so if i scroll to the top i see these two icons here lonely so let's grab them from here and put them in our call action box save now in our calling screen let's import our newly created component that is called call action box and it automatically fills the path to that component and here let's do call action box just render them save and we are back to where we started but our calling screen became much smaller like only what 16 lines of code or less than 50 in total with styles and the good thing about this is that we can reuse this collection box for our new screen that we will define here so let's start by defining the new screen new folder is called call screen call screen new file index.js react native functional export call screen save here let's do call screen and in updates let's import the call screen we have calling and call screen yeah they're different call screen and it's there what we can do in this call screen where is to render the call action box right away because we will need it but make sure to import it import call action box save and it's there how did we make it yeah we made that camera preview should we grab the camera preview from here yeah we actually can so let's grab the camera preview instead of a text we don't need the text and let's also define the styles because it doesn't have them so const styles equal style sheet dot create and yeah let's import the stylesheet as well from racknative and we need the styles for the camera preview what do we have in the calling screen camera preview flex one line yeah probably this is gonna be okay for us um yeah and this view needs a style for the whole page so styles but if i just remove it yes i didn't need it at all because yeah we need this view camera preview which can have a background color red yeah again we are back to that thing but it's okay like we we can we it depends very much on how we will implement them the camera preview itself so here let's do styles dot page page and the page will have flex 1 and background color red but not red but let's do it with this purple save okay okay okay um what else we need another camera on top of this page so let's add another one and another one and another one oh come on and one closing like this view you know what um camera preview this is going to be our camera preview yeah because right now our page displays the background color of this purple and the camera preview is going to be this small video camera that will display our video so let's do it like this let's start with simply with a hundred height 100 just to see it on the screen and with a background color of i don't know red i terminated regular expression oh here i am okay call to action should we try to add to the buttons container here margin top auto yes and this will fix this one camera preview uh camera preview i think for this camera preview we can work with a position absolute uh because it should be it should be somehow on top and also like if i remember correctly from our application you are able to move it from one place to another we're not gonna implement that but if you are able to move it without affecting our other containers positions then we need to work with a position absolute so we want to align it to the right so i'm going to say right 10 not to be very close and top 100 like this yeah that's better and yeah right now let's just do increase a bit of height and do some border radius of 10 and we are good should add another color instead of red okay so here we have it here we have it right now it doesn't look very exciting uh but yeah because i don't want to implement right now the camera everything related to the camera and the video itself is coming from the vox implant sdk and we're going to see how to implement that in the next video next friday right 0 top 10. [Music] i wanted to adjust it here to make it look like this what else what else our call action buttons they do not have this pressable event that we will need in the next video so let's spend a little bit more time today in order to save us time in the next video because in the next video it's going to be pretty technical like with connecting everything with a video and so on so let's take this pressable and replace what everything with a pressable all these views are pressables now uh they have a on press the first one is on a reverse camera this one on press is gonna go call on toggle camera on press on toggle micro phone and this one on press is gonna be on uh hang up okay so let's define these functions here const on reverse camera it's gonna be one const on toggle camera const on toggle camera on toggle microphone and lastly const on hang up these are all the four four four functions if i saved yeah welcome did it like this um i can add here for example console worn just for you to see that it's working for example this one on reverse camera but i i would like also to implement some logic for the icons themselves so depending on the if the camera is open or not the icon should change so in this case it's if the camera is on it should show a camera off icon uh otherwise it should show a camera icon so to handle these changes we will need a state variable for that let's import use statehook and on top add the the cost for this state so um is camera on set is camera on this is gonna be initially true when we press on this toggle camera we want to reverse if it's true we want to make it false if it's false we want to make it true for that reason let's do set is camera on with the inverted value of is camera one so if initially it was true we want to set it to false because we inverted now when we try to render the camera uh i'm gonna add it inside them curly brackets and the name of the icon will depend on them is camera on value this camera on here is camera one so if camera is on we want to display camera off otherwise we want to display camera save if i press i see a different icon if i press again i see a different icon the same thing should happen with a microphone so let's do is mic on set is mic on initially strong toggle microphone set is mic on with a inverted value of is mic on now whenever we try to render the icon we will add the curly brackets because we need the next javascript expression here so is mic on we will run the microphone off otherwise we will render just my chrome phone save if i press i see now i can toggle the the state of the camera and the microphone this right now only changes them the icon that we display but uh yeah in the next video we're going to implement the functionality of these two buttons all right can we talk about the pricing for voximplant today or do you want to do that next week um i think i think we're going to talk about the pricing of vox implant next week all right so what else i wanted to do today this screen is done the last step i wanted to do today is to implement the navigation the last step is to implement the navigation in order to be able to navigate from one screen to another yes someone mentioned that it is a good practice to use functional updates to make sure to use correct current value when the next state is dependent on the previous state that's actually true um so whenever your state that you want to update depends on the existing state yeah the thing is that this this is quite advanced and i find it a little bit difficult to explain but i'm gonna try so for example what do you think will happen if i do it like this set this camera 1 to the inverted value and then set this camera 1 to the inverted value if you think about it you switch it you reverse it one time and you reverse it back the second time so basically nothing should happen i should press on the button it should flip flip and it should remain in the initial state right if i press on the toggle camera actually here it works yeah in some other cases it's not working because our new state depends on the old state so to make it uh to fix this issue when uh in some cases our state does not update correctly because it depends on the previous one what we can do is instead of providing here a new value we provide a function a function that will receive current value and that will return the updated state based on the current value so what we want to do here is to revert the current value so right now it works back uh but it a current value the same as current value yeah this is actually a better way to do it because you are not depending on the state variable from your component you are rather sending a function or and telling react how the existing value that it's there should be updated hopefully that makes sense but yeah x dreamland thank you very much you're right it's a bit challenging to to describe but yeah this is a better way to update an existing state variable okay i remember i was having these issues uh back in the days in one of clones for example whenever i was receiving new messages when i was subscribing to some graphql to a graphql subscription for example you subscribe to the new message update in graphql so whenever a new message in the chat room appears you will receive this update and i was trying to append the message to the existing messages in the state and in that case it was not working and the fix was the current one because i was updating the existing messages in the state based on them based on my state value instead of passing an update function so in some edge case situations like it's good to know this okay what i wanted to say is that we can close everything and we can start working on our navigation but before that i'm gonna go somewhere very important for less than one minute and i'm gonna be back so guys stay here and we are going to implement navigation in our application today oh yes all right guys i'm back and oh you didn't leave actually more people joined while i was away so should i go or stay should it continue all right so uh stack navigator let's see why you are not using simple next js because next gest is for web but now we are building a mobile application so that's why we are using react native uh guys where i can get free ui application design so that i can practice i'd suggest you to try to clone the application that you love anything from your phone try to clone it start from the main features and then work your way up to implement even more features and always challenge yourself to to implement more and more because yeah like when the application grows then you will start getting through some challenges that usually you don't see in smaller applications so we're uh on dribble yeah as well okay so navigation let's start with this one navigation the fun starts here so let's go to react navigation rack navigation there is a new version version 6 but i didn't look into a lot so let's start to install it together and configure all our screens and the navigation between screens together so in the getting started guide let's have a look prerequisites okay react native minimum requirements react native version 63 in our case react native version we can look in the package.json react native066 that's good install the required packages in your react native application okay let's start with um install react navigation native this is the first one then we're gonna need some dependencies but not in the expo manage project but in the bayer rack native project because react navigation depends on these two libraries rack native screens and react native safe area context so let's install this tool after our react navigation is installed let's do npm install these two libraries version 6 is kind of the same i have implemented yes rack navigation is already a very mature library that's why the new version does not have a lot of breaking changes like they very improving the performance we're improving some of the development experience uh fixing some bugs and so on uh but yeah i'm pretty sure they they updated a lot of things behind the scenes so that's that's what i that's why i said like i didn't look into that and i really want to to get into that to see what's updated but yeah so we install the screens uh we don't need to link we need to install the ports so let's do npx pod install ios okay and what else rack native package rack native screens packer requires one additional configuration step to properly work on android devices so we need to edit the main activity java file which is located there and add the following code to the body of the main activity okay let's copy this code and go to the main activity in android folder so let's open android you can see it here application source main java java com video call and then here main activity its main activity not main application right yes its main activity and inside here we will paste our oncreate method inside yes and let's also import the android os bundle at the top here so import this android os bundle and add this oncreate function and for android we should be good to go this changes is required to avoid crashes related to the view state okay now we need to wrap yeah okay that's it now uh what do we need to do the next step is to wrap our whole application with um navigation container so let's import navigation container from react navigation react navigation oh come on i forgot direct navigation native should be right oh it's with yeah navigation container from rack navigation native and now let's rub let's wrap the our call screen here navigation container i will wrap it with a call screen variable perfect before continuing you know what i usually like to keep everything related to the navigation in a separate file not in the app.js it's going to be easier to put it here but let's not be lazy and let's uh in the source create a new folder called navigation and add a file index.js here right native functional export uh i'm gonna get this navigation container yeah basically instead of a view i'm gonna do navigation container which is automatically imported from react navigation native and inside this navigation container later we're gonna add the navigators themselves but now let's simply add the call screen call screen and let's import import call screen from screens save we don't need the view and the text there save now in our application i'm gonna remove a navigation container and here i'm gonna do navigation and the navigation we will import navigation from source navigation so this way again we keep our application very clean we have navigation here and i'm gonna copy this import of the screens from here into our navigator navigation so call screen here let's update the relative path so instead of source we have this oh come on come on no no no like this and like this yeah save none of this file exists navigation source screens um screens app navigation source navigation index let's do let's rename it but it's not the problem is not in this one probably it needed just a refresh hello hello are you using aws for the back end uh no for the back end we're gonna use the vox implant sdk and that's going to be in the next video let's restart our server because it crashed and let's run our application again npx pod install ios don't we need to put it inside stacks yes we're gonna get there with stacks right now it's just going to simply render one screen after that we're going to implement the logic with a stack with specific navigators come on oh i need to run npm run ios i didn't modify my main activity and my navigation worked fine as you can see in the documentation they're not saying that it's gonna it's not gonna work but this change is required to avoid crashes related to the view state being not persisted consistently across activity restarts so it's gonna work but in in some cases uh it's gonna crash when you restart your application so i would i would encourage you to add these three lines it's not a lot but you are sure that you follow the documentation and it's not crashing all of a sudden and you don't know why and you forgot that you didn't implement that those lines uh igor caesar code hello and following your tutorial from brazil i really like your way of explaining thank you very much i really appreciate that so we are back to normal everything works as it was working before we added the navigation container this is just the first step uh when it comes to navigation we add that navigation the rack native react navigation native with a navigation container for all the global navigation management basically but now we need to install some kind of navigators and there are a couple of them for example the best way to explain them i think was them this way so here on the bottom you see an example of a tab navigator because it has multiple tabs very similar on the top top tabs navigator the one that contains the back button is a stack navigator and how stack navigator works is whenever you navigate to a new screen it will simply put the new screen on top of a previous one that's why you have this back button when you press the back button it will just pop the pre the screen that is on top of your stack behind the scenes it works as a stack like you put on top and you take when you go back you take the the last added screen so in our case that's actually what we will need we will need a stack navigator so let's go ahead and search for the stack navigator where is it native stack navigator installation let's start by installing rack navigation native stack native stack why you're not using expo today we're not using expo today because uh vox implant depends uh the sdk that we're gonna use for the calling functionalities they depend on some native dependencies so i didn't try to use it with expo but most probably it's not going to work but that's a good question if it works with expo i'm i'm i tested it with rack native and it works react native claim so we added this stack navigator now the next step is to import the function that helps us create the stack navigator so we are going to import it from react native stack and the function is called create native stack navigator i'm not thinking was it native stack or just stack is there a difference between native stack and stack one thing to keep in mind is that while native stack offers native performance and exposes native features such as large title on ios it may not be as customizable as react navigation stack depending on your needs so if you need more customization then what's possible in this navigator consider using stack yeah that's what i was thinking because so far i was only using the stack navigator but here is native stack which is saying that gives native performance let's try to use it because if we if we go into some limitation of customization that we are saying we will be able to replace it with a react navigation stack easily so um first of all let's define our stack with create stack navigator and now inside our navigation container let's render our stack dot navigator yeah by the way in the version 6 if someone said that they didn't add anything they added this stack dot group which you can use to apply some styles to the same group i mean options not styles so stack navigator inside the stack navigator here we need to render all the screens that we have that we need in this navigator so stack dot screen it needs a name the name is going to be let's start with the contacts contacts contacts and the component that we that this screen will render in this context screen con contacts screen save and we see our contacts here with a title on the top contacts if you want to hide them the title bar there you can do that with the screen options or options header shown false by doing this we uh hit the the header of this stack screen but i think we i like it and i will keep it the next tech screen let me just copy paste this one four times and it's gonna be the call screen call then we have calling no yeah calling calling and we have uh incoming call screen why do we have free elsewhere calling incoming call perfect like this okay for example here in the stack navigator there should be default come on where the full screen screen name stack navigator isn't it default screen option default options initial route name that's what i was trying to search initial route name if i add it to the call i want to render this one to see if we need wherever [Music] we need to re refresh call oh not here to the stack navigator save refresh actually save a call that's what i wanted to see that for this call and also for calling and also for the incoming call everything is up to contact we need to hide the screen the the type the header so we could do options header show one false and it's gonna disappear from there and we need to add this to all of them but another way to apply some options to multiple screens and this is the first time i'm trying this is using the group component so stack.group like this will contain all these free stacks and it's going to contain options will it work will it work and if i don't have it here no but screen options yes screen options works so um on the stack.screen when we want to set the options we you do that with the options property on the stack navigator if you want to define some options for all the screens there we use screen options for example and apparently for the stack.group it says wellscreen.option and by doing this we applied the header shown false to all of these three elements okay screen options yes thank you so i can remove this initial screen route name because i wanted just to see how it looks there and if i refresh i see them here okay back in our screens context screen for the page i want to say that the background color should be white and flex one to take the whole space yes like this okay so whenever we press on one contact i want to call him so this text um this text we will put it inside the pressable but yeah let's put it inside a pressable the text itself and on press is gonna be uh a function that's gonna call the function named call call user call come on call user and the user is going to be the item called user item so let's define the function here const call user we're going to receive a user that we want to call and what do we want to do here we will need to navigate first of all let's do console console warn to see that we user call if i press i see user called perfect now from here we need to navigate to the calling screen how do we do that we do that first of all we need access to that navigation [Music] object to get access to the navigation object we can use a hook called use navigation from react native navigation core and on the top of our component here we get the navigation using this use navigation boom we have access now with this navigation object we can do navigation dot navigate and where do we want to navigate a name of a screen a name of a screen calling we want to go there calling so if i press calling i go here now how do i go back calling and here is who we are calling okay before going to this screen and implementing the next features i want to be able to send the user who were calling to that screen so to send data when we navigate we can pass here uh parameters so we want to send the user basically user is user but because we have the same key and value i'm gonna do it simply like this so we are sending the user there all right that's good that's the first step now let's open our calling screen and here first of all i want to display who we are calling no first of all i want to do something else i want to be able to go back from this screen so if you saw calling there is this back button bake back icon on the top so let's add it and implement the functionality when we press it to go back but actually we don't need that button because whenever i i press on the hang up i should go back but let's yeah let's uh do it with icon instead okay so first of all let's find an icon back back back back this one from unicorns and i'm gonna put it camera preview somewhere here so your new cons name uh color white size 20 like this let's import ionicons from react native vector i can slash yonicans and let's press again in this miss what failed prop type invalid prop size oh size 20. okay it should be somewhere there uh the only thing is that we need to add it inside the pressable pressable because we need to get the press events so on press go back and style style dot back button let's quickly first of all while we're here implement go back because it will crash if we don't have it and the back button style let's go on that screen to see it and i'm gonna say that the style is first of all it should be position absolute and it should be top i don't know 50 and uh left 10 probably 100 no 70. okay something like this i will increase the size of it 230 to 25 don't like how it looks 25. okay something like this so styles are okay now let's implement the go back how do we go back again we need to import use navigation and to take the navigation object here with the hook navigation and to go back simply we do navigation dot go back so if i press nothing happens is it pop if i press go back let me try to console one just make sure that it comes here no it doesn't you see pressable on press go back background color red what's happening there this should be repressible absolute position pressable are not working on press what do you think can it be because it's absolute man i don't see it but if i do margin top yes it's because of them position absolute um [Music] is it a known bug so react native pressable absolute position the index solution was to change the order of the components what i originally had okay let um z index might work i think that the index does not work on all the components or all the platforms so here on ios it worked on android i want to test it on android so npm run android while it runs on android yes this is going back with this animation perfect now uh what i want to do i will remove a console one here is to instead of saying here a hardcoded text i want to display the name of a specific user that i'm pressing there so uh to get them as you remember in our contact screen we send the user when we navigate it how do we get the user here on this calling screen we need access to the route so let's get access to route using the user out hook const route use route if you're coming from web development this route will make sense because for example when you open a page of a post the idea of that post usually is inside the route so you get it from the route or if you have some filters arguments or something like that they're all past weaver out in mobile development this is not very common but in rack native because it's closely related to react.js we are using this route so uh let's do const user is equal route dot let's do dot params paragrams dot user but i'm putting this question marks because it might be the case but the user is not in the params so that's why i added it here so let's do here user user dot display name but how is it called in our assets assets data contacts user display name save okay calling logon poll you see now we are sending data here perfect that's good will we make back end yes we are going to implement the functionality of this application in the next video so stay tuned okay this is the navigation here what else now like that's probably it when it comes to navigation because let me check if my android no android didn't run make sure you have running or device connected let me try to open android studio so yeah what what i wanted to say is that um oh my god please stop let me try to run an avd pixel 4 or 2 which one which one which one let's try do the emulator access was killed by who who is killing my processes then that index works on android okay yeah just wanted to make sure that everything works come on adb devices there is no devices weird i cannot run them my android device but that's okay uh yeah what i wanted to say back in our navigation we have uh the incoming call screen and the call screen the thing is that the navigation to those screens are not dependent are not triggered by the user press events they will be triggered by some events that is going to come from the cloud so for example we will subscribe to the incoming call events and whenever an incoming call event is going to be triggered then we're going to trigger when we're going to navigate to this incoming call the same thing with a call component after we accepted the incoming call we're gonna redirect to this call screen similar to the calling as well uh yeah so that's why i'm not gonna implement those but you saw how we can navigate from one screen to another we simply take the navigation object using the use navigator hook as we saw here and after that we do a navigation.navigate and we to the screen name and also we can pass some data here and if you want to access the data you simply take the route and look for that data in the route dot params so that's probably everything that i wanted to do in this in this tutorial um yes yes that's everything that i wanted to cover in that today's stream so we implemented uh the context the list of contacts that will display a list of users that we want we can call when we implemented the calling screen the screen that uh you see when you are calling someone until they respond to your call after they respond to your call i mean they will receive this incoming call screen where they can accept or decline the call if they accept the call you both will see the call screen that will display both your video and the other person's video and you will be able to turn off a camera turn on the camera the same with a microphone hang up and so on we also implemented the navigation to be able to navigate from one screen to another and in the next video which is going to come next week next week on 12th of november it's 12 i guess at 3 pm gmt we are going to implement all the functionality all the video calling functionality for this build so make sure to be here subscribe to the channel down below uh probably there or there i don't know and also turn on the notification bell not to miss the video that is coming next week and also a lot of videos in future that we have planned in our calendar so if you have any questions now is the time let's spend a little bit of time talking and then we can call it a day and start the weekend before that i also want to thank you once again vox implant for sponsoring this video and for making it possible uh to build this application this uh video calling application uh today yeah you only heard about them but in the next video you're gonna see how easy and how powerful vox implant sdk is when it comes to uh building communication applications like this one like a peer-to-peer video and audio charting application so thanks vox implant again for sponsoring this video can we talk about the pricing um yes we can talk about the pricing i will briefly cover the vox vox vox implant pricing and the good thing about our use case is that it's almost for free so they have a lot of features as i described in the beginning of a video you can implement a way to call from the vox implant platform to a phone number in that case like you are of course charged because you're calling a phone number you can call them like two different phone numbers but what we are building is a sdk to sdk basically a peer-to-peer calls where um the vox implant cloud provider will only manage the users and whenever you're trying to call another user they will redirect the call and after that all the video exchange is going to happen peer-to-peer and this is a way to to make them secure because your data from your application is not going for vox implant it's going directly to your to the person we are talking with so in case you are building these peer-to-peer calls that we are doing in this build then the price for voice and for video is free the only thing that you are going to pay is for monthly active users however if you have less than 1 000 monthly active users uh it's going to be free if you have uh less than up to 5 000 monthly active users it's going to be a hundred dollars per month and so on so yeah for development and for testing this solution you're not going to be charged so that's why it's free all right any other questions will this video be available yes of course all our videos all our usual videos on the channel are published on the channel afterwards i did yesterday a stream of me preparing for today's live stream where i played some music and it was kind of a virtual office i don't know if you saw let me know in the comments if you saw that one and if you would like me to do that more often but that video i didn't publish because i was not giving any value to you it was mostly a way and a place to get together to listen to good music and everyone to code their own things duvet offers selected features only i only need messaging maybe um [Music] yeah it depends like what you are implementing for example if i am implementing only peer-to-peer calling functionality that's what i'm gonna be charged on so you are charged on only your charge for only the things that you are using can you share your playlist i saw the video that playlist is stream beats um yeah it's it's a it's a youtuber they decided to create these stream beats and that are free and copyright free music to play on your streams and now he's getting huge like very huge with his company so yeah check it out okay hello vadim i just came to a stream question do you use redux or any other state management systems like in this application your meaning you mean in this application we're not going to have any global state management in your application i would recommend it like this if it's a small application and a new application that you're starting from scratch check out uh recoil this is a global state management may specifically for react and react native and it works very very well and it's much easier to learn compared to redux however yeah if you're working in a big project and specifically if it's a legacy project that was started before and they're already using redux then you have to learn it great stream thank you very much i also enjoyed it it was very well paced like we did a lot of things today okay i could not download assets yes um i will i will update them and you will be able to download shortly if not using vox implant can that same application be done using rack native web rtc probably yes but i i didn't try it out so if you know what you're doing then definitely it's possible are you more focused on mobile development or do you do web development and that is your favorite favorite framework if you work in web development as well the last years i mostly been working in mobile development and on this channel we started with mobile development and now i decided to stick with mobile development uh in order to yeah be focused be niched and to cover a lot of things so that anytime you think about mobile development with rack native you're going to think about the node.js development you're going to come here and you're going to find the solution and we are far from there here like i have so many ideas i've had so many plans we have to cover so many things features systems and so on so i'm going to still be focused on mobile development but i do not exclude that we are going to cover web development as well and when it comes to web development i really like next gs it's our platform not just dev is on nexjs i tried before gatsby i didn't like that much gatsby um that's but next yes is perfect love it okay i wanted to envy stream but i see a lot of great questions so let's let's see [Music] i saw your other videos i did not notice you use state management i would appreciate if you make one of it okay maybe we will cover some of it in future videos yeah the thing is we we cover the quail in them we have a we have a project with recoil they we have uh where we have a clone let me find it and give it to you there in that video i focused a lot on the state management with recoil so you can check it out there one momento how is it called oh this one oh let's hope that video is not gonna get more demonetized because of that sound so i wanted to show you this one it's this one where where where where come on focus here this one yo euro 2020 i cannot paste it there but you've got it um i'm rooting for them to focus on mobile development because there aren't many mobile developer content creators yes let's go thank you very much yeah that's also one of the reasons like i strategically picked a niche that is not very filled with content online which is mobile development specifically with rack native and with aws amplify which are great technologies in my opinion would you build a video streaming site using the webrtc maybe maybe in future vadim is my main source of react native yes let's go uh do you speak spanish no no not very much i'm trying and i need to because i live in spain but it's i don't have time for it but i really want six tattoo thank you which one hello how are you thank you i'm good just finished a wonderful stream with a lot of great people watching it all right guys so let's end it here and i will see you don't forget set up a reminder set up your calendar next week we continue this build and we take it to the next level we implement all the features and probably by the end of that video we are going to be able to call some of the live viewers to test it there so make sure to be there um by the way yeah while you're waiting for the next video check out this video or this video or this video or this video some of them they're both amazing and you will learn a lot from there so thank you very much guys take care stay hydrated and write clean code bye bye but now i need to end the stream

Channel: notJust․dev

Views: 10,810

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native aws amplify auth, react native auth, javascript, react tutorial, whatsapp clone, aws amplify, react native, react native tutorial, programming, sonny sangha, video calling react native, webrtc, react native video call, react native video chat app, video chat, webrtc video chat app, zoom clone, react native zoom clone

Id: rb70_TXRQNE

Length: 192min 52sec (11572 seconds)

Published: Fri Nov 05 2021