React Native Course – Android and iOS App Development

Key Takeaways

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