React Native Course – Android and iOS App Development

learn all about react native in this complete beginner's course from Emma Williams she is a software engineer who specializes in react native Emma will teach you everything you need to know to start developing cross-platform native mobile apps using JavaScript app downloads continue to increase year on year creating some big Revenue learning how to create mobile apps is also a lot of fun in this course I'll be introducing you to react native and together we'll build a weather application you're welcome to just watch the video or follow along the only prerequisite for the course is that you have a text editor set up I'll be using atom but you're welcome to use whichever one you prefer before we go any further if you're planning to follow along with this tutorial I'm going to start by showing you how to register for an API key which will be needed for the application it can take some time for the API key to activate which is why I'm suggesting starting by registering the key now the API key we'll use for the application is called the open Weather API and can be found here so you'll need to start by registering and then creating an API key we will be using the five-day forecast which is free and can be found here we'll return back to this later in the tutorial so what is react native well react native is a framework which was created by Facebook and was initially released in 2015. react native lets you create mobile apps for IOS and Android by using JavaScript in the land of mobile apps we have two types of apps native and hybrid apps when you create a mobile app you have two choices create a hybrid app or create a native app when you create a native app you write two separate applications one will use Swift or objective c and is an app for the iOS platform the other uses kotlin or Java and is an application for the Android platform creating a native application gives you opportunities for fantastic user experiences but the trade-off is that it means you need to do the work twice in order to create one application once for iOS and one for Android and often this means you need two development teams the alternative is to create a hybrid app so hybrid apps have one code base and can run on multiple platforms and examples of these include Cordova and ionic so you could have one code base and the app can run on both IOS and Android the benefit with hybrid apps is that you don't need two code bases or knowledge of multiple languages the issue with a traditional hybrid app though is that you're essentially creating a web app that runs on a phone so you have a container which renders web views a webview essentially vendors a website inside of the application when you do this the user experience is restricted so this is where react native comes in whilst technically react native is a hybrid platform because you only have one code base the app renders using real native UI components as opposed to webviews react native takes our JavaScript code and makes a bridge between our app and our Target platform so our components get rendered natively without using web views and we can use platform specific apis and components consequently we have a more performant app with a much better user experience you're also able to extend the code and create custom native components if required so you might have heard of Expo already but what is Expo well Expo is an external platform which makes our lives easier when we're developing building and deploying react native applications it is not compulsory to use Expo but if you're just getting started it is much quicker if you don't use Expo you have to go through the various steps of installing Android studio and xcode and then making sure you have simulators and emulators running when we use Expo we can just run the app easily on our device by simply scanning a QR code for this course we'll be using Expo so let's go ahead and get our environment set up so firstly we need to make sure we have a recent version of node installed next we need to go ahead and install the XPO CLI which will help us to create our project to do this we just type npm install Dash G because we want it installed globally Expo CLI now we need to navigate to the directory where we would like to create our project and then we can just go ahead and create it we do this by typing npx create Expo app weather app now all we have left to do is to run the project so we change directories into where we want the project to run by typing CD weather app and now we just type npm start you can also type Expo start or yarn start here if you have yarn installed and that is your preferred package manager lastly we can Now preview the app on our phones you have to make sure your phone is on the same internet connection as your computer then you can install the client for Expo from the app store or the Google Play Store you can find this by searching for Expo and the app is free once this is installed you can scan the QR code onto the camera if you're using an iOS device or from the app if you're using an Android device at this point you should see the app running for the purposes of teaching this course I'll be running the app on a simulator so I'll briefly go ahead in the next video and show you how to set this up but feel free to skip this section if you're happy to run the app on your own device so now we've looked at setting up a react native application using Expo I'm going to show you how to set the app up using the react native CLI you don't need to watch this section or do the setup if you're happy to run the app using Expo on your own device but I'm going to show you how to complete the setup using this approach so you're aware of it because as I mentioned earlier if you want to build an application using custom native code then you need to use this approach so we'll start by looking at iOS for this you need to have a Mac if you don't have a Mac you can still watch or you can skip to the section where I set up an application and then move on to Android so we'll start by following the documentation on the react native website we need to make sure we have node and Watchman installed if you want to work with multiple versions of node I highly suggest using NVM and the setup for this can be found here for those of you who aren't familiar with Watchman Watchman detects when the source code has changed so it can rebuild the bundle automatically next you need to make sure you have the correct version of Ruby installed on your machine you can type Ruby dash dash version to check which version you have installed if it doesn't match the version react native uses we can find more information about that here and then you need to install this version too you can do this by using a ruby package manager such as rvm so now we're ready to install xcode and we do this via the App Store this will install the various tools and simulators for us to run the application this installation can take some time so you may want to pause the video here and let this download if you're following along so now we need to make sure we have cocoapods installed if you have never used poker pods it's a dependency manager a little bit like npm but for iOS so now we have everything installed we can go ahead and create the application it's worth noting the warning provided on the website which says if we have previously installed the react native CLI we should remove it to avoid unexpected issues so we'll do that now by typing npm uninstall Dash G react native CLI and at react native Community CLI so now let's navigate to where we want to create the project and we'll do this by saying MPX react native init awesome project for those of you who are not familiar MPX is part of the npm tool chain which lets you run commands without installing things globally at this point our project should be set up so we can navigate into it by typing CD awesome project and now we're ready to start the application we need to use two commands for this so it's useful to have two separate windows open in your terminal First Command we use is MPX react native start this command will start running Metro which is the bundler that react native uses we could also run yarnstart here if you prefer to use yarn as your package manager or even npm run start finally we're ready to start the application and we do this by typing MPX react native run iOS now you should see the application launch inside a simulator as a side note if you're more comfortable working with xcode you can launch the application from there you will need to open the XC workspace ensure you're running Metro with react native start and then you can manually run a simulator in the next section we'll move on to launching the application via Android in the last section we looked at running the application using xcode and iOS this time we'll look at running the application with Android Studio the first thing you'll need to do is to make sure you have Android Studio downloaded and installed the link to download this can be found here once Android Studio is installed we need to make sure we have an emulator set up to do this we simply open Android Studio and select configure we then create our device when you are running the application on Android you need to make sure the emulator is launched before you do anything else we can simply double click the device here to launch it if you want to launch the emulator from your command line you type emulator Dash avd and then type the name so now we can close Android studio and type npx react native run Android and we should see our application launch in the emulator if you prefer to use your own device here you can simply plug the device into your computer and you should see it automatically detected if you've run into any issues make sure you have enabled USB debugging on the device finally if you run into any other issues which says could not connect to the development server You may wish to run a command which says ADB reverse TCP colon 8081 TCP colon 8081 doing this will set the port of your Android device to the port of your computer so now we have everything set up let's go ahead and explore the application in its current state I'm going to revert back to my project set up with Expo depending on how you set the application up you should be presented with a basic folder structure inside of your text editor if the project was created using the react native CLI you'll see a directory with iOS and another directory with Android inside of these directories are native entry points to the application we also have our node modules and Babel setup additionally if you set the application up with the react native CLI you'll also see prettier and we should also have a file called app.js so to make our lives easier we're going to add a linter for working with our project for those of you who use the react native CLI you should have a link to pre-installed but if you set the application up using Expo you will not have this depending on whether you're using yarn or npm you'll need to run the following which will install eslint as a development dependency npm install eslint dash dash save Dash Dev now we can initialize eslint and we do this by typing npx eslint dash dash init after this is done we should have an eslint RC file created with some setup and we can modify this we're also going to install the react native Community eslint config so we say npm install at react native Community slash eslint Dash config dash dash save Dash Dev I'm going to add a couple of extra rules but you're welcome to customize this to your own preference so now we'll also need to install prettier for helping us with our code formatting to do this we type npm install dash dash save Dash Dev dash dash save exact prettier and now we also need to create a file for our config so we'll type touch.pritia.js and we'll add the following you can find out more about setting config for any of these files here and here it's also worth adding eslint to your text editor depending on what text editor you have if you're using atom you can navigate to preferences install int or if you're using vs code then you can go to preferences extensions eslint if you've run into any issues you may need to try restarting your text editor lastly we can add a script for running eslint inside of our package.json so we'll call it lint and we'll set the value to eslint Dot to run this now all you need to do is type npm run lint or yarn lint so when you're working on an application it's really useful to know how to debug the code in order to fix any errors that you may create or run into in react native we have the ability to access what is called a debug menu with the various ways to run the application we have slightly different ways to access the debug menu if you're running the application on a physical device you can shape the device to access the debug menu if you're running the application on an iOS simulator then you can type command d and on an Android emulator command m if you're on a Mac or control M if you're on a Windows so now we should all be able to see the debug menu and we can see the options which are available to us the first one is reload whilst these days react native has hot reloading available it's still useful to know this option is here you're also able to type command R so you can do this without launching the debug menu the next option is debug selecting this will open the react native debugger and once this is open you can access the JavaScript console just like when you're working with a website so you can do this in Chrome by selecting view developer JavaScript console or you can type command option in j this means we can use console logs inside of our application and inspect them so let's navigate our application.js file I'm going to add a console log now let's go back to Chrome everyone can see our console log is printed out to us so when you're working with mobile apps each platform has a set of native components whilst the names of these differ depending on the platform the outcome is the same they help you lay out the UI of the application so for example on iOS if you're working with images you could use a UI image View whereas on Android you would use an image View on iOS this may be contained within a UI view whereas on Android this may be contained within a View group with react native we use JavaScript in our components and when the app runs react native will then create the correct UI for the different IOS and Android platforms so in order for us to create our UI react native has some core components which we can use if you're familiar with react you can think of this a bit like how you use divs and spans or P tags for your layout here are some of the core components that react native provides so we may wrap our layout inside of a view and then inside of this we may want to display some text using the text core component or a button using the button component so in our app.js file let's go ahead and use the core text component to add some text which we will wrap inside a view you can think of a view a bit like div so unless we apply styling to it the view won't be visible so we'll create a view and give it a height and a width of 100. and a background color of orange inside of the view we'll use the text core component and print out some text that says hello world now let's run this on our device we can see The View with the orange background which also contains our text so you may be wondering what the syntax is with all these tags it looks a bit like JavaScript and HTML and it's called jsx jsx is an extension of JavaScript and it stands for JavaScript and XML so we use jsx when we're creating elements and because it is Javascript we're also able to use JavaScript with it so we could change our text to use a variable instead let's give this a go so before the return statement we'll create a variable called message and when assigned to this our string which says hello now because we're going to be evaluating a JavaScript expression when the element is rendered we need to use a set of curly braces [Music] inside of these curly braces we place our variable so we use the message variable here now let's return to our simulator nothing has changed visually but we just used a variable to render the text so before we start building our application there's a few other things we need to be aware of when we're working with components you need to import react and then you need to import any of the core components that you wish to use your component is a constant function so it starts with const and any jsx must be returned lastly you need to export the function components and we do this using export default so we've come across the term component a few times in this section we have the core components which we import such as View and text but we also referred to everything in the file as a component we use the term element to describe what we see on the screen but this is contained within what we call a component one of the best things about react and react native is how it makes you the developer break down what you're building [Music] the UI is separated into different pieces if we take a look at the open weather map website we can see we have a navigation bar with various links foreign we have a search text input we have a map and some diagrams and also some City details all of these pieces can be broken down into separate components before they are rendered on the screen this makes working with code a lot of fun but it also makes it very extensible and clear so now we have a basic understanding of how react native Works let's go ahead and create our first component so now we have a basic understanding of how react native Works let's go ahead and create our first component so in the app.js file let's delete everything the first thing you need to do when you create a component is to import react so let's go ahead and do that now we say import react from react next we'll import the core components that we are going to use in our case we'll just use View and text so we say import and then we use a set of curly braces inside the curly braces we say View and text outside of the curly braces we say from react native there are a few different ways to create components but we're going to use the constant function approach described in the last section and we can look at these other approaches a bit more later we're going to call this component app so we say const app followed by an equal sign a set of parentheses an arrow and a set of curly braces lastly we need to export the component so we say export default app our component does not render anything but this is the basic setup for the components to achieved now we can add the jsx to return some UI we start by using the return keyword followed by a set of parentheses we'll start by adding The View and then we'll also add the text for our text we say current weather so let's take a look at the simulator it's very hard to see the text the layout of the text will vary slightly depending on which simulator or emulator you're using this is a bit like a layout on a website varying depending on the size of the computer screen or the different browser for this reason just adding padding or margins to fix the layout is not a great approach because you might fix the layout on one screen but it won't be guaranteed to look better on a different screen size or device and you also want to be mindful that people might be using your application on an iPad or tablet too so with this in mind react native provides another core component which can help solve this problem it's called a safe area View let's update our code to use this so we start by adding it to the import and then we'll wrap the whole element inside of a safe area View now if we check the simulator again we can see the content has been rendered just below the status bar of the device so now we made our first component let's move on to discussing styling in react native we don't have access to standard CSS instead we use a JavaScript object the naming of the properties is usually the same as with standard CSS except that we use camel casing instead so font size becomes font size for example there are a few different ways to apply the Styles but we're going to start by using inline styles when we use inline Styles the styles are applied as we create the component so we're going to start by applying a background color of pink to our view we'll talk about props shortly but for now just think of them like properties like when you add key value pairs to an object so we set a style prop on our view we say Style equals and then a set of curly braces inside the curly braces because we are using inline Styles we add a second set of curly braces and then we say background color a colon and then a string with the value pink let's save this and view it in the simulator we can see our screen with our pink background color applied so whilst this works as our code becomes more complicated applying inline Styles in this way can get quite messy so as it's always good to focus on writing quality code we're going to use another approach and this is called stylesheet.create so we can Define our Styles all in one place to do this we need to import style sheet from the react native API the list of the apis we can use with react native can be found here so we go ahead and we create a style object usually it's best to do this before you export the component so we say const styles equals style sheet Dot create we follow this by a set of parentheses and then a set of curly braces because we're passing it an object we can then go ahead and add our styles so we're going to call this attribute the container and now we can add background color now we need to add this to our component we can remove the second set of curly braces and then say styles Dot container let's save this and view the simulator nothing has changed visually but we have moved away from inline Styles and started using stylesheet.create instead when you're applying styles to your component it can be useful to refer to the documentation as these props vary slightly depending on what core component you're applying the styles to you can find out more about these here so we've just applied the background color but we only have the background color around the text not the whole screen so let's add a few other things here we'll add a style to the safe area view called wrapper and apply Flex one we'll also add Flex 1 to the container Flex is part of the layout props when we're building react native applications positioning and layout is done using flexbox and the reason for this is that it lets us build our layouts for the various different screen sizes that we will encounter so unlike with the web you don't have to say display Flex for those of you who aren't familiar Flex will Define how much of the screen The View should fill and you provide a value from zero upwards so we're saying Flex of one and this is the equivalent of saying the view should fill the entire screen because we're only using one View group when you want to start to split the view into different areas you may need to start to consider the different values depending on how much space you want each part of the screen to fill so if you're using Flex one then all the components up the tree must also use flex one which is why we also apply it to the outer safe area View let's also make our title display in the center of the screen we can do this by saying align items Center so this centers the text horizontally if we wanted to display the text in the center vertically we would just use justify content we want our text to just be centered horizontally so the goal for this screen is to show the user the current weather we want to display the actual temperature what the temperature feels like the high and low values and then we want to display a description and some additional text about the weather lastly we also want to display an icon and a background color eventually we want this screen to be dynamic so the icon background color and message that we provide change depending on the weather for now though let's just hard code everything in so that we can get our basic layout and once we have looked at getting the data from the API we can update this so it works dynamically so let's start by adding our text for the first value that we want to add which will be the temperature and for now we'll just add six for the value we'll add another text for the fields so we'll say fields like five let's add the high and low in another text so we say hi colon eight and low colon six so let's start by adding the layout styles for these we'll start with the temperature and we'll call this temp we'll give this a color of black and a font size of 48. you don't use units just the numbers for the Styles and react native all dimensions in react native are unitless and represent density independent pixels so this is an absolute unit of measurement for the device for the feels like text We'll add some Styles called feels foreign and this will have a font size of 30 and a color of black we also don't now need our title so let's delete that let's also add some styles for the high and low text we'll apply this to both pieces of the text and we'll call it styles Dot high low we will give this a color of black and a font size of 20. let's view the simulator and see what we've done so far we want the text for the high value and the text for the low value to appear on the same line to do this we can set the flex direction to use row we'll start by making a container for these pieces of text and then set the flex Direction on the container so that it applies to the children which is the high and low text so we start by wrapping both pieces of text in a view and we'll call the styles for this Hi-Lo wrapper we'll then say Flex Direction right now if we check on the device again we can see the high and low text both appear on the same line on the bottom of the screen we want to add some more details about the current weather conditions so we'll create another view and inside this we'll place two pieces of text inside the first text we'll say it's sunny and inside the second we'll say it's perfect t-shirt weather we want this text to show at the bottom of the screen so let's apply some styles we'll call the attribute body wrapper and set justify content to flex end this is so that it displays on the bottom of the screen let's also add align items with flex start so that the text displays on the far left of the screen we're also going to change our container so that it only wraps the items we want to display on the top portion of the screen so we'll move the closing brace for this view to be just before the view of the body wrapper attributes now let's also apply some styles to the text with the weather description we'll call the first one description and we'll call the second one message inside description let's add a font size of 48. and let's make the message a bit smaller so this one will have a font size of 30. now let's check the simulator we have our basic layout set up but it doesn't really look very pretty nor is it very dynamic we also see that our background color does not apply to the whole screen this is because we changed the container to only wrap the items at the top of the screen we can fix this by moving the background color into the safe area view wrapper let's do this now let's check the simulator again and we can see everything now looks as we expect in the next section we'll look at adding an image to the screen so we want to display an icon that represents the weather to the user there are a few ways we could do this but I'm going to use a library which is installed by default when we use create Expo app if you did not create the app using Expo you can manually install it now it's called react native Vector icons and it provides us with a variety of icons that we can use within our project the library Expo installs is built on top of the react native Vector icons one to explore the Expo items you can see them here for now we just want to use an icon that represents sunshine so let's search for this when we click on the icon it provides us with the details we need to use the icon so to start we need to import the icon family next we need to add the icon to our component we're going to show the icon at the top of the screen let's also change the size to be 100 so it's a bit bigger let's have a quick look on the simulator and see how this looks now so we can see the icon has been successfully added to our screen the top part of the screen is starting to look quite busy so let's Center all of this content by adding justify content Center to the container let's also add some left padding to the text at the bottom of the screen so I'll add padding left with the value of 25. and a margin bottom of 40. so in react native when we're adding things like margins and padding we can either provide a single value to the padding or margin which will affect the top right bottom and left alternatively we can apply separate values to the different areas like we're doing now we have our first component so we can look and moving on to using it with real data we're going to start by moving our current weather component into another component there are a few different approaches you can use in terms of structuring your app and these often vary depending on the complexity of the application we're going to start by creating a directory called SRC inside of this we're going to create another directory called components inside of the components directory let's create a file called current weather dot Js so let's paste everything from the app file into the current weather component let's also rename the component from app to current weather we also need to make sure it's exported now inside the app file let's delete everything let's redefine our component again so we say const app equals and then we use an arrow function with parentheses at the bottom of the file we say export default app inside the body let's add return with some parentheses we'll also import react and let's also import View from react native lastly we'll also import stylesheet let's set up the styles so we say const styles equals style sheet Dot create and we'll set an attribute called container we'll give this a flex of one let's now add the view to our component and we can apply the styles we also want to use our current weather component so we'll import this to start with we say import and say current weather and then we need to provide the path that we want to get the file from now all we have left to do is to render this inside of the component let's save this and check everything worked in the simulator everything looks good so before we go any further let's take a step back and review what we have just learned so far we have learned how to set up an app with Expo we have looked at how to create and import a component and we've also looked at basic styling for our components a component is a function that returns some amount of jsx the jsx is the syntax we use to make our lives easier for readability purposes but under the hood jsx gets turned into JavaScript by using babble and you can see more about the conversion here inside of our components we show or render something to show the user we can then export the component and use it elsewhere in our application when it comes to importing a component into another component we use the keyword import and relative path so we don't have to append the dot Js when we work with react native we are working with a framework that promotes lots of component reuse because it's a component-based framework so in our application we'll usually have a root component which in our case is the app.js file and this acts as the entry point for the application but then we'll usually have multiple other components which are usually stored inside of a directory called components inside these components we may then import additional components so for example we may create a custom button and reuse it throughout our application as opposed to redefining it in multiple places as a side note you're able to have more than one component in a file but just having the one makes the code much easier to work with and this is very important especially when there's more than one developer working on a project so this component-based architecture not only helps with debugging and easier testing but there's also a convention encoding called dry which stands for don't repeat yourself it's good to have this at the back of your mind when you're working with a component-based framework so our app is going to have two additional screens one which will show the upcoming weather and one which will show some details about the local city to the user as we're still getting familiar with react native we're going to move on to implementing the initial layout for these screens first after we've done this we'll have a look at how to make them Dynamic by fetching data from the open Weather API and then we'll look at how we can wire up all these screens together with navigation so we're going to start by creating the component to show the upcoming weather we'll call this component upcoming weather so we can create a file inside of our components directory let's also create the boilerplate for our component so we say const upcoming weather equals and then we use a set of parentheses an arrow function and a set of curly braces we'll also make sure to export the component so we say export default upcoming weather we need to import react from react foreign safe area View from react native inside of the component we'll say return and we'll add a set of parentheses inside of the parentheses We'll add the tags for the safe area View let's also set up our styles so we add style sheet to the react native import then before our component is exported we say const styles equals stylesheet dot create we add some parentheses and curly braces we'll also create a container and we'll add this to the safe area View we'll give this Flex of one let's also add some text so we need to import this and now we can create the text we'll give this the message upcoming weather in order to check we've set up the component correctly we can view it in the simulator before we do this though we'll need to add the component to our app.js file so at the top of the file just like we did with current weather let's import the file now then in the render let's remove current weather and add the upcoming weather let's check the simulator we can see our component has been set up correctly and we get to see the upcoming weather text we added so what are our goals for this component well we want to be able to show the user a list and in the list we want to show the user the date and time an icon and what the weather will be at that time before we do this we need to have a look at how lists work in react native as showing lists to a user is a core part of working with mobile apps and it's something you're likely to come across very often so rendering lists inside of mobile apps is a common task you may find yourself presented with take a look at your favorite social media app or have a look at a news app because of the often limited screen size we have on a mobile device very often the information is displayed to us in the form of a list and we have to think carefully about how we go about using it in order to make the best of the screen space we have available to us so in react native when we work with lists we have a choice of a few core components that we can use primarily these are called Flat list and section list additionally we have virtualized lists but it's better to try and use the flat list or section list components because virtualized list is essentially a diluted version of these and unless you need a heavy amount of flexibility you should be able to fulfill your needs with the flat list or section list components so what's the difference between flat list and section list there are a few differences in the way you implement the two which we'll look at shortly but in terms of the end result if you simply have a list that you want to display to the user then you can use flat list we can take a look at the example on the react native website so we see three items in the list here if I try to scroll well not a lot happens however if I add a few more items to the list we can see what happens when the list is bigger I'll add three more items and just amend the title and ID properties slightly so now we see our longer list and we can scroll through the list here like so let's also have a quick look at section list so here we can see the list but we can also see how it's broken up into sections and each section has its own items so we have main dishes sides drinks and so on so the outcome here is that if you have a collection of data that you need to display to the user which needs to be broken into sections then you should use section list otherwise flat list will suffice so let's move on to looking at how these lists are implemented on the right hand side here I can see all the properties that are available to us to use however there are two of these props with a red dot next to them if we scroll down the documentation a bit we can see that these are marked as required so all the other props are optional but render item and sections are compulsory equally if we go ahead and look back at flat list we can see there are again a lot of props available to us but this time we have two marked with a red dot render item and data so the takeaway here is that both lists are heavily customizable but both have two things that you need to provide in order to implement them we are going to be using flat list in our app so let's start with looking more deeply at this one the first one of the required props is data and for this we need to pass an array inside of the array we have the data that we want to be displayed on the screen so if your list was showing a list of cars then you may have an array containing names of cars if your list was displaying a list of students test results then perhaps you would have an array containing the students names and their test scores with flat list you're able to Simply pass in an array let me update the code here to show this I'm going to remove all the objects and then I'll simply pass in the titles to the array so I'll also remove the title keys in the item function I'll also remove the reference to title and simply refer to the item itself so now when the list renders I can see the three items from the data array it's worth pointing out here that this is one of the differences between flat list and section list in that with Section list you must pass in an array of objects because of the fact the list is broken up into sections in reality when you're working with flat list because quite often you're rendering Dynamic data such as that from an API you're probably more likely to end up also passing in an array containing objects too so now we understand the required data property let's have a look at the second required property which was called render item the render item prop gets past a function and this will get called on every array element its job is to decide how that element then gets displayed to the user so you can think of it a bit like the List's own render function if the function for rendering the item is very simple we can place it directly in the definition for the flat list quite often though we end up passing it a reference to a function as we may want to render out quite a few things for our list element we pass a single argument to the function which is an object and this is the item you are rendering so if I refresh the screen and go back to the original example here we can see it renders the title from each item in the data array so if I added another property to the items in the data array let's say amount and then I pass that into the render item and render an additional piece of text to render the amount we then get to see that each item in the list renders this value too if you're working with Section list then render item Works in a similar way so before we move on and look at implementing a list in our app let's recap everything we've just looked at with lists we've learned that in react native we have two main core components that we can use when we're working with lists flat list and section list we know that flat list is more of a standard list but we can use section list if our data needs to be displayed in sections we then looked at what we need to do to get our list up and running we've seen that we must pass in some data which must be an array and if we're using section list then this must also be an array containing objects we've also seen that we must additionally use a prop called render item and we use this to display the list element to the user so let's now move back to our code and figure out how we're going to use a list so back in our upcoming weather component let's start by importing the flat list core component so inside the react native Imports we just say flat list now under our upcoming weather text let's use this so we start by typing flat list we know we need the required data and render item props so let's add these two obviously at the moment we have not yet set up our app to fetch any data so for now let's write this out by hand we'll start by declaring the variable for data outside of our component and we say const data and will assigned this the required array inside the array I'm going to just Place three objects as for now this will be enough before we wire up our app to use the real data later if we have a look at the open Weather API documentation we can see some examples of the data sent back to us there is obviously a lot we can work with here but for our list we're just going to be sharing the weather at three hour intervals and we only need a few bits of data from the response we'll want to use DT text for the current time the Min and Max temperature and a description of the weather so I'm just going to paste in some example code here and you can pause the video now if you're following along so now we have our data we can pass this into the flat list so we should have our data prop defined we use an equal sign and a curly brace and then pass in the data the next required prop we need to add is render item we're going to create a function to pass into this which will render what we want to show to the user in our case we're going to create a separate component for the item so we want render item to render the component that we'll be creating let's start by creating the component for the item I mentioned earlier that it's best to keep components in their own files but whilst we're setting up our list I'm going to create it in this file and then when we do some refactoring we can move it later so we're going to call this component item so we Define it just like we have with all our other components we say const then the component name which is item an equal sign an arrow and some curly braces we then say return with some parentheses we're going to be rendering the DT text min and Max weather and then the weather condition let's add these props now I'm going to Define props in the parameter and then using destructuring I'll pull these out so I say const a set of curly braces an equal sign and props this is a convenient and clean way to access props inside of your components inside the curly braces I'll add DT text men Max and condition now inside the return let's start by adding a wrapper or container so I'll add a view here inside the view I'll add three pieces of text in the first piece of text We'll add the DT text prop so I need to use curly braces because we're using a prop in the second I'll add min and in the third I'll add Max I'm also going to add an icon which will go above all the pieces of text I'm going to do this using Expo icons again so we need to import this under our react native Imports let's say import then we have our curly braces and inside this we say feather then we say from at explo slash Vector icons we're going to be dynamically using different icons based on the weather condition but for now let's just add one to the name Sun as we're going to need to create a file which handles some of the configuration for us later in order to correctly map the feather icon names with the open weather map weather descriptions so I add feather at the top of the view I then set a name prop which is equal to Sun we set the size to be 50. because we're using a list and we don't want the icon to be too huge and then we set the color to white so now we have our list item component let's create the render item function inside of the upcoming weather component so before the return keyword we say const render item and then we set this up like an arrow function so we use an equal sign parentheses an arrow and because we want to render something we'll use another set of parentheses for the parameter we want to pass in the item so we use a set of curly braces and pass in the item we need to pass the required props to the item component so we say condition and set this equal to be item Dot weather we use square brackets to get the element at the position of zero then Dot Main we set the DT text and this is equal to item Dot DT text we then set them in which is equal to item Dot Main Dot temp min and then Max which is equal to item Dot Main Dot temp Max now in our flat list all we need to do is pass in this function so we say render item and pass in render item let's save this and run the app in the simulator to see where everything is at so in the simulator we see the upcoming weather text but then we see the three items from the data that we passed into the flat list rendered on the screen obviously it doesn't look very pleasing but we can address that in a moment before we do that though there's one other thing we need to add to our flat list if we take a look back at the docs on the website we can see the example also include something called a key extractor what is this well let's read through the description it says it is used to extract a unique key for a given item at a specified index key is used for caching and as the react key to track the item reordering the default extractor checks item dot key then item.id and then falls back to using the index like reactors so to summarize when you're working with lists you need to provide a unique key to each element in the data the reason behind this is largely Performance Based and it means that under the hood react native is able to keep track of each item in the list imagine you're working with a really long list say one with over 100 pieces of data when something in the list changes for example if an element was deleted then because of the way react native works when the re-rendering happens everything would get rebuilt from scratch by providing the key it means the different item changes this is not necessary and instead the list can be recalculated and as such that this can be updated rather than rebuilt the requirements for the key are that it must be a string and each element must have its own unique ID we can either add a key to each element in our data or we can use key extractor to add the key for us in our data we could go ahead and add keys to each item but because each item has its own DT text key and value which because it's based on a timestamp is unique for each item we're going to use that for the key so let's start by adding the key extractor to the flat list so all we have to do inside curly braces now is say item Arrow and item.dt text as a side note if you ever see this warning then it's essentially telling you that this is what you need to do to fix it before we move on to making our list look a bit better let's just have a quick look at some of the other props which are available to us to use on the list if we wanted so we have item separator component which is something that gets rendered between each item in the list this would be good for visual purposes if you wanted to add something that distinctly separates each item in the list let's try it out so I type item separator component an equal sign and then I'm going to add an inline function I'll add a view and now I'll add some Styles here so I say background color red and height two so now in the list I can see this is rendered between each item let's refresh the screen list empty component is another useful prop to know about it means that if the list is empty it will automatically display some other content to the user which is a great consideration if you are depending on data fetching so I start by creating a component called empty I'll give this a view and I'll add some text and for the text I'll just say empty now in the list I Define the list empty component prop and I pass in my empty component so now if I update the data array so it's empty we get to see this in action and I see the empty component instead displayed on the screen there's also a list header and list footer which means we could display either a header or footer in our list there's obviously a lot you can do with your lists and it's good to spend some time getting familiar with the documentation here and playing about with everything the main things you must remember though are that you need to provide the render item and data to the flat list and you need to provide a key of some sort to the data you don't need to worry too deeply about performance especially if you aren't working with a very large list because flat list only gets re-rendered if the data changes and only renders the items currently displaying on the screen not everything at once but as you start to build bigger and bigger lists it's important to have performance at the back of your mind when you're building out the list so let's go back to our code and see what we can do to make everything a bit more visually pleasing the first thing you may have noticed when we check the simulator was that you could not see the icon the reason for this is that the icon color is white and we have not added any background color to our screen so this is currently defaulting as white 2. so let's start by updating the style attributes in our container I'm going to start by importing status bar to our react native Imports and inside the style sheet I'll add margin top and I'll set this equal to status bar Dot current height or zero this is basically a constant from the status bar component which means we're taking into account both platforms and saying to initialize with the current height of the status bar for Android or use xero next I'm going to set a background color to red now I'm going to set the view of the item to be Style equals styles Dot item I'll add this to the style sheet I'm going to set padding to be 20. margin vertical to be eight margin horizontal to be 16. I'm going to set a flex Direction of rho and justify content to be spaced around this is so the items in the row are evenly distributed I'll set align items to be Center border width to be five and also a background color to be pink next I'm going to set Style equals styles Dot temp on both the min and Max temperatures I'll add this to the style sheet I'll give this a color of white and a font size of 20. lastly our set Style equals styles Dot date onto the DT text and in the style sheet we'll add this we'll set color to be white and font size to be 15. let's save this and view it in the simulator we can now see everything and the list items are much more distinct we obviously have some way to go with this still but it's a good start the next two things that we're going to do are add an image to this component which will let us discuss how to use images in react native and then distract out the item component into its own component which will let us do a bit of refactoring and also talk a bit more deeply about props in react native but let's start by looking at how we go about using images in react native so in react native we have a few different options available for when it comes to working with images for example local or network images on the example on the react native website we can see both of these approaches in action so we can see the image core component imported and then used we can see that a source prop is set in the first image so this differs slightly from the web where you may use SRC and now we have the full word source a require statement is then placed followed by the path to the image the other way to load the image is by using a network image and this means we load the image from a URL instead this is more standard practice when you're working with API requests so we can see here we use the source prop again but this time we pass in an object with a URI key and the URL is set as the value there are a few other caveats worth pointing out when you're working with images if you're using a network image you need to explicitly State a height for the image you should also be aware of the supported types of images in react native additionally when you're sizing the images in general you can give the image a fixed height and width or you can use aspect ratio with height and or the width to size the image lastly it's worth being mindful of image storage sizes when you're using static images so not the network images as these will get bundled when you ship your application and if you have a lot of images that you can start to eat up memory if you've seen file names with 2X and 3X for images it's because it's standard practice to provide the same image in three sizes in order to account for the different screen resolutions so we're going to get an image to use for our app from website which provides royalty-free stock images it's called pixabay if you navigate to the pixabay website and then search for clouds whilst you're welcome to use any of these images I'm going to use this one here so I'll select the image and then I'll select to download the image back in our app I store the image in the assets directory which is where we store static content so we could actually add another folder here for the images but I'm just going to add it straight into the directory so now we are ready to use the image at our upcoming weather component we need to start by importing the core image component inside of our react native Imports now inside the render under the text I'm going to add the image so I add image and the self-closing tags I then type source an equal sign and some curly braces inside the curly braces I say require and a set of parentheses and then I type the path to the image I'm also going to set some Styles so I say Style equals styles Dot image I then set this inside of the style sheet so I say image here too I'll give this a height of 100 and a width of also 100. let's save this and view it in the simulator so we can see our image has rendered successfully the problem with this approach for us is that we're going to want to display the image as the background to the screen and we can't give children to the image component in cases like this there is another core component that we can use instead and this is called image background image background works much like image as the documentation here says you can add whatever children to it that you would like to layer on top of it that's the perfect behavior that we're looking for so let's go back to our code and we'll add in image background so back in our upcoming weather component let's change the import from image to the image background now inside the safe area view just before the text let's move our image here and we'll change it to be image background because this is now going to accept children we want to change it not to use self-closing tags so we'll add a closing tag before the closing tag of the safe area View we're also going to change the styles to use flex of one lastly let's also change the background color in the safe area view to be something that blends in better with our image so we'll use royal blue here as a side note you can see all the colors available to use with react native here so we can see now we have our image background applied and our safe area view Blends in with the image much better so earlier in the course I mentioned we would take some time to understand what props are in react native if you've worked with react before then they're the same in react native for those of you who are new to react and react native it's important to understand props as they are a key feature of react native so what are props the term prop is just short for property so when you create an object in JavaScript you add properties to the object and you give the properties a value so for example if you created a dog object as dogs have legs then legs could be added to the dog object as a property and then given a value which most of the time would probably be for in react native we can think of props in a similar fashion they adjust properties which are given a value of some sort but they're used as way to pass our data down from the parent to a child so to visualize this a bit more clearly imagine we had a house component and this would be the parent we want the house component to render a room component this will be our child and we want this to render four times because our house is going to have four rooms when the room component gets rendered we want to be able to pass down the name of the person whose room it is so to implement this we would have the house component and every time you render the room we would set a room owner as a prop inside of the room component we would be able to access the Ramona prop and use this in some way so for example we could set a piece of text which would display the value of the Ramona so instead of creating four separate room components we just have the one and each time it's customized to our requirements so now hopefully we better understand that we can use props to customize our components when we added the image background core component to our upcoming weather component we used a prop called Source in order to set the image which would be displayed to the user core components inside react native usually come with props which can be used if I take a look at the text core component I can see the list of props available to us so for example I could set the Ellipsis mode or disabled the same was true when we worked with flat list and we had to set the data and render item props just like with the core components in react native we can use props in our own components and by doing so we can customize a component but it also means that we're able to make the component more reusable and component reusability is a key concept when you're working with react or react native so back in our app let's look at a little demo of this in action we won't use this in our final code but I'm going to create a file called our child dot Js we'll set this up like a basic component so I start by importing react from react I'll then import View and text from react native once the component is set up and exported I'll say return and then I'm going to use a set of parentheses I'll then render a view and also some text I'm going to use inline Styles here as this is just a demo so I'll give this a height of 200. and a width of also 200. and I'll also set a background color of red inside the text I'm going to want to set some text to display so this is where we're going to display a prop the prop will be sent down from the parent which in our case for this example will be the app.js file the name of the prop will be message so to display the value of the prop we need to use curly braces so I typed the curly braces and then the prop name which is message we also need to set the prop as an argument into the component itself and we do this inside of curly braces here alternatively we can just say props here and then destructure the value so now let's go back to our app.js file and here we can render the archile component for this example I'm going to remove the upcoming weather component temporarily so we need to start by importing the r child component and then we're going to want to use this three times each time we want to use a different value for the message prop so we start by adding the prop and then we use an equal sign and some curly braces inside the curly braces we can set the value the first one will say hello the second one will say greetings and the third one will say goodbye let's save this and view it in the simulator when the app runs we can see our child component is rendered three times and each time through the use of props the message is displayed with its different values before we review what we've just learned let's revert the app.js file back to what we need for our app so we'll delete the references to the r child component we will also put back the upcoming weather component lastly let's go ahead and delete the r child component just before I do this I want to point out one other thing with regards to file and folder structure we'll come back to this later but it's better practice once you start using components to have a directory structure where you have a folder for your screens in the app and then a component folder where you store your components so the screens are like the screen as the user will visually see so for example upcoming weather would be a screen but then we have a component folder where you store your components which are reusable components and the code for things like UI such as buttons and perhaps alerts or Footers so now let's delete the r child component before we move on let's just recap what we've just looked at we have just looked at what props are and how they let you pass in data from a parent to a child in order to promote component reuse in react native we've also looked at props with core react native components and also with custom components there are a few more points to consider when you're working with props and these are really really important to have at the back of your mind firstly props are immutable this means that they can't be changed once the component is created we pass the props from the parent to the child as we've just discussed we use unidirectional data flow when we're working with react and react native essentially this means that data is only able to move in one direction from the parent to the child the outcome of this is that our lives are much easier imagine if you're driving on a road and cars could drive in both directions you'd have a collision pretty quickly this would be the same scenario with our data so unidirectional data flow keeps things straightforward so now we are all much more familiar with how props work and we should hopefully now be becoming more familiar with react native itself let's take a bit of a pause and do some refactoring to the current state of our application in the last section I mentioned that one approach to structuring code is to split the code into components and screens and then I discussed the benefits around doing this as you start to use more components within your screens in this section we're going to do this then we're going to move the item component for the upcoming weather flat list into its own file inside the components directory we'll also do some other General refactoring so our code is a bit easier to work with moving forwards so to start in our SRC directory let's create another directory called screens now let's move the current weather and the upcoming weather components into this directory these components are core screens for our application so it makes sense this is where they are stored now we need to go through these files and check there are no Imports we need to update and then we also need to check the same thing in the other place these files are used which is in the app.js file it's important to follow this process every time you extract some code otherwise when you run the app you'll run into errors so let's try running the app in the simulator now to check that nothing has broken great everything looks okay the next thing we're going to want to do is to create a file for the item component which is rendered by our flat list inside the upcoming weather screen so inside of the components directory I'm going to create a file and for the sake of being a bit more descriptive I'm going to call this list item next I'll copy and paste the code from the upcoming weather component into the list item component I'll also need to update the Imports so I say import react from react and then I'll also import View and text from react native additionally I need to import feather inside curly braces from at Expo slash Vector icons then we also need to make sure the component is exported so it can be used within the upcoming weather screen so I say export default list item the next thing we need to do is import stylesheet into our react native Imports and then we need to set up the styles so before the component is exported I say const styles equals stylesheet Dot create then I need to use a set of parentheses and a set of curly braces so we're going to need to bring the Styles over from the upcoming weather component but obviously we only need to use the relevant Styles here so I'll need the item date and temp styles I'll grab these now and then I can also delete these in the upcoming weather component additionally I can now delete item in the upcoming weather component and then I need to change the render item to return the list item component as opposed to item we're already setting the props for the component here but let's check this is all properly set up in our list item component too everything looks good I see prop set as the parameter and we already have the destructuring for the props in place so now the last thing I need to do is import list item into the upcoming weather component so I say import list item from and then I add the path which is components slash list item I'll also remove the view from the react native Imports here as this is no longer needed for the sake of making our code as clean as possible we can also destructure our styles so before the return I say const then I use a set of curly braces and then I say equals styles inside the curly braces I'll Place container and image inside the render I can then remove the Styles and the dot for these attributes I'll do the same in the list item component so before the return I say const I use a set of curly braces and say equals styles inside the curly braces I place item date and temp inside the return I can then remove the Styles and the dot for these attributes let's save this and check everything has worked in the simulator so visually nothing has changed but we're now using the list item component from inside of its own file when we use render item inside the flat list before we move on to looking at how to wire up our screens with navigation there is one other screen we're going to implement this screen will show some details about the current weather location so let's set up the boilerplate for this screen now and then we'll look at what will be shown on the screen this component will be called City so inside of our screens directory we can create a new file and call it City dot Js inside the file we do our standard setup so we import react from react and then we'll import safe area View text and style sheet from react native then we'll set up our component so I say const City equals then I use a set of parentheses an arrow and some curly braces next I'll export the component so at the bottom of the file I say export default City inside of the curly braces I say return and then use some parentheses for now I'll just add the safe area View and inside this some text fill the text for now we'll just say City let's add some basic Styles here to get this set up so before the component is exported I'll say const styles equals style sheet Dot create I'll then add a set of parentheses and some curly braces next I'm going to add an attribute called container and I'll give this Flex of one lastly I'll add this to the safe area view so I say Style equals and some curly braces and then I just add styles Dot container now let's add this screen to our app.js file to check everything is rendering correctly so back in our app.js file I start by adding the import and then for now I'll remove upcoming weather and change this to show the city screen instead let's save this and check the simulator on the simulator now we can see that our new screen is rendering correctly so what do we want this screen to do well the city screen will be quite a simple screen it'll have an image background which will be City related and then it will show the name and the country of the city it will show the population of the city and also the time that the sun rises and the sun sets let's start by finding the image which we'll use for the screen's background image and then search for City just like with the upcoming weather screen you can use any image you want here but I'm going to use this one here so I'll select the image and then select to download the image once the image is downloaded I'll move it into my assets directory for Simplicity I'll also rename this to city background now let's go back to our city component we're going to start by adding image background to our react native Imports then inside the save area view let's remove the text we'll then need to add image background we know for the image background we need to add the source prop so let's do that now we say source equals and then some curly braces inside of the curly braces we say require and then add the path to our image we also know that we're probably going to want to add some styles for this so let's do that now too we say style equals and then we'll call this image layout so we say Styles dot image layout inside of our style sheet let's also add image layout here and we'll give this Flex of one whilst we're here let's also update the margin top of the status bar for Android just like we did in the upcoming weather component so we say margin top and then we give this the value of status bar dot current height or zero and then we need to add status bar to our react native Imports when we discuss this component I said we'll need the city name and Country and then we'll also add the population and then the sunrise and sunset times so let's start by adding two pieces of text for the city name and Country will hard coding these values for now so for the name I'll say London and for the country I'll say UK let's also add some styles for these for the city name we'll call the attribute city name and for the country we'll call the attribute country name let's add these to our style sheet so for the city name I'm going to say justify content of Center aligned self of Center font size of 40 font weight of bold and color of white next with the country name I'll say justify content of Center Airline self of Center font size of 30 color of white and font weight of bold before we go any further let's just stop for a moment and take a look at the styles for the city name and country name apart from the font size all these styles are the same we like to try and keep our code as clean and tidy as possible and when we start to see duplication it's a sign that it's possible that we could be doing something a bit better in react native we're able to pass in multiple styles to the style prop by using array notation so if you're working on the web you might use multiple class names but in react native we pass the array of the styles to the style prop and these will get merged into one object if you have any duplication in these Styles it will be the last definition that is used this approach is very useful if we have a theme and then we want to use that theme in multiple places but then we also have some additional unique styles to apply to so in the style sheet I'm going to create a new attribute called City text and I'm going to move everything inside of this I'll then remove font size as this is the value that will be unique for each bit of text inside country name and city name I'll remove everything except the font size now back in the render inside of the style prop for both of these pieces of text we need to add an array inside of the array We'll add City text but then we're also going to make sure that the city name and the country name also remain as this is where the font sizes come from so the next thing we want to add to our screen is the population for this we're going to show an icon of a person and some text because we want to be rendering both of these elements and also that we want them to show on a row we're going to wrap these inside of a container so I'm going to start by adding a view to the react native Imports and whilst I'm here I'm also going to import feather again so I say import then I use curly braces and inside the curly braces I say feather from at Expo slash Vector icons then I'll go back to the render and I'll start by adding The View inside the view I'll add feather and also some text so let's go and look for an icon that we can use with this component on the Expo icon site I'll search for a user icon and then I'll select this one here I can copy the details into the component I'm going to amend the size to be 50. and change the color to be red now in the text let's add another hard-coded value obviously this is way off for the population size for London but I'm just going to say 8 000 for now so to make sure these elements render in a row and to make the text look a bit better let's add some styles I'll set a style for the view called population wrapper and I'll set the style for the text to be population text let's add these to the style sheet so I'll start with population wrapper I'll say Flex direction of row align items of Center justify content of Center and margin top of 30. for the population text I'll say font size of 25. foreign left of seven point five I'll set color to be red and font weight to be bold the last details we need to add to this screen are the sunrise and the sunset again these are going to want to be rendered in a row and I'm going to want to use icons and text for both of these I'll start by adding a view and then I'll add feather and also some text and then I'll repeat this again so I'll add feather and also some text so let's start by going back to the Expo icon site and look for a sunrise icon this one looks perfect so I'll copy the details and I'll add it to the component let's also do the same for sunset so I'll navigate back to the Expo site and our search for sunset and then I can copy and add the details to the component for both icons I'm going to update the size to be 50. and I'll also update the color to be white I'm now just going to hard code in some values for the sunrise and the sunset times for Sunrise I'll say 10 colon 46 colon 58 am for the sunset I'll say 17 colon 28 colon 15. P.M now let's add some Styles here I'm going to add a rise set wrapper to the view container for these elements then I'll add Rye set text both pieces of text let's navigate back to our style sheet and we'll add in these attributes so I'll start with the Rye set wrapper I'll give this a flex direction of row I'll say align items of Center justify content space around and margin top of 30. let's also add the rise set text and this will have a font size of 20. a color of white and a font weight of bold let's save this and see where things are at in the simulator so when our app runs we're now able to see the city screen with the requirements we Define for the screen we have our image background and the city name and location we also have an icon for the population and some text for the population and then we have our sunrise and sunset images and text I keep going on about how we'll shortly look at navigation to wire up our screens and I promise we'll get there shortly I have a few last bits of refactoring I want to do to the current state of our application before we move on so firstly if we navigate back to our city screen and take a look at our component there are three places in the render part of this component where we use a feather icon and then a piece of text this is a great example of when we could extract out something to be a component we don't have any need to be writing this out three times instead we can have a component that renders this and accepts props for the image type and the text which we need to show so let's go ahead and do this now we'll start by creating a file in our components directory called icon text once this is created we can navigate to the component and set up our boilerplate so we say import react from react we know we need to show some text in this component and we also want to wrap this in a view so next let's import View and text from react native we also know this component is going to need some Styles so we can add style sheet to the Imports as well lastly let's add feather from at Expo slash Vector icons now we can Define our component so we say const eye context equals then we have a set of parentheses an arrow and some curly braces outside of this we need to export the component so we say export default icon text let's also set up our Styles before we export the component so we say const styles equals style sheet Dot create we then use some parentheses and some curly braces inside of the component let's say return and we'll add some parentheses next we'll add The View so let's go back to our city component we can copy the first instance of where the feather icon and the text is used together so where feather and text are used inside of the population wrapper I'll copy the icon and also the text next I'll go back to the icon text component and paste this in here so what props are going to need to be defined for this component I know I'm going to need to define the icon name and the color and also the text so we can set these props up now I'll change the name inside the feather element to use curly braces and then I'll pass in icon name I'll do the same with the color and then I'll pass in icon color then in the text also inside curly braces I'll say body text now inside the components parameters let's add props then at the top of the file we can anticipate these and use some destructuring so we'll say const then some curly braces equals props inside of the curly braces I'll add icon name icon color and body text now let's go back to our city component again if we take a look at the styles used for population text and write set text we can see these Styles differ a bit both use a font weight of bold but everything else is different so how are we going to go about handling this we can actually just pass these in as a prop as well so let's start with the commonality and handle the Bold font weight first so back in the icon text component in the text we'll say Style equals styles Dot text theme then inside the style sheet we can add the text theme attribute we'll say font weight of bold now if we go back to our city component we can remove the font weight of bold from the population text and then also the rise set text the remaining styles for these pieces of text will pass down to the child in a prop called body text styles so let's add this prop to the icon text component in the destructuring of the component I'll add body text styles now in the text I'll change the style here to accept an array as we're going to be passing in multiple Styles here inside the array I'll then add body text styles great so now we should all be set up to use this component inside of the city component so let's start by updating the population text section so inside of the view I'll add the icon text component next our set icon name and I'll set this to user then I'll add icon color and set this to red I'll set body text to be eight thousand and then body text styles to be styles Dot population text so now I can delete the feather and text elements here we need to repeat these steps for the sunrise and the sunset so I start by adding the icon text component at the top of the sunrise I set icon name to Sunrise icon color to White and body text to 10. 46. 58 am then I'll set the body text styles to be styles Dot write set text so now I can remove the feather and text elements for the sunrise let's do this again for the sunset so I add the icon text component again I set the icon name to Sunset icon color to white and body text to 17. 28 15 P.M then I'll set body textiles to be styles Dot rise set text now I can remove the feather and text elements for the sunset again let's save this and see where things are at in the simulator so when the simulator runs the app we see our city screen with the same components as before this time though we have a shared component for the icon and text so we have less duplication in our code it's really good to pay attention to detail when you're working with your code the layout for the text does not look centered under the icon so we should fix that let's go back to our code next let's go back to the icon text component we'll add a style attribute to the view so we can make sure the items contained within the view are aligned correctly so I'll say Style equals styles Dot container then I'll add this to the style sheet inside of the Styles I'll say align items of Center now if I go back to the city screen I'm going to create some shared styles for the population wrapper and the rise set wrapper in the style sheet I'll call this row layout inside of this I'll add Flex Direction of row and align items of Center I'll then remove these from the population wrapper and also the Rye set wrapper next I'll add a raise to both of the style props in the view elements and then I can add in the row layout for these in the inputs of the component let's remove the reference to feather as this is now no longer needed then let's do some destructuring for the styles so before the return in the component I'll say const then I use some curly braces and then I'll say equals styles inside of the curly braces I'll add container city name City text country name population wrapper population text rice set wrapper and Rise set text and then I'll go ahead and remove all the Styles and dots inside the render where these are used so now if we go back to the icon text component I'll also do the same thing here so before the return I'll say const then I'll use some curly braces and then I'll say equals Styles inside the curly braces I'll add container and text theme and then I'll also remove the Styles and the dots where these were used inside of the render so now let's save this and view this again in the simulator everything now looks good so the only screen we haven't yet looked at in terms of refactoring is the current weather screen if we take a look at this component now we can see there's a couple of instances where there's a view which wraps two pieces of text I'm also going to extract these to be their own component and I'm going to call this component row text so inside of the components directory let's start by creating the Rotex component once this is created we can navigate to the component and set up our Imports so I start by saying import react from react this component is going to need to use View and text so I'll say import View [Music] text from react native we're also going to need to add some Styles so I'll add the style sheet inside of the Imports now we can go ahead and Define the component so I say const bro text then I use an equal sign some parentheses an arrow and some curly braces outside of the curly braces I'll say export default bro text before the export I'll also set up the styles so I say const styles equals style sheet Dot create I'll use a set of parentheses and some curly braces now inside of the components curly braces I'll say return and I'll use a set of parentheses let's go back to the current weather and select the first instance of what we want to use in this component so I'll select The View with the high low wrapper and then also the text contained inside of it I'll go back to the Rotex component and I'll paste this in so I know I'm going to need two props for each bit of text so inside the first text I'll remove the text that says hi and then I use curly braces and I'll add a prop called message one inside the second bit of text I'll do the same thing again but this time I call this message too I'm going to want to pass in props for the styles for The View and also for both pieces of text in The View so I'll say Styles equals and then I'll add container styles in the first text I'll say Style equals message one styles and in the second bit of text I'll say Style equals message to styles let's update the component parameters to include props and then we can also add our destructuring to anticipate these props so at the top of the component I say const then I use some curly braces and then I say equals styles inside of the curly braces I'll add message one message to container styles message one styles and message two styles now let's go back to the current weather component and update this to use our Rotex component so I'll start by adding row text just before the view with the Hilo wrapper next I'll set up our props so I'll say message one and I'll set this to high colon 8. next I'll say message two and I'll set this equal to low colon six our set container styles to styles Dot high low wrapper and then I'll set message one styles to styles Dot Hilo and message two styles to styles Dot high low now I can go ahead and delete the existing View and text here next Above The View with the body wrapper I can follow these steps again so I add the row text and then I set up my props so I say message one and set this to it's sunny next I sent message two and I set this to it's perfect t-shirt weather I then set container styles and set this to be styles Dot body wrapper and then I set message one styles to styles Dot description and message two styles to styles Dot message now I can go ahead and delete the existing View and text here too we need to make sure the Rotex component has been imported at the top of the file vs code has done this automatically for me when I started using the component next let's go back to our app.js file and in the render let's update this to show the current weather component now let's run the app in the simulator and see how everything looks when the app runs in the simulator it looks like something's broken debugging errors is a really important process to get to grips with when you're working with your code sometimes it's just figuring out how to approach a problem as opposed to panicking so how do we know what the problem is here well we know the only components we have changed are the city and Road tax components it's the Rotex component which is not showing on our screen so let's take a look at that first the render looks okay but when we destructured our props I set this to Styles not props so this looks like it'll be the cause of our problems here I'll change this from styles to props also we aren't setting anything in our style sheet so let's clean this up too I'll remove the style declaration and I'll also remove stylesheet from the Imports as it turned out we didn't need this after all let's save this and view the app in the simulator everything now looks good let's wrap up our refactoring by just doing one last bit of Cleanup in the current weather component for consistency I'm going to add destructuring to the styles used here so I'll say const then I use some curly braces and then I'll say equals styles inside the curly braces I'll say wrapper container temp fails Hilo wrapper high low body wrapper description and message then I'll go ahead and remove the Styles and dots inside of the render function let's save this and run the app in the simulator again now everything looks good and we have fixed the issue with the row layout not displaying so now we're ready to go ahead and look at wiring up our app with navigation when you're building web apps you can use anchor tags to link between the different pages if a user clicks on a link or a button to navigate to a new page then that URL gets pushed onto a stack which is essentially a data structure and in this case it will be called the browser history stack later when the user wants to navigate back then the URL gets popped off the stack and they're able to go back to the prior page where they'd come from when you use a mobile app it's quite unusual these days that it will only have one screen as they usually have more information to show a user however we can't use navigation in the way that we do on the web so we need some way to navigate between the different screens in our application in our app we have already built three different screens we have a screen to show the current weather a screen to show the upcoming weather and a screen to show the city details in order to navigate between the screens we need to use a navigator you might have noticed this before but the other consideration with navigation is how the navigation between the screens occurs so by this I mean the transition when you click something in an app to load another screen does the next screen then slide in from the right to the left or does it perhaps drop down from the top to the bottom as well as all of this there's then the different types of navigation to consider because perhaps we want to use tabs in the app to let the user navigate around in react native there's no built-in navigation so you have to use a library to add navigation to your app the two most popular libraries are react navigation and react native navigation while both of these libraries have the same end goal the implementation of the two differs the other consideration between the two libraries is that react navigation is built into Expo so if you created your app with Expo you can use it just fine however if you want to use react native navigation you would have to eject your app from Expo or you would have had to create your app without using Expo and I showed you how to do this at the start of the course so in our app we're going to be using react navigation and our goal is to implement tabs for the user to navigate between our different screens so let's start by installing react navigation to do this in the terminal we need to type npm install at react Dash navigation slash native next because we're using Expo we have some additional dependencies we need to install to get everything up and running if you're not using Expo you can see the additional installation steps required to get up and running with react navigation here so for Expo we need to run npx Vo install react Dash native Dash screens react Dash native Dash safe Dash area Dash context so once everything is installed we need to set up a navigation container this will wrap the entire application and usually we'd only do this once in the application and we do it at the root of our project so we're going to add this to the app.js file so we start at the top of the file and we say import next we use curly braces and we need to make sure we use a capital N and we say navigation container and this is imported from at react Dash navigation slash native next inside the render at the top we need to place a navigation container then we close this at the very bottom of the render so that it contains everything at the start of this section I discussed how on the web we push and pop items off of the stack with react navigation we follow a similar idea except that we do this via a navigator so the screens can get pushed and popped off of the Navigator there are two types of Navigators we can use and this depends on our requirements essentially if we don't want the user to navigate to a screen using a tab then probably we'll want to use the stack Navigator so let's look at some examples to show this a bit more clearly if I load this example on snack from the react navigation website I see a settings screen if I click the button that says go to profile and then navigated to the profile screen next if I then click the back icon the profile screen is popped off of the navigation stack and I'm back on the settings screen for this kind of navigation you would want to use a stack Navigator at the bottom of the screen there are also some tabs when I select one of these the screen the user sees changes and this is the behavior I want for our application if you want to explore more deeply all the kinds of navigation available to use with react navigation then you can visit this GitHub repository and then you can navigate to the example section if you load this then you can play about with everything so for our app as I said we want to use tabs to let the user navigate between the different screens it's up to you when you create your app to decide where you want the tabs to show as you can show them on the bottom of the screen or the top of the screen there are some platform considerations to bear in mind here too as often on Android you have tabs at the top of the screen and on iOS you have them at the bottom in our app we're going to display the tabs at the bottom of the screen but if you wanted to show this on the top for Android and the bottom for iOS you would need to set up material top tabs and then decide which to display based on the platform you can access the platform the user is using by using the platform API from react native and then you can use the OS property so back to our tabs we need to start by installing the bottom tabs so we say npm install at react navigation slash bottom tabs once this is done if we go back to our app.js file we can import this so underneath the import for the navigation container we say import then we use curly braces and inside the curly braces we say create bottom tab Navigator and then we say from at react navigation slash bottom tabs next before the component is defined we need to say const then using a capital T we say tab equals and then we say create bottom tab Navigator and follow this with parentheses by doing this we're initializing the tab object so that we can use it next we want to wrap all our components inside of the tab Navigator so inside the navigation container we say tab Dot Navigator and then we close this just before the closing navigation container so next we're ready to go ahead and add our screens so I say tab Dot screen and then I set the component name so I say name equals and as a string I add the component name and so the first one for us will be current and next I add the component so I say component equals and then I set this to current weather then I repeat this again for the other two screens so I say tab Dot screen and then I set the component name which is upcoming and I set the component to upcoming weather lastly I say tab dot screen and this time I set the name to be City and I also set the component to be City so now we should have just set up the three screens for our app let's save this and see what things are looking like in the simulator when the simulator runs the app we see a screen with an error the error says a screen can only contain screen group or react fragment as its direct children so clearly we made an error here the only file we've changed directly is the app.js file so let's go back to that file and take a look so when we set up our tabs we did not remove the view container this is neither a screen group or react fragment so let's remove that I'll remove the view then in order to keep things tidy I'll remove the view from the react native Imports I can also remove the styles that were used for this there are no other styles set now so let's also remove the stylesheet Declaration and then also the import for style sheet let's save this and run the app in the simulator again this time the app loads and I can see the three tabs set up when I click through the tabs I'm able to navigate to the different screens on our app it doesn't look very pretty though so we'll go ahead and start looking at how to make this look a bit better so there's lots of configuration options available to us with react navigation as we can see here in the documentation we can set a tab bar icon if we look a bit more deeply into the documentation you can see there's a wealth of other things available too so we can set labels and positions and so on in our app we already have the name showing on the tabs for the different screens but we're going to customize things a bit further we're going to set an active and an inactive color for the tab bar then we're also going to set icons for each of the tab bar items as we can see in the documentation we set the active and inactive tint colors on the Navigator and then we set the icons in the tab so back in our code in the tab Navigator we're going to say screen options then we'll use an equal sign and some curly braces inside the curly braces we use another set of curly bracers and then we say tab bar active tint color we're going to set this to the string tomato next we'll say tab bar inactive tint color and we'll set this to be Gray for the tab icons we're going to use some icons again from feather and Expo icons so we'll start by importing this at the top of our file we say import then we use some curly braces and inside the curly braces we say feather then we say from at Expo slash Vector icons so to set the Taber icon we can use the tab bar icon property as it says in the documentation we can use it on our screen components in the options prop although for their example they've placed it in the screen options prop of the tab Navigator in our implementation we'll be using it in the screen components options so in the first screen I say options then I use an equal sign and then I use two curly braces next I say tab bar icon and for the parameter I'm going to pass in focused this is because we're going to want to set a different color for the icon depending on whether the tab bar icon is or is not selected next I use an arrow and then some parentheses inside the parentheses I'll render the feather icon so I just say feather I've already selected the icons for the tabs here so I'll say name equals and inside curly braces I'll set this to be droplets our set size to 25 and inside color if the icon is focused we want to return tomato otherwise we want to return black now we need to repeat these steps again for our other two screens so in the screen of the upcoming weather I say options then an equal sign and two curly braces next I say tab bar icon and for the parameter I pass in focused then I use an arrow and some parentheses next I set up the feather icon this time for name I set it to be clock I'll set size to 25 and for the color I'll say if focused then show tomato otherwise show black then for the city screen we do this again so I say options and I use the two curly braces inside of the curly braces I then set the feather icon up I set name to home size to 25 and for the color I say if it's focused use tomato otherwise use black so now the tab icons and styling should be set up let's save everything and see where things are at in the simulator so back in the simulator we see all of our tabs set up with the tabs and the icons everything should now be running correctly in order to make our code a bit easier to follow I'm going to extract the tabs into their own component and then I'll import this into the app.js file so inside the components directory we'll create a file called tabs.js next back in the app.js component I'm going to copy all the Imports and the initialization of the tabs then I'll paste this into the tabs file now I can go ahead and create the component so I say const tabs equals then a set of parentheses an arrow and some curly braces inside the curly braces I'll say return and I'll use some parentheses outside of the component I'll say export default tabs now I'll go back to the app.js file and I'll copy everything related to the tabs next I'll paste this into the tabs.js file back in the app.js file we can now delete all the code related to the tabs now if I go back to the tabs component I need to update all the Imports for my screens as we're now inside of a directory and not at the root of the project back in the app.js file I can then delete all the Imports which are now not needed lastly in the render I can just pass in the tabs component so now everything's much more readable let's save this and view it in the simulator thing looks good and we see the tabs in the simulator still when I click on a tab it changes color and our tab code is extracted into its own component so everything is nice and tidy if we go back to the code for the tabs component you may see an eslint warning I'm going to just disable this warning for this file as we need to follow the react navigation requirements and set up our tabs in this way so before we move on let's add a few more customization details to our navigation in the header bar I get the same name as I do for the tab name so we don't need to change this but I'm going to set the background color of the tab bar and also the background color of the header bar after that I'll go ahead and add some more styles to the font used in the header bar so in my screen options for the tab Navigator I'll say tab bar Style and then I'll use an object inside of this I'll say background color and I'll set this to light blue this is all one word and all lowercase next I'll set another property called header Style and I'll also use an object here I'll set the background color also to light blue then I'll set a property called header title Style and I'll also use an object for this inside of this object I'll say font weight of bold font size of 25 and color to be tomato let's save this and check things out in the simulator so now we can see our tab bar and header bar both have a matching background color the font in the header bar is a bit larger and bolder and the color of the selected tab matches the color of the header bar title there's a ton of customization options available to you with react navigation so I strongly advise you spend some time getting familiar with the documentation you can see a bit more about the header bars here so we're shortly going to move on and look at State and then data fetching in our app after that we'll look at using the real data in our components in order to prepare ourselves for this though there's one more file I'd like to implement in our current weather component we currently have an icon and a message description set for when the weather is sunny in the completed app we're going to show a different icon and a different message based on the weather additionally we're going to change the background color of the screen to represent the different weather we'll base these different states on the weather conditions provided by the open weather map API so we're going to create a file which contains these conditions and then the icons message and background color which should be shown for these conditions so we'll start by creating a directory to store this which will be called utilities so let's do that now in the SRC directory we'll create a new directory called utilities then we'll call the file which will store these properties and values weather type inside the file we need to create an object so we say export const weather type and then we set that equal to an object because of the data provided by the API we need to capitalize the weather types we'll start by creating the objects for each of the weather types the first one is called thunderstorm the next is drizzle then we set rain next we'll set snow then clear clouds Haze and mist so let's start by setting up the thunderstorm type we'll set an icon and give this the value of the string zap next we'll set a message and we'll set this to the string it could get noisy and then we'll set a background color to the black hex color value of zero zero zero zero zero zero note that this is passed in as a string so the next one is drizzle this one will have an icon of cloud Dash brain then for the message we'll say it might rain a little then we set the background color to 364 54 f for rain we'll set the icon to Umbrella and then for the message we'll say you will need an umbrella and the background color will be zero zero zero 0 f f for snow we'll set the icon to Cloud Dash snow for the message we'll say let's build a Snowman and the background color will be set to 7 F6 zero six five next for Clear we'll set the icon to Sun and we'll set the message to it is perfect t-shirt weather and the background color will be set to e47 two zero zero now for clouds we'll set the icon to Cloud we'll set the message to you could live in the clouds and then the background color will be set to 363 636 now for haze we'll set the icon to wind and the message will say it might be a bit damp and then for the background color we'll set this to 585 8 6 e and then lastly for mist we'll set the icon to align Dash ify the message will be set to it might be hard to see and then the background color will be set to 3e3 e37 [Music] right that was a lot of typing but now we can try this out even though we don't have any real data yet being used if we go back to the current weather component we can start by importing this file as we're not importing a component but we're importing an exported object we need to use curly braces so we say import and then we use curly braces inside the curly braces we say weather type and then we import this from utilities weather type so let's test this out on the weather condition message so inside the last row text component inside the message to prop we can just say weather type and then use square brackets and let's try out the message for the Thunder weather condition so as we're using square bracket notation here we pass in the string let's save this and see what things look like in the simulator so now we're going to move on to some of the more deeper topics in react native and we're going to take a step back from our app just for a bit in order to take the time to learn some of the details required to successfully make our app more dynamic Dynamic is the key word here so far in our application everything has been static this means that we have all our screens and all of these are now wired up with navigation but nothing in our app really does anything except display values to the user which we have hard-coded in ourselves if this is all you wanted to do then you only need to use props just like we have and you can pass your data around from parent to child components but isn't the real excitement of making applications these days how interactive we can make them and how fun we can make the experience for the user when was the last time you enjoyed using an application either on the web or on mobile that only functioned in this way with react native and react we're able to make the user experience super interactive and update and respond to users input so given this intention props are only half of the story the other half is state is what I'm going to introduce you to now so what is state to put it simply state is an object and this object contains data about the component that for some reason we decide we need to keep track of within our application in the object we Define key value Pairs and these key value pairs are the way in which we track a single piece of data that over time is going to change let's visualize this a bit more if we go back to the house example from when we looked at props using the props we pass data down to each of the rooms in the house using State though we can be inside a room and keep track of something that is going to change in the room so perhaps we want to keep track of the messy state or maybe we want to keep track of whether the room was dark so we could track the value dark as true or false or maybe we know a massive storm is incoming so we want to keep track of whether or not the room is wet the benefit of state within a react native or react application is that it means things can change they can be added modified and removed and we as the developer can work with this more easily and update our internal data and Trigger UI updates based on these changes there is one very key point to be aware of here though when the data in our component changes the component will re-render so to emphasize this point when a component first renders on the screen to the user we have what is called an initial render if we're using State and some of this state changes then the component will re-render itself so let's look at this through our room example when the storm is possibly incoming our room component renders on the screen when it first loads we have a wet State and this is set to force later the storm happens our room gets flooded this causes the wet state to get set to true consequently the room component then re-renders in the world of coding this sort of change might be more likely to occur based on a user event such as a button press or perhaps some sort of user input such as typing something into an input field it's totally fine if this all seems a bit overwhelming or confusing right now it can be a lot of information to process let's stop for a moment and summarize what we have just learned we have learned the state as an object that is used to keep track of data about a component we've learned that by using State we can add remove or modify things in our component more easily and then we can trigger UI updates based on these changes additionally we've also learned that when State changes it causes the component to re-render so let's just be very clear now on the difference between props and State props let us pass data between the components where a state lets us internally manage the data within a component you therefore can't modify the state of the component outside of the component in this sense it's a bit like when you're working with local scope in JavaScript of course with vanilla JavaScript you can make things Dynamic but the benefit of working with react native and react is that a lot of the hard work is done for you and you just have to provide initial values and then consider how you would like this value to update and then also be displayed to the user if and when your state grows you need this to be at an application Level then you can also access libraries to help you manage this such as Redux but that is out of the scope of this course so we're going to continue our journey with state by creating a simple counter component which won't be in our final app but will hopefully solidify our understanding a bit more here we'll start by creating the component without using state so hopefully we can better see why we need State and then we'll add state to the component so inside the SRC directory I'm going to create a new directory called demonstration you're welcome to keep the code in this directory for reference purposes or delete it in the final project at the end of the course but it saves us from having to create a new app for any demonstration code which we'll make during the rest of the course so in the SRC folder let's create this new folder called demonstration now inside of this folder I'm going to create a component called counter.js we'll set this up just like we have with our other components so we'll start by importing react from react next we'll import View text button and style sheet and we'll import these from react native now let's go ahead and create the component hopefully you're getting used to doing this now but we'll start by saying const counter and we'll follow this by an equal sign some parentheses an arrow and some curly braces outside of the curly braces we'll export the component so we say export default counter inside of the curly braces will say return and we'll use a set of parentheses then before the export we'll create our style sheet so we say const styles equals style sheet dot create and then we use some parentheses and some curly braces so let's set up our component before the return I'm going to create a variable which will store the value of count so I say let count and I set this equal to zero now inside of the return we can create a view then we'll also create some text inside of the text we're going to use a template literal and interpolate in the count value so we use curly braces and then some backticks we say count and a colon then we pass in the count variable next we'll add two buttons for the first button will set color to red for the title will say increase the count and then we set on press for this we use an array function so we use some parentheses and an arrow for the first one I'm actually going to use curly braces because there's a little bit more I want to do here so firstly I'll increment the count so I say count plus plus and then I also want to add a console log to print out the value of the count variable for the second button we'll set the color to Green for the title we'll say decrease the count and for onpress I'll just pass in an arrow function which will decrement the count let's add a couple of styles on The View we'll set a container so I say style equals Styles Dot container and for the text I'll set some Styles called title so I say styles equals styles Dot title in the style sheet I'll set the container I'll give this Flex of one and background color of Orange next I'll set the title I'll give this a line south of Center and font size of 25. and then I'm going to set a margin top of 25. we also need to be able to see this component on the screen of our app so let's go back to our app.js file I'm going to start by importing the counter and I'll do this from dot slash SRC slash demonstration slash counter temporarily I'm going to remove the tabs from the render in the component and replace this with the counter now let's load the simulator we now see our counter component on the screen we see the two buttons and also the text which displays the counter value great so let's now click the button to increment the counter so it looks like the button was pressed successfully but the count value has not updated on the screen let's dig into this bit more and we'll check the Contour log we added so it looks like this did increment I'll press the increase button again we now see two so the counter value is definitely increasing but the text that displays the count on the screen is not showing the correct count so the reason for this is that react does not re-render a component when the value of a variable changes if this happened we would end up with re-renders happening all over the place and it would result in a really bad user experience I mentioned when we looked at state that when we use State and the state changes the component re-renders so this is a great example of a use case for state we'll look more deeply at hooks in a bit but we're going to use a hook provided by react called you state in order to fix our problems here for now you can think of a hook as functions that we can use inside of our function components all of the components we have made throughout this course have been function components so to start off we need to import the use date hook we do this when we import react so in the react import we add a comma and then some curly braces inside of the curly braces we say you state now when any values we use with the u-state hook are updated then react will ensure the component also gets updated to reflect these changes to the user so now we need to update the Declaration for our count variable and use the use State hook instead so let's delete the variable and we'll start again this time we use the hook so we say const and then we use square brackets and we say equals use state inside the square brackets I'll say count and then set count lastly inside the parentheses for the U state I'll set the value 0. so when we use the use date hook we're setting up some piece of State for our component when you state is set up we need to pass in the initial value for what the state should be so if we were implementing the flooded room example here we might have to set this up by saying is flooded and set is flooded and then in the parentheses we would have said false for the initial value we want the counter to start at zero which is why here we're passing in zero we can pass in any of the data types required for our needs though so this could also be a string or an object and so on the square brackets where we have added count and set count are simply using a ready structuring the first value in this is the count and this tracks the value for the count but we never directly change the value of count instead we use set count which is a function and into this we pass what we want the new value for count to be so let's go ahead and update our component to use this in the first button I'm going to remove the console log and also the incrementing of the old count variable then I will say set count and it will pass in count plus one so we aren't modifying count here we're just getting the value of count and then adding one to it in the second button I'll say set count and this time I'll pass in the value of count again and then minus one let's save this and go back to the simulator now let's press the increase button the count displayed on the screen updates to show our new count now let's press the button to decrement the value the value on the screen now decrements so now we have successfully worked with State for the first time let's recap what we have just learned when we want to use you state in a function component we can use a hook called you state we never directly change the value for the state but we can update it buyer a function that enables us to update the state we use array structuring for the u-state hook and inside this we have the value for the state and then the function we use to update the state and inside this we have the value for the state and then also a function that we can use to update the state inside the parentheses a view State we also set the initial or default value for the state before we move on in the last section I introduced you to Hooks and I want to go over these in a bit more detail and then I'm going to move on to showing you another hook which will help us with our data fetching back in the older days of using react and react native in the most part we had two types of components that we could use these were called stateful and state less if we wanted our component to use state in some way we would create a stateful component if we did not need to use state in our component then we could use a stateless component a stateful component was a class and the Syntax for a class component looks like this we can still create class components in react day so they're worth knowing about and you may very well come across an older code that uses them when you use class components you can access what are called lifecycle methods lifecycle methods are essentially events that occur during the life cycle of a component it's a little bit like key events that occur during the life of a human a human gets born they have an annual birthday and later in their life they pass away when a component is created it is mounted and the lifecycle method for this event is called component did Mount when the component updates another lifecycle method is called which is named should component update and this lets you control when the component should re-render just before the component is destroyed another lifecycle method is invoked core component will unmount when you're using a class you can tap into these methods and during these events you can add some additional functionality if you want to read more about lifecycle methods you can find some details here as react has evolved there's been a tendency to move away from using class components and these days function components are favored when components were either stateful or state less this wasn't very practical but in react 16.8 hooks were introduced hooks provide us with a way to use the features we depended on classes for like State and life cycle methods but from inside of our function components you can think of hooks like special functions or pieces of reusable logic which are separate from our component tree but that let us add functionality to our function components when we use hooks we can isolate all the logic from the component in a readable way but we can use them within our component you can read more about hooks here every hook in react starts with the word use and we've just seen an example of this when we looked at the use statehook there are a couple of rules you should be aware of when you're using hooks though firstly you can only call hooks from react functions like our functional components you can't just use them wherever inside normal JavaScript functions additionally hooks must be called at the top level of a component and before the return keyword is used we'll see more about this later but aside from react hooks you can also create your own hooks and these hooks can call other hooks we're going to move on now to introducing ourselves to another Hook from react could use effect after this we'll return back to our app and start looking at data fetching the use effect Hook is extremely powerful but it can also seem quite overwhelming when you're first looking at it if you can understand how to use the use effect hook properly then you can do all sorts of things with your application let's start by looking at the documentation so it says the effect hook lets you perform side effects in function components the example also goes on to state that it's similar to component did Mount and component did update let's break this down a bit to start with what is a side effect well it's when we use something not inside of react within our component so examples of these sorts of things are fetching data using timer functions and updating the Dom directly we also know that component did Mount happens when the component is first mounted and component did update is called after updating occurs so use effect essentially lets us replicate these lifecycle methods and it means we can perform side effects like fetching data from within our function components so let's go ahead and look at the basic Syntax for the use effect hook if we look carefully we can see that use effect takes in a function as an argument and it's inside of this that we can write our side effects let's add the use effect hook to our counter example so we can understand things a bit more deeply so inside the counter component next to the use date import we need to start by also importing use effect next under the u-state hook we can use use effect so we say use effect and then we pass in a function now inside the function let's add a console log for the count so I say Contour log and then inside this I'm going to use backticks and then I'll say our count value is and then I will interpolate in the value of count now let's see this in action in our simulator I'll start by reloading the screen so now in the console log I see the initial value of count printed to the screen every time I click one of the buttons as the component is re-rendering here I see the new value of count printed to the screen too so we could be doing anything in here that we want to happen as soon as the component first renders such as fetching some data right now we're also repeating the code inside of here every time that the component re-renders if we take a look at the react docs again we can see that use effect also takes one other parameter called dependencies which it compares to the lifecycle method component did update it says on the documentation that you can tell it to skip applying an effect if certain values have not changed between renders to do so you pass an array as an optional second argument to use effect so to summarize this a bit inside of this array we pass in all of the values that the side effect inside of use effect relies on in our example we're console logging based on the value of the count so we need to include count inside of the dependencies array this now means that the code inside of use effect will only run if that value has changed between renders if we do not pass in the dependencies array then the code inside of use effect will run after every render let's look at this in our demonstration I'm actually going to add two new buttons to the component I'll just copy and then paste the first two buttons next I'll create another count and set count with a new use date hook I'll call the state variable here new count and then for the function to update the state I'll call it set new count and then I'll update the on press inside of the new buttons to call set new count so now inside of the use effect I'm going to change the console log to just be count changed let's run this in the simulator when the screen loads I get count changed printed to the console every time I press any of the buttons I see the count change console log printed to the screen again so now let's go back to our code and we're going to pass in a dependency array inside of the dependency array I'm going to pass in count now let's run this again in the simulator so I get the console log printed to the console when the screen launches this time though I only see this printed of screen again when I click on any of the first two buttons which use count I don't however see it printed to the screen when I press any of the buttons that use new count so the effect only runs when count changes otherwise it just sits there and it doesn't do anything again the last thing you need to be aware of when you are using use effect relates to the component we'll unmount lifecycle method and it's called the cleanup function this cleanup function allows us to turn off or clean up our side effects so for example if you're using a counter we would need to use the clear interval function to stop the counter and this is where we would place that and by doing so we can avoid memory leaks to use a cleanup function we type return and then we use an arrow function followed by the cleanup we would like to perform we can see an example of this on the react documentation again as the documentation says react performs the cleanup when the component unmounts so we don't really have any cleanup we need to do in our example but I'm going to add a console log here to show how this works so back inside of our code and inside of the use effect I will say return and then I use some parentheses an arrow and some curly braces then I'll just Contour log a string which says use effect clean up let's save this and go back to the simulator now when I click one of the buttons which triggers a re-render I also get the console log for the cleanup log to the screen because the cleanup is called before the next use effect runs so before we move back to our app let's do a bit of recapping about everything we've just learned with use effect we have learned that use effect is a hook provided by react which lets us run code that has side effects we've seen that it takes a function with the code to run then we saw that you can also pass in a dependency array which lets you specify what data when changed that you would like to trigger a re-render lastly we looked at the cleanup function that we can use with use effect to run any cleanup and stop any of the side effects before use effect is called upon a new render and when the component is unmounted so now we have some understanding around Hooks and use State and use effect so we're ready to go back to our app and think about our next steps with our weather application so back in our app we have a few things that we're going to do now in order to make the app dynamic to start off inside the app.js file I'm going to reset the code to use the tabs inside the render and I'm also going to delete the import for the counter I'm going to break down the next steps we need to achieve the first thing we're going to do is Implement a loading state for when the app first launches and the data is being fetched this is so the user sees something during this process it's always good when you're making applications to consider all the various loading and error states that the user might encounter after this we're going to look at fetching the data from the open weather map API and this will be broken down into two parts getting the user's location and then fetching the data so let's start first with the loading state as I mentioned we want to start the app in the loading State until the data from the open weather map API is successfully fetched once it is fetched we'll set the loading state to false and navigate the user onto our weather related components for our loading State we want to display to the user a spinner instead of having to manually create this react native has a core component that does this for us it's called activity indicator let's have a look at the documentation so we can see the activity indicator displays a circular loading indicator to the user and we can customize the size and the color of the spinner on the documentation we can see a few of the activity indicators in action with the different sizes and colors set so let's go back to our app and we'll start to set this up so inside the app.js file we'll start by importing the activity indicator after the react import I'll say import then I'll use some curly braces and inside the curly braces I'll say Activity indicator and I'll import this from react native next in order to set the loading State we're going to use U state so in the react import I add a comma some curly braces and then inside the curly braces I say use state now this is imported we need to set up you state so before the return inside of the ACT component I say const I use some square brackets and then I say you state with some parentheses I'm going to call this piece of State loading so inside the square brackets I'll add loading I'm going to call the function to update the state set loading so I'll add this too then I'm going to set the initial state for our loading State as true this means when the app first launches the user will see the activity indicator then once the data is fetched we can set this to force and then they'll see the weather components so now in the render we need to have a way to say if the state is loading then show the activity indicator otherwise show the tabs there are a few ways we can Implement conditional rendering in react and react native knowing about if else statements ternary operators and also the logical and operator is useful when it comes to handling these scenarios and you can read more about these here in our case for now we're going to keep this very straightforward and just use an if statement which renders the activity indicator when the loading state is true if the loading state is not true then the navigation container and the tabs will be rendered so inside of our app component I'm going to say if loading then inside the parentheses here I'll say return and inside the return I'm going to add a view and then also the activity indicator so we're wrapping the activity indicator inside of a view here so we can better control the layout for it for our activity indicator we're going to say size equals and then we'll set this to the string large and we're also going to set the color so we say color equals and then we set this to the string blue we also want to set a couple of styles for the view just so we're sure we're setting the layout for the activity indicator to be in the center of the screen so in the view I say style equals styles Dot container now in the react native Imports we need to add the view and the style sheet before the component is exported let's set up the style sheet so I say const Styles equals stylesheet Dot create and then I pass in the object I'm going to set the container and for this I'm going to say justify content of Center and flex of one let's save this and see how it looks in the simulator when the simulator runs I see the loading spinner in the center of the screen if the loading state was set to false I would see the tabs and our weather screens so next we're finally ready to look at getting data from the API so in order to get data from the open weather map API we need to start by calling the API let's take a look back at the API documentation on the open weather map website for our app we want to display the current weather but also the upcoming weather so we're going to use the five day three hour forecast if I click on the API documentation here it shows us how to make the API cool as we can see there are a few things that are required to make this successfully we will need the latitude and the longitude which a geographical coordinates for where we want to display the data from and then we're also going to need our API key let's start by figuring out how we'll get the latitude and the longitude the technical term for finding Geographic data such as coordinates is geolocation if I search for react native geolocation we can see that this has been deprecated and we should use one of the community packages instead if I click on the link we can see that there are a variety of packages available so this is useful if you did not create the app with Expo and it's also something to know about in the future but as we created the app with Expo we're able to use a package called Expo location let's take a look at the documentation for this so as it says Expo location allows reading geolocation information from the device this sounds exactly what we're looking for let's start by installing it so in our terminal we need to say npx Expo install Expo Dash location now if we go back to the documentation we can see all the extra configuration and then there's also steps provided if you're installing the project in a bear react native project in the example provided we see that we have to complete two steps in order to get the user's location firstly we have to ask for permission to access their location and then we need to get their location once we have their location we need to store this we also need to be mindful of handling any errors in case we were not able to access the user's location so for implementing this successfully we're going to need to use you state in order to store the location and any errors and then we're also going to need use effect so back in our code let's start by importing use effect next we'll set up two pieces of State we'll do the location first so we say const then we use square brackets and we say equals use state inside the square brackets we'll say location and then set location we're going to initialize this with null now for the error we need to set up another piece of State so we say const then we use square brackets and we set this equal to U state this time in the square brackets we'll say error and set error and then we'll initialize this with null next let's set up the use effect so before the return we say use effect and then into this we need to pass a function we're going to pass in a function which needs to be immediately invoked so inside of the curly braces we use a set of parentheses next we say async this is so that JavaScript knows we're using an asynchronous function here then we can set this up as a function so we use parentheses an arrow and some curly braces inside the curly braces we say let then use curly braces and we set this equal to await location Dot request foreground permissions async make sure you capitalize the location here we want to access the status so inside the curly brackets we're going to place status next we handle the error using an if statement so we say if status does not strictly equal granted then we use our set error State function and we set this to the string permission to access location was denied and then we say return now outside of the if statement we can continue with the rest of the code for if the request for permissions were successful so we create a variable using let called location we assigned to this await location Dot get current position async into this we pass in an empty object lastly all we need to do is update the location so we say set location and into this we pass in the location then as we want to immediately invoke this at the end of the function we use a set of parentheses inside of the use effect we'll pass in an empty array for the dependencies this means there's no dependencies and that use effect will only run once when the component is first rendered in our component we're just going to add a console log for now and we'll say if location then console log location before we test this we need to ensure location is enabled on the simulator or emulator you can see more information about how to do this in the documentation here let's go ahead and test this out in the simulator when the simulator runs we see the permission request which we set up when I click on allow while using the app and then launch the console I then get to see the location data which includes the latitude and longitude which we were looking for it's worth knowing here as a side note that when you're using a simulator the location defaults to San Francisco as opposed to your real location so now we have this let's look at getting data from the API at this point it would be helpful if you're signed in on the open weather map API website thank you to start with I'm going to navigate back to the five day three hour forecast and then I'll open the documentation here next I'm going to copy and paste the URL for the API call that we're going to need as we're going to need that shortly for now I'll just paste this at the top of the app.js file so we need to think about how in the app we're going to store the API key it's always best practice and safer not to expose any secrets in your application and import them from an external place this is even more important if you're using Source control like GitHub because you don't want these keys to be visible to anyone there are a few ways you can go about doing this and there's some deeper documentation on the Expo site here if you would like to find out more about this for our example we're going to use a package called react native.enth this means we can use an environmental variable where the value is set from outside of the application so let's go ahead and set this up so we need to start by installing it back in our terminal we'll say npm install d react native dot ends once this is installed we need to go to our Babel config file and then add the plugin so after presets we need to add a comma and then for the key we say plugins and then we use an array inside of this as a string we say module colon react Dash native Dash dot end so now we can create the dot end file so at the root of the project I'm going to create a file called dot ends once this is done we can test this out I'm just going to use a dummy value for now using capitals which is the best convention so first I'll set the name of the key to be test underscore key then I'll say equals and for this I'll just say one two three now if I go back to the app.js file I can import this so in my input I say import then I use curly braces and I say from at NF inside the curly braces I place the name of my key which was test underscore key so now I'll just add a console log with this let's save this and run the app in the simulator when the simulator runs if I check the console I can see the value of the key printed successfully so we've proven the package was successfully set up let's go back to our app as I'm using git I want to make sure the dot end file is not pushed so inside the git ignore I will add the file name this means it will not be part of any committing and pushing to get that I do so next let's go back to the dot end file we'll delete the test key and we'll add our key for the open weather map API I'll call this key weather underscore API underscore key the next thing we're going to need to do is to get the API key so back on the open weather map website as long as you're signed in you can click on your user and then my API keys on this screen you can copy and paste the key if you have one otherwise you can generate one by selecting generate and then copy and paste it if you now go back to your Dot N file you can paste it in and then we should be good to go so the last bit of setup we need to do here if we go back to the app.js file we can change the import for the test key to be weather API key now we can look at how we're going to fetch the data so to fetch the data we're going to use the fetch API which is what react native provides us with to work with networking if you haven't used this before you can read more about it here and also here so back in our app.js file we're going to start by creating a new piece of state to store the weather data hopefully you're becoming more familiar with this now but we'll say const then we'll use a set of square brackets and we'll set this equal to use state we'll call this weather so let's add that into the square brackets then we'll call the function to update the state set weather we'll initialize this as an empty array so next we're going to encapsulate this data fetching inside of a new function which we'll call fetch weather data so before the use effect we'll say const fetch weather data and we'll use an equal sign and then async next we'll use some parentheses and arrow and some curly braces so now inside the curly braces we can then set the response so to start we declare a variable using const called res and to this we'll say await fetch and some parentheses inside the parentheses we can paste in the URL we want to fetch the data from so we're going to use backticks here as we're going to need to interpolate in our environment variable so we'll say http colon and two forward slashes next we can paste in the URL that we commented out earlier we'll update these values shortly so next we need to create another variable to get the Json data so we'll say const data and we'll assign to this await response Dot Json once we have this we can call our set weather State function so we say set weather and into this we pass data also once this is done we can set the loadings date to be false so we say set loading and pass in false then inside of the use effect after the location is set we can say await fetch weather data so let's now format the URL that we passed into fetch so inside curly braces we have the latitude and longitude and also the API key so to start with we need to get the latitude from our location piece of State so we say location Dot coords Dot latitude and then we can do the same for the longitude so we say location Dot coords Dot longitude now where the API key is we can pass in our weather API key we also need to make sure we're using interpolation here so we need to add dollar symbols before each of the curly braces foreign there's also some error handling we need to do here so if the response fails in some way we can set our error state to achieve this I'm going to wrap everything inside of a try catch statement so I say try then I use some curly braces and then I say catch and I place error inside of the parentheses then I use another set of curly braces so inside the try I will place everything we've written and then inside of the catch I'll say set error and then inside parentheses I'll use a string and for this I'll say could not fetch weather additionally I'm going to use finally here this is used to execute something after the try catch has been completed so I'll say finally and I use another set of curly braces here I'm going to move set loading from the try statement into here the reason I'm doing this is so that we have either the data or the error once either of these is set we can set loading to false and then we can navigate to the correct screen for this state of course this also means we're going to need to add a screen to show the user if there is an error but we'll add that a bit later so there's one last bit of refactoring I want to do now when we initially set up the location we set one piece of location and then pulled out the required values in the API call I'm going to update this so we have two separate pieces of State one for the latitude and one for the longitude so I'll start by creating these I say const and then I use some square brackets and then I say equals you state inside this I'll place an array I'll call this date lat and then the function to update the state set lat next I'll do the same for longitude so I say const then I use square brackets I initialize this with an empty array I'll call the state lawn and the function to update the state settled on next inside the use effect instead of saying set location I'll say set let and then location Dot coords Dot latitude then I'll do this again for the longitude so I'll say settlon and then I'll pass in location Dot coords Dot longitude then I can update the API call instead to use the lat and long pieces of State additionally I'm going to pass these in as dependencies inside of the user Factor array this means when these change the use effect will rerun let's also remove our initial location piece of State so now let's add a console log to see if we can view the weather data so we'll say if whether console log weather let's save this and see how things are in the simulator so now when we look in the console we can see the weather data has now been set up and is visible to us so now we have all the data we need coming down from the API next I'm going to do a bit of refactoring because our app component has quite a lot of logic inside of it at this point so I'm going to extract the current hook usage into an external file you can make custom Hooks and then import them just like when you use a react hook the benefit of this is that we can better encapsulate the logic in our case we're going to end up with quite a few things going on so doing this means our code is much easier to work with the only requirement when we do this is that we name it with something that starts with use just like when we use hooks which are from react so to start I'm going to create a new directory called hooks now inside here I'm going to create a file called use getweather.js I'll go to this file and I'll start by creating the function so I'll say export const use get weather as this is a function I need to use an equal sign some parentheses an arrow and some curly braces let's think about what we need to add in here we want all the data fetching logic from the app.js file so let's start by getting that and then we'll paste it inside of the function we're also going to need to get all of our state because this is dependent upon by the functionality inside of the hook so back in the app.js file I'll copy all the states set up then I'll go back to the custom hook file and I'll paste this at the top of the use get weather function lastly we're also going to need some of the Imports so let's grab everything from the app.js file and then we'll paste it at the top of the hook file so we can delete the react native and the navigation Imports here because they're not used lastly at the end of the hook we need to return inside of an array the pieces of state that will be needed by our app component so for us this is the loading State the error State and the weather data the app component itself does not need the latitude and longitude so we can keep these scoped only inside of this hook so at the end of the hook after the use effect we say return and then we use an array and we'll pass in loading error and weather at this point we could actually now use this hook inside any component we wanted so this is really helpful if you have some reusable code which is required by multiple components as it means you don't need to duplicate logic now we're ready to use the hook in our app component so if we navigate back to the file we can start by importing the hook I'm also going to delete all the unused code now so now we can use this and we simply just destructure the values so at the top of the app file we say const then we use square brackets and we set this equal to use getweather the values to place inside of the array are loading error and weather so now you can add a console log with loading error and weather let's save this and test this out in the simulator when the simulator runs I now get to see the loading error and weather data printed out in the console so we have proven this works and we now have all our logic scoped inside of its own hook so the next thing we're going to do now is look at wiring up each of our weather components with the real data so to start with we need to pass the weather data to the tabs and then we'll need to decide which pieces of data are required by which component so back in our app.js file let's set a prop on the tabs called weather and we'll set this to weather I'm also going to change the render order here so if the weather exists we render the tabs otherwise we'll show the activity indicator so I'll place the rendering for the tabs to be above the rendering for the activity indicator and then I'm going to enclose this inside of an if statement that says if whether and weather.list then return the navigation container then I'll remove the condition around the activity indicator and just return this so essentially here we're saying if the weather exists with the data we'll render the weather otherwise show the activity indicator we'll update this a bit more later to show an error screen if the error state is true so now let's go back to the tabs component now inside the tabs component we can start using this if we take a look at the data that we get back from the API we can have a think about what each component will need the current weather component only needs the current weather so we can pass it the first element of the list array for the upcoming weather we can pass everything from the list array then for the city we can just pass in the city data so we're going to do this process component by component and we'll start with the current weather component in order to pass the props to the component we need to render a callback to return the element to use for the screen instead of using the component prop so let's start by setting this up we'll remove the component prop and then we'll set up the tab screen to return a child now we can pass in the component so we use curly braces a set of parentheses an arrow and then the current weather component on the component we'll pass the props so we say weather data and we set this to whether dot list and then using square brackets we'll access the element at the position of zero so next we can go to the current weather component and we'll add the weather data prop let's add a console log for this and check everything is wired up correctly here so I'll run the app in the simulator now I'll check the console brilliant I now see the data in the console and we're good to go with wiring up this component to use this data now so let's open our current weather component now we can have a think about what we need to do in order to get this up and running properly the pieces of data I'm going to need for this component are the temp feels like temp Max temp min and weather so to start with I'm going to just structure these from the props so I start by saying cons and then I use the set of curly braces everything except the weather itself I need to get from Maine so I say Maine I say temp feels like temp Max and tent men outside of the curly braces I use a comma and I say weather then I set this equal to weather data next in order to access the correct weather type object I'm going to need access to the weather condition so I'm going to create a variable to store this I'll say const weather condition and I'll set this equal to weather square brackets 0 Dot Main the first thing we're going to do is update the background color for the screen so that it's set dynamically from the weather type utility file because we want to use a property based on the data we're going to need to do this in line so that we have access to everything we need so for the style on the safe area view we'll add in an array after the wrapper we'll add a comma then we'll use inline styles to set the background color so we use an object and inside this we'll set background color we'll set this to be weather type and then we need to pass in the weather condition so we'll use square brackets and then inside of the square brackets we'll Place weather condition outside of the square brackets we then want to access the value of the background color so we say dot background color next we can do a similar thing to dynamically set the icon so for the feather element name we'll add curly braces and then we'll say weather type and then we'll use square brackets inside the square brackets we'll say weather condition and then outside of the square brackets as we want to access the icon we'll say dot icon I'm also going to update the color to be white next we can update the temperature text to use the temp value so we need to add curly braces here as we're passing in a value and then inside the curly braces we can add temp for the feels like temp we also need to use curly braces here I'm going to use a template literal so inside the curly braces I'll add back ticks then I'll say feels like and I'll interpolate in the feels like value the first row text shows the high and low temperature so I need to update the message 1 and message two values I'm going to use template literals here again so for the message one I'll use backticks then I'll say hi then a colon and I'll interpolate in temp Max for message 2 I'll again use backticks and I'll say low colon and I'll interpolate in temp min for the next row text we want to show the weather description which comes from the data and then we also want to show the weather type message so for message one I'll say whether and as this is an array I need to use square brackets and pass in zero [Music] then I say dot description for the message too instead of passing in thunderstorm I can remove this string and instead just pass in the weather condition let's save this and see how things look in the simulator when the simulator runs I see the current weather component but we're now using the values from the weather type and everything is using the real data there is one thing though the units are currently in Kelvin on the open weather map documentation we can see this is the default on our app we want to use metric so we need to add this to the API call if we go back to the use get weather hook we can append this to the API call we use the and symbol and then we say units equals metric now if we reload the simulator we can see the new values this screen will now look different every time the weather type changes so that is our current weather component updated for now with the data next we can move on to updating the upcoming weather component let's go back to our tabs and set this up so back in the tabs component we'll remove the component prop and then set up the tab screen to return a child then we can pass in the component so we use curly braces and then a set of parentheses an arrow and then the upcoming weather component next on the component I'll say weather data and I'll pass in whether dot list this means we have access to all the upcoming data so next I'll go back to the upcoming weather component and I'll pass in weather data to the component I'm going to start by removing all the dummy data we added additionally I'm going to remove the title for the component so I can also now remove the text from the Imports next in the data proper the flat list I'll pass in weather data the values for the list item inside of render item are already set up from the dummy data so now we can go straight to the list component and see what we need to update in this component we also have all the props set up from the dummy data but we need to do some refinements here I'm going to start by updating the icon to use the icon from the weather type dynamically so to start I need to import the file so I say import then I use curly braces and inside the curly braces I add weather type and I'll import this from utilities slash weather type then for the feather icon name I'll remove the string some and I'll say weather type square brackets our passing condition into the square brackets and then I'll say dot icon because space is limited for the list item I'm then going to change the Min and Max temperature to be all in one line and I'm also going to round these values so to start I'll delete the text with Max then I'll use a template literal and interpolate in math Dot round and I'll pass in min then I'll interpolate in math Dot round and I'll pass in Max I'll separate these with a slash also we want to show the degree symbol on each of these values on a Mac I can do this with option shift 8. on a Windows this is Alt 0176 next we'll look at formatting the date text and I'm going to use a library to help us with this called moment.js moment.js helps us pass and format any data related to time and dates it's a really useful library to know about because it provides a lot of options for how to display what can sometimes be quite complicated data to the user let's start by installing it in the terminal I need to type npm install ment dash dash save we're going to split the date text into two sections one that shows the day and one that shows the time so back in the component let's add another piece of text under the one that currently shows DT text also to display these we're going to want these to be split onto two lines so we'll wrap these inside of a view and then we'll set some Styles here we'll just call these date text wrapper inside the style sheet let's add this and then we can set Flex Direction to column NAD format value we need to start by importing moment so at the top of the file we say import moment from moment so let's have a quick look at the documentation on the first line we want to show the day so we can do this by passing in d d we then want to show the time on the next line and we can do this by passing in H double m double s let's go back to our component and set this up so for the piece of text we want to show the name inside of the curly braces we say moment and then pass in DT txt then we say dot format and we pass in the string DD in the second piece of text we say moment and again pass in DT txt then we say dot format and this time we pass in H colon mm colon SS and Then followed by a space followed by a so the a will show the AM or PM let's save all of this and see how this component now looks in the simulator when the simulator runs we now see all of our list data showing on the screen with the new layout improvements so next we need to go back to our tabs component and move on to wiring up our city screen so back in the tabs component we'll remove the component prop and then we'll set up the tab screen to return a child next we can pass in the component so we use curly braces a set of parentheses an arrow and then component now we can pass in the data so we say weather data and we pass in whether Dot City now let's go back to our component let's start by setting the prop in the parameters and then we can destructure out the values we're going to need so I say const then I use some curly braces and I set this equal to weather data inside the curly braces I'll add name country population sunrise and sunset the first value we're going to update is the city name so I can remove London and I'll add some curly braces inside the curly braces I'll add name I can now do the same for Country so I remove UK and then I add some curly braces inside the curly braces I'll add country next I can update the first icon text body text value I'm going to use a template literal here so I'll remove 8000 then I'll use some back ticks then I'll say population colon and I'll interpolating population I can then move on to updating the second icon text I'm going to use moment again here to help us with our formatting so I'll import moment from moment at the top of the file now back in the body text I will say moment and I'll pass in Sunrise then I'll say dot format and pass in h colon mm colon SS and then a space and a then for the last icon text body text value I'm also going to use moment again so this time I say moment and I'll pass in Sunset then I use a DOT and I say format inside format I pass in H colon mm colon SS then a space and a let's save this and see how it looks in the simulator everything for the screen looks good and this has now also been updated to use the data from the API so that's all our existing screens set up to use the data there's just a couple of minor fixes I want to do I want to add the degree symbol to the current weather component so let's go back to that component now in the first two pieces of text I'll add the degree symbol here I also want to add a space between the high and low text so on the message one prop here I'm just going to add a space at the end so now we have these refinements done let's move on to creating an error screen for the application inside the components directory I'm going to create a component called error item now inside this component we can set it up just like a standard component so I'll import react from react then our import View text and style sheet from react native I'm also going to import feather from at Expo icons so now we can declare the component I say const error item equals then I use a set of parentheses an arrow and some curly braces I'll make sure the component is exported so at the bottom of the file I say export default error item before the export I also need to set up the style sheet so I say const styles equals stylesheet Dot create and I'll pass in an object here inside the component I'll save return and then I'll add a view and some text inside the text I'll pass in the message sorry something went wrong next I'm going to add a feather icon so I'll say feather and then I'll set name to frown size to 100 and color to White so let's set up the styles on The View I'll say Style equals styles Dot container on the text I'll say Style equals styles Dot error message then inside the style sheet our set container and I'll say Flex of one background color of red justify content of Center and align items of Center and then for the text I'll say font size of 30 color of white margin horizontal of 10 and text align up Center now let's test this out in the app.js file we can start by importing error item from components error item next in the render with the activity indicator we can use a conditional and say if loading then return the activity indicator otherwise return the error item to test this I'm going to go to the use get weather hook at the bottom of the hook where we return the values I'll say true for the error and I'll add an empty array for the weather this just means we now have the state set up in order to test out our error item so let's save this and see how it looks in the simulator when the simulator runs I see the error screen that the user would see if something went wrong when the location and weather are being set let's go back to our hook file and revert the changes we just made so we set the error and weather back in the values returned by the hook so now let's go through our app screen by screen and check if there's any other refactoring we need to do when I look at the current weather screen I can see we need to add the degree symbol to the initial temperature value I also want to slightly decrease the font size in the description and message so let's do that now back in the component I'll add the degree symbol to the temperature then in the style sheet I'm going to remove the pink background color as this is now not needed then I'm going to set the description font size to be 43. and the message font size to be 25. I'm lastly going to add optional chaining in the places that we are accessing nested object properties this means undefined will be returned if one of the properties does not exist instead of an error next let's take a look at the upcoming weather screen as we're using white text I think the background color of the list items is slightly light so let's update that let's go back to the list item component I'm going to set item background color to the Indian red this is all one word and all lower case lastly I'll add optional chaining where we're using the weather type everything looks a bit better in the simulator now so let's take a look at the city screen everything on this screen now looks good to go so we're ready to move on to making the final touches to our application the last thing I want to do on our app is adjust the app component very slightly I want to change the conditional to show the error item if the error state is true and then otherwise show the loading screen this just ensures that the user really does only see the error screen when there is an error so I'll say if error then show error item otherwise show the activity indicator so that is everything done and our app is now complete before I wrap up this course there's a couple of last topics I'd like to introduce you to but you can consider this as bonus material the first one of these topics is the context API you may have noticed when I implemented the tab screens as children that the documentation said that it advised you use the context API the reason I did not do this is because we only have three core screens on the app however if you're in a position where you're passing the data around a lot of components who are very far away in the component tree and also perhaps that the state is complex then the context API is very handy to know about it's also really useful if you have some global data which is needed throughout the application such as a user's name or some theming for the application by using the context API all the logic can become centralized it's not specifically the right or wrong approach it very much depends on your use case and it becomes a slightly different way of handling your data instead of props so you can share anything through the context and once we share the data the component can ask the context for the bits of data it needs it's important not to overuse context and definitely don't think of it as a replacement props but it's an approach that it's worth knowing about for when you need to access specific pieces of global data throughout the application the documentation about context is here but essentially there are three steps to creating context you need to start by importing the context then you would Define your context so if you had a rim context you'd say const room context and you'd set this equal to create context then you wrap the context around your components and at this point your components can access the context the last couple of topics I wanted to cover are UI based topics we haven't had the need in our application to create a button although we have seen how the react native button component works did you notice how this didn't really look like a button that you might have expected another common task when you're developing applications that you may encounter is creating custom buttons react native has a set of touchable components which help us with this if we take a look at touchable opacity we can see that it's a wrapper for responding to touches alternatively we have touchable without feedback but this doesn't give us a visual response so this is likely not what you want to use when you're creating a button in the demonstration directory that I created earlier I'm going to go ahead and Implement a button just so that you're familiar with how to achieve this and then I'll start by setting up the component so I'll import react from react then I'll import View touchable opacity and text from react native next I'll set up the component so I say const R button equals and then a set of parentheses an arrow and some curly braces I'll then export the component so I just say export default R button next I'll set up the style sheet so I say const styles equals style sheet Dot create into this I pass in an object so next in the component I say return and then I'm going to use touchable opacity and inside this some text for the text I'll just say hello then on the TouchPal opacity we pass in on press and we'll set some Styles so we say style equals styles Dot container would also set some styles for the text so I say style equals styles Dot button text in the style sheet I'll add these Styles so I'll start with the container I set elevation to eight this sets the elevation of the item on Android only next I say background color of blue border radius 10 and I'll set padding to five then for the button text I'll set font size to 15. color to White and align self to Center then on the touchable opacity we set an on-press prop so let's set this up we use this to Define what we want to happen when the user presses the button so I'll set up an arrow function called on press and inside this I'll add a contour log which just prints out press to test this out let's go to the app component I'll comment out the navigation container render and then I'm going to import the button so I say import R button from demonstration R button then I'll add this to the render before the activity indicator Let's test this out in the simulator when the simulator runs I get to see the button if I open the console I can see the Press is printed out every time that I press the button I strongly advise you spend some time playing about with all the core components in react native as there's a lot you can achieve you can look at modals for alerts text input for text input fields and the switch component acts like a toggle

Channel: freeCodeCamp.org

Views: 137,508

Keywords:

Id: obH0Po_RdWk

Length: 280min 39sec (16839 seconds)

Published: Mon Apr 10 2023