Learn React Native with Redux by building a News App | Kingsley Obot | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn React Native with Redux by building a News App

teacher avatar Kingsley Obot, Software Engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

37 Lessons (3h 59m)
    • 1. Course Intro

    • 2. What is React Native

    • 3. Installing React Native

    • 4. Setting up an Android Emulator

    • 5. Setting up iOS Simulator

    • 6. React Native Basic Concepts Outline

    • 7. Structure of a React Native app

    • 8. React Native components

    • 9. Intro to styling in react native

    • 10. Component's state

    • 11. Rendering the list of items

    • 12. Custom components

    • 13. Scollable views

    • 14. Styling in React Native Outline

    • 15. Layout with flexbox

    • 16. Styling based on platform

    • 17. Creating a card component

    • 18. Working with images

    • 19. Adding a custom fonts

    • 20. Working with icons

    • 21. Navigation Outline

    • 22. Setting up React Navigation

    • 23. Moving between screens

    • 24. Adding a tabs navigation

    • 25. Adding a drawer navigation

    • 26. Navigation header buttons

    • 27. Redux Outline

    • 28. What is Redux

    • 29. Set up Redux Store

    • 30. Setting up the fetch action and reducer

    • 31. Making http request

    • 32. Dispatching redux actions

    • 33. Displaying items with flatlist

    • 34. Add Item to Favorites

    • 35. Toggling the fav icon

    • 36. Navigating to the news details screen

    • 37. Course Outro

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

About This Course

React Native is a Javascript framework for building native mobile apps for Android and iOS. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user's location. Examples of companies that use React Native are Facebook, Instagram, Uber, Walmart, etc.

This course will start from the basic concepts to advanced concepts such as Navigation and state management with Redux. You will also learn how to interact and fetch data from an external API.

We are going to make use of Expo - a framework that enables developers to quickly start building React Native apps.

We'll build two apps throughout the course:

  • Todo App: Components, State, Props, Styling, etc
  • News App: Navigation, Http Request, Redux, etc

Enroll now and learn how to start building awesome Android and iOS apps!

Meet Your Teacher

Teacher Profile Image

Kingsley Obot

Software Engineer


Hello, I'm KINGSLEY.

I'm quite passionate about building great products using awesome tools. Also, I love sharing my knowledge with others.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Course Intro: and Lo and welcome to this reacts native course. I'm glad you're interested in this course. This is a course, really, I would say Q to the process of building more by APS for boots Are us on Android. Using react. Tentative, we start from the basics to advance concepts such as navigation on states management with reduction. Get about five sexual in this course in the first section on getting started, we will see how to store react native on sets or boots on droid on our US simulators. After dots, we move on to the busy concepts in reactor native, such as components, props, states on much more. Next, we will take a look at how styling walks in reactor native. We will discuss flex books, how to work with images fronts on Icahn's. We will move on and talk about navigation in reacts Native and we're going seemed remains the tree types of navigation, the stock navigation, the taps, navigation, Andi drawer and finally would take a look at states managements, which redox at the end of this section, we are going to build us our news up on test this out on boats on droid on are you is. So what do you need to take this course? You will need to have knowledge of JavaScript. On mostly the newer years, 16 sacks such as arrow functions the spread of Brits. So the structuring on order, new US syntax, a knowledge of reacts disposer required. You don't have to be an esports, but having a good knowledge of reacts. We have people grace faster to discuss. So are you ready? Let's begin. 2. What is React Native: welcome, guys. I'm glad you could take this course. So let's begin by answering this important question. What issue reacts negative? Well, react initiative is a JavaScript free world for beauty in native moved by UPS. If your Web developer or you have ever made use of Jabba Scream, then you can apply such knowledge in Beauty in Nitties, move by ups. It is important to note that's react. Native is beauty on reacts but on like reacts. We don't make use off regular His gym Issacs, such as the dif, the hatred, one side and so on. Rather, we make is off components that are provided by react native in beauty in you Zions offices . Of course, we're going to see all of these as we progress. True, because it's really punitive. We can beauty truly nit even more by APS, and this is the interesting parts off reality with just well could bees. You can Butte APS for boots on droid on Value is, and that is why many developers love react. Tentative has re speak. Thousands off APS have been buttes using react tentative. Big companies such as Facebook, Skype, Cuba instagram are much more used. React negative in beauty. The anonymity of Move by APS. You can't get more on who uses reality by heading about Saudi official websites. Head over to Facebook Does Gets up. That's our use last year at Nitty Scrutiny. But, um, on here, you can see so many Arabs there are being abused using react negative. So I hope you're excited to lend. React native. Let's move on to the next video we have in store. React negative on our mission. 3. Installing React Native: Welcome back, guys. It is not time for us to install. Reacts native on our machine For us to see how we can do this We need to head over to the react Native official websites click on dogs I'm from this getting started beach We can see the steps involved in a stolen reacts Tentative on our mission We can note that we have two ways off Installing react native one is using the Espo CLI and the other is making use of the react tentative cli You might feel that we should choose the reality of cli option. After all, we want to build a reactor native up. But as we can see from the documentation, the easiest way to get started which react negative is making use of the S for Sierra. So what is the difference between these two steps? Let's take a look. The main difference is that the Esposito Eli provides ours with a manage work flu that is it sexy. We much of the pain off setting up react native on our mission. When we're using the splc alive, we don't have to manually configure on in stores from twos. They're needed by reacts tentative. But when using the react native cli, we have to manually do these on our own. No, the key difference is that with the esports Eli, we have the same installation steps on what's ever machine we're using beats a mark, a windows Lino's mission. But using the React Native Seelye, the installation process. I bit different depending on your prison system. So we see that the SPLC Ella is not platform dependence in fronts. It gives us in the 5% off, working with react negative, irrespective of our mission. So in all the sports Eli makes, it's more easy for all string store I walk. It's react native, but it has run down side on. That is the father. We are limited to the esport ecosystem, but this is not much of a challenge because most off the are viewing Butte as supported by the esport ecosystem. The advantage of the reality Seelye over the Esposito line is that it gives us full flexibility of our our coach. Using the React native see lime, we can easily integrates our code with native court that is written in android or us. If you are ready on experience of Lupo, you might want to make it off. The reality of cli installing are walking with three additive. One important thing to note is that we can always Egypt's or switch from the SPLC ally to the reactor Native Seelye. So if we have started the budgets using the esports Eli Andi for some reasons we decide to make use of features that are not supported by the S book ecosystem. We can always the jets or switch from the SPLC ally to the reality of cli toe have more flexibility. So in this course, we are going to make use of the esports Eli in a stall in on working with three additive, the SPLC ally is quite popular. Two d on as we can see from the documentation, it is one of the recommended method of installing on working with Riyadh native known that you have seen the difference between the truth. We can move on on a store, reacts nitty if using the esports. See, Ellen, the first thing we need to do is to make sure we have nuj installed on our machine. If you don't have noted your machine, you can head over to node Js, That's ogg on here. You can download node for your machine. So we're using a windows in Marco Lynas Mission. Make sure you download note for your platform for me. I already have knowed installed on my machine. But if you don't have noticed or plays, download and install nodes or your mission. The installation process is pretty straightforward. You can confirm if you have noted in start by opening its Ameena are from this stamina and Saudi Koeman node. Hi, friend V. As you can see, I have knowed Russian saying boring 16 points tree in start. You might have a different version off note depending on when you are watching. Discuss Once you have knowed installed, we cannot move on on its store The esports Eli on Just as we have discussed with our you're using the mark. The windows are winners Mission You can make use off the same installation process. All we need to do is to make it off npm to install the splc ally So open up its Ameena around the command Anteon Install hi friend G to install it globally then Espoo Seelye, using a mark machine. You might want to enter Su do from the stats. This is not needed. If you're using a Windows mission once that is done hit. Enter on the mark. You'd be required to provide your system password. This will now go ahead and it's store the Espo CLI on our machine. I'm going to pause video on. Come back once it is done. All right. The installation was successful. You can confirm if the installation process was successful by checking your SPL version. As you can see, I have the Espoo Russian three points, 11.7 in start. You can also check your Russian using the command Espo cli iPhone high phone Russian on the Russian is being return. So that is all that is needed. We have just succeeded in a stolen react initiative on our mission. Using the S pool cli As you can see from the dogs, we can start creating react tentative projects to create a re additive. Projects we make is of the common s poor and needs followed by the name of the projects. So let's do dots. No, from the domino, I'm going to create a food on the disturb way. I was store all my reaction. It ive Bridgette's. So I was CD to the Dexter and I would make it Dara tree Kharj Reality tentative ups. I was ceded to this directory on in this territory. We are going to create our first reality application. So inside a common s poor he needs we can call this a fist. It's answer this re prompt you to choose your flu. So let's Blunk in this course we are going to make use off MPM Nazi on, so answer No. This will take some time to delude on a store. All the dependencies. I'm going to pause the video and come back once this is done. So our projects has been created successfully. We can see from the stamina that's our project is ready in this Director. What we can do is to seed it through this projects fessed up, and I'm going to open days in V s. Good off course. You can make use off any other editor off your choice. But for the peoples of this cause I'm going to make use of Yes. Good. So since I have us good configured in my parts, we opened off. This project is in the command coach space. Then it does. These were up on the projects in V s court. So this is our first up. Let's move on to the next video where we see how we can run this application in an android in little. See you then. 4. Setting up an Android Emulator: wakened by guys. This is really left off in the last video we have in start reacts, knits even our machine and we create said our first react native application for us to run this application we need to set up our testing environments in this video would begin by setting up our endured in little. So head over to esport. That's are you from this beach. Click on read documentation. Once this opens up, click on money, Drug flu and click on the enjoy studio in Little Savior is Naimark or a Windows machine. You should be able to full along with the steps. The first thing we need to do is to install Android Studio. So open up your brother and safe for android studio Click from this download beach you need to download undressed you do for your machine. You can also click on the download options on from year. You can download unjust studio for the platform you're using. So go ahead, download and install. Undress studio on your mission. Seems I already have it in store. I'm going to open it up using the sitch are we open up my hundreds to do with undress studio. Open up. We need to install some twos, so click on Configured Click on the sdk Manager on the A K platforms we need to install at least one platform there will be used for testing our application. You can install a platform by simply clicking their needs and hits in the apply button. I already have 109.0 restored. You can see Go ahead on the store 100 its print run by clicking or needs. And I hit the apply button Greek on. Okay, this will take some time to deluge on in store or the android version. All right, The installation was successful, so click on finish least notes. That's for you to actually tests your application, you need to install at least warm off this 100 platform. The next thing is to install the educators from this tub. We need to install the Essick Abe you choose. We also need to install the platform. True's the Android Sdk Tsu's the Google Play Services on the in cell aside the ritual. Please let's on these truths on heat the apply button. As you can see, I already have these tools install, so I'm going to update the on George and my little for you. You might not have this tool in start, especially if you just installed under a studio for the first time. So make sure you select on this truths highlighted year. As you can see on hits the apply button. This re download and install all the requires is all right. All the required shoes have been start successfully, so click on finish. We are not ready to move on to the next step. Click on OK on. The next step is for us to set up our android Vetra device. So from the configure, once again, click on AIVD Manager. From this step, we can create a Vetra device. Though used for testing our application. I already have some vitriol device created year. Well, let's go ahead and creates a new one. So click on Create Vetra device. Of course, we're beauty anymore by up, so make sure you select the phone category, and from these we can choose the Vetra device we want to create. Let's creates in this is five device, so click or needs quicker. Next, you'll be required to choose the FBI level. I'm going to select the by which is one of the letters on dried version. Click on next on. We need to give this device in name. We can't leave this name as it is and we klieg or finish. So here we have our device created. We cannot start off this device by clicking the little play butts in by the side. So click these renowned launch Vetra device we just created this Vetra device will now be used for testing our application. We cannot see our device on the screen. I'm going to close this on minimize the undress studio. So right now we have our android immolates. But how can we run our projects in this amulet? So head back to the projects we create said in the last video. So I'm going to bring off the imbued stamina. So from its Emina menu, click on new it, Sam. You know, as you can see this oppose it, Sami. Now, on this stamina is already in our A projects Director. So from these, we can run our application using the command s pool starts Answer. This is going to open our projects in a bra. Za this is it sob that has been opened from this stuff. We can do a whole lot of things. We can expect what is running in our export up. We can run our projects on an enjoyed a letter or even on an R US simulator to run our projects on android amulet. So we can simply Greek on this or from its stamina, we can side e once we do that, it is going to at ST to open our projects in the android. In little if he had about to the amulet. So you find out that it is beauty in our javascript. Bondra, once this is done, we should see our projects running my rights. We see our projects running on our device. This is cool, right? So we cannot continue developing our application on testy needs on our device. All we needed to do as we can see from the documentation to set up on undress to them little we needed to install Android studio. Once we do that, we installed the platform on some twos. The next thing we did was to set off a Vetra device on drawn our application. However, for Marqise us, you might want toe arj the 100 as a kill to your paths using this comment. But this is not needed if you are using a Windows mission. So that is It's on setting up on Android studio in little that does not move on to the next section and see how we can set up on us Simulator. See you then. 5. Setting up iOS Simulator: Welcome back. Let us see how we can set up on our US symbolism. So but to the Espo documentation quick on us. Simple little setting up on us simulator is pretty straightforward. The only thing to note is that we can only set up on Iris simulator on a mark machine on our US. Simple little cannot wrong on the Windows mission on The reason is because s good, which is used for installing the iris simulator, is not available on windows. If you're using a Windows mission there, you can only set off on Android in little, which is what we did in the last video. So with that out of the way, two sets off. These are us similar. It's on the main. Saying we need to install is escort. So let's go open up our APP store on Install s Coolidge Using this sitch, we can say for abstinence once they switch things up in this such books at its uprights. Connor, we can say for s coach on it should be the forced results. You get blinker on its click on the story. I already have a school he stored, so I'm going to close my capstone. So go ahead in stone escort if you don't have it. I have marked machine was in Star escort open. It's up. Which escort opened? We can see the s good menu at its up. One more thing we need to do is to go to preferences are from preferences. We have to make sure that a command line to is sell. It'd Once that is done, we are good to go. So I'm going to close this and we can head back to the top. That was coupon by our esports, Eli, which is this stuff from the start. We can run our application on an iris. Symbol it. So by clicking on this Oh, from the termina we could cyp I, As you can see, it is at scenting toe upon our approach. It's in on Iris simulator, and that is wards we can see here. So I'm going to place the truth simulators side by side, just as it did for the 100. Um, little. Our general script Bondo is building. And once this is done, we should see our projects running in our iris simulator. Our projects is long up and running, and this is looking good. That is how easy it is to set off on Iris simulator from our RUS. Similar. It'll we can change the device by going to hardware, and from here we can choose any device off our choice. That's once you use for testing for us. We are sticking with the iPhone X for testing. Well, of course, you can pick any other device of your choice. There are other things you could do, such as he raised or content on citizens on the device. You can see it's the device. Shake IDs are much more so we are going to be making use of these features as you progress . True, because that is, it's for creating or a projects and running it in the simulators. Let's move on to the next video and see the parts we are going to take in this course. See you then 6. React Native Basic Concepts Outline: Welcome to this section. This is roots we're going to cover. We We starts by looking at the structure on the components off the reat native up after that will create our own components on style. It's we would discourse how to work with states on prop in the components. By the end, off this section, we're going to build it to do up. We have on the screen this to do up. We have it takes impute on the button. We can enter value on add the ICT. Same to the least off produce, So let's begin. 7. Structure of a React Native app: Welcome back. Let us now take a look at the structure of a reality. Tentative up. I see. Have the up we created in the last section open in V s? Good, of course, these ratifies on food is generated for us. Depending on the version off Espo, you have stored this. Fires are food. Us might be slightly different from yours. So let's take a look at where we have from the top we can see to food us. The dots s poor. On the dot s bullshit defies we have in this footers are configuration price that is being used by the SPLC ally. After that's we have our assets food. The asset for their contains the up icon as well as a splash image. This is the image that has been displayed when our up is loaded after the assets. For them, we have our new DMA Jewish. This is a very huge footer. It's contains all the dependencies that's being used by our application. But you don't have to worry about this further scenes we would not need to change. And it's in there. After that, we see our gets ignored in this fi. We can specify fives or food does that We don't want to Our to our Russian control system. You're very puts on. Five Is the Abda Js fire. This is the starting point of our application. This is what we saw on the screen when we ran our application. After that, we have our after Jason, which contains our up meta deter, such as the name of the up the SDK version, the platform on much more. We can see that the icon on this plus screen configuration is being set up in this fire. After that's we have our bubble does config gorgeous. Five. This fire helps to transpire newest syntax of JavaScript toe plain old javascript so that it's gonna be a sick. You said by our JavaScript engine. We have ah, packaged or Justin five in a package that Jason five. We can see the dependencies that is being used in our application. We also have Dave dependencies, which are dependencies. The only years during developments right here in the package that Justin five. We can see the scripts, this command we can as acute from our stamina, for example, why running the up? We made use of the stats, Commander. All we did was to enter the command s pull starts. Seems we have the start. Command added year. We can swear Mickeys of the command and being Stutts. And this will work just fine. So let's run our application on. Try changing something in the Abdullah Js file. So from the termina entirely common NPM starts or s post, that's just like before this will open up in new top in the browser. From this stop, we can click on, run on us or run on Android a maleta. Remember, If you're using a Windows machine, you can only test the up on an android and maleta, I'll click on run on IRS simulator. This is attempting to open the projects. As you can see, my eye US simulator is loading. Right now we see the projects on the screen back to V s. Good. Let's try making changes. For example, we could change this takes to hell award save back to the simulator. Now we can see our changes to test this out on Android. Open up your undress to dio click on Configure our click on a video manager. We need to start up Vetra device I'm going to start. So the war we create said in the last section I would close this. I minimize the under estudio on the 100 amulet. So it's loaded states we have in the previous section. So what we can do is go back to the top on Click on Run on Enjoyed in Malaysia. Back to the simulator, we can see that the JavaScript won't do is beauty. Now we have our changes. So let's move on to the next video and talk about the core components off they react Tentative application. 8. React Native components: Welcome back. This is really left off in the last video. We still have our projects runnin in the simulators. Now investigate a closer look at our after Jess fire, you can notice that's very important reacts from reacts and we also important some components from reality. Tentative these companies are The stash eats the text on the view components we have our functional components here, which is rods is displayed on the screen below its We have our style definition. One thing you can notice is that the view and the text are are not regular history in the attacks, and that is how I react. Tentative walks. Unlike when we're butin webpages or walk in, which reacts. We can't make use of regular Hesham attacks such as dif or hitch room in reactor native. If you try to replace TheStreet ADF track, for instance, you would get an arrow save. She had about two This symbol litter. You see, we have on a row on the screen so we can't make use of regular history made socks in reactor native. Instead, we make use off the buttes in components that we have in reactor native, so let's refracts these changes to see all the components you can use in the re eternity. Replication head over to the radnet ive documentation. Click on guides on click or components and AP Eyes. This is where we can see all the components on AP eyes we can use in beauty in our reality native up we see the view and it's sex, which is what has been used here. We can also see more, such as the Botstein, the Picca on so on. So we encourage you to go through this page on gets familiar with the components you can use in your application. So the view is the most fundamental components for beauty in you are the facts. We make use of the view to structure. Our application on the text is a component for displaying six. It is important to know that's for us to display. Takes we have to make use of the test components forest us. If I tried to have put sex in between the view tax, you recede that you have an error on the screen on this error. Is that sex stream? Was Birendra with seen it test components so we can only make use of it. Sex Cos So at foods, sticks save Are you seeing that the error is gone? Also, just like in reacts. We can't have two elements as the roots level off the return statesman. For example, if you have another view, Turk here, you see that this year it's on an aero if you try to save this. And that is because we can only have one elements as a parent's elements or the elements to be nested inside its. So I'm going to remove this. Let's try making use of this components from react Native at this points want to start beauty in our to do up, so I'm going to have a view. This view is going toe. Have it sex impute on the button. While I would create a second view under that would display the least off produce for the text impudence. We need to import stage from Riyadh native Azrael as a button. These are safe closing tax, so we rendered it sex in Butte as well as a button. So for this we can have it sex, which we just add it don't make contents lists off, produce sieve back to this simulator. We see that we have an error on the screen. This time, it states that it's such a prop off a person must be his train. If you had back to the documentation, click on the button. From this, we can see an example off how important can be used. We can also see the props that's can be passed to a button. One of them is your press function. We also need to pass in the Thai true property off the button. And as you can see, this is a required props. It's a back city could in the but in prophecy. We need to pass in the tighter, we got said decided to add to Do we need to pass Indian press props. This is going to be a function that will be trigger. When is a click the button for now, Less logs states means to the concert. We could answer it taste but saying Quick, See? And here we can see our 14 on the screen, Greek on its head, Back to the time. In there, we can see the message button click on the screen rights. No, we can't actually see our sex impute on the screen. Actually, it is, dear. If you click just above the boating, you will see the blinking kusa to make this more visible. What we could do is tow add a place so that property so in the text impute we are the place for the purposes. This weakens sets to a string which is and so so do save along This looks to be it's better obviously this Tyler Ennis off. We're going to walk on the styling much later. But from these we see how we can work with the core components in react. Native. I would really encourage you to go through the documentation and play around with this components that we have here. For now. Let's move on to the next video. We have a style our application and make it look much better. 9. Intro to styling in react native: we come back letters now style our up and make it look better. You can simply dismiss this warning and it should be gone. What's we want to do is to move these companies to the top of the screen. So back to the court, we can remove this ties we have year. I start study needs from the scratch. She saved this now and take a look at the simulator. You see that the contents have been moved towards the top of the screen and this is not looking very good. So what we could do is tow Add a paddy. So the container, maybe a party No. 60 save on this looks a bit better. We could approach this styling in different trees. For example. We could just add a pardon soap. Now we add a body in her presenter which we are the party into the left on rights side of the screen. Who said this to train him? Save you could see the changes in the iris simulator to see the changes on the enjoyed in little. We can use common aim on the mark to bring off this menu. I will click on realage this really loaded up on this is what we have. But for now I'm going to revert this on our the General Bodine. So the entire container it is what's not saying that's we can also add STAIs in line, for example, writes here in the container view. Instead of applying this ties we have in the stash, it's got creates. We could just take it off and pass in and objects in this pub Djedje because, said the body in to Sister Sieve and you see that this work just fine. However, it is preferable that we make use of the starship that's creates because when we are applying so many styles in line, this will not look very good. So I'm going to reverse this. Make use of this ties that's consider, which is a style we defined here. We can also outs ties to the text input, so writes here as one of the perps we pass in this time, which we can set to STAIs. That's text impute off course. We don't have this time, so let's quit. It's now under the container objects. We creates the text into its style. What's ties can be hard to the text impute well, we could give it a party in. Or maybe it's in a bada Koloa off maybe black notice that we are making use off comic case for the attributes name all I see asses which we have, but there are high for color. This room's work in reacts native, not just because it is wrapped negative, but this is not a valid since acts in Java Street's. So this house to be come here case you can also add Imagine bottom. So our test impute to create some space between the impudence on its X below. Its for us to see the border we need. So are a Buddha. Weeds of one save back to the simulator and this is what we have. This is not looking very bad, but you can go ahead and start elites as much as you want. If you would like to enable the intelligence is that you can see on the screen whites type in. What you could do is to head over to your extension top in V s good. A search for reacts tentative from the list of results. Install reacts, native twos and configure. It's just as you can see from this documentation. Once you do that, you should get this intelligence in V escort. Well, care. It is very important to note that's react. Native uses flex books to lay out contains on the screen. For example, if we would like to place this text in periods with the but in side by side, we can make use or flex books. So in this view that's wraps, detects infuse on the but seen we can apply a sigh Property in this type of patsy, let us set off on In lifestyle. We haven't sets the flex direction two room sieve back to this simulator. As you can see, we now have about sex in piers on the bettin on the same room. So the difference is column, which is what we have year. We're going to discuss more or flex books in the next section, but for now, let's leave the contents stock on top of each other. Let's move on to the next video and see how we can work with states in reality native See, you did 10. Component's state: Welcome back. How do we capture the value that user enters into the test Boars on add seats to the list of traduced. We are going to make use of states for that. If you have busy acknowledge of reacts, then you would know that states in the component determines how the components rend us or beef. States is also used to store values that belongs to components. So in this case, we are going to make it off state to start the value inside into the textbooks. Seas were making use or functional companies. We are going to make use of reacts hooks, so imports use states hooks from. Yet with that imports, we are ready to start making use of states. So in the up function, we can create the state's toe capture the value three years are inserted into the test, impute for that's would define constants on. We can name the states to do item. What's the defining the function that will be used for dates in the States? This we can cause said to do item and we make is over. You States seems wants to capture the value inside into the text impute which of course, would be a string. We can set our initial states to be on empty stream so it to do, I'd say, would be used for storing the value. Why? I said to do item is a function that will be used for this in the States. The next problem will be to capture the value the user enters into the text impute. For that, we can make use of the unchanged ticks in the college braces we can pass in a function. This from Sean will be triggered on every keystroke so we can call this function takes handler rights at its up. We need to define this function. This would be a narrow function on this function. Were saved the value there's been answered. We can live out. The parentis is on this. You work fine for now, they just love the value to the concert on Test it out. See if anti it ticks Click. We can see that we have this function. Three guards on every keystroke. You can also see that from the tab. There's bean open in the browser. So it that's we can grab the value inside into the textbooks. We need toe out this value to the States. So we make it off the set to do item. So using this set to do, we passed in the value this we are the value to the states. So an able to way by the in between the states, that is it to do item on, it takes impute. What we can do is to assign value in this text impute to the to do iit. Same in the States. Seems you have succeeded in capturing the value inside into the text impute we have other dates to the states. We need to create a new states that we contain our array off to do items so we can name the states to do list this we have the list off all to do items on the function we call. It's said to do list and since this is going to be honoree, the initial states should be on m c r e. We want to add our to do I thing to the list of to Do's when a user clicks the button. So let's create a function. Call this function on our to do list. This would be a narrow function and here we make is off the set to do list on past in. I want to do item with this. We have succeeded in ardently to do I seem to the to do list. But if we do it this week, what we have one is that whenever we enter in new to do item that you have arrived the assistant items in theory. So what we can do is to spread the assistant. I'd say I'm in the to do list and there we are. The to do item, these three dots here is called the Spread or Britain. It is used to make a copy off honoree or on objects. So in this case, we're creatinine a copy off the existing to do lists and then we are the new to do item. So we need to pass this out to do leased to the button. So instead of the costs, a lot states mean we removed these on our the function for us to see that this was actually added, We can Consul log our to do lists and test this out. So save back to the simulator. Let's entire some sex. It's the add button going back to determine now on rights. Here we have on N C R E. Let's try clicking the butting again. As you can see from the stamina, we have an array with one property. We can also see these same results from our brows. That's up. Let's are the differences hits the butts in. We see that we have honoree this time with in new texts. So in essays, once we answer values here, click on the button. We have succeeded in coordinates to theory. Just as we can see you, I hope all these mixes. So what we're doing in essays is that we're making these are states. The four states was capture, devalued the user and us on the second states recruited was toe add the value to the least off produce. So let's move on to the next video on. See how we can display the rights end user enters on the screen. See, you do 11. Rendering the list of items: Welcome back. We have succeeded in getting the value the user enter into the text impudence. We have other dates to the to do lists. The challenge now is to display this. To do least on the screen seizes to do lace is a very we can make use off the map function . So down here where we want to rent that the items So as put jabber streets we make is off Cordy braces, a near recorded to do list and used the map function. This malfunction on re I traits over each ICT. Same in the to do list for each fight. Same in the to do list we can make use of our view on interview we make is about six to render the item to display the to do item. In between the decks, we make use of another Corley braces scenes we wants to injects. Java's creates in between The text here we passed ended to do item head back to the simulator. As you can see, we have the text on the screen. We can try this out also by adding new values. Click on the butts in and you see that it gets other to the list of to do items. So that was hard. Easy. It was to display the items We just need to make use of our map function. So let's apply some star streets below the text impute we can create a new style called to do item. And in this style, we add imagines up to out some space at its up which was set through 10. Give it a pardon off train, see, maybe a background color off this hex value have to After after, let us all supplies on board. That's true. It's so give it the Bader. Reduce health in a border. Wits I was one Andi Bada Koloa. Greed. All right, We need to apply this tie to the view. So writes here. In the view we have, we are displaying the to do item. We apply this style which we said to STAIs that's to do item. So we are applying this tie to each of the Trudeau item Save head back to the simulator on . We seem to have air on the screen and this is because we supply a new valley value to the background color. So let's fix this. We need to add this symbol for its to work. Save back to this simulator on. This is what we have. This looks better, but of course you can try at its most Thais as you want going to reload this by bringing up the menu using calm anti on our click or re loot. Let's strike outs again. Answer. Enter and this is where we have. We can also try it out on Android 54. Using common aim, bring up the menu, click or re loot Onda. We have this error. This is because the project feels to build for underage. What we could do is good. Back to the tab. Click on Wrong on hundreds back to the simulator. This time the project comes up, so let's try it out. Anta we have it's dear. I had to do. We have eats on the screen. Consummate ease. A one in year on the screen can ignore that for now, but as you can see, we have succeeded in RD in the items for the test books to the list of To do All right. So far, we have worked to its the core companies in Riyadh. Negative such as the view the text texts impute on button. We have also seen how we can make use of states to manage the guitar in our components. So let's move on to the next video on this cause how we can create our own components and passed. It starts, reads See you there. 12. Custom components: welcome back all alone We have been working with the core components of Riyadh Negative rights. Now let us try to create our own components. We are going to create a header components for our application. So back to the cord as a convention we're going to create a food court SRC in the root directory. So creative Fouda called SRC in the s r receive food creates another food accord Components in this components for the creates the five had others GS all rights Notice the naming convention Since this is going to be a components we started the name with a capital letter . It's not a room, but it is a convention. You see in most applications of course, this is going to be a functional components so we need to imports from itself, reacts from reacts. Next we import some components from Riyadh. Negative. These components are the stat sheets. The view we know we are going to need this as well as it takes. Next we creates our function. God, Cordis header is going to be a narrow function on just below eats. We add our esports statesman. All right, let's start Building outs are components we need So other return statesmen in the return statesmen were simply It's on a view with the fix there we can architects to do. Of course, we need to create the styling for this components. So down here we define our STAIs property, using the style sheets that creates this takes and objects. In these subjects, we are going to define through properties. One is the head US ties. On the next strong is the head that Titou stays. So once we want to do is supply the head out to the view on the head outside to to detects , right? So let's at the stars now for the header. We can give this a Bagram Coehlo off this heads value on the party in off, maybe 15 for the head up tight through. We can hardly imagine that it's up. Imagine or 40 for instance, aligned it sex to the center using text, align and give it a phone size off trains in. So we have just created our companies, and that is this head are components. Let's make use of EADS in the Abdullah Jess Fire. It's in the abduct Jess five that it's up. We imports we had our components we just created. And this is in the slash s piracy. Fouda slash components slash header No, we want this head Are components to be at the top off the screen. So above the container we render our head are components as a self closing talk but sees recants have two elements as the rich level We have to wrap everything with another of Utah So we wrap all the elements with this view. Talk close, it's below Let me in Dance this my rights Head back to the simulator. As you can see, we now have our head are components on the screen You would notice that the space between the head are on this test impute is quite big, so we can reduce this by reducing the party in in the container. Could change this to maybe 30. See if on this looks better, one more important concepts in reacts or react Native is the concept of props. We can pass desire to our header components using props. For example, in the other Jess Fire Mary Renda. They had our components. We can pass in detail in the form off props. Maybe we could pass in the title. Let's say we pass in to do list as a tie, too. Props to the head are components in the head are companies. We can make use of this process by first of for accepting the props. And here we want to add, put the value in the props. Seems we wants to our Java street's in between. This text companies we make is off the Cali braces. Then we call the props. Don't stay too. Remember this day to is what we passed in as props here, Sissy, Back to the simulator and you can see that we have to do list. So that is how we can pass. Dates are from one companies to another using this concept off props. That is it for this video. Before we run up with this sexual, let's fix once any ball we have in our projects 13. Scollable views: we come back. There's a book in this up that is not easily noticed. At first, let me show you think, for example, you are multiple to do items now try to screw. You're not. Is that you can't screw to the bottom on this is actually intentional. When beauty move by ARBs we have to specify the parts of our screen That's crude able. So for us to fix this, we need to make use of the company and scored this crew view. If you head over to the documentation, you will see that this crew of you who writes a consider that host multiple companies on views so important screw view from react negative, right? At this point where we are rendering the list off, it seems we can replace thes view with this crew view safe back to this simulator. Now let's try to screw you. See, we cannot screw, and you also notice that this part of the screen is not credible. And that is because we only other describe you to the point where the list of to do's is display. If we want our entire screen to discreditable instead of rap initiative, you would have wrapped its with a screwed view. But for now, we are fine with having only the lists off to do It seems to be screwing. All right, So that is it for this sexual believe by now you have a better understanding on how you can set up your environment on start building ups in Riyadh. Native. Thanks so much for watching. Let's move on to the next section where we take a deeper look at styling in reactor native . See you then. 14. Styling in React Native Outline: Welcome back, guys. In this section we will take a closer look at styling in Riyadh initiative. We will see how we can layouts elements using flesh books on how we can style our up differently based on platform will move further on talk about working with images and fonts . Or so in this section we will start building the layouts for our news up. This is how the up is going to look like we're going to have the image at the top. He died two with a five Botstein beside it after Dad's We have a description, so I hope you excited to lend more about your cognitive. Let's begin. 15. Layout with flexbox: welcome back has already discussed React native uses Fleiss books to layouts elements on the screen. To begin this section, let us create a new application. Notice that I'm currently in the re additive abs Food are on the desktop. So open up your stamina on now gets to be a You want to start your projects. We are going to make use of the command s poor in its let's name these projects news up. Since this Israel starts building our news application. So enter this re prompters for the walk flu choose blank we are making is off mpm so answer No This renowned creates our project on his story require dependencies. We pause the video on Come back once it is done our rights our projects has been created successfully Let us city into this projects on open it up in an I d the makings of us Good Andi, I have added it to my parts so I can make use of the car man Coach dots so open its are envious. Good. Of course you are free to use any other I d off your choice. So we have our projects. Open up. Great to open up the in buttes time in 90 escort. This stamina is already in our project Footer, So we can run this projects using the command as for starts just like we did before. And just like the last time this re opened up a new top in our bra. Asia, this is a top that is being open up so we can run our projects in the simulator by clicking on run on arias simulator. This reviewed our projects on open. It's up in the simulator. Our projects is long running. I'm great. So open days are so in an Al Jorden later for us. Let me close the time you now opened up. Enjoy studio and we need to start off a vitriol device so quick on a video manager, I will start off these Vetra device Recreate said in the previous sections. So click on the start button to launch the device. Oh, close this. I'm minimized the undress studio Most times this restarted the previous states. So why you can't do He's back to the terminal. Click or run on And your device? This one I attribute the projects for our 100 device. All right, the projects is now running on Boots on Droid on our US to discuss Fleiss books. I'm going to create three boxes on the screen. I would take a look at how we can position this box is using flesh books. So remove this and creates a view. In this view, I will have its X components way. I can put the techs, let us die this view. I would give it an in lifestyle Bussan. It's a wits off 100 heights, but maybe 100 on the background color off, Maybe rich. So I'm going to copy this on based. It's twice I would change this color to green, and it says to be this so maybe blue and it's X to see. Also, I was sided parents view by giving its on in lifestyle, if by grand color off, maybe sliver, honey Bodine or 50 save. But the simulator on this is what we have on the screen by difference. The parents view on the occupies, a section of the screen that is required by the items in its that is rye. We see that apparent view on the occupies is sexual of the screen. To change these, we can add a Fleiss prophecy to the parent view. I give it a flex of one save. Now you see that it's fuse off the entire container. So right now this parents view is the flex container. Why the elements are the flex items? First, let us reduce the heights and weights off the boxes. They seem to be quite big, so I would change these to 60. You would notice that the light is are stuck on top of each other to place this guy things in a row. We have to change the floods direction of the parent view so we can safely exaggeration to row Save. Now you see that the items in the rule gay other properties off the flesh direction. The column, Which is the difference? We also have the rule re vase on the Coolum reverse, for example, that Strides D column reversed. I could see that the items have been moved towards the bottom of the screen. Let's change this bathroom to Adam Important properties. Rickon sits justify contents on a line items. The justified consent is used to position the elements along the main, as is why the line items is used to position the elements along the cross as his for example, we have set our flags aeration. True, which means that the row is the main as X for our items use indie justify contents. We can position on the elements to the center. Over. I mean, has X. You see, the elements have been moved to the center of the screen. We could also say it. It's toefl s in on the elements have been moved to the rights. What are important properties are space between we have space between. You could see that the boxes opposition anyway, that there are species in between there. We also have the space around and you see that there are species by the side. So the justified concerns position elements along the main, as is why a line I things which is another very important property, is used to position elements along the cross as is. We can set the elements to the sensor and you see the items are being moved towards the center of the screen. You can also try adds more properties such as the flex That's and we have these letters reload android. So go ahead, play around with the different flex property. You can also ahead of that. So react native documentation on that layout it Fleiss books. I really encourage you to go through these documents. So let's move on to the next video. I start creating our news up. See you then. 16. Styling based on platform: we come back, let us know. Start building our news up. We're going to start by Christine The header components on See how we can style It's differently on these different platforms. So I'm going to remove these views as realized. The styling for now. Now let's create our head Are components in the root directory off our up great seafood on SRC in the s Every seafood er creates another food are components and the components for the creates If I had other judges so to build us our components we need three imports reacts from reacts We re imports some components from Riyadh Negative we build outs are functional components I'm below eats We ardour esports statesman Well, care what we need to import for a react Native artist I sheets the view as well as it says companies this component your set props so less passing props had our return Statesmen here we bust in the view on it six in this takes We are going to expose it Perhaps that state So we're going to pass in the Titou or far ahead are components via props. So less are the styling. Next we declare hours ties object. We're going to have style for the header as well as for the teacher. We did this in the previous section for the header we apply Background Coehlo off this Heads value seven to B C D. Four on a party No. 15. Let's give its e bada boots and color of lights on for us, the city color. We give it a Bada Burton wits of one for the tights who we need to add. Imagine soap so that we have some space. Are each other off fourth C. We are lined it sex to the sense of reason. Texts online. We'll give it the phone size off transit on the color off. This says value. Okay, so we need to apply this ties. Here we are. Do our header style recreated in 86. We are our tie to six. So let's import the other components in the after just five on this is in the that's yes, I received food up slash components slash header. Your granddaddy had a year as a self closing stock. Remember, we have to pass in the tighter, so we set it die to two news up. Okay, let's see what we have in the simulator. Okay. This is what we have for Android began. Reload these using command am on your mark. We click our RealAge. If you run into this, Pero you might want to click or run on android inlets or again for the JavaScript born do tribute. And now we have It's working fine. We now have our are running on Android on our us, and you can see that the header company it looks the same on both platform. That's is not a problem, but in reality ups, us tied differently on different platforms. So how can we style our differently on these two platforms? We can make use off the platform. FBI from Riyadh initiative. So in the head, other jets fly. We imports the platform FBI from this platform FBI, we can make it check to see if the AARP is running on Andre or us. So lots form and in the blood for FBI. We ever says to the U. S. Yeah. Good check. If it's equals torus you with these, then want to give it a background color of rights. Using this has value is it is running on android. We give it this background color. Want to also repeat this Miller check for the bottom part in color. So using the blood for Maybe I we check for the OS. If it is our us, then we give it a college by grand. Yes, We give it a color of rights. Arsu for the guy to Tex. We also repeats a similar check. So I'm going to copy these on add to the color. So basically, if we are running on Irish, want to give the text this color as we give it a color of rights. So save back to these simulators on This is what we have on this is a sadly what we are looking for. You can see that our head down now lives different on both platform this have more off the iris. Look why these have more of its typical android look. So generally we can make use of our platform FBI to style our differently When the different platforms let's move on to the next video and start creating the card components for our news up 17. Creating a card component: way. Come back after creatinine, Our head, our companies. It is not time for us to create this country. You notice that he can't have three sections. One is the image at its up, followed by the texture that has thief our boats and decided on the last section is this description. So we're going to lay out our card companies as such they're going to make is of the view to structure eats in tow These three sections. So in the components for the greats. If I cut the judges, this would be for car components the speed things off. I'm going to copy the head Other jays on our density. Cardiges, I will remove the STAIs on this and also remove the decks. Our name this to cut and also renamed Yes, Board to catch so we can start beauty in our card components. First we need to structure its use in their view. Remember I said we have been to have trees sections one would be for the image. So apply Styer God Image Consider we don't have the star YYeTs. We're going to create its litter. We do the same for the side too. We can call these sites to consider what's so, uh, for the description, because simply named the style description. Of course, you can use any name you want. More importantly, we apply is tied to the parent view who called this tie catch. So we cannot start at this ties for this card components that was queen this device image Mancina dated Garentina Israel as a description. All right, so let's starts with our card. We want our car to have shadow around. It's if you head over to react. Native documentation on the shadow props. You see some of the props we can use in setting shadow. So let's make use of this. We need to give it a shadow color. Let's see, is black. Of course, you can use any of that color your shadow opacity of maybe 0.25 the shadow or sets. And this is going to be an object that we apply the wits who sets the witch to zero as well as the heights which was said to to next we are the shudder reduce off its You bought a radius. Often we give it a background color. Let's said these two this heads value, which is right next we give it on innovation property so that we can clearly see the shadow on android device. We can say this to five. Let's give our Cardy Heights. We'll give these he heights off 300 and so we have a space around its We give it Imagine off trains in. So before we test this out, let's are the dome it six for What's I to as well as the dome it takes for the description . So save now we can import our card in the Abda Jess Fi on second look at its and the card is in the SRC. Fouda slash components slash cart, we add. It's below the header. Save back to the simulator on we can see our car components. However, we notice that the Majin is not being applied. Let's find out why. So in the card or justify we see that we should apply. Imagine I'm not just imagine, so save on this lives better. So we have our card companies. Let us also ask ties to the image container once I image to occupy a section of the screen , so give it a wits off 100 percents but he hides off maybe 60 percents. So this re Texas the percents off the catch, we can give it a broader reduced top. This is toe. Are the radios at its up off the image? Consider. We said this to 10 Arsu. The Bada stop writes radios off thin. We could go ahead and set the overflow. It's overheating all rights. Seve. On here we see that the die too and the description have been moved downwards. So this section will be used for our image. Let's move on a sty, the sty True and the description for the tie too. Who could give it the heights or 15%? And so we see a space between the right and the left side. We give it a party, nor is enter these records said's to 15 save. This is what we have so far. We need toe also apply size to the description So far, the description we give it the party no results out or 15 on this looks better. Looks like there's much space between the title and the description we got and use its by reducing the heights of the title container to 10 percents safe and this is what we have. No, this looks nice. So we have succeeded in creating our card companies. Let's move on to the next video and see how we can work with images in reactor native. See you then. 18. Working with images: Welcome back. We are currently butin outs, this card components on. Want to see how we can add images to read it? How we work with images in react native depends on where the image is located. For example, if we have the image in our projects, making is off. Such image will be a bit different from imaged as fresh from the Web. To demonstrate this, I have added an image in the outset. Fouda. And that's this news dim or the G pick. So go ahead, pick any image from your system on added students for them. Now let's see how we can display this image in our so in our cottages we need to enforce the image components on rights. Here in the image container, we render the image components as a self closing stock. Next, we have to set the source of this image and since this image is located in Nara projects, we make use of the require function and in this require function, we pass in the parts to the image for Rasta, says the image. We have to go backwards two steps into the assets for the and there were big did the mod Agip. Big, safe. Back to the simulators. I can see that we have our image, This play on the IRS simulator. But this is not looking very nice. So we need to add some style streets at this type property. This was sets to STAIs that image we need to create this time. So writes here. I had this time, and in this tie, we need to give the image wits. Seems we wanted to feel the available container. We give it a weeks off 100 percents. We also give it a heights off 100 percents. Safe on. This is what we have now. This is looking better. The city's on android will need to reload. So using common am when you Mark, we click or realage. Actually, we run into this area again. We can fix this by clicking on drone on an dreading later again. And this your tribute the projects for underage on. Finally we can see it's displayed. So that is how we can walk with energies that we have locally. We just have to make use of the require function to loot the image. No, What's ive? The image needs to be fetched from the Web, for example, open up its type in your brother and search for any image. Copy the image address. How can we display this Imation? Our up In this scenario, we're not going to make use of our require function. Instead, the display search image we need to pass in and objects to the source. We said the address of the image using the you arrive. So we passed in the imagery of just copied save. If he had about the simulators, you should see the image that we just fetch from the way. So that is how we can walk with images locally on remotes, images. Let's move on to the next session on. See how we can add fronts to our application. See you do. 19. Adding a custom fonts: Welcome back. Our up is looking fine on the text is okay. We can make the sex look better by adding if fronts see if you head over to the browser search for Google fronts, it should be the first results. Click on needs from this page. We can pick any Florence. We want to add to our application for me. I'm going to add the soup on two fronts. So I was So let's this funds and from these download icon here, I'm going to download the fronts. After that, I lived in difference. Move about sea or are set for them. Create seafood accord fronts. Now, in this food are they stretch your phones on Absar it. I'm going to do that, Snow. Have a strategy difference I downloaded on. Added to my phone's further in my application, I want you to also do the same. So for us to look this fronts we have to head over to the Abdo. Jess five. We want to load the four months at the start of the application. Now, how can we make use of this phones? If you head over to the s poor documentation, you could just say for four months in the search box Click This will give you a guide on how you can make is off fonts in your up before seeing is that we need to a store the Espoo fronts. Although this is already stored in some Russian of Espoo. What? To be safe? We want to install this package. So back to the stamina, I'm going to add it Stamina on in this time. In our we start the Espoo fonts using s poor install as poor fronts. And so these were installed the package for us. Once that is done, we are ready to start loading our front. We're writes a package as being start Now the next thing we need to do he's staying. Pause everything from the S performance package. So back in the up, we import everything as fronts from s performance. If you take a look at the documentation we can make use of the Lord is sink to load our phones. So I'm going to create a function and this from Sean would be responsible for loading our fronts. I'll call the function load fronts. This would be a narrow function and in this function are making a difference. That's load is sink. Yeah, become personal objects. There has the key. Any parts to our phones. Let us load our regular phones by giving is a key or foodborne. True, the nesting is to use the require function to pass a parts to this front. This four inches look, it said in this slash asset fouda slash fronts slash were born to Regula. We cannot salute each hour open to boot by giving it's a key or for born to boot. Now you're surpassed it parts to eat. Okay, this load is sink function returns they promised. So we have to return this so that when we are using the function we can add a check to see when the promise has been resolved or rejected. So we now have our function to load the fronts. But we need to make sure that our funds alluded before we run the other parts of the application for that's we can imports the uploading components from s ball. With this upload in companies, we can keep this plus screen on on, See, our up is loaded. So for that, we are going to make use of states so imports you stayed from reacts. We need to create states. We can call the state's fronts alluded and the function we can call it sets for included using this estate's we said the initial states to force Next we are the chick. If the fronts is not loaded, I want to keep this splash screen on using the uploading So we render the upload in. If the Florence on alluded, what difference are loaded once or it's on other parts of the projects that has a header on the cut. So we need to set some attributes. One of them is it starts to sink. This is really passe function that it's re trigger. Why the up is loaded. Of course, once it passes are good fronts. So why our up is loading on I wa splash screen is on it Retreat goddess lewd for its function. And seeing as this returns the promise we can aren't on finish this re trigger ones, the promise has been resolved. Yeah, we can city from shown in this for shown we make is of this sets front loaded and sets our fund today to true once our load for industry god on the promise has been resolved, defense loaded will be set to true. That means other parts of the up cannot be executed. So save for us to try this art, we need to apply these phones to it. Sex in our. So in the car components, we can apply these phones to our tighter. So let's say Thomas type property. We re pass in a style objects we can name this tie name side, too. We don't have these styles, so let's quit is now. So in this tie to style, want to said difference Family 212 which is the Florence we just added to our up, and that's that this name must match the key you set off in this function so we could aid I make is of a bunch or one to boot. Since this is a tighter let's make itself a bill to boot save back to this simulator and we have these aero on the screen. Let's try to stop the up using Contra C on their run. It again s full starts. Click on run on I s simulator as we're last rolling on droid in little. Let's see in that re fixed the error. My rights that did not fix the Aero on the problem here is that we're trying to assess our phones before it is loaded. So what we can do to fix these is the art? A return statesman. We wrap our upload in with the return statesmen. This will make sure that's our flat screen escapes on why our AARP is looting. So please are the return statement here. Cve onda. We see that the aero is not gone. Can reload the android on you. See, this works fine. So we have succeeded in RD in our phones. Let us a supply difference to our description. Cindy Carter. Jess. We can also, at this time here we apply this ties a. Maybe Whipple said these two description sex. Of course, you can name this time wherever you want. Let us at this time. And here I want to add a forints. Family. We're blunter. We can go ahead on add. Imagine, sir, for the description could give it the value of saying as well as a phone size. Let us give it value or 15. Do the same for the tighter Imagine soap off then on the fourth size, off train see Save. And this is where we have This looks far better, So that is how we can make his or forms in our application. I hope you Lancelot from this. Let's move on to the next video and see how we can make use off icons in the application. 20. Working with icons: Welcome back, guys. This is how far we are Beauts outs Our card companies, we have added in Mitch as well as they cost you in front. Well, one smoke pieces seem missing in this country and that is the five icon we have beside the texture. So how can we work with my cause in our up If he had about two the s board or committee ation such for icons click and yeah, you. We see that's to make itself icons. We just have to imports the icon companies Next three. Renda It's passing in the name this size and possibly the color of the icon to see the list off icon that you can use. You can check out this icons territory. From this, you can see all the icons. You can use your up for us. We are going to make use of the five icon, and these icon is from Syria icons. So we need to reports this icons territory from the Vetter Icons package. So let's head back to the projects here. We need the importance materia icons from that's s pool slash director icons. Next thing is surrender this icon components. Actually, this should be in our card companies. So I'm going to court this on head about city card companies on ad It's here. So once when that this icon companies besides our tighter So we add it's here. But Syria icons as a safe losing time. We have to pass in the name and the name is what we get from this directory. So copy this aan obvious here nesting is to give it the size. I would give this size off transit fall was the need to give it the color. I would give it a color of this hex value we have been using in our projects to save back to the simulator. As you can see, we are the icon here but is not properly position. So we need to add a flex direction to reach so writes in the title Consider, we give this a floods a Russia of really so that's the items in the title container which is it takes on the materia icons will be position in the same room. See, you see that this has been moved to the same rule which the tighter but you see that it is not propellant laid out. So what we could do in the Thai to continue We can give these justify consents. Remember, we justify constants. We can set how we want to lay out items alone. The main as is so we can use space between Unless we can make use of all line items. Two sets the items to the center and this is what we have now this is looking better. So that is it for this section. I hope you're lancet lots. We are going to move on to the next section where we would discuss navigation in reactor native. So see you doing 21. Navigation Outline: Welcome back, guys. Up to this point we have been working on a single screen, but in real life, on up can have tens or hundreds of screens. So in this sexual, when we talk about how we can work its navigation in reacts native, we will discuss the three commonly used navigation in more by UPS. And these include the stock navigation Saab, these navigation on working with JOA. As you can see from the screen, we will continue beauty in our news up. We're going to add all these types of navigation to REITs, so let's begin. 22. Setting up React Navigation: Wait. Come back in this video. We're going to see how to install reacts, Navigation reacts. Navigation is a library use for setting up navigation in reality. Tentative. So I still have my news up open. Envious. Good. So I would begin by creating the screams we are going to need in this section. So in the S, I received Fouda. I'm going to create a food card, Screens in the screens Further, we're going to create two fries. One is three news list screen this green we contain all the list of news creates another fi that we display a single news item And that is in news I thing screen. Okay, let's start bidding us the news list. Screen to speed this up are we had a lot to the head of the Js Fi and Korpi What's we have year best in the news list? Screen dodges We will need to remove this ties Also, we need to rename its two news list screen as realize the Esports statesman. I will remove this ties us so And this right here I can just as puts in Damn, it stays List of news. All right. We also need to do the same for the news I 10 screen. So copy this. I'm based in the news item screen. Change these two news item screen. Unless that's put the takes news item. Oh, care. So add navigation I mentioned that we're going to make is a free at snow education. So open up your brazuca on such for reacts navigation It should be the force to results quicker needs click on the dogs from this beach The first thing we need to do Eastern star react navigation in our up So if around the semi now and we clear this off inside a common and being he stall reacts an avocation And, uh, these dreams store this package after a stolen reacts navigation. We also need to in store some dependencies, as you can see from the documentation. So copy these. I run it from the terminal. Did you restore the require dependencies? The installation is done as you can see from the time you know, before we continue, we see have to install the type of navigation we need. Remember, we discourse that there are three types off navigation that's are commonly used in more by APS so we want to start with the stock navigation Surround the command NPM Mr Reacts Navigation stuck This is something you can also see from the documentation. When you click on a little reacts navigation you will see that's before we continue We need to install the reaction application Stuck writes The installation is done so we cannot move ahead and starts configuring an the navigation for dads I'm going to create a food I in SRC Fouda card navigation in this navigation Fouda create If I call up navigate So the judges So this is really will Koffigoh our navigation once again If you take a look at the documentation, you will see that we can configure our up. Never get so by setting our screens. So seems we are working with this stock navigation We need to importantes So reacts navigation stuck on this component is the create start Navigator So this reviews for creatinine our start navigation. Next we set up our Abner Get so using the Chris start Love Goetzel in this Chris start navigate! So we need to pass in and objects rights In this object we specify an identifier for our screen on. Then the configurations. Yeah, we can make use of the screen property to set a screen for our identifier on the screen. We want to say it is a news list screen, so we have two important imports. News list Screen from this creates folder. The screen is our news list screen, so we set. That's here. We can also do the same for our news item screen. We can name the identifier news item. Of course, you can use any name you want A year we set off the screen to be the news item screen. Of course, we need to import these. As you can see appear. This is automatically important for me. So this is how are we can sets up navigation on these are our routes as a shots card. We could have just assigned the screen to the identify on. These will work fine, but let's leave. It's this way on. The advantage of using this method is that we can add additional configurations for the screens, so we need to sports our five. But we can just and support to the app navigate. So if you take a look at the documentation we need, so imports create up container for react navigation and then uses to wrap our up navigator . So I'm going to copy these imports. Statesmen, I'm business here. We that's you can make is off Mike Ritz up container to rob my navigator. So we are done with setting up our navigation. Let's make use of it in the Abdullah Jess Fi once imports our navigator said, It's up. We imports our arms Now get so from the S Cyrus E for the slash Navigation slash AP navigator. So we need to rent out these AP navigator right here where we are returning the head on the college. I'm going to remove. These are It's on our AP navigator save. Let's try running our up so fronted stamina I run the command using as full starts and just like always these we opened up. It's up in the browser. So from this stuff, I can click on run on our years simulator and these were the same two large our rus simulator. Why, this is loading. I wasa starts off on android in little by going to the EVD manager how we start off one of the virtual devices. All right, we have an aero on the screen. And as because we need to install a particle Amadu if you head over to react Navigation documentation on that creates start navigate. So you will see that we need to arj this mask view. So copies from the stamina going to quit that process I run the command Empey en install the reality of communities slash mask view. And so the package has been restored so we can run our begin using esports starts unlawfully. It fixed the error. So click on run on IRS simulator as well as run on Android him later. So back to the simulator, we see that the error is gone. We can also see our screen on that is a new screen. So what we can do is to go to the news list screen. All right, here we render our card components so less imports, they cut components and this is from the components food a slash catch. So instead of rendering the stakes, we can just render our card confidence save back to the simulator. As you can see, we have our card company. It's on the screen on. The interesting thing is that when working with navigation. The head up parts is automatically a date for us. As we can see, we do not need to start rd in our head. Are components in facts. We can delete the head our companies Seems we are not going to make his of EADS again. Also in our after jets fly, we need to remove the reference to these head are components has realize the cut scenes were no using the card in this fire. So save on, everything should work. Fine. So let's move on to the next video and see how we got navigates for our news list. Screen to our news item screen. See you then. 23. Moving between screens: we're going back in. The last video we installed Reacts Navigation. We also set off our routes. In the up Never gets are the jazz Fire in this video, let's take a look at how we can navigates from one screen to another specifically how we can navigate from the news list. Screen to the news item screen for debts wanted. Navigates to the news item screen where we click on a rock cod head varsity coach in the news list. Screen door jazz fire. What we could do is the importance it touchable capacity. Using the touchable capacity, we can wrap our car components, which it's Israel hours to add a touch. A brief. It's to our catch. That's we. We can add a click functionality. The touchable capacity is just a rapper that would make our card respond to touches so we can add on a press function. For now, we can test out the touches by adding the consul Log statesman. Save back to this simulator. Click on the card head bob to determine No, you can see the law pressed on the time you know, So this works fine. Sees the news list screen his parts off the route reset of year. There is a special props that's been added. The Dis Cos. Let us take a look at what we have in props by logging needs to the concert. If you take a look at the concert, you see so special props in the concert on that is in navigation props. This props can be used for never gets in between screens, so I would minimize this here in the function. What we can do is to make use of props. That's navigation that we saw on the termina that's navigates. So this is a special props that we can use to move between screens, and here we pass in the news item. Not is that the name we passed in year much is the identify Ari sets up here, save, but to the simulator, click on the guard. You see that we have succeeded in moving to the news item screen. It also provides us with this back, but seen automatically, they free click on its takes. About two. The news screen you click. Let us also try these on Android Click are you see? It's also wants fine. Nothing is deciding if it's which is typical in hundreds. Why in the U. S. We have it different if it's so. That is how we can move from one screen to another, our rights. Why this is working fine. This is not the best approach. We don't want to keep wrapping our car components, which this touchable capacity. So what we could do is the past ended navigation props to our card companies. It is important to know that it is only the company's. There are parts of these routes that's have asses to this navigation crops. Child components such as he card do not have assess to the navigation approach. So for us to make use of this navigation props in the card companies, we need to pass its two reads so we could make is off. Navigation has a key. I'm passing the props probes. That's navigation. With this, we cannot make use of the navigation in the car components. So I'm going to remove this has realize this I was sick of the consular statesman in our car companies. We know how I says to the navigational props so we could imports the touchable capacity year. Instead, we use these to wrap our view this way. We are the touch a brief. It's to the view. So I win. Dance this on in this touchable capacity, I add the on brace function just like before we make use of the props. That's navigation darts never gets. Are we pass in the identify are off the screen We wants to navigate through, which is the news item save And this should work Fine. Back to the simulator Click And we have the same results. So this is working fine. Alternatively, rather than just passing in the identify a year you could passing on objects. And in this object you said the routes name through the identifier. On this, we gave you the same results as you can see from the simulator one. Martine, I would like to show you this video. It's how we can change this head outside. This is not looking very nice, so we can change it. To do that, we have to go to our up. Never gets other Jess five rights here. Where we're sitting in our routes, we can ARJ navigation options, these navigation option takes and objects. And in this objects, you can set the head are die too. Can set this to news Did taste or news sites. And if you want, save back to the simulator Are you see our changes here? This looks better and your order configurations. You can sits for your routes. We encourage you to read more from the documentation. But for now, let's move on to the next video on. See how we can set up top navigation. See you then. 24. Adding a tabs navigation: wait. Come back in the last video, we succeeded in creating this stock navigation. So in this video we will discuss how to set up a top navigation at the bottom for that's in the screen. Fouda. I'm going to create a new screen called Favor Right screen. This will also be a functional components. So I will copy the court we have in the news. I tell screen on based. It's here. I would change this. The fever right screen, What's really takes to list or favorites save. So if he had about Sue has put documentation on that creates bottom side navigation. You see that you need to install reacts navigation taps. So from the stamina going to create a new termina, I run the command and PN his stone reacts navigation. Perhaps this will start the package Installation is done. The nesting is to configure our types. Navigation in the abducts never gets on fire. So just like we import, said our Chris start Now get so for reacts navigation stock. We also need seem parts the creates bottoms up navigator and this is from the reality navigation Sam's Using this, we can create our bottoms up Navigator. So down here we define our function. Let's go the function on. But some sap navigate. So just to be clear, what's the function? Does we make use of our creates part on top navigato here, just like in the 1st 1 we need to pass in a routes name on the settings for the roads we are going to have to screen. One is going to be our home screen on the nest. Ron is going to be our favor, right screen the home. Rhodes is going to contain everything we have on this screen. So for that we need to pass in our stock, navigate so to the home, Rouch. So we can actually pass in Navigator as a screen to a different navigator. So writes here will make use of our screen property on set these to our Abner gets her actually, to be clear on the type of navigation I'm going to rename this to start Navigator. What's the past that's in here? And for the favor right screen. I'm going to pass in our favor ride screen, make sure you're saying parties and it's up. So Seve, the next thing we need to do is the past in our bottoms up, navigator to our creates up container. Remember, the bottom Sapna gets are is now the main navigator. Since its continues I was Start Matt Giteau. So pass in your bottoms up now Gets her here. Save back to the simulator on This is what we have. As you can see, we have our tabs balloon. This is working fine. We can stretch from home screen. So a fever a screen you can still not against from the new screen to the news item screen all in the home screen. Next thing we could do is the ad icons to our taps so that it looks better to add icons. We have to pass in navigation options to these routes. Remember, we used navigation options toe add additional configurations through our routes. So writes here we can pass in the navigation options, which is an object. And in this object, what's makings of the top by icon? This stopped icon is a function and in this function we have to return the icon we want to display. Remember, we discuss how to make his of icons First we have to import the icons companies from Vetter icons just like we did in the Cardiges. So I'm going to copy this on out. It's here. So we're making use of Matt Serai cause, of course, you are free to use any icons, components of your choice. So rights here, I'm going to run daddy mats Iraq Run. I'm pass. It's in name or form. Also give it a size off 24. This home I can't is what we can see in the directory, your said for whom? And this is the icon from that Syria migrants. We need to do the same thing for the favor, right? So I'm going to copy this and I did here. But this time we want a fever rights icon. So let's say for one, become make use of this favor rights on instead of room, replace these which favour rights. Save back to the simulator and we have the aero cans. Find reacts. And that is because we are making use of JSX here so that it's up. We need so important reacts so in parts Riyadh's from reacts see, and that should fix the error. As you can see, the error is gone. We have our icons along with the text in its ABBA and this is looking very nice. So that is how easy it is to add its up navigation. We just need to make use of the creates Bottoms up now get sir and we specified the rows. So Griet play around with this. Add more cities such as changing the color off this icons. What for? No, we are going to move ahead to the next video. Were we discuss how to walk with Drogba in reactor native? 25. Adding a drawer navigation: Welcome back, guys. We have implemented stark navigation as well as stops navigation. Now it's time for Also add drove on navigation, which is also a type of navigation we see in more biopsy. If you had about so reacts navigation docks on that creates drove on the ticket, so you will see that first we needs in store the Israel's navigation drawer. So copies back to the projects I'm going to open are being nude stamina and yet our based on run this command. So this restore the realities navigation drama that is done just like we create, said our stock navigate. So we also need to follow is similar approach. So at its up letters imports the company's from the package we have Justin start. That is our reacts navigation. Andhra. This component is creates job never gets him. So with this we can create a Georgiana Pickett, sir, down at the But so we can create these drama navigates Are I define any constants? Let's go. These drove one of you gets up I would make is our creates drama navigate. So yeah, yeah, we need surpassing the JAMA scripts objects on in this object reconfigure or the screams. So we need to realize that the draw one of you gets or is at the top off all ties off Navigator, just like we did our start never gets are what brought sums up navigate so we can also add our bottoms up. Gets are traveled, drove a navigate. So so what's we wants to do is to have a drawer we'd soon menu. One of the menu is going to contain this entire taps Navigator, the other menu. We be on about our screen, So let's create that force in the screens. We need to create a new fire about screen. So the safe time our copy could for our favorite screen to the Abad screen. I'm going to change these two about screen as realize the esports. They may also change the stakes to about us. Let's add some styling who give it a Consider this. Consider. We set it flecks of one. We once the text to be positioned to the center, so give it a justified consents or sensa on a line night seems or censor. Let's apply this tie to review said this to the STAIs those container save now in the up navigate. So we need to. Imports are about screen, same ports, my knowledge screen from the screens for the a bad screen. All right, So you know, I drove on navigate so we cannot create our screens. We can name the first screen news. And in this new screen, we need to pass in our bottom side Navigator. So we sets our screen so the bottoms up get so they want to have our bad screen. We passed the about screen we just created. So rights. Now I want drama navigates or is now the main navigator because it has our bottoms up, Navigator. So we need to pass our drawer navigate. So to decrease up container save on. Make sure the Arab east the running head back to the simulator are you see that nothing happens. Actually, we have added our draw on advocate. Sir, if you drag this from the side, you will see the job one of get so the city news on you can see the about us. Try it again. Dropped this from the side and you're seeing that's we have added our drawer navigate. So but just like we see in many mobile ABS. It would be better to have in many years that can be used to trouble the drawer. So let's add, that's now record us. We made use of navigational options. Just add some configurations for each of the screens. We can also add this navigation options so the component is safe. For example, on the news list screen, which is this home screen we have year. We can add configurations to eat, using the navigation options so we can set the navigational options using news lists, darts, navigation options On here, we can pass in any objects or function on this we want similarly to where we set our navigation off shows right here in the navigate. So So this is also to show you another way off adding configurations to your screen. So seize this news list cream. It's part of the screens with set off using our reaction navigation. It has a special props pastor. It's just like we saw in the previous section. So let's go this process not deter. And in this now we can start setting off our navigation options right here we can add the return statesmen, I'm just like we made use off head outsider to set the tight. True for our screen. We can also add here that side to rights here and it will work just fine. For example, currently, the Titou is news. We can change these two news up you once save reload are you see the changes here? So this is another way of adding configurations to our screen. But read that this moment we are concerned with another poor patsy on that is our header lifts. At this point, we wants toe edge on icon to the left part of our screen that would be used to Togo, our drama. So for dads, we are going to pass a function. In this function, we can specify the icon we want to display as the left parts off our screen. Remember, we have already discussed how to use icons in our cargo jets fly. So for that, I'm going to copy this imports to our news list screen on here. We render our Matt Syria icons. We need to pass in the name of the icon. I'm going to pass in this icon card menu. You can check it out in the icons territory said for menu on This is this icon we have you which is this hamburger icon. So I also give it to size off 24 another very important property to are easy on press per person. This is where we are in function to Togo, our drama so passing the function and in this front shown we can make use of another Dietze this is not did have US AIDS to navigation which is a special props dice passed to this company's And with that we can call it So go, drama. This is something you can also see from the documentation. If you go to guides on draw on navigation, you see that some of the functions we can I use are open and Java on clues droga. But before, like to talk with the draw are we can make use of the troubled drama. So save head back to the simulator. That's us, RealAge. Now you can see our hamburger menu on the screen. If you click on its it brings up Deidre. However, if you go to their about screen, you see that we don't have it anymore. That's because we also need toe added to all the screens So come to the news. You be noticed that this talent is not properly airline. Let us also check this outs on Enjoyed. Remember, you can reload on dried on the mark using command him to bring up this menu they click are RealAge all right? You see the icon which you can also click to Togo. Deidre Although this works well, this won't be the best way Toe ad icons through our header does because if it does this hours on different screens you find out that this icon will not be positioned properly. So there's a package we can make is off toe ad icons to our header and it restyled its properly. Let's move on to the next video and see how we can make use of such package instead of manually Yardena like I cause as you are doing in this section 26. Navigation header buttons: welcome back. So we have this nice menu year, but this is not properly online. If we try 200 the styling for this many by ourself we might run into some problems where we test this up on different device. So to solve this issue, we can make use of a package called Reacts Navigation Heather buttons. As you can see from the description this package, we have poor surrender bulletins in the navigation bar and also handed the styling for us. So we are going to make it off this package for that's we need seeing storage. So copy this name off course we are making is off champion, not CNN. So back in the projects Randy Command M Pierre install, then the name of the package. These were installed the reacts navigational header. But in this package writes, the installation is done so we can start making use of its No sees you are going to make use off our head Are putting this menu icon on different screens. It should be better. We created as a component so that we can reuse it on these different screens. So back city could in the components for the lets us create. If I called Doha had a button. Of course you can name this fire Whatever you want. Right here. We need see imports reacts from reacts because you are going to make use of J six. If you also take a look at the documentation, you will see that you need to imports this head up. But in from the reaction navigation had a buttons. So let's your dots. Imports head are buttons from reacts Navigation had our buttons. Okay. We also need to imports the icon package were using off course. We are making use off the X s poor slash vetter Icons on the package is the material I crush we'll be using in this up So writes here we need to create our function. Let's go. This function drove our had a buttons this year accepts and props on in the function body we need to render our head are buttons. Actually, we need to import the header button. No, the buttons. So here we followed the props and he carried more on how to use this package from the documentation. We also need to set off the icon components on this year setting to be the materia icons. We also give it the size, which is something we do when we are making use of icons. This have to be three darts. Okay, Next we esports these as it before test vote. All right, so we have created our own header, but seen So let's make use of its in our news list screen. So dear, we need so imports the head about saying we just created so imports. Joe, I had Albertson. This is from the components food a slash joe I had our butts in. Next we have to render our head are button. And as you can see from the documentation, we need to import the head of buttons on pass in the head of 14 we just created. So let's do that right that it's up. We imports from Riaz Navigation had our buttons. These packages are the head are buttons. Please note this is head of buttons and not the head. About seeing that we imported here. This was used to create a one costume, had a button, but this is a rapper that we can use to render our head our butts in. We also need to import, right, Sam, my rights here. Instead of manually rendering our mature icons, we can make it off the header. But in we created. So I'm going to remove this how passing and objects which he returns This man in the return statesmen, render our head are buttons in the head of buttons. Take a look at the documentation we have to pass in the header button components So make you have heard about in companies on here. We passed in the components we just created, which is our draw by head are putting Plus, it's in year we make use of the item And this Eidson we specify the tighter Who would just call this menu nests the icon name The icon name is menu, which we saw in the icon Daraji. The next we can add our own press function. When this icon expressed, we want to treat Gardi trouble Drona. So make yourself now data. That's navigation. That's Togo Drona. All right. Looks like we have a problem with our closing tax. Some venture remove these and they shall walk fine. So save back to this simulator. Lets us reload on. This is what we have on the screen. Although this is properly online, this is looking very small. So let's fix this actually, in our drama ahead and puts in this is supposed to be I concise and not just size receive back to the simulator. You can see that we now have a very nice looking header, but in and this is properly online, let us also reload, found Ridge, and we have a similar results. This is looking very nice. So that is how we can place buttons in our header. Let us also added to our favorite screen as well as the about screen. But for us to do that, we need to make sure that this components have a head up parts. For that, we need to create our bad screen on our favorite screen as stark navigators. So back to our AP navigator, we can create the start. Never gets off our favor. Rights we could name is favorites. Navigator. A year we make use of our great start, not get, sir, and just let before we need to pass in the routes name, which is favor rights on the screen, which is are fever right screen. So why we're doing This is to add this header that you have at its up to our fever right screen. So we do the same for our about. So I'm going to copy this on this changed days to about navigator on the screen is going to be our bod screen. All right, so right here we are. We're making is are the favorite screen who could just make it all the federal rights navigator on here instead of the above screen, We can make use off the about navigator, so this should work. Fine. Save back to the simulator, Go to the five arise screen. And you see, we have this nice looking header go to the about. Now. We also have these, but we need to change these two about so writes here in the Airbus navigate. So we changed the routes name to about. And this you work fine. So we cannot go ahead and add our menu icon to these other screens. And to do that, we can go to our new slit screen on Copied in navigation off Sharon's Riyadh idea. Remember, we majors of the navigation options toe add a header left property. Were we rendered our menu icon. So copy this. Go to the favorite screen we need to add. It's here. We have to change these from news Lee screen. So favorite ice Queen. We also need to imports this components. So from the news list screen, I will copy these imports and also add, It's here. We also need to imports our job ahead. Are boating at its up? See imports? Joe, I had that. But seen from the components for their and that's easy drove ahead of Watson. And this you walk fine. Let us also do the same for our about. So copy this and they are brought screen. We best it's here. Changed these two about screen and just let before we need to import this components from our reacts navigation here that buttons. So copy this. I'm pissed year and finally we need to import our costume drama here. That button and this is from you dot dot slash components for the slash Drove ahead a button. Save back to the simulator. Go to the fever right screen. Okay, that's as reload. Now go to the favor. Right screen on you see, we have Ah, nice looking icon menu. Good to the abouts we see have this nice looking icon. So that is how we can add a menu icon to our Drogba. So go ahead, play around with navigation and also try playing around with this package. As you can see, you can also arj icons to the right side of our navigation bar. So try or this out. But for now, I will move on to the next section. We have a start discussing states managements which Redox. So you do. 27. Redux Outline: we come to this section This repeated last section on Beauty In our new stop, we created this ties as well as ardent in navigation. Well, we're making use off dummy data, so it's not signed for us to fetch on news re deter in our up. And for dads, it is proper. We talk about states managements off course. There are other states management libraries, but managing states which Redox is what you will see in most reacts on reactivity replications. So we are going to talk about what is redox, how we can set a Redox store actions as well as reducers. We will also discuss how to make http requests and fetch our news deter. Please note that this is not a beginner's course on Redox. I'm not going to be explaining or the ins and outs of readers because I as Jim, you have prayer knowledge or basic knowledge of reacts and redux before taking discuss. So this is just going to be a refresher, though I would try to explain the concepts as we moved through discuss. So let's move on to the next video on discards. Swartz is Redux 28. What is Redux: welcome back. So what's is Redux? In very simple terms, Redox is used to manage of application states. And where we talk about states in JavaScript. We know that states is like an object that holds the guitar in our application. Also, this states could change in response to actions and events. One man problem we could find in front send applications such as reacts is passing deter from one components to another, as we have already discussed, we can pass dates are for one components to another using props. But as our application gets bigger, these can pose a challenge. For example, imagine you have tens or hundreds of components in your application. Passing dates around this components can be very challenging on that Israel readers comes in readers provides all sweetest Centra store to store the deter or the state's off our application. Take a look at this diagram. This shows us a Redox flu right here we have a central store which has the application states components that's wants to manipulate the application states country gah on action on this action we passed through a reducer on this reducer is just a pure from shown that is used to update the states. The final flu is that all the companies that's requires us states we received your detested . It's so Redox provides, posed with an elegant way of working with states. As our application gets bigger and this up, we're going to make use of states to start the deter that we are going to fish from your remote summer. We are also going to make itself states to start the news that the user adds two favorites . One kids in to note is that readers is not side to react or react. Tentative redos. Is it true that can be used for states management in any JavaScript application? So back to our news up I have It's Poepon in V s. Good. Remember, we have been working on this new stop for the past two sections. This will be the final section on will be at the state's managements to reach So from the stamina I'm going to install, Redox is in the common NPM Install Redux beside Redox. We also need to install a package guard reactionary ducks, and this provides us a bridge connecting our reactor native up with Redux. And so and now we have those two packages and start so we cannot starts making These are free docks. Let's move on on. Discuss how we can create this centrist Oh, that would be used to store our application states. 29. Set up Redux Store: Welcome back. We installed Redox in the last video. Before we move ahead as sets up a redox stone, we need to store some additional packages. So from the command line, stay in the projects Directory. Run the command NPM install on the package. Want to restore its card reader Ox tongue. This is a middleware that we have pose to handle a synchronous actions in Redox. Remember, we are going to make a request to fetch the news Deter from the remote server. So 200 such a synchronous requests. We need to make it off this middle where? Not a package that is used for the begin is the Redox deaf truce. The installation is done. We cannot move ahead on sets up our redox tone. So in the S, I received further I am going to create a food accord Redux. The name of this food I stopped to you in some projects. This can be named store. But I will leave these as three ducks in this redos Fudoh. I'm going to create enough food accord actions and still in the readers for them creating enough food, our car reducers. I am going to create the fire in the ocean's food are called news action. Or do we are not going to add contents to this fine now, but we do. That's inlets. A video also in the reducer I would create if I called news reducer just like always. The name of this fire is up to you then writes in the Redox food Um I will create if I called start urges. This is really was set up our store to set up our store. We need to make some imports. First we need to import some companies from Redux and this companies secret store which were used for creating a stir Seems you are going to make use of a media where we should also imports apply me to wear. Why were year? We can also imports the combined reducers. How do we are going to have just one reducer which is going to be on news reducer? It is good practice to make use of the combined reducers. What? So we need seeing post song from readers stunk. This is a D four. It's esports on for the bargain. We need the imports components from the Redox death to less tension. We start this component. It's our composure. Defterios All right, We cannot make use of the Christo to create our store. I'm going to export these as a different esports. So we're sports. Deford's creates start function Integrated store. One of the main parameters we have to pass is the reduce us. Right now we have nots created are reducers but let's go ahead and importantly, reduce our five recruited same parts news reducer free. They reduce us Fouda And that is our news Radusa just like a mission. It is good practice to make use of the combined reducers even though we have just will reduce a year, So creates a Constance which will go call our roots re jesu the makings of the combative Jesus. We need to pass in on objects this object reset icky who call it news And then we set the reducer, so we need to bus in the reduce us to the crit store on. The reason is because it is a reducer that produced the states of application. So we passed in our roots reducer. Secondly seems to be insane. To hunt us synchronous actions we need to pass in our readers stunk made aware. So who creates a constant score? Media, where on the year we make use of our climbing the way on past is our tongue to enable the Borgen and see what is going on in the reader's part of the application, we can wrap our plan to do with with our compose with deft use. So pass in Europe Lyman do way that has the reader stunk. So how are composed with deaf teachers? So we cannot pass this media where so our Chris Stone save. We need to make this store. We have just quitted to be available in our up. So for dads, we need to go to the Abdullah Jess Fire, which is the roots components for application. All right, here. We need to import the store. We have just quitted same parts. Stir from the location is the SRC fouda redux slash store. We also need the imports. It companies cort provider from Reata Redux. This will be used for connecting our reality for up to Redux. So you put this components on rights here as the roots level of our up. We need to rub these with the provider components. So rob the up navigator with the provider components and in the provider components we need to provide a proper etc. That's is the store. We set this to the store. We just import it. We, that's our readers store is not available to the entire application. Let us move on to the next video and see how we can start creating our reduce US readers actions. 30. Setting up the fetch action and reducer: welcome back. So in the last video we created our store. We also made its available to the up by wrapping our up with the provider components before we move ahead, please head over to news AP ideas cog on get on a p I key because this is going to be the A P. I may We are going to fetch our news deter. You can see some sample news on the data that is being return. So we are going to be making use of this appear. And as you can see to test this out, you we need your i p I key. So click on gets FBI key. Now you be required to provide some ditties. Go ahead. Who? Vice Sergeant? It stays on. Get your FBI key. Once you have done that, please write the key down severe. Because we are going to use this letter to fetch news deter from this FBI. So, boxer, he could let us style treat. Sorry. Jesus, reduce us. Are just pure JavaScript function That takes two arguments so we can export the default function here on this needs to take two arguments. One of such arguments is the States. I didn't. A strong is the action for now we can't just return our states. That means our reducer does not do anything For now we need to pass in an initial states through our states. For that I'm going to create the constants called initial state Auditor. This would be on objects and in this objects we are going to make use off two slices off states in our up, The four strong is going to be the out sequence. The state should contain the articles we fetch from our news FBI. For now, we started an emcee, Eri. We also need the state to store articles that these, um Max as favorites so called that favor rights The Israel also be on empty. I really for now. So we pass in our initial states to our states and please, this should be function with this sea. So this is in a very simple for how a reed is our can look like. As you can see, this is just a plain javascript function. So let's take a look at how we can create an action. So, in the news action there, Jess, fire. We need to create an action that would be dispatched to the reducer. Remember we also passing in action year as one of the arguments? So how the we create an action? Actuals are just JavaScript objects with type and pollute little starts by setting off, sir, my identifier for the type of actions we want. 200. So then just sports some constant now called these constants fresh at Rikers on the value would be the same. We can also set up on a diet identifier. This time we can call it art Favorites. This identify us, describe the type of actions will be 100. All right, we mentioned that's a Redox Action is just a JavaScript objects, but we can make use off action creators to create the objects. So writes here. I'm going to define a function card. Fitch Artsy Chris how we sports this function, and this is going to be an IRA function. Of course, it's gonna be a regular for sure in its simplest, for we can't just return and objects on this subject. We have it's type. This type would be the type of action we are dispatching, For example, the fetch articles. We also need to pass a pollute, which is going to be the data that is passed to our Jesu. For now, let me use a domain above 10. So the next scene is 200 this action in Aurora Jesu. So in the reducer, we need a way off handling our fetch articles. Action for that, we are going to make use of a street statesmen, which is a pattern you see in Redox application. So we use our streets and in this reach we check our action. That's type which would give us the action that is being passed. So, Mickeys of our kiss expression, we could check if the action is fish articles. Of course, this needs to be important from our news action. And I was raising why we created these as a different constant. So, yeah, if the action is fresh articles, what you wants to do, It's the return of a state's weeks. The updates, its payload. In the return statesman, we have to create a copy of the States. We don't want to change the original states. Instead, we create a copy of its here. We cannot change our obstacles. So have the payload. That has been passed from the action. Of course, this payload is a value that is being passed from our action. So that is how we can hunt to actions in a very jesu. So let's move on to the next video and see how we can handle history to be requests so that in the actions we can actually fit our news deter and proceeds to our jesu. See, you do. 31. Making http request: wait. Come back. For us to hunt do is synchronize requests in our actions, we need to pass a dispatch function as a parameter to our fetch articles. So instead of returning Justin objects, we can pass in a dispatch function. So this dispatched function is now a parameter pass to our fish obsequious. So we need to make use of this perimeter. If you have our I eat your city text. That's dispatches declared, but his value is never used. So we need to make use of its We call the dispatch on in this dispatch. This is really we known. Dispatch our type on billowed. So move these inside the dispatch function. No. Let's talk about speaking history, tippy requests for that. We can make use of the javascript fetch. Appear this MP eyes is used for handling issue to be requests and responses. You can go through this and see example of how it is being used. This FBI returns a promise on this appeal is not just used to fish deter. We can also use it to make it post requests. Has your last puts on deletes So we are going to make use of this fish FBI in our function to fish the guitar from our news. Appear so called the French Appear here on here. We need to pass in the you are air. So the FBI, if you head over to our news, FBI, you can see an example of this Your area, for instance. Let us make use of this. This FBI we give us news results that similar towards we can see here. So copies back to the could. I'm pissed. It's here. You will need to replace these with your FBI key. Remember the A P I key you got after signing nor on new c p I. You have to push that a p I key here. I am going to replace this with my own A p I key. Please don't try using this key since it will not be valued. I'm going to delete these. After this recording, we can make use of the dan on cash block. So how do the results of this FBI But I'm going to make itself is think our weight since us 200 this request So are the sink you war dear. To specify that dysfunctional, we Handwara synchronous requests and we have to await this results. We need to store it in the constant. So I made its name, these restaurants. So the results of this Fitch will be starting our response. We'll need to put this response in adjacent for months. So we create another across stance which you could car response deter. The name is up to you. There were also make use of our wits. Keywords on transform our response to Jason using the door. Jason made search. So the response That's our He's right. Recon on past to our village. What's were doing, in a sense, is making is of our fish to fish our news deter from our news FBI. We converted the results to adjacent for months and then proceeds to our pollute. So when this action is dispatch, it is going to have this type under data that is being fished from our news, FBI. This regard to the reducer on in the reducer this dates are which is got in from the payload will be added to our articles and from these it will now be added to our stone. So I hope you get the flu with dispassion action. This action Ghost really re geezer, and then it is saved in our readers store. The final piece off logic is to see how we can actually dispatch our action and also make use of the data that we have in this store. So let's move on to the next video and discuss how to dispatch a Redox session. 32. Dispatching redux actions: Welcome back in the last video, we created our Redox action. We created this action to fetch our news deter from this news a PR. But an interesting question is how do we know dispatch this action to fetch the data? Well, if you head over to the noose the screen, because this is really want to display the news deter that is fresh from the FBI. If you're familiar with three dogs, you we know that to dispatch an action or to make his overstates, we have to connect these components to Redox. How we do that by wrapping this companies with our connects function. And there we creates two functions which are the map states to props, a map dispatched to props. But there is even an easier were friendly. And this, for that's we need to import some companies from Reata Redux. These companies are the use a little andi use dispatch, So the use a little will be used in selecting a slice of states. Why they use dispatch will be used for dispatching our action rights. Here we can initialize our used this patch by Christine The constants called this patch. Are we initialized in use dispatch. The next thing we could do is to make it off the years if it took this use. If it's we have to import from reacts, this year's if it's is just like component did mounts you are familiar with component did mounts in reacts So our components is going to run this effects when it is mountain. So right here we can pass a function that would be executed. This is where we can make is about dispatch function to dispatch our news action. So we called the dispatch We need to pass in the action to dispatch. So for dads, we are going to imports the actions we have created. So we import everything as news action and that is from the readouts. Fouda slash actions slash news action We passed, you know, a news action on the action we wanted to dispatch is our fish articles. Remember, we have this fish articles function that we defined here. This is a function we want to dispatch. That is how we can, despite the action to fetch our articles when this components ran, does to make use of the data that we have in the States. We have to make use of the use a little. So I'm going to create a constant artsy Chris. The name is up to you and we make use of our use a little This use the lesser six the states And here we can return a reference to a part class lies of the States record that in a roster we set off the news to be the key for our news reducer. So we gonna says this news lies or states using the syntax dots news on in this news reducer We also have assays to the articles on defib relates. At this point, we are coincide with the articles. So we passed in. It does articles with that's we cannot make is off the data that we have in our news re Jesu. For now I'm going to love the X equals to the concert on to test this out. Let's run our up. I hope that nothing is broken. So from determine now Mickey's off esports. That's to run the application just like always. The Israel Open in new tab on the browser Run on Iris simulator. Why? This is loading. I was so open up. Undress to do so That can starts off my 100 Vetra device. So from the car figure, I good to evd manager and starts off this Vetra device. And from the top on the brother click or run on on Jordin Little this Show us a reload The up for 100. We see that's our up is working. I'm not in his book in. If you had about two this stop, you will see that we have succeeded in finishing our news deter. And that is all the data we can see here. Toe Have a better view off this data on the concert? We can. And they booed the bargain remotely to do that Mickeys of command e or contra de on the windows To bring off this menu from this menu, click on the book remotes. Jess, this report in the new top in the browser and of course, it really load our up. Once the reload is done, you can inspects the type that has been open in the browser from this stuff. Quicken concert. Um, yeah. You can see our news decide as be fish from the appear. This is loading the articles multiple times because this action is being dispatched on every render. So fix this. We have to pass our dispatch as a dependency to our news. If it's so in Desiree, past the dispatch function receive also creates the process in the stamina our own esports starts again. Click are run on our US simulator. If you run into these narrow, that is because the debug A is not ready. Sorry Load. And this you walk fine. Once again, we have a lot up running If you take a look at the concert you receive from the consul that you have our objects with our news articles. This is the article That's fish from the news. FBI. So the news FBI returned this results which are, as our articles on order details such as the two Thai results on the status. But since you're only concerned with the massacres, what's we could do is that in the news action, instead of passing the entire Dietze, we could pass in just the articles save. Of course, this reloads let us Clady Broza, I reload the up once again Take a look at the brother here. We could see a wiry off saying news articles So that is how interesting it is to walk with three ducks. We made a request to this FBI to fish such data. How we store Yeats in our store. So from our companies, we dispatch the action on Mickey's of the use A little. We were able to get the articles from our store. So let's move on to the next video and see how we can render these articles instead of the Dom idiota. 33. Displaying items with flatlist: welcome back. So we not need a way off rendering this articles we fetch from the States. For us to do that I'm going to make is off a flat. Least if you had over to react native documentation, you will see that a flood list is used for rendering a list of items. And it has very cool features such as rendering the ICT same in horizontal mood or pulling down to refresh. So we are going to make is a flat leased to render these articles we have from our news sepia. So for dads, I'm going to import Flatley's from reality. Actually, we need to take off this components scenes. We are not making use of it. The imports are flat lists. All right, here. I will commence this out and render the flatness in this flood. Least we need to pass in some props. If you take a look at the flood leads documentation, you will see that first we have to pass the deter surrender item as well as the Kia structure So far. What Dietze? We passed in our at seekers also the Kia structure. This is a function. So this from Sean were its own unique item. And if you take a look at our results, take a look at the structure of the data. You will see that the unique item here is our you error. So we are going to pass the U already here. Also, we needs to provide a function to Di Renda item in the Orender item. We have to pass a function that would determine how we want to rent out the item. This function? Sure, it's on the J six. So using are ready structuring. We need to grab each of the ICT. Same. In theory, this is something you can also see from the documentation. So for how the ice and we be rendered, we are still going to make use of our card components. So copycat companies, I'm pissed. It's here. Save and take a look at this simulator as you got to see how are card companies is rendered multiple times on. This corresponds to the number off news deter. That's fish from the FBI, which in this case, is still so it's not time for us to populate our card with three data. I'm going to spread these of our multiple lines so for death. What's we want to pass to our card companies are the image. The title on the description on this is available from the date. Sorry, fish. The image can be got in from the u R etc. Image are you also have a day to on description. So let's pass that to our car components. We said to the teacher to the ICT Same that states which we give us assess to the tighter that we have from the news FBI. We also said to the description to be the ICT same. That's description, then the image the set is to be the ICTs and that's you, our area to image. This you are rare to image. Off course is what we can find here. So we need so open our card companies and make use of this deter. So you know, I can't companies, instead of displaying it, don't meet eye to we can take this off and Nick is of college braces toe at food JavaScript code. Remember, these values are passed as props to the card companies so we can make use off crops. Don't stay too to assess the tighter that this past as props. Gaza do the same for the description we make use of props. There's description also for the image. Instead of passing in this dorm EU era, you could take this off and make use of props Those image which is a value. We also passed from the props here to save the card and head back to the simulator, I was gonna see we have, ah news deter on the cut Or do the styling is off. And that is because the Titou and the description techs are true long. We can truncate this so back to decode for the tie too. We can add the check for the lens to see it detects is too low. So I'm going to bring this to the next line. So we see it's clearly so, yeah, we can check for the lens. If the land is greater down, maybe 25 ticks, we could use it scenario Britain here we can renda on the ISS section of the six and that you can do by making use of us plies, function and displays function. We specified the starts number. I want to start from the beginning. So we put zero and then the end of the we want to display only 25 characters. If the text is not too long, there will display everything. And here we have the air of the supplies is not a function. And as because this should be slice please. So save back to the simulator. Are you see that it's I to his fix. What a sure that it title is longer than these. We could add ellipses. So for that right here beside this slice, we could arj three dots toe the existing six. Let us also repeat the same thing for the description. So I will bring this to the next line. And to save time, I'm going to copy the title. I'm based in the description. Change this to description, or so these on this For the description, we could check for a longer text so we check 400 characters if the length of the description is modern 100 characters there We made use of this sliced to show on the a section of it. Save. Now let's see how this looks in the simulator. This looks better so you can screw. I see that we know have read it populated. When our news up, Let us also try this on Andre using Common am or control em on the windows. Mission Reload I enjoyed. Once the reload is done, we also see a similar results. This is looking very nice. Before we move on, I would like to show you a grids to that's gonna be used for the bug in your reaction. Native. Up on that is the reality of the Boga. With this through, we can see the actions that has been dispatch on our radar states. You're his name, Mark. You can simply complete this command. They start these two. We're using a Windows machine. Please head over to the release speech on download this windows executable on install its once you have re admitted debug. I stored. I already have. It's a start, so I'm going to open it up with this. True, we can expect the actions that has been tree guard in our first. You have to make sure that this is running on the same ports with your up. If you had to have actually browse, that's Ah, Notice that my react native is running on boards 19001 so to be able to use this de Braga with your react native are he should be running on the same ports. You can change the sports by going to the debug. A click on open config Fire from this fi look for the D forgery additive package ports on. Make sure your port is other to these area form. Make sure the airports exists in this area. As you can see, I have the ports 19001 which is support. My react native up is running on so I can change the sports by clicking on the De Braga and I changed these to the 19001 on this three attempts to connect to my react native up, you would notice that I'm also getting the one in the year that another debug A is already connected. And that is because we have It's up, which is this that is connected to our reality up So I can close this to make sure I only make use of the reality of the burger. So once again I got reload my up. I want this reload. If I head back to the De Braga, I can see the states. We can also see the action that was tree God, which is the fish articles. When discussion was tree God, we saw the payload that was returned. So this is a great tool for the bug in your up. You can visualize what is happening in your readers parts of the application. So let's move on to the next video on discourse. How we can add in news item two favorites see you do. 34. Add Item to Favorites: Welcome back. We are making progress, which are news up. We have been able to fetch on display the bitter, and we have connected this up to 80 Boga. So let's talk about how we can add the news two favorites so that when we go to the favorite stops, we can see it's dear. For that, we have to start to the action. So back to the could in the Redox for down actually and in the news actually fire. We need to create a new action that would be responsible for audience in years through favorites. Remember, we already have the action side Dicle idea, but seems you're going to have just one action. So add or remove items from civil rights. I think it makes sense to call these struggle favor rights. So I'm going to change the name to toggle favor. Rights, All rights, less great. Such action So year were sports the constant which you go car so grew five. Of course, the name is up to you in this struggle. Five function We will need to pass in an I d off. The news that we want toe are two favorites. However, if you take a look at the structure of the detail that's fresh for our news. FBI. You will see that the only unique property year is Are you error? So we need to pass in a unique property year that's got identified, the item we want to add to favorites. So seeing these EU era is the only unique property in the area. We can make use of the U error just like we discuss. We need to return and objects and it's I bees. So go favorites, which is a constant recreated at it. So on. The prelude is going to be our your area. This is rights who passed to the reduce US save. Now let's head over and creates the reducer in the news. Reduce us. We will need 200 e case were what? So go favor? Rights is triggered. So, for that's we are not Akkus statements on this time. When we have the trouble favor rights, you also need to import these from our action. Here we can add logic toe are the item two favorite. But before we do that, we mentioned that's will use the same action toe. Are they removed from favorites so it is important to check if the item already exist in federal rights. If it does, then we remove it. But if the item does not exist in favorites, then we added two favorite for that's we can make his of us states remember this state. We always return the current state snap shirts so we can assess our favor. Rights. Mickeys are fine. Index to check in the item exist in the area. Yeah, we can pass through each of the article in the federal right. Sorry our were It's on a check If the article the issue area my cheese, What is being passed for our are shown Does Village remember this pain node contains the You are a off the ice and we want to add to favorites. So if among the list of favorites I'd say there's an article with the same Yara that's being passed from the prelude, then these returned the in death off. That's item, but if notes this year it's on minors wrong so we can start the results in the Constants Colleagues index. We added, check in the East Statesmen, we check if the index is greater recourse zero If the index is greater or recourse to zero . It's means that the ICT same already existing favorites. So we want to remove it. For that, we can create a copy of our favorites in states by using the spread of Britain. And we are doing this because I wouldn't want to directly modify the states instead, want to create a copy of its Yeah, we can make use of our favorites we have created and using displays function. We can remove the ICT saying using the index So we pass in. The index has specified that you want to remove one item. With that, we cannot return our states. Here we spread the assistance dates I'm past in the favor rights, which we said so defib rights that we have modified. Yes, if the ICT same does not exist in the list of favor writes, we want to add it for that's we foster for need to find the item. Among the list off articles before RD needs to the favorites. So don't year. We need to assess the states on in the States. We gets the articles, make use of our fine function. The search for the item in the list off articles on this function, we go to each of the ICT. Same in the articles. Yeah, we need to return the article that matches our you area. So for that's make use of the asi cool dots you area on a D check if it's much. Is the ash on those village we gotta start is in the constants called at Seeker. All rights also die here. We have to return our states this time we want to our this article to our list or favor writes in the States. So for that, the federal rights we can make use off states don't favor rights. The concocts. This is a function that would take our school on our d to the ary or favor rights. So save and that would be eats for the reducer. So let's move on and see how we can treat our action for that's we can go to our news Lee Scream. This is the screen where we have all our news item and this is the screen there has the cottage which has this five icon. So that's means we can trigger were out to civil rights from our courage. But before we do that, remember, we have to pass in the euro area to the action. So it's makes sense for us to forward the U area to this Scotch. So your rights here, how are the propriety Koryu area? And here we need to pass the same, don't you? Area which would be used to trigger the action in this card components. So head over to the car components. All rights. Here we have our Materia icon, which is this five icon here So we can add unimpressed to this icon I'm going to spread these of our multiple lines so that it can be readable. So writes here we can are a no press on in this on press, we can add a function to be triggered when this icon is pressed. We need to dispatch the action when this boat in this press we discourse how we can dispatch on are shown in the previous videos For us to achieve that for us, we have to import our use dispatch from Reacts Redux. Also, we need to import the action that we want to dispatch. So we imports everything. US news are shown from the Redox Fouda slash actions slash news action with that's in the card components, we have to initialize our use dispatch, so create a constants called this posh. We initialize our use dispatch. With that, we are ready to dispatch our action toe. Add on ice into favorites. So writes here in your press function off our icon. We can make use of this pash on here. We passed in our news action. That's Psagot five. Remember this struggle five takes the U area. We have passed in this. You are a from our news list screen, so Yeah, we can make it off props. That's your area. Save unless see if this works as expected, head over to the simulator. I'm going to reload the simulator. All right, Here, we only have our fish articles. Action Tree God, which has fish or this articles click on the five icon. You see that? There are so cool. Favor rights action has been dispatched Are from the States. We notice that that I'd same has been other two favorites. If you click on it again, see the same item. This second sign. You see, that's our favorite ease. Empty. So we have succeeded in our Deen are moving, it seems from the favorites. Now let's see how we can display such items when we go to our favor. Right? Stop doing that is pretty straightforward. All we have to do is good. So our favor, right screen, we can make use of our use a little to select the favor, writes Ari in the States. So we import How are you, Senator? And this is from react Serie Ducks rights. Here we can make use of our use a literal. Here we get the current state snap shirts, avarice on the state's dots, news that's favor rights. Remember, we have these fever writes. I re you know what, States? So we can start the results in the constants card fever rights. Of course, the name is up to you now, just like we made use of our flat least to render all the lists off News icing on the screen. Re council makings are flatness to render the list of favorites. So, for that's to save time, I am going to copy this flat list and if Everest screen instead of returning these damn itics, I'm going to return the flat list and for this. We need to pass in our favor. Rights. So the data we will also need see imports our card sad. It's up. We imports the car components from the components. Fouda slash slash card. Also, we need to import the flat lace from reacts. Tentative. So import flood list here. Actually, we can remove the plant from the View and its X. Since it is not used in this component, save on. Hopefully everything should work fine. So head back to the simulator, click on Arts of Civil Rights. Click on the favorite screen and we can see that I Tsim, has been added to favorites. Click on its again. Let's check out the favor right screen and it's no longer dear. This means our logic works as expected. Let's try with small items. You see, I have are there two times two favorites this is looking for, But it would be better for us to work on this five icon so the user can know when an IED same has been added with favorites. For example, you could feel the federal rights icon when a night Sam has been idea to federal rights. Let's work on does in the next video 35. Toggling the fav icon: we come back. So let's see how we can change our farm icon. Depending on whether a night same has been added to favor rights or nuts for dads, we would need to go to our car components. And that's because it is in this card components that we have the icon. So for us to achieve these, we will need to assess the states. For that's we can make use of our use a little using the use a letter. We can get the current state snap shirts, and, as usual, we pass a function and this function, we can assess the federal rights in our new states. From this, we can make it off metal such as find or find index to check if the item is Easton favorites. But there's another interesting method in JavaScript we can use on that is this song. So this year it's on a 1,000,000,000 depending on if the article exists in the list of favor rights or not. So for that we go through each of the article in the civil rights. We are the logic to check. He died as he could. Don't you are really is it costs to the props that you area Remember that you are passing the U. R E as props to our card function. So if we check in the States on the U area in our list of favor writes, much is the one that is being passed, these were it's on, sure, but if notes these were its own force, so for that's we can save these in the constants, which are record is far. Of course, you can use whatever name you want. Let me spread this of our multiple lines. All right, so that's we cannot make use of this. Constant is far to determine the type off icon to display for. That's I'm going to passing on objects. Yeah, we can check the is far. If this is true, that means the item exists in favorites for that's we can display our favor. Rights icon is we display our favor, writes border icon on these just types of icon you can find in the material across this, you actually be favor rights. So save. Let's head back to the simulator, Greg. You see, that item has been added to favourites. Check the favorites. Stop. We have the ites endear let us remove it. I see it is gone. All right, Mom, We can't sell. Even I see him has been added to favor rights or notes. This is looking very good. They find out piece of this up we want to work on is to see how we can display the news in this news item screen. So let's work on does in the next video. 36. Navigating to the news details screen: Welcome back. We need a way off this plane. Our news in our news bytes and screen for dads we need to head over through our cardio Jess , In this section, we have enough gets to the news item screen. We also need to pass in a unique identifier for the news we click for That's we're going toe pass theatrical, you error We can pass in harems In this paradigms we can set on objects in this objects We passed the article your air to be the problems that you are our brain days of our multiple eyes. So basically, why not get into the news item We also passing in the article you aria, As parents so writes in our news item screen. We can extract such item from the barons so you can create a Constance called at sea. Cool you are, And in this constant to make use of our props that's navigates that's gets harems. So they get firearms for shown. We returned the paradigms that we have said right here in our cardiges. I remember we made use of the key article your ira. So we need to pass. That's to our gets firearms with the article. You are a fish. We can grab the entire article from the States. And this is something we can do using our years so literal. So just like before, we need to imports our use a little from react. Serie Dogs. Our rights here we can make is over. You sell it. So which would give us the current state snap shirts year in the States. We cannot says our news reducer. We are consigned. It's our secrets in this. Articles want to find an article. That much is the article year area that has been passed to this function. So make use of our find. We have trades over each of the massacre doing so we compare the adequate. That's your area. So the article your area that we got from the barons So basically, this you find returned the attic oars from the States so we can start these in a constant called at secret. Off course, the name is up to you. So we that's they should not retrieve the article that these are clicks on. So let's render I eats, in our view, for that's in this news item screen, we are going to have three sections, so I'm going to create three views. This four strong we be for the tighter the second view, we be for the image and you have the Todd View. That's our use for export, saying the description In this first view, we can have it six. And in this test components we cannot support to the sequel dot state Off course. This Asako is that secured has been returned from the States. Same for the description. How added six. And in the sticks we exposed the article. That's description. I'm going to apply some STAIs to this, although we have not created in this ties. But we do. That's next. So for the top view, our applies ties that's container, for these are that view. Let's also give it this tie. We could call this style heading. Of course, you can use whatever name you want for the text itself. It also gives this style which will car sites, and we also need to apply size for the description so copies basis here changed. These two description also pace this year on changes to maybe description sex. In this view, for the image we are going to make use off a special companies from react initiative. That's called image by ground. Close this. I make sure this is important from Riyadh native With these companies, we can render an image and place it sex. Abovitz In this image bar grown, we need to provide the source This we can say its on objects. We reset the u R I These requests a two hour article Doth you are red. So image Remember now a Dietze Our image is got in from the You are a to image So we'll also need toe asks I to it. We can call this style image on in between the image components. I'm going to rent out a view in this view. I'm going to place two items. One of them will be the sex and this takes I would display the article. That's oughta. This is something you can also see from the data That is very soon. We have the water here. Arsu, I want to display our icon That is the favor rights icon. So we need to import smart Syria icons that itself beneath the in Portsmouth Syria icons. And this is from the arts s for slash. Victor Aiken's so writes here as before we rent our materia I cross remember we have to pass in the name. So yeah, I was sets the name and just like we did in the card, we can grab this logic that checks if the item has been added to favor rights. So I'm going to copy this. I'm based. It's here. So we make use of these five. If the item has been added to favor rights, I want to display our favor. Rights icon. What if it has not been added? We want to display the federal rights by the icon which just shows just the BADER. We also need to pass in the size this we cancer to 24 also the color which you can set to this eggs value we have been using in this up. We will also need supplies from styles. Two days. So right here we give it this style which was said to STAIs, That's maybe title container. Of course, the name is up to you and for the orthotics. We can also give you this style and said these two Oh, it's a all right. So we need to start creating this ties, and there's a whole lot of styles to creates. So, you know, I start sheets. We'll need our Consider our head in the tight, sir Image. Die to consider what's wrong, Of course, these are stars we define at its up the description on the description. Six. So we need to start adding contents to all this ties, which we have defined here. Save on head back to the simulator, click on we get this aero cannot Street property gets firearms off undefined. And that's because this is supposed to be navigation. I'm not, Never gets. Let's try it out again. I will see have the air on the screen. So let's figure out why they should be Param on, not firearms. Hopefully, the era is gone now and yes, the error is gone. So this is a news item screen. As you can see, we are outside to our image and our description. So once move on a style, it's probably for dads. We'll start sweets. I walk on tuna. We can give it to flex of one Andi week. Also add Imagine brassica to set margin at the top and bottom off the screen this, we can give it value of truancy 40 heading. We could give it Imagine her results so that we have Majene on the rights on left side. The soup was said to train. See Also I may be give its imagine bottom which of course, the sets to 10. How far did cite you? Which is it? Tighter text. We can make it off the front family. We're born to boot. This is a phone tree added in the previous section. We can give it to foreign size. Off maybe 24. Save back to the simulator. You see that are outside two looks better. Let us also walk on the image for the image. We can give it a week off 100% on the heights off, maybe 200 are so we could justify the contains so flex in. And as because one these items that will be displayed on top of the image to be as the bottom of the image so we make is a flex and save. Let's see what we have on This is what we have for the image. Okay, for our tighter container, which is just going to be an overly on the image. We can sit the background color. Yes, because said a color that has opacity So we can make use of this. Our rights in theology be a function become passing a value of zero comma zero comma zero comma 0.5 This will be your positive. Next we can give it a party in who resents our which was said to strafe what saying and any party in brassica which sugar said to five Let's give it a flex aggression. This was sets true and as because we want these items which is it x on the icon that is in the title container to be in the same room so we could make use of justify contents on a bus in the space between also for the also we can give it a foreign family or for Boonchu and in front size off maybe truancy. And he called all of rights Save head back to the simulator on. You see, this is well, we have no less trades on this item. You can see the water. Andi five I called by the side. The last piece of this is to walk on the description STAIs. So for the description, I just need to add. Imagine which I could say to 10 for the description. Six. I was said, a front size off truancy and give it the forts family or for born to save. Let's see what we have on you. See, this is looking better. You can screw. I'm speaking in news eizember you would not see is your capacity we have in outside to container. This is looking nice. Are five butts in with knots Walk scenes. You have not added allergic treats. Let's do that's now. So if he had about two D card or justify remember, we are dead on a click function. So the five icon. So I'm going to copy this on head over to the news item screen on in our materia icon. I will add our own press function. We'll need to declare our dispatch function for that. Who needs to import the use dispatch from Reata Redux. We initialize It's here by creating a constant scored. This patch, which was set through the use, dispatch us. So we need to import our news action that it's up. We imports everything as news action and this is from the Redox. Fouda slash actions slash news action. So save. Let's try this out. Greek How he gets the arrow cannot re property you aria off on the fire. So rights here we need to make is over at school that you are a another props. Remember, we fetch our article from the States and use its toe populates the detail here so this should be executed or to your area. Save reload. Head over to the news item screen. Click on because we see evil eyed. Same has been added to favor rights or notes. And that's because rights here, where we're checking if the ICT same is in the February, at least we need to make use of our article yarder. So change this to execute you are so as a recap, we are treating over the fever right least on. We check if the U area off any article in the federal right least much is one. We go through the programs. So if it's much is it means that this ice and is already parts of favorites. So save and everything should work fine this time back to this simulator. Quick. I see it rocks we can add or remove from favorites. If you had a lot to the favorite stuff, you can also see the secret. Dear City home. Let's try RD in a different article. Click. That's a fever rights. Change the favor. Right? Serve. I received the article here. We gotta move from favor rights and this rocks fine. So I hope you have lands in Lourdes on how to use re dogs with three alternative. We saw how we can create actions and also reduce us. We also saw how we can make use of I use dispatch to dispatch our readers action. Then we make it overuse electoral to select the determined from the states. So thank you so much for watching. Let's move on to the next session. See, then. 37. Course Outro: and lo and welcome. Once again, I'm glad you could make it to the end of discourse. No doubts. You must have Lance in Lourdes about beauty. Mobile abs with your native this revered the end of the course in the future on might improve on this course and add more sections to its. But I hope this course equipped you to start building. Also applications using reacts native. So take care and see in this time.