React Native Crash Course - Full App tutorial with Expo

hello guys and welcome to the channel so today we're going to be building a mobile application and we are going to be using reg native for this so what's reg native is just a framework that allows you to create applications either for android or ios with the same code base and the main thing is that we use javascript for this and to be specific we use the react framework so you might need to know a little bit of javascript and also react for following this tutorial but you don't have to be an expert and the nice thing about react native is that actually compiles your javascript code to native code the main features that this app is going to have is going to be a weather app and it's going to pick up your location and then it's going to give you the weather the current weather and you can also change the unit system you know from celsius to fahrenheit and we also have some details about the weather and we also can refresh the data so in case we have the latest weather and what we are going to be learning building this is going to we're going to learn how to pick up the location from the phone using you know the gps location we are going to learn how to make api calls we are going to use a public api to get the weather data and we're going to learn how to make this api call and we are also going to learn how to manage this data using react hooks of course and we are going to also learn how to show different things depending on the platform and we're also going to be learning how to use components and styles in react native that's a little bit different from react but it shares the same concepts so now let's jump into the code i am now in the documentation of react native and mainly we have two ways to set up a development environment working with react native the the first one is the one that we are going to use is using expo and the an alternative is to use the react native cli but i think that the simplest way to to get a starter is using expo so what is what is expo is is just a tool that allows you to develop and deploy react native application without worrying about native code and other things so this is really nice we have a ton of features by in the in this tool and also it's great because you can also use your code for the web so there's there's a lot of tools that we have with expo and the best thing is that it's free for use so so using for using expo you need to install node.js i hope you have that in your system so assuming you have node.js in your system then you need to install xbox globally so for doing that we are going to copy this command and we can install that in our system open open a new terminal and you can install that i'm not going to run this command because i already have this expo cli in in my system so now i have once you have that you can run expo version and it will give you what what version you are you can also run expo help expo help and you will have all the comments that we have available for all the tools that we have with this cli so what what we want to use is expo in it so expo init will create a new project for you and we can give it a name so because i have yarn is going to use yarn for installing installing the dependencies i also recommend that you use yarn but you can also use npm if you if you have that in your system so i'm going to give the name of where where wherever up react native so this is going to be the name that i want to give to to the to the project now i can hit enter and it's going to ask me for some options that i can choose for creating them the the project so we have the managed workflow and the variable workflow what we want to use is the managed workflow because this is where we're the place that has all the tools that that we need to create there's also this better workflow this is similar to the react native cli but also using the expo packages but we we are going to use the managed workflow and here we have some templates so we are going to use the blind blank template there's also a blank template but that has type script and we also have some template that has navigation but for this project we're going to use a blank template once we choose that it's going to install all the dependencies and as i mentioned before it's going to use yarn because that's what i have in my system but you can pass the npm flag to use npm it's going to take a while a while so i'm going to stop the video and we will be back when everything is installed i'm going to open bs code so this code is the code editor that we are going to use for this tutorial you can use also use other editors but i think bs code is the more relevant for work when working with react native i actually need to see the into the project so the project in my case is weather of react native and now i can open this with vs code and let's take a look at what we have here so we just have a couple of of files that came game came with the template and we have we have we have a package.json that has all the dependencies and we have a couple of of the scripts so we have us this script will start the project so we can run it in any platforms or we can also specify in which platforms we what we want to run the project and here we also have this is at the entry point of the application right now it has just a placeholder that we're going to run and we also have this app.json file so this is where all the configuration for your project is pick it up so this is you know is the name that the application has so also this is important if you plan to to launch this to the stores and you can change the icon so so the icon that's going to show for for the for the stores you know the play store and the app store and now let's open a terminal and we are going to run the start command so the start command what's going to do is just going to run expose start and it's going to open a new a new a new port when you can interact with your app so if i type yarn start or npm run start if you used npm it's going to start the project it's going to open a new tab in your browser so if we take a look there's there's a couple of this is just basically this is just a log in the log information that we have when we run our packages and we can see that the the package is running in this in this port so here we can do a couple of things so we can run this application in several places so we're going to to use of course we're going we can run them even in the browser but we are going to run this in either a device or an emulator so if you want to to run this in your device you have two options so one is using an emulator and you can also install in the in the play store or wherever you can install the the expo app and you can scan this qr code and you can just use your phone i think that's the the easiest way so you just you just install the application and you just scan this qr code but we're not going to do this we're going to use an emulator so because i am in mac i i'm going to use an ios simulator but you can you also use install android android studio and you can run this in an android emulator so now i'm just going to open the emulator that i have configured for this and now i can just click here and it's going to it's going to launch the application so the first time it's going to install the xbox xbox line in the phone so for me it's not it's just bundling the app but for you it's going to ins first it's going if you don't have that in your emulator it's going to install the expo app in in the phone and after that is going to build the javascript bundle so as you can see we have the application right here so let me let me also show you how we can do this with an android emulator so i'm going to use open android studio so it's taking a while to open android studio and here i'm going to open the av manager so this is going to to show all the devices that i have installed in this in this computer so if you don't have any you can create a new virtual device and you can pick up any model that we have i'm just going to open this one that i already have set up it's a pixel 2 so once once the the simulate the android emulator is is ready you can just click here so this is this is going to run the application in your android emulator and now if we take a look here we can see that it's that we have the same as before we have our application here and this is one way of doing but i think the simplest way is just to install the expo clients so if you go to for example i am right now in the x in the play store from google and you can search for the expo expo app and this is just a client that will allow you to just you you can install this in your phone in your in your android phone i think for ios you have to create an account to be able to load your projects but for android you just open your phone install this in your in your phone and then you can jump just scan this qr code you have to you have to be in the same in the same network that's important and you have to be in the same network and you can scan the code and that is going to open your application directly in your phone so once once we have that we can we can change our application to see if we have hot reload so our application should auto update so let's have low let's change change this text hello from react native and i have saved that and now if we open our application we should be able to see that change so as you can see we have that change okay i just changed the layout so we have our code in this in this place and we have our emulator at the right so so and now let's start with the application so the first thing that i want to do i want to explain here is some of some of the difference that we have from react for react in the web so the main difference is that we we cannot use html elements here for example you can see that we are not using any div or h1 tag we are using these components so these components are imports import from react native and for example the view component you can see this component as is the similar like like the div component that we have in html but we have here we have to use this view component and it's almost the same from the thief and for example for text we don't use like a b tag or a h1 tag we need to use this component that's the text component that is going to is going to display our dates text into the screen so these are a couple of difference that we have from react in the web and another difference here is that way we this is this is how we create styles so we cannot have the same properties the css properties that we have in the web but this is how we created so we have the style style prop in our component and then we are going to pass this this this this object that's that that we import this stylesheet helper that we import from react native and we invoke the create method and there we have an object that we have have a server so this is like like a class that we have and for for for example and in this class you you can see it's actually it's not a css class it's just a object object property but you can see it as a class and this class has this this this style properties so we have legs one so everything expands and we have this background color and we can we have to use camel case so this is similar to react we're not not exactly similar but for every every property we have to every css property that we have in html we have to use camel case so we cannot do something like this that we have we have to use camel case so that's and you can change it wherever you want you can also use colors you can see that everything changed to red here and yeah that this these are the main main difference that we can notice here and now that we know that let's start with the application so the first thing that we want to do is we're going to pick up the location of the phone so for doing that we are going to make sure that first that our email if you're using an emulator of course you you will have to do this if you're in in a phone you you don't have to do this so you you want to go to features and you can this this is for the ios emulator you want to go to location and you can you can set up a custom location so in this case i'm using this this location this latitude and longitude if you are using the phone it's going to pick up your current location so once you have that it should the location features should work so for android is is is kind of is it's kind of different so i have the android emulator here and i need to tap here and this will open this this setting space so as you can see we have location and you want to search for the location that you have so do you want and you can click in just like that in the map and you can save points you can have a set of points and you can set the location in and that will now the location feature should work in your android device okay once you have set up the location if you are using an emulator we are going to install a package that's that's not installed by default so this is going to be an expo package so make sure to open the terminal and here because i'm using again because i'm using yarn i'm going to use yarn well you can you can actually you can use the xposed cli so this could be this is better because if you use the the expo clr for installing package this is going to install the exact same version that expo requires this for this to work so we are going to use expo install so this is just like npm install and what we want to install is the expo location package so once we have the the expo expo location we are going to import that package so we can say import star as locate import star as location from and we are going to use the expo location package so this will give you this this will import everything from from location and now we need to set up a hook so we want to hook when when user hooked with when the applic the component is loaded so for doing that we are going to import from react we're going to use the use effect hook and this is going this this hook what it will do is will trigger we will be in both when the when the application the component is loaded so this is just uh this just take it takes a callback here and we're going to use a callback and we can pass some dependency list so this is all the dependencies that that effects is going to take to run so in this case it's going to be empty and because we are this we we just want to this to be wrong when we start the the component so once we have that we are going here we are going to invoke a load function so this function does not exist yet and why we need to invoke a function and not run our code directly is because we cannot write write an sync function here this is a hook limitation so this is going to be asynchronous what we are going to do here so we are going to create a new asynchronous function so i think function load and what this function is going to do so is just we we can add a try catch block here because this could fail and what we are going to do is we are going to declare a new variable that's coming from we are going to await the location and we need we need to request for permissions so this this might be very familiar for you so for example you install an application in your phone that's trying to get your location so you have to give permission to that to that application in order to work right so this this is what we are doing we are going to request that permission so we need to request the permission and one when once we request that permission this is going to give us an s an object that has an status property so the status can be if if the user accept or decline this this permission request so we can say if status is different from granted so if if if the user declined the permission request we are going to return this function because we cannot run our code if we don't have the permission and what we are going to do here is we also we are going to use a different hood hook that's use state and we are going to create some some state here so the step state that we are going to create is an error message and for declaring an estate we have to do it like this and second is the set function set error message equals use state and the initial value here would be null so here what we are going to do is we are just going to set error message says error message and it's going to be we access to location needed to run the app so this is the location that we are going to display if the user didn't grant access to location and as you can see we we have this so we have this this request for mission and we're going to allow this so this was granted granted by the application and now we have we have grant the permission but we actually need the location so for doing that we're going to create create a new variable called what's going const location equals so now that we have the permission we can say a weight and this is going to be also going to be a asynchronous operation location depth gate current position so this is this is okay this is going to give us an object that has everything that we need and we can have some options here and these options are not required so we can just pass it like that and this object has a couple of properties so what we have one from here is the latitude and the long longitude we don't we don't want any anything else so we can get this the constructing this object so we can say that from location that goes so this is this is a property that we have in the location from property that of course we're going to read the latitude and the long longitude so we have that so we can now let's just make an alert to see if this is working alert and the alert is just going to be it's going to be a strict and string that says latitude and here we are going to have the latitude and here we are going to have long he choose and we are going to just displace this to the user so we know this is working and as you can see we have we have the alert that has the information that we requested so we have the latitude and the longitude so we now have the location but why we need the location for the location is just needed so we can make an api request to act to an api that's going to give us the weather based on that on that location that latitude and longitude so once we have that now we are going to take a look at the ad the api that we are going to use okay so the api that we are going to use is this one is called open openweathermap.org so this is if we open this is this is a free api that we can use to query query information about the weather in the world is is quite popular so if we we can see here in pricing that we have a free a free tire that we can use and it's a really generous i think generous it that we can use and if it has a bunch of endpoints that we can make requests so what you want to do is you want to create a new account so you can here we you can more i'm already signed in but you you need to create a new account for in this in this if you go here you can subscribe so you're going to create a new a new account here and once you have created that you will have access to this this dashboard in this url home that open weather and here we are going to go to api keys so this is this is important so this is the key that we we are going to use to make queries to this to this api to make requests so copy make sure to copy this api key now let's go back to our project so we can just close this now and what we are going to do is we are going to declare a new cons that's going to be their api key equals equals that string so for now we are just going to store this here this is not the way we are going to do it at the end we are going to use a package to hide this but for now just let's just hide it let's just skip this here this is not secure because this this is this can be exposed in your in your git code so we don't want to do that but for now let's just keep it like that and now we are going to take a look at what requests what we can do to this api so if we go to back to the documentation what we are going to use we have a couple of endpoints here that we can make queries but what the ones the one that we are going to use is the current weather so this is going to give you access to the current weather based on allocation so there's another ones for you know like for forecast but the app is just going to give you the current weather so if you if we go here we have all the documentation that we need for this app to work so as you can see we can have by by city name but the one that we want is by geographic coordinates so this is this is the api call that we need to do so i'm going to copy this here cons url weather url okay so this is going to be an a string and here i'm just using template strings so we can we can have variables inside here that's why i'm using these back tills and well what i want to do here is i'm going to create a new cons that's going to be base weather url and this is just going to be the initial part of this of these of this code so here we actually you know this is not a very valid url we have to use https for for for making this call so once we have the base base url the weather url is going to be like this so we are going to use the syntax that allows allow us to insert variables here and this is going to be the base weather ura so we have the base url that's that's the that's this one and that's next we need to insert the latitude so if we go here we can we can insert the latitude that we did tooth that we have well it's not here is here so we're going to use the latitude that we take from from the phone and here we need the longitude so so we're going to replace that with a variable and here we're going to use the longitude so we have the the longitude and now we need our api key so we our api key is right here and that's the one that we created before and now we can use this syntax and now we can use the we weather api key so now we have we have a url so this is the url that we are going to make the request the request and now we need to use we're not going to use this anymore we need to make the we actually need to make the api quest request so we are going to create a new variable that's going to be called response and this is going to await the fetch so for making api calls we can make use of this fetch fetch function so this is really similar of the fetch function that we have in the browser but this one is for for react native and this fetch text takes the same parameters that we have in the browser so the the the the first parameter and the only parameter that we're going to pass is the the url so we have the url here so this is this is this is this is going to make the request so once we have the response as as as you may know this is not a response that we can that we can that we can use because it's not already in json so we are going to create a new variable called result and this is going to be we also it's going to await for response that json so this function that has that is coming from here is going to transform the response from the from the api call to json so json is a format that we can use in our application and and once we have that we are going to store this information in and state so we're going to create a new array that's going to be cool rent a new state that's going to be current weather set current weather and this is going to use the state and the initial value is going to be null and we can set that value here so there's there's another thing here is that this request could fail but not because this is because let's say we have a around epic a key so the server is going to re is going to send us is going to send us a error message the api server from whether that map org so we are going to check if the response so the response right here we have so we are going we are going to check if the response is okay so we have that utility in in the in in the response and this means that it has a 200th response so if it's okay we're going to set current weather and it's going to be the result okay and otherwise we are going to else we are going to set error set error message so it's going to set this error message and we are going to we're going to use the result that message so we have a message from the server that's going to tell us what's what went wrong so we we are making the api request but now i want to show that to the user correct so i'm going to i'm going to make a check here so if we have a successful operation we're going we're going to have a current accurate weather so if if we have a current weather we are going to return so what we are going to do here is we are going to deconstruct the information that we have for the current weather so we can say something like this equals current weather so here if we go back to the documentation we have as a response we have a couple of parameters so you can see that we have a coordinates we have the weather weather id and we have this main property that has our temperature so this is what we are going to displace for now we are just going to display the the temperature so we are going to access that so for access that i'm going to deconstruct the main property and here i'm going also to deconstruct the temp the temp property so as you can see we have that right there so this this is just a two level deconstructure so we're actually accessing two two levels of this object from the current weather response and here i'm going to use curly braces that is going to allow me to use variables and i'm going to display the temperature so this is just if we have if everything went went well so otherwise this means that if we have an error we are going to return a view it's going to have the same like here okay this is incorrect and this view is going to just show us the error message so this is going to be in the case that we have an error here so let's take a look and as you can see we have we have the tempered temperature so this this this might look kind of weird so this is showing this this big number because by the fall we have this api returns returns capping units units that are really big so this is this is not either this is not celsius or or fahrenheit this is a calling unit that has really big numbers but this is the current the current weather that we have in this location and let's take a look what happens for example if i have a path api call so we should be able to see the error message i i see why we have this problem so we are not setting the error here so we need to also set the error in that message and heard that message here and you can see that we have the error right here because we are passing an url that does not exist in the server so now we have the current the correct temperature so we also need to catch that error error here in the catch block of course and now we are making api queries so let's remove this style here because we don't have one to that style and let's so we want the feature to the user to be able to change the the units so we are going to create a new state here for that so it's going to be units system set units system and here we are going to use the state and the first the initial state is going to be for me you can use the imperial system but i'm going to use the metric system as an initial value and here what we can do is that this this api call accepts uh uh units and units param query parameters so that's what we are going to add right here right here so we are using the end operator and units equals and we are just passing the unit system and as you can see we have now this in celsius because in the in the metric in the metric system that's that's the the unit that we use for temperature if we change this to in barrier we are going to have this inferring head so so now we are using we are sending using different different units to load the water the weather okay now that i have that i'm going to display some information about the weather here and let me check what we have here so here the in the container i'm just going to keep the justify content property and i am not going to use the line eaton items for now and i'm going to create a new view in the in the main part that is going to be this is just going to be appeal and here we i'm going to give it an style that's is going to use the style softjet and here i'm going to create a new style that's going to be called main and here we are going to have justify content to the center and we also going to have a flex of one value so it expands we are going to move this from from where i'm going to ask at that style here and i'm going to move this right here the status bar is going to be here and we have the same thing but actually i'm going to create a new component so let's go to here and here i'm going to create a new components folder and inside here i'm going to create this component that's going to be where weather weather info that js so this is the component and and another thing that i didn't mention is that i'm using right now these these react snippets extension this one so this allows me to have some boiler some boiler plate code for react and react native so for example here i just can type air and f and it's going to give me a functional component in the react with react native so that's that's pretty handy i i recommend you to to you to install the same extension and here i'm going to receive some properties and the properties that i want is gone are going to be like it's just going to be one property for now so it's going to be the current weather so we are going to receive that here and what i'm going to do is i'm going to import that component here import [Music] info from components slash with weather info i'm going to import the component and i'm going to pass the component here so use the component here so here i'm going to use the weather info component and i'm going to pass the current weather right here good rain weather so i'm going i'm passing the current weather property with the current weather value and i no longer need this here and right now we don't have anything but i i just wanted to make use of that information here in the component instead of right there so i'm going to do the same thing that i have before so here we have the from the current weather we're going to construct the main property that has the temperature and we can display the temp tempe through here oops yep and there we have it so we have we have that and right now we are going to give it some properties to this component some style so i'm going to import the style sheet object a utility and here i'm going to this clear the styles that has it's just a style sheet that create function that has an object and here i'm going to create the weather info property and this is just going to have this flex property that's going to align the items sent and i can use this right here so i can say style equals styles that weather info and we have the information in the center so another thing that i want to do here is we actually the api that we are using provide provides an icon so we have an icon that that is is just a string but we can make a url make it a url so we are going so as you can see this icon property is in in the weather in the weather of a of property and this is actually an array so we're going to access that for that we are going to deconstruct the weather weather property and because this is an array we are going to deconstruct that using that array syntax and i can give it whatever name i want so this is going to be for me it's going to be details okay and we have all this object that has the weather id the weather the description and the icon comfort so now let's use the icon and i can say i'm going to deconstruct that from the details details object i'm going to this construct deconstruct the ico so we have the icon and i want to have an url that i can request this icon so i'm just going to say icon url equals and i'm going to use the template syntax here it's going to equals https slash slash and i'm just going to copy paste this so this is a url that we can make requests for the icons so it's openweathermap.org slash emg slash wn so this is the url and here we need to pass the icon so the icon string so this is just an like an id for the icon that we have for for the api request and with this symbol we can request which which size we want so we can request for example 2x two times the the size of the icon but i'm going to use the four times the result the size of the icon that be png so this is going to give me access to that icon and to display that we are going to use the image component image component from react native so this is kind of similar from that we have in the west but also is is a little bit different so this is going to we are going to use the image component and here i'm going to use the source probe that this component has source equals and here i'm going to use the eori so this is going to be a url property and i can pass the icon url and if we save we can't see anything because we haven't styled is the style that image so actually to see the image we have to apply some styles here so i'm going to pass the styles props prop and here i'm going to create a new property so this is going to be weather icon and this is going to have a width it's going to have a width of 100 pixels and a height of 100 pixels so once i declare the style i'm going to pass that style here and if we say we can see we save we can see that now we have the icon so that's great and another thing that i want to display is the name of the place that this is coming from so for example i and and we can see that we have this property in the documentation the name of the place it here it says that's the city name but that's not the case it's more like the place you know like the neighborhood or something like that so i'm going to disrupt that from the from the object and i'm going to pass that information here with a text component and it's going to have the name and here we have it we have the name of the place and we have that and now we need to have the description so the description of the weather so we are going to also use use text and here from the details we have the icon we can have the icon as you remember we have the main property from from here and we have the description encryption so this is just right here so we have the main property group of what where with parameters that says what's actually actually whether and we have the description so this is what we want to display and we can play first the description description and we can display here the main weather and you can see that we have that we have light rain so this is this is the description that the api is giving us and the main property is running so i'm going i i want to do this uppercase so what i i'm going to do is going to create a new style so it's going to be weather description and here we can have the transform and it's going to be uppercase so this is what we want to apply here style equals style staff weather description and whereas not uppercase is capitalized so we have the first the first letter of each word in uppercase okay we have all the information that we need here but i want to have some some some other styles so what i i'm going to do now is i'm going to declare a set of colors that we are going to use in all this project we're going to have a primary color a secondary pro color and for doing that i'm going to create here in the root i'm going to create a new folder that's going to be called utils and here i'm just going to create a new file that's going to be called index.js so we will have all the utilities for our project here and this file is just going to for now it's just going to export a const that's going to be colors and this is just an object that's going to have a primary color and the primary color is going to be like an orange color you can copy and paste this you can buy or copy this from the source code below and i'm going to have a second there your color and this is going to be like a dark blue and here i'm going to have a border color that is like a soft gray so these are all the colors that i'm going to use across the project and here i'm going to import that so i'm going just going to import from utils slash index i'm going to import the colors and i can just say const equals colors and i'm going to import my primary and my secondary color so i'm just importing that and i'm now i'm going to use that so i'm going to create a new property style property that's going to be called text primary and we're going to have a font size of 40 and our color is going to be our primary color and we're going to use that ink our temperature so style equals styles that text primary and we have that nice and big so we know what what the current temperature is and i'm going to just copy and paste this degree degrees symbol here so we have we know that these are degrees we have that and now i'm going to create a new property that's going to be text secondary it's going to have a font size font size of 20 is going to be the us or second direct color secondary color and it's going to have a font it's going to have a font weight of 500 and we're also going to have a marching margin top so it's is going a little bit below and we are going to apply this here to the main main weather property style equals styles that text secondary we have an issue here oh and font style this is wrong this is not fine font style this is font size and there we have it we have that with some styles here and i think that's what mainly what we want here in this main property in this main in this weather info component so we have the the place we have the icon we have the temperature and we have some description so now that i have all the information that i want here i i want to have a way to change in the hearing systems you know from celsius too far in hate or vice versa so for doing that i'm going to use a picker so this speaker is going to be similar you know like a drop down dom element like a drop down so but this this package does not come with react native by in in the core so we need to install that this is this is very important for doing this we need to use the expo cli so we are going to use expo install and this is going to install the correct version of this package this is very important because not all the versions are compatible with the exploration that we are running and this command will take care of that and the name of the package is from react native community and it's called react native community slash speaker so this is the name of the package and we can just make sure that we can just install the package and now i'm going to create a new component and this is going to be named unitspeaker.js here i'm going to create a new functional component with the snippets and now i'm going to import the from react for react native cumin slash speaker i'm going to of course import the picker so we have the component and now we are going to this to use the component here and this component takes as children it takes a a bigger death item element so this is this is going to be the the the options that the user can select and here we are going to use two properties the label so the label is going to be celsius celsius like this and it's going to have a value so the value is going to be different it's going to be matrix so we're going to use the metric system oh we can use firing heads and we are using you can use the imperial system so this is this is the properties that we are going the this is the picker and now we need to import that in our application so we say import units speaker from components slash and this is in your app.js file in the main file we can import our units or unit speaker and i'm going to add the speaker in the main in the main in the main in the main part so it's going to be unit speaker and this should show well i will the this will show us the picker and as you can see it does not stay in the same position and that's because we are not using we are not using any state so we need to manage the state of the picker and for doing that we can just pass the properties that we are the state that we already declare as properties so we have the state here and we can say something like oh by the way we no longer need this here because we are using this inside this component and we are going to pass the unit system unit system and we also need the setter the setter for the state said unicef system equals said una system so so we are passing that to the children and now we can make use this on the unit speaker component we have some properties here so it's going to be the select value is going to be and equal and we are going to destroy for the properties here so we have the units you needs units system and we have the set units system so these are the properties that we passed to the component before and here i just going to use the eones system as a select value select value and we have another property here that's on value change so every time this value changes we are going to trigger a function that we can write here there's going to be a error function and this has an item the current item selected we can say set unit system and pass the item right here so this should take care of updating the state so as you can see now the figure stays in the right place but we are not changing the value and that's because we are not reacting to this change so for doing that we are just going to use the use effect function and now we have it empty at the beginning but now we can add a dependent here so every time the units the unit system change we are going to make this api call so now if we change you can see that this is changing and this is just one way of doing and another way would be to to you know to manually convert that make that conversion with some with some calculation but i think it's nice that we can just make an api call and this is because we are passing the units to the to this specific api in this units param query param and we can send you know the current value and another way could be just to change the the manually with some calculation another thing that i forget to do here is that i i would want to set set the current weather to node when we start loading this just in case we have we have an error so this will show the error if this is this is this is not it will show the error so i want to set this to null if if you remember in the in the initial app we don't have this like the the picker we don't didn't have it like this we have up there and it wasn't it wasn't an an element like this so i'm going to add a new styles to the picker i'm going to use the style sheet here and i'm going to declare or styles stash that create and here i'm going to create a new property that's going to be called a units system and this is going to have a position of absolute and we are going to give it a fixed height and width so the height is going to be 50 and the width is going to be 100 and i'm going to apply that to this view so style equals styles that unit system and now we can see that it's is is in position absolute but i wanna right here so i can also have a so of zero and a hate of sorry and the left property of 20. and we have it up there so it it cannot i don't know like how this is looking we have like and this is because the way it looks in ios so i'm going to change this to a negative value so top of 20 and now i think it looks better but we have a problem here so this is going to be how it looks like in ios but it's going to look kind of weird in android so i will show you how it looks like in android so now we are in android and as you can see this looks wave way above so this is just because how how things works how the picker work works for different platforms and what i want to do here is i'm going to use the platform tool from react native and i'm going to do the following so i'm going to to spread this platform in the styles i'm going to platform that select and this is a function that takes an object for every platform so we're going to use ios and for ios we are going to have the top value that we have before of of 20. and for android android we are going to have a top a positive top value of 20 so now if we save this you can see that this looks way better and and i i don't like how this speaker works here in android so what i'm going to do is i'm going to add a property here that we have in this speaker component that's only available for android that's called mouth and mold is going to be and this is going to only be applied in android in ios it will only looks the same so we are going to have this speaker as a drop down so now it looks like this and i think that's that's better that we had before and it works the same so there's there's another where we're back in ios and there's another property that we can change only in ios and that's the the size the the style for every item so i don't like that this looks kind of big compared with this so what i'm going to do is i'm going to add this item style and this is just going to be applied for each item and here i'm going to declare an inline style so so the traditional way of applying styles in react native is the the common way is using like this but you can also have inline style so you can have an object here and it's going to have a font size of 12. okay for some reason i had to restart the application but now you can see that we have a font size of of 12. so i think i'm going to make this a little bit bigger so i'm going to use more up so i'm going to have like 30 so it's a little bit up and another thing that i want to do now is as you can see if we change we have this blank state so i i don't want to have this like blank page and for two for that i'm going to add another component from react native that's called activity indicator so this activity indicator is just you know like a loader that way we can we have and and here right here we have this else condition so what i'm not going to do now is else going to have an else if error message we are going to display the errors error mesh message but in the other cases we are going to display that activity indicator so we are going to have something like this but here we are going to have the activity indicator so now you can see that we have this loader every time it's changing and i i want also to set every time we load i'm going to set the error message to new so it's going to react in any of these states depending on how these things worked and here i can pass some properties so i can pass a size property that's going to be large and i can also pass a color property and here i'm going to use our primary color that i'm first i'm going to import that from our utils folder so we have this in utils slash index and here we have our colors and i'm going to use that here colors that primary core so now you can see that we have our loader working another thing that i want to have here is that i want to have you know let's say some time has passed and this is no longer accurate you know the water changes every time so maybe i want to have a like a refresh button that will allow me to refresh this this if if we have a different state so let me ask that and it's going to be called reloads icon.js and here i'm going to you know create a react native functional component as before oh this is this is wrong this should be very low reload re low loaf and here i'm going to i'm going to use a couple of things so so the first thing is in the template that we installed we have it's really nice that we have a bunch of icons so this is coming from from from expo that installed this icons and the package that's that we already have is is called from expo we can make use of vector icons and here i'm going to use the ionic icons so where you can find all the icons is in this directory that i'm going i'm going to share in the in the description and here you can search for all the icons that you might need to your application that comes with expo and this is coming from the project vector icons and for ex i i can search for reload so we have a couple of icons here but the one that i'm going to use is going to be for ionic icons so you can see where it's coming from so that you know where where to import it and i can just copy this so here i want to do another thing so as you can see we have this prefix for every platform so it looks different for every platform so this is what i want to do so if we are in i'm going to say refresh icon name or reload well let's call it reload icon name equals so i'm going to check if we are we have this property platform that always and we can check if we are in ios we are going to display so i'm just using a ternary operator we are going to check we are going to have the md material design refresh icon so it looks a little bit different and if we are sorry we i'm going to use this if we are in android and if we are in ios i'm going to use the ios refresh icon well this will be triggered also because xbox multi-platform this will be also trigger if we are in the web or something like that and here i'm just going to pass that icon of course we don't see anything because we are not using that component so i'm just going to import re reload icons from components slash reload icon and now i can just pass i'm going to add it also in the main component so this is going to be a reload icon and we have it right there we have to add some styles to this so as before i'm going to import stylesheet and i'm going to play some styles using stylesheet that create and this is going to be a really low icon property the position is going to be absolute the top is going to be the same as our previous one 30 so it's kind of aligned to the previous one and the right is going to be 20 and here i can just apply that style style equals styles that really like and we have it right there another property that i can add here is some color so i'm going to use our colors library utility so i'm going to import from utils slash index the colors and this is going to be colors that primary color so we have the icon right there but there is this icon right now that doesn't do anything so what we need to do is we need to add here we can have an um press property so this is like a listener so every time the user press the button we're going to have this callback function and what this function is going to do we are going to have the same load function that we had before and we i'm just destructing that from the properties and i'm going to pass this here so nothing happened nothing happens yet because we haven't declared past this function so going back to the app.js file here i'm going to just pass the load function as a property so the load function this this load function so now this should work and you can see that we are changing refreshing the page of course the weather they haven't haven't changed in that period of time but you can see that now it works and finally we we have we have a bunch of of information for this api and we're going to display that information like the humid humidity the the wines speed we're going to to show this right here okay so for for for having that information i'm going to create a new component here and it's going to be called where where details that js just create a functional component here and i'm going to import the couple of things here first i'm going to import all of our colors from our utils folder utils slash index and i have this killers import [Music] equals colors and here we are going to have our primary color or secondary color and also we have going to have our border color so we have our colors and now let me let me start declaring that the styles style so the first style that i'm going to have is that the main box where everything is going to be so this is going to be cool weather details lowercase here okay i need to use of course a style sheet that create and here i'm going to have the following so this is going to go at the end so i'm going to give it a margin top of auto so because i wanted this to be at at the end i'm going to give it and because where we have flex here this will go to the end of of the screen with marching out auto i'm going to have a border width of one and a border color and we're going to use our border color constant and a border values of zen so of course we are we're not seeing anything because we haven't applied the style and we are not using the component in our app.js file so this this is not going to be in the main section we are going to import the component with where the tails from components slash weather details and i'm going to add it here right here be after this main component so i'm going to have the weather details component right here so as you can see we have the component it doesn't look good but we have it there and it does not have look yet that's going to look awesome now and what i want to do now is i'm going to add a margin to every single part of this and this is going to be to separate this from the other parts and you can see that now it's separated because we added that margin so here we we need to display the information and first i'm going to have a row a row here that's going to have the what actually this field field feels like and i'm going to have the humidity so for doing that i'm going to import i'm going to use the current weather object that we are going to have from a property and we are going to pass this here so we can pass the current weather and here i'm going to deconstruct what i need so what i need here is as before i'm going to deconstruct this from the current weather object and here we have the main property and here we have this fields like property and we have the you me so as you remember we have this here so this is this is all the parameters that we have access and in the main property we have this feels like property this feels like property that is how actually this feels and we have the humidity property and you can see it here well we need to display this in a row so for doing that i'm going to create a new a new property a new style property that's going to be whether the details row and in here i'm going to give it a flex the direction so so one thing i didn't mention is that all the all the view properties and everything in react native has already you know the display flex so everything is is in is using the flex layout so that's why we don't need to you know like declare in css display flex we can just use the flex properties so the flex duration and by default the flex duration in in react native is columns so in the in in the graph is the the default the default behavior is in in row but here is column so everything is shown behind up up and down so i'm going to change this to row so we have we have like one thing here and another here and i'm going to align the items of this row to the center and i'm going to justify the content of this row in space between so now if i add a new view and i'm just going to copy this twice and i give it the style that we declare styles that weather details roy you can see that this is this is going to every corner so this is what i wanted and also this is because we have lined items this is going to look in the center so we have that but now i'm also going to declare a new a new [Music] property so this is going to be whether the details box and this is going to give us some painting here so i can say give it a flex of one so it takes all the space and i can give it a painting of 20 and this is what i'm going to wrap every element here so this is going to have the style of styles that weather detail box and it's going to have this right here and i can just duplicate this and you can see that now we have some painting we have some paint in there and well i actually need to have this with humidity u so we have different values here so we have that and now i want to have like a like a border here so what i'm going to do here is i'm going to spread these properties but i'm going to add another one so this is well i have to grab this in an object so i'm using the preview the properties of the box and i'm going to add some new properties so this is going to have border right because i just wanted to give it to the right width it's going to be one and the border right color is going to be our border color so as you can see this is just giving me an a different uh a line here so i wanted to divide that so now that we have that uh as if you re if you watch the the initial project we have we have some icons here to display what this means and and first i'm going to import the icons for the properties for the for expo icons so from slash icons export vector icons i'm going to import phone the phone assume 5 library and the material community community icons so these are the best libraries that i found for the for these needs and now i can now start using those icons so the first one is going to to be the one for the temperature so i'm just going to copy paste this here and this is this is the icon is for temperature i'm going i'm giving it a size of 25 and the color is our primary color and you can see that we have the icon that we we wanted but we wanted this to have to be into that to be in two two like two rows so we have to make another we are just going to grab wrap this in another row that we already declare so i'm just going to copy and paste this here and you can see that now it looks correct so i'm just wrapping these two elements in a row in a row that we understand row that we already declared here and that's why we can have it like this and i also have another text that it says what what this property is doing so it's like it's at text property and this is going to say fields like and you can see that everything shows in the same row but for force for making just this look in one row we can add another another view element so this this is just like you know like creating divs in html and now we have we have that in the same row and um for this i'm going to create add some style so this is going to have is going to be named weather weather details items and this is just going to have it's going to be aligned items so i i want everything to the end so this is going to be at the end align items and and justify content flex and so we have everything to the right so is we need to apply this here style equals styles that weather little items and you can see that now we have everything at the right one final thing that i want to add here is that for for every item is that i want to have a different text here so i'm going to create that property that's going to be called text second very second very and this is going to have a font size of 50 15 a color and a color is going to be your secondary color a font weight we are going to add a font weight of 7 and 700 and a margin top of seven so it's it's like a little bit below here so we we have to declare that and now i'm going to use that here style equals styles that text secondary and you can see that we have this nice color here so this is how every item is going to look like so now that we have that what i'm going to do is i'm just going to copy what we have inside the weather details box what's it it's inside i'm going to copy that and i'm going to paste it right here where we have for humidity i'm going to paste it like right there and here i'm going to change this to humidity and it's going to have or your immunity property you mean it you me and you can see that now we have that but we need we only need to change the icon and the icon that we are going to use for the it's not going to be for phone awesome is going to be for for material community icons and the name of this icon is going to be what water water water and we can we're going also to change the size to 30 and there we have we have a different icon so now we have we have this and if if you if you watch the the the initial code we also have a different row that has that have the pressure in the and also have the wind speed so we are going to have the pressure is coming from the main property we have the pressure from here and the wind speed we have that from the wind property so we have this properties and and if we look here in the wind speed you can see that the default value value is meters by second in in the in the unit system and in the imperial system is miles per hour so we we need to handle that so for doing that i'm going to go back to the app.js file and here i'm going to pass the units system property units so we have the unit system in the in the component and what we are going to do is going to say depending on the on the on the unit system we are going to change the layout the the label so i can say wind speed equals if the we need to re read this from the properties so this is right here units system if the units systems equals to metric we are going to this place i'm go i'm also i'm going to use templates syntax so i'm going to set math does so i i want to round this the speed and if if you remember that the default value is meters by second so this is in the metric system so we have this this speed value and otherwise if we're in the in imperial system this is going to be miles per hour so i'm going to change that to miles per hour and now we need to display that so for displaying i'm just going to copy paste this row this row i'm going to copy and i'm going to paste it right here so we have two we have two two two rows and i'm going to change some values here so the fields like is going to be or wind speed and here we are going to pass the wind speed value that we declared declared before and as you can see we have now the wind speed depending of the of the of the unit system so if we change is miles in the imperial and here is meters by second and here we are going to change the pressure and the pressure we are going to display that here pressure and we have the pressure so actually the pressure is in this in this unit that i hpi that i don't know what it is but we are going to display that unit so it's important that we display the unit and we are not explaining that is our degrees so let me let me use this symbol so we know that this is degrees we have the degrees symbol there and i want to this is percentage so this is humidity is in percentage percentage and now what is left is just to change the icons so this wind speed is going to be taken for for material community icons declined speed and we are going to use this the name is going to be where there wendy windy it's going to be the size going to be 30 and here the icon that we are going to be using is called speedometer and we have the correct icons and finally i would like to add a border here so i'm just going to in this row i'm going to spread the properties from the row and i'm going to add a new property that's going to be border top width of one and then we have border top color and we are going to use our border color and there we have it guys so that's that's that's i think that's all that i wanted to cover in this application and i think it looks it looks really nice others there's another thing that i that we might need we might need to add is that if we have an error i would also like to have the reload icon it could be that we don't have a connection so i don't want to be stuck in that state so if we have an error so i will change the url to url that does not exist and we have this reload icon in case this this is and this is not looking good so let me fix that and i'm going to so let me just add a style here that's going to be text aligned and this is going to be in center and finally there's there's a thing that i would like to fix so we have an issue it's not a it's not a real problem but it's an issue is that in the app.js file we are exposing directly the api key from from the weather api and we don't want to do that mainly because this will be exposed in git or github and this is this is like a secret and so nobody should know about this api key so one way of hiding is creating a dotmb file and we are going to use a package for this so so let's open the terminal and the the package that we're going to use is this one so i'm using yarn but again you can use npm install and this is going to be react native dot emb so this is this is a package that that allows you to to store and manage secrets in your in your project so i'm going to add this and it's going to be at development dependencies it's only to be in in development and let me install this so we have installed the package and now we need to add a file so i'm going to add a file in the root of our of our project that's going to be called that emb and here what what i'm going to do is i'm going to copy this key like this and this is going to equal this value right so we have we have we have updated that and another another part here is that we want to open this this that kit ignore file and here we are going to add that that emb so this will tell git that this is not going to be included in r3 so this is very important because that's the reason that we are using this package and once we have that now we can go to the app.js file and instead of declaring this right oh there's there's another thing that we have to do is that we have to add a configuration in for for in in this bubble that config.js file so this comes with the template and here we want to add this configuration in this presets array so the configuration that we want is going to be mod module column react native dot emb so we we have we have that and because we modified this this file we need to restart our server because this is pick it up every time we start the server so we need to stop the server and now i need to restart this so i'm going to run the script jar start yarn run start and now if i reopen the application we should be picking up this information okay but we need to use this in our app app.js file so the way this works is we just import from react native. we are going to import this weather api key that we declared here and i'm going to remove this and now we are importing that from from the package and if i restart this should work as before okay okay guys i i hope you like this video and and thank you for sticking to the end if you liked this content please subscribe to the channel so i'm planning to doing more react native videos in the future with firebase with you know with some back-end other features so stay tuned and i will see you in the next time

Channel: Esteban Codes

Views: 80,866

Keywords: react, react native, javascript

Id: NgDaPmxewcg

Length: 120min 12sec (7212 seconds)

Published: Tue Jul 07 2020