React Native: Learn by Doing [2024]

1. Introduction: Welcome to React Native course. In this course we will learn creating a movies application from scratch by using a React Native CLI. And in this course you will be able to see movies catalogs, and also some slider on the top inside the application. And also you will be able to navigate to some movie and read data or that movie and display some information about it, like the categories of the movie's rating and some description. And as well, you will see their release date. Of course we will have some a play button where you can play the movie and you can play some video with loading indicators. And you'll be able to rotate your phone and you will see how it's fifth and adapt directly to have a full screen of your application directly when we are flipping their form is all by your hand. And also, we will do exactly something like search for movies from a real database which is connected to the Internet. And you can search, for example, for some movies and you can display those movies and you can visit them to see their rating and some information about this movie. For example, I am searching for some movie and I will get it, and then I will get all information about it. And also I can't play it. Of course you can have a lot of experience with this course. You will learn a lot. You can have this application in your portfolio. You can present it when you have a job interview or even when you have a customer to display this application to your customers so you can attract them and have some applications for them. Also, I don't like their courses which are balling, like who are going theoretically and you will see what is component, what is service, et cetera. But I like to do something impractical. I like to see something in front of me which is making me happy at the end and making some application. I can present it to my friends as well. How we are going to call external libraries, how we can use components from React Native. The nice thing about this course, It's not based on Expo, which is like exactly for beginners. Now the companies and professional companies, they are using actually only like React Native CLI. I hope you will be happy after enrolling this course because at the end you will have some application between your hands and you can't be always proud of it. And of course, I will be very happy to answer your question. And we discussed many things together. So are you ready? Let's get started. 2. Course Requirements: Okay, who can take this course or what are the course requirements? So first of all, you don't need to know anything about React native. I will show you all the possibilities to build an application using React native, of course, but I will not teach you everything about React native. I will teach you what we need for our application in this course as well. You don't need to know any peer reviewers knowledge about mobile development. You just need to know about some small styling basics, which I also going to explain during the course. And now what you should know, you should not JavaScript because you know, React Native is build on JavaScript and you can use JavaScript to generate native application. And as well, you need to know React. React is also a framework which is built over JavaScript, but this React is directed to be used in web applications, not on mobile phone. How React Native is doing, even that, I am going to explain what are the components, what are the props, and what are the states in this course? So in that way, you will learn by doing so, I will not explain all React Native. I'm just going to explain what we need for this course. And we are building a multiple courses so you can take all of them. You will see how practical and easy to learn React Native without getting a course of documentation and go about 20 hours. And you just learned only theoretical things. The best way is to learn practical, doing something practical always to learn more and more. 3. What is React Native: Okay, As I told you before, React Native is similar to react, but it's built for developing mobile application. So as we can say, that building native applications using JavaScript. So you can use your skills in JavaScript to build application for forms like iOS and Android. And they are really native application. They are not web application which are responsive, that they are working on desktop and also on mobile phone. We're using some CSS skills to make it responsive as an application to work on the phone. No, they are really, really native. So as you see, we can build two applications by using one language, which is, Or for example, one framework using JavaScript, which will work on Android as a native application, on iOS as a native application as well. So most companies nowadays are going forward React Native because in that case you are saving money for hiring a team on iOS to know, for example, Xcode or the language which are related to iOS. And also to hire another theme which knows Java, which is also used to build an Android application. No, you need just to hire one team who knows JavaScript and basics of react to build two applications in the same time using React Native. So in that way, the company will save a lot of money. That's why it's going forward that okay, maybe you will tell me, okay, this is dangerous, like how I can depend on JavaScript. What if my application is built and has a lot of security and it must be accurate. So I need really to build it as native. Okay, I will give you example of top companies using React Native. For example, Facebook, Instagram, and also this chord, sky, Pinterest, Tesla. So all of those companies are using nowadays React Native for their applications on both platforms, Android and iOS. So in that way, you don't need to hire a lot of knowledge about iOS or Android. If you know JavaScript, I guarantee to you that you can deploy some back-end applications. For example, wheezing know NodeJS, and also mobile application using React Native and react. 4. Expo CLI or React Native CLI: I'm sure when you were reading about React Native, you hear about export. Export is also common line interface to build projects of React Native. And it's providing with many tools and components which are ready to be used in React Native. The main difference between React Native and export is in the code structure. For example, as you see on the left, we have a React Native project. And we see that we have two folders which contains Android project and iOS. This is the project that real project of Android, which is inside it, java or Katlyn. And also we have the iOS, which is written with a swift. So in this case, when you create a React Native project, you are creating as well, the Android and iOS project. And in this way you will have access in your project to those modules inside Android and iOS. This what gives React Native CLI, that reality of using the native libraries. But in Expo, you will generate only a very pure JavaScript project, and you can use only the JavaScript here, because export is used also to build its own native libraries and own native components. Many people nowadays prefer using React Native. React Native is more stable and more like efficient. And we will see what are the benefits of React Native Expo is for beginners, as I will tell you at the end of this lecture. So if we go to the React Native CLI, you can add native modules which are written Java, Objective-C, also with the swift. And also you can add them to your project directly. And you can use them in JavaScript as a JavaScript library. And also setting up our project is easy and it can be done in a minute. But of course, setting up the environment takes a little bit of time. More third libraries are supported. You will have a lot of third libraries written with React Native CLI, and you guys, you them in your project. The most benefit and the nice benefit of React Native CLI that you have less size of production files. For example, if you have building an application with React Native CLI, you will see that you have, for example, ten megabytes of the APK file and as well for the iOS, fine. But when you build a project with expo, that file or that Production file will come very bigger and it has mostly 60 or 70 megabyte in brunt of the React Native CLI, which has 10 megabyte only. This because export is also adding the files and the modules and the components sign the APK file so it can be used in the application. But here, when we are using native modules which are already in your system or on your phone, then you don't need to have a big file of production as well. I have built a project which is made as an E-sharp e-commerce build with export. And also there are a lot of courses about Expo and there is not so much courses about React Native CLI. So I prefer to make this course with React Native CLI to see the benefit at the difference between it and export. And of course, if you want, you can enroll to our course which is talking and build Ali with Expo, which is building an E-sharp on mobile phone. So here, there is some like recommendation from React Native project. As you see, it says that if you are new on mobile development, the easiest way to get started is with expo CLI. But if you are already familiar with mobile development, you may want to use React Native CLI. Okay, maybe you will ask me, you said at the beginning that I don't need any requirement of mobile development. Okay, yeah, really You don't need, for example, for this project which we are going to build, you don't need so much skills in mobile development. I will just teach you the most important things, how to import modules, native libraries, and use them in your project. That's it. We are not going to edit a lot of things in the native libraries. We are just going to call them to our project. And of course, there is one not good benefit of like using React Native CLI that you need to install Xcode or Android Studio to run your project on your phone. But in this way, you guarantee that you are really testing your tool without like a middleware which is built in not native way. Some days ago, I asked on React Native community on Facebook, what do you prefer for development of mobile application using React Native? At most of the answers and votes game with React Native CLI. And as you see in some answers of experts, they said export is like using training wheel for a bicycle, you will eventually have to take them off. And also, another answer was, I keep seeing export is for beginners. And of course, as I told you, if you are a beginner, you can just enroll to the other course where we are building E-sharp. So you can't learn really practical using Expo. 5. Installing nodejs: Okay, to start building our environment, we need first NodeJS. Nodejs is a tool for providing and installing libraries which we need for our project to install NodeJS, You just need to go to the website no js.org. And here you will find two installation methods. One is latest features, which is called current, also recommended for most users. Always, I go always for, recommended for most users, which is like more stable. And it's providing me with the most important tools which I need for my development and which is fit with the most updated libraries which are available. And of course, NodeJS is available for all systems, like not only for Windows or Mac, it's available for Linux, for all other like operating systems. So you just select yours and then make sure that you have installed here. After that, we open the installation and we just go like next, next with it, like installing any application and it will be installed on your machine. So that's it. I have it already on my machine and I have it already installed. So I don't need to install it again. So after that, you open the terminal so that ten millennia you can open it like a terminal in Mac book is, you can open the applications and you check for terminal or in Windows, you can run and then find command line, which is called common line, then the standard command line. And then you need to check what version of Node.JS you have. So the most important thing that I want you to be sure that you have the right version of Node. So otherwise you will not be able to run most of the comments if you have old version, how we can know the version which we have after installation, we can go to the terminal as I told you. And you put like node minus v. And with that, you can see that version which you have, it's better to develop with React Native CLI to use the version which is 12 and above. So make sure that you have the version 12 and more. And then you will be able to code without any problem with React Native CLI. 6. Setting Up the Development Environment: Okay, Now we are going to set up our environment. I advice you always to follow the documentation which is provided by React Native formally. So when you go there, you will see all the steps which you need for the installation of your environment. So first of all, you go to React Native dot dev, and then you go to the docs. Here you will see something which is called environments set up. And this will be up-to-date, always based on the versions, based on the operating systems of Android and iOS. Based on that, you will see always let the latest documentation. I will show you how we can follow it. First of all, as I told you, we have to follow not Expo CLI, we are going to work with React Native CLI, which is most preferred by most mobile developers. But of course, if you are a beginner, I prefer to you to go to my course which is related about working with Expo. And I have built there all the environment which you need for working with experts. But now we will work with React Native CLI. Then we go to the operating system. The operating system, as you see, it's available for Mac OS, Windows, and Linux. I will work here with Mac OS. Of course, you can follow Windows as well. All of them are the same, but with small differences like setting up the buffers which we want for running our comments. But as I told you, it's always better to follow the documentation for the versions. And as well, you need to target also the operating system which you are going to deploy for. Of course, we are going to work with Android and iOS in the same time. And both of them has a different installation. I will start now with Android. So first of all, we will go to the Mac OS, then we go to the target Android, and then we install the dependencies like we have here, a node. And we need to install other stuff, which I am going to explain it by detail. So first of all, we will work with the Android, as you see here in the documentation and in the lecture. After that, we are going to work with iOS to see how we can also run iOS. Unfortunately, like on Windows, when you want to work on Windows and you have iOS, you cannot support the deployment or development of iOS application. This because that iOS application needs to run something called Xcode. And Xcode is required and is only installed on Mac system. So for that I am using sometimes a VM, VMware virtual machine. I'm installing Mac OS on my Windows, and then I am able to work with iOS. In that way. If you don't have MacBook, you can install the virtual machine. There are a lot of ways to run a virtual machine. Just Google it and you will find it immediately and you will see how you can install Virtual Machine of Michael S on Windows. So that's why I'm making this course with macOS currently. So it's more general. So we can work with Android and iOS in their same time. So in the next lecture, I'm going to show you how we can start installation for Android systems. 7. Setting Up Android: Okay, in this lecture, we are going to talk how to set up our Android environment. So first of all, we go, as we said to their documentation, and then we go to Mac OS and then Android. And in Android there is tool which is called a brew Homebrew, which is helping for installation of application or some tools easily to your Mac system. So if you didn't install Homebrew, It's better to install it. It will help you to install a lot of applications without bothering yourself to find the installation for it. So for that, for example, I want to install Node as I showed you previously, I just go to my terminal and I run brew install Node, as I told you previously. So if you go here you see that brew install Node and also there is another tool which is called watch man. This is very great tool. It's made by Facebook. Going to watch your changes on your file system. And it's highly recommended because it's better performance for your application and watching the updates on the files. So let's try to install this because before we installed already NADH, as I showed you, my normally without a brew, but now I am going to install this with Hebrew. So after installation of Homebrew, exactly the same. You just copy the comment to the terminal and you will have Homebrew. After that, you will be able to use their comment blue, so you can install any program which is available in that package. So let's try, for example to install watchman. So I will go to the terminal and then I will paste brew install watchman. And then we will wait for installation. And we will see that it's installing all the program for me, including the path is included, all the information which are needed for development to use this tool. Okay, As you see that installation had been done. So I was like skipping the video because it takes some time. So now it's installed. Let's go to the documentation again and see what we have here. So as well, we need for that a Java Development Kit. This is required for Android systems. So we need also to install that. The same thing. We are going to copy this command which is called a brew install. And then we can see Open JDK, which is required for that. And they said if you have already install GDK on your system, just make sure that you have JDK 8 or newer. So you have to be sure that you have version 8, but let's install that with also homebrew. So I will paste this comment again and wait for the installation as we saw previously with a Watchmen. Sometimes when you need like some privileges for administrator, it's asking you for password. So you just need to put the password for your Mac system, then it will be installed easily for your machine. So as you see here, that it's successfully installed. So we go again to the next step. So we have here after that installation of Android Studio, Android Studio, we are not going to use it as editor, but we need the SDK from it. We need SDK, SDK platform, and also virtual device because we need also to see our changes of the application, like as any application you run it on Android. We need to see our changes on the some form, some virtual phone. So it's better to install Android SDK. And also the SDK is required as a modules part of React Native because as we said, the ad native is using the modules which are available in Android projects and iOS, as we explained previously. So first of all, we need to install and download Android Studio. So to install Android Studio, it's also the same process where you need to download Android Studio. It's available as well for all operating systems like for example, Windows and Linux, and also Chrome OS for all operating systems. So it's better to choose the one which is suitable for your system and then you download it and the installation process is very easily you just go next, next, next, and then you, it will be installed on your machine. And we are going to run the Android Studio and we have to specify some options as I will show you. So as you see here, I have the Download button. It takes about 900 megabyte. And after that, you install it and then run the application. I have it installed already on my operating system. And when you run Android Studio, you will see this window like you will need to create new project and you've locked or project, or do you want as well to some other types of projects? What do we need to do here to go to Configure, and here we are going to work as the instructions of setting up the development. Using React Native. So let's go there. As you see here, it says like install the Android SDK. So after we have to go to the, you see this window, we need to click on Configure. And then as they came manager and as they came manager is always updated here. You have always to follow the versions which are available here. So it's better to install them exactly how they are described here always. So when you see different version in the documentation, then this video, you have to follow that documentation as well. So I go to the configure, I go to SDK Manager, and then we have to check that we have Android Q. So we need to install this one, as you see here. So first we need to have Android 10. Q, of course you can as well check out the default installed one, because when you install Android Studio eight comes by default with this one. So it's better to follow that documentation and say Android 10. Q. Okay. What else? It says that you need make sure the following items are checked. So we need to expand this Android 10 and we check Android SDK platform. So how we can do that? You go again to this window and then you say sure package detail. So when we click on Show package detail, see more details about this. So it says to us, make sure that Android SDK platform 29 is available or checked. And also as you see here, we have something else which is Intel X86 atom 64 system image. So we need also to check that one. You see it's by default is not checked, so we need to check that as well. So it's important to check Sharp package detail. You will be able to see all the detail of the package as well. There is something else we need to be sure of that Google API, Intel X86, atom system. We have also to check that as well. So when we go here, so we have this one, so it's very important to follow that recommendation. Next it says that select the SDK tools and check the box, Show package detail as well, and expand Android SDK build tools. So let's do that. So we go here and then we go to SDK tools, and then we go here and again we say check packages like as recede show detail of the package. Then we will see like some version, let's say which version it says that we need to select, make sure that you have 2902. So we have to go here and we check 2900 to have to be sure that you install this package as well. Of course, you have freedom to keep all of this, all you can remove them based on the space which is available on your machine. After that, we have selected everything. As you see here, we click on Apply. So we selected everything as documentation. We click on Apply and it's going to install the things which we have selected. Installed, our estimation is two gigabytes. So you have to make sure that you have really the space because they are big and you have to be sure that everything is installed properly because it will take about 88 gigabyte. So we click Okay, and it's going to download all the things. I'm going too fast this video for you to not take so much time. Okay, that installation now successful, and as you see here, we have Android 10 as requirement is installed, and also the SDK tools, as we saw previously. If we go to show it packages, we make sure that everything got installed as described in the documentation. Okay, we click Okay, we go away from Android Studio and then we go to the next step where it's written configure Android home environment variable. And in Mac, you do it differently from windows. So we need to make sure that Android comments are working fine on my machine. So depends on the type of your terminal. I am now talking about Mac, okay, So if you want to see Windows, you can skip a little bit the video I will show you on Windows. So first for Mac, you need to go add the following lines to your this home bash profile. And here we need to edit this file and add those lines. So first of all, we need to make sure that we have really installed Android SDK on this path. So how we can do that? First you go to the Finder in Mac, and then you click Go, and then you will see your library. So when you click on library, it will open for you the library on Finder. So you can find it here. And you will go and see that there is android folder, and inside this android folder there is SDK. So here what we need to have, so we make sure. We have really this bath home library, Android SDK. Okay, so that's all nice. So we have now two types of terminals in Mac. So as you see here, I am using the one which is prefixed with Zed SH. So this one is my terminal which I am using for my applications. So you can do the bold steps, which I am going to do now. So to make sure that all your terminals works fine. So first I will edit home dot bash profile. So how we can do that, I will open the terminal again. And as you see, I tried previously, I have a comment which is called sudo nano and then edit some fine. So I'm going to put this comment again. So why I have sudo? Because I have sudo because I need permissions for that. You cannot edit this file without privilege. Nano is editor, which is internally installed on Mac system or terminals. So you can edit files through it. So you can't say sudo nano as we say here. And it will open the file for you and then you need to export and copy and paste what is written in the documentation. So let's copy all of this as we see here, and then go back to that terminal again and paste them here. Okay, Nice. We have all of them. After that you need to quit, you need to exit. So here there are some shortcuts. You need to say that we need to control X. So you need to press Control X in Mac. And it would offer you that save, modify, modified buffer. So you can say, yes, I want to save them. So after that file name to write, so it will ask you, override this. So you just press Enter and it will be saved to be sure that you can have all the edits done. You just click it again. You will see that. Opened the comment again. You see that all of them already. So I go again, I control. I go back to the command line or terminal. I go to the next comment where I am using zed as edge editor so we can then edit this file. So you go to the terminal and exactly the same sudo nano and the same, and then you paste this and it will open for you again, some editor you can export also the bothers which are required here. So again, we need to copy all of those commands and go to the terminal. And then we based those. We can say here, you can paste them under it and then you press Save, or you can say Control X to save it exactly how we did previously, okay, overwrite the data and everything is saved fine. So to make sure that our command line is accepting that you just need to run this command which is called Echo Android home. So we go again to the terminal and then we paste this command and you will see that we got empty. This is because you need to restart the terminal to see the changes which are done on your, on your terminal. Otherwise, if that still doesn't work, you need to check again these SSID profile as we saw previously, and make sure if you have export path at the end. So obliviously, have you see here, I made it, it was like here. So this export path was here. So I just move it down to be at the end to the last. So in that case we can export all the buses which are defined here. So just make sure this is like troubleshooting. You can do. So you can make sure that your terminal is working. So I'm going to close this terminal and open it again to see if I am really able to see Android Home path. So we close it, open the terminal again. I would make a zoom. So I will paste the command echo Android Home eyes as you see, I have it. Now the path like I am copying or echoing this, printing the comment or the path which is saved in my comment file, which is for z as h. So here, as you see that everything is working fine though we are sure that our partners are set right here. So it's written here that you can make sure that everything is working fine. So after that there is React Native got command line interface. We will see this step after we finish as well for iOS. So I will keep this step for now. For Windows. If I go to the Windows, setting the path, very easy, go to environment variables which are set in Windows. And it's all explained here. So you just go to the Control Panel and then user accounts. And then user accounts again, change my environment variable. And you need to add the path which is installed on your machine for Android SDK, normally it comes from users, and then you'd username comes here, and then AppData, Local Android SDK, that's it. And you need then to make sure that all that path is our set fine. So you need to open PowerShell or common line, copy and paste good child item and then verify that and Android Home is added. It's exactly like how we make sure that we have Android Home variable is set. So this is a way how we set up the Android environment for Windows and Mac. Next we are going to explain about iOS. And after that, unfortunately, as I told you that iOS is only available on Mac, so I am going to explain it only on map. We will not have explanation for Windows or Mac OS and also the iOS system, which will be in the next lecture. And after that, we will start our React Native or firstly act native application. 8. Setting Up IOs: Okay, in this lecture we are going to talk about installation for Environment Development for iOS system. So we have worked with MacOS, android, and I am going to move to iOS system. Installing for iOS system is exactly the same steps how we did previously with Watchmen and The other tools. But we need as well to install some application was it called Xcode? Xcode is available on Mac App Store, and when you install it, just make sure that you have the version ten and a new order. So this is the most important information that you have to know. After installation of their Xcode, there is something which is called like you have to check their command line tools. So after the installation, I have installed Xcode previously on my own, my operating system. I go to the Xcode and then I click on Preferences. So when you go to Preferences, you will see here like some, some tabs. One of them is locations. Just make sure that common line tool is selected, that Xcode based on the virgin which you installed. So after that we need to install as well. Simulator. Simulator is existing in components. So when you go to components, you need to install some simulator. I am installing now the latest simulator of iOS version for mobile phones of iOS. So I'm installing 14.4. Of course, when you see higher version is better to install it. So your application can work with the latest version of iOS systems. So normally these sizes are available here. You need as well to have space on your PC. Two, obey the size of the simulator. After that, we go to their next step. After installation, the CocoaPods, cocoa boats is like Ruby installation and it's available for Mac OS. It's providing us with a lot of like how to say libraries for iOS or packages for iOS, you have optionally you can install it. So I'm going as well to install it through this comment, I will open my terminal and then I will paste this command here. And then it will ask me for a password. I will paste my password as well. And it will install for me something called CocoaPods. If you want to know more about it, there is like a link here. You can check it. So you go to CocoaPods. There are a lot of packages and libraries for Objective-C projects, so you can have them for your applications. We will talk about that later when we are going to use these CocoaPods in our course. But currently we are going to use React native components, but it's better to use this. So for more information, you can take a look at this link. You can see Getting Started with CocoaPods. You can as well installed it as instructions, which we have here, but currently we don't need it. We will need it later. 9. Code Editor: The editor which I am going to use in this course will be Visual Studio Code. As I told you, we installed Xcode and we installed also Android Studio, but we are not going to use them as editors. We are going to use Visual Studio Code, which is very fast and dynamic and it's very good for development of a React native. So as you see here, we have a code V dot Visual Studio.com. You go here and then you click on download mac universal, and you will have the version for Mac. And as well, if you click on this arrow, you will see other version for Windows and Linux. So installation of Visual Studio code will end up with installation of Visual Studio code on your machine and you will have something like this. So in the next lecture we will see how we are going to add some extensions to wrap it up our coding skills on Windows, or it will be normal installation file and also on Mac you can install it and it will be downloaded as a zip file. And when you open the zip file, it will be extracted and you will have your Visual Studio Code dot app. So you can move this application to your applications in Mac OS. So it will be located here. I have installed it already, so I don't need to do that. So as you see here, we have Visual Studio code app, and when you open it, you will see that Visual Studio editor installed on your machine. So as you see here, I have here my Visual Studio Code is installed on my machine. For Windows, it will be exactly the same, but it will be executable files so you can install it like any application on Windows. 10. Installing Extensions for Rapid Coding: Visual Studio Code comes with extra extension that you can install them for some specific behavior of your Visual Studio code. So to visit the libraries or the like, for example, their market for those extensions, you just need to click on Extensions on Visual Studio Code. As you see here from this icon, I will click on it and then you will see a lot of suggested extensions. So let's search first for our first extension, which it will be React native tools. And this extension is very helpful for our React Native application as we will see later. So for example, it will help us to create like some snippets. So as you see, it's very helpful and it's wrapping up our coating. And it has a lot of features like autocomplete of the things. So what we will see the benefit of this extension later, but now let's install it. So I click on installation and it will be installed in my extensions. Another extension which we need to install as well to speed up our performance is called React Native, react slash Redox snippets for ES6, ES 7. So this we are going to use in this course. So what is this like extension? This one is like making for us some shortcuts which we can write and it will generate for us the full code. For example, as you see here, I have some imports, for example Iran EMR, and then it will run, it will code for me import React from react. So it's like a shortcuts which we can write and it will import for us based on the things. For example, I have IM, RPC, it will import for me a pure component from react. So it's some shortcuts which we need to use as we will see later in the course. And it will speed up productivity. Extension, which we need to install is called prettier. Prettier is like a very nice extension which is used for code formatting. So when you save a file, it will automatically format your code based on some configuration which will come with React Native installation as we will see later. So first, you just need to install this extension and make sure that you have the option which is called safe or format on Save. So how you can find this option, you just need to go to the settings of VS Code. So you just go to code and then you'll select Preferences and then settings. So when you click on settings, you can find something called format on Save. So that's the comment. So you just need to be sure that format on Save, this option is activated otherwise, the format on safe will not work for you. So that's it for now. We will see how we would use prettier. As I told you, it will be installed automatically that configuration with a React Native project. The last thing or the last extension which we need is something like optional. If you want, you can install it or not. It's called material and then Icon Theme. So this is like giving you, like when you have a file structure, it will put the icons of the files based on the type of the file. So it's better also to install it to make like very comfortable for the file list which you have here. After installation, it will give you select File Icon Theme. You just need to use this one. So I will use Material Icon Theme or seti. Lets use this one. And then you will see like your file list B with a specific icons of the files in the editor. So those icons, you see them for example, like this. So every file finish with CSS, it will have icon like this. Every file finish, for example, with MPM will have like this, JavaScript and et cetera. So all out of icons are available, which will make for you easy to take a look through your file structure and pick up that file which you want, those extensions which we need for now, we are going to build our first project or a React Native project, and we will see all the effectiveness of all of those extensions later. 11. Create React Native Project: Okay, Now we are ready for starting a new application with React Native. In the documentation, there is a tool which is called MAX, which providing ability to create applications like a boiler plates. And this MPS is part of MPM. It comes always with the newest version of Node. So make sure that you have the latest version of Node installed. So when we execute this command, we are going to create a new project in React Native. So to make sure that everything is working fine, Let's execute this comment. First of all, I will go to my terminal. So if you remember, we have this terminal or command line which can be available on Windows. So make sure that you are on desktop or any folder where you prefer, for example, on your hard disk. So here I used the desktop, so I'm going to use this folder to create my project. So I am going to copy this command as you see, like MPI x React Native in it. And then you specify the name of the project which you are going to work with. So let's try that. So I will go first to the terminal and then I will paste this command, but I will give, for example name. We can say course project. So just like for now, to make sure that everything is working fine for us, it's better to have always like the capitalized letters of the, like the name of the project. So we can have course project like this. So now I'm going to press Enter. And then it will create for me on the desktop a folder where it will be called Gore's project. If I go to my desktop, as you see here, it will create for me a new project. But this process will take a little bit of time because it's going to download some resources to create the project. So as you see here, its own progress. I am going to skip this video because it takes about five minutes. So I'm going to skip this video and I will show you when it's ready. So as you see here, that installation is done. So downloading some templates, copying template processing the template and then some CocoaPods, the dependencies as we saw previously. And here are some instructions for running the project on Android and also instruction to run it on iOS. So now as you see here, is installed, if I go now to my desktop, I will see the project is already here. So as you see that, I hear I have here that course project. So let's go to Visual Studio Code and open the project there. So as you see, we have here that folder and we can click on this folder explorer or File Explorer. And then you will see icon or button, which is called Open Folder. And here we are going to open the folder of our project where we have located on desktop. So I will go here, course project, and I will open this folder as you see here. So if you take a look, we will have all the file here, so we are ready for programming. Let's have a quick look through the file structure of the project. Let's start from up to down. So first we will have a test, which will be like a test file for testing the application like end-to-end test or unit test, which will be created here as well. We are going to have a VS code sitting. So always when you want to have a settings, specific settings with your project, you can add those settings of Visual Studio Code if you're all team is using Visual Studio Code. For example, the font size of the code, as you see here. So you can override their settings which default in your editor by the settings which are specified inside this file or this folder. And we will see that later. And now we have Android project. This will be a pure Android project, so it will be written in Java. You will see here Gradle, we are not going to handle or work with this project because as I told you that React Native is interacting with Android and iOS project to generate for us a native apps. So we are not going to work so much with these two folders only when we want to add or delete some specific modules, as I will show you later, node module is the Node JS libraries. So where we are going to install the libraries in JavaScript which we need for running our project. For example, if you open this folder, you will see that you have React native library. You have TypeScript, you have a lot of libraries which are needed for Duran this project, buck config is something like for maven is a server which can be run for Android. So we're also going to work with it if we need it. Editor Config is something like, if you remember, I talked about a prettier. You can also set some configuration for your editor in the like here. You can have a config for this editor, but it will be overrided by the prettier ice RC as I will talk about it later. Es lint is also something important for the project. Es lint is a tool which comes with an extension if you want, you can install it, which is called ES lint. And when you install ES lint, it would show you live the code errors which you have in your project. For example, if I go here to ArcJS, I will have some error, which is showing me that, okay, there is. This can be used only in TypeScript, but cannot be used in JavaScript file. So I mean the import. So in that case, you can as well skip this rule. You can edit the rule in Eastland RC file. So ES lint RC file is a file where contain the rules for your code. So in that case, okay, it's a project will run, but you will have some typing error. For example, if I put here double quotation, It's, the project will not like it. Or ESA agent will not like it. It will say, it's better to have a single quotation as it's set in the rules of the project. So to look more or about ES lint, you can just go to ES lint and you can't check the rules. There are a lot of rules that you can set for your project. So for example, I will take one of them. For example, no console, console log is heavy for the browser when you forget them, when your project, the project will run with console log and then it will make for you some issues in performance. So its better always to remove the console log from the project. Here there is a law or rule for Eastland. Whenever there is a console log, it will show under it error. So you have to show that, okay, please remove the console log. So when you want to work on one of those rules, for example, as we see here that we took this one, I just go here and check at the end something called Rules. And then you can specify the rule which is called no console of all, you can set it to one or 0. So in React, we can use that as well, these rules. So if you go to their project and go Eastland RC, you just need to add a field which is called rules. And these rules will be an object. And inside this object you put your role. For example, I am going to put that no console, as you see here, for example, if we go and we copy this one, so we will say all we will have no console. So here we put this one, but as we said, this will like only single quotation. So we put it in single quotation. And we say here that on, like turn it on for me or this error console, turn it on. When you save. As you see here, it's already formatted, as I told you previously, because we put on say format. A prettier already formatted it for me. So when I go to app, for example, I want to add here a console, console log. So we can add like some console log here, like as you see. So it will give me the error unexpected console statement. So it's better to turn it on. Always do remember that I have console log error in my application. So if you want to disable it, just go again to the road and just put here of as it's written in the description of the project. And as you see now, the error is not showing or the warning is not showing anymore. So that's it. So you can specify the rule which you want. You have to search for rules. And then you can do what you want with those rules. And you can make your project stable and unified code-wise from all the team, which is, which are sharing the code base. So let's give this rule, for example, and let's remove the console log. And let's continue with the fine structure flow Config. You don't need it for now. It's just about how the flow of exporting and building the project will behave. Good attributes also you don't need it for now get ignored. Very important file where you are going. For example, when you link the project to some Git repository, then you don't need to push some files. For example, node modules is very huge. So is this folder about 300 megabyte when you start a new React Native project. So you don't need to push this code or this folder to Git repository. You just need to push the libraries which you are reducing inside your project. So I'm excluding node modules from the good to be pushed with my commits and pushes to the codebase on GitHub. Prettier, as I told you, there are prettier configuration already configuring this prettier. And as you see here, that we have bread here is defined here, ICC down and it will show you always errors and the rules which are following based on this file up JSON is the file which is entry point for our project. Like for example, we can say the homepage of the application. As we will see later when we will run the application, we will see how all of this rendered in our phone and we will see how we can edit it and adjusted to make our application. And we will talk about this file later. Abc JSON is just like some properties for the application, like the name and display name. So you can add a properties which you want. Babel config is something for ESR, ES6 years five is a builder which converting their JavaScript ES6 years five to Vanilla JavaScript. And you can, the browser or any browser can understand it. Index js. It's also the main entry point of your application. So here the application is specified ISA like index two years when I started the project, it will start from here, index.js. And I specify the name of the file, which is called app name. And here it will start for me the app name from the app, which I have that imported from here. So the app.js actually is called inside index GS, which is the root, root main point of your project. And now we have metro config, which is transferring the project from JavaScript Bayes to a native code base as we saw later. And it's also used as a compiler. And it's showing you the errors when you are doing some mistakes in the code. When we are doing like development package JSON is used for libraries which we need. So we can install libraries and remove libraries also, like only JavaScript libraries. So we can add or remove them based on package JSON. And as we will see later, how we are going to call multiple libraries which we need to build our project. So this is a quick overview over the file structure of the React Native project. We will see later more and more detail about all of those files. One, we are going to build our project. 12. Running on iOS Simulator: Okay, in this lecture we are going to see how we can run the project on iOS simulator. So as you see here, we have the instructions about iOS that we need to navigate to our project. And then we have to run the command npm, React Native, run iOS. Let's try that. But I would try it from our VS Code or Visual Studio Code. We are not going to use these terminal anymore because you know that VS code contained already the common line which is used for using or inserting commands which we need for our project. Okay, so let's take this recommendation and copy this comment first, and then we go to Visual Studio code. So when we close this common line, we go to Visual Studio code. So to open the terminal in Visual Studio code, you have to just press Control J on Windows or Command J on Mac. So let's try that. And you will see that you will get the terminal and the bash file or you can have as well the zed as NMAC. So now we are going to paste the comment which we had previously. But remember, you have installed already the Xcode and also the simulator. So we will see automatically that we have simulator which is will be on iPhone. So let's try that. It will take some time to run the project and include the packages. And as you see here, it's launching the iPhone 12 is the simulator which I have installed previously, and now it's getting loading. So as you see here, the simulator that launched and now we are building the application. So what do we have here that the simulator or the compiler trying to build the project using the iOS project, which we have created previously using our React Native comment. And as you see, this process can take some time, so you need to be patient on it. It's depend on your memory of your PC and also the processor. Maybe you will notice that fan of the PC will get higher and the processor will get overloaded, but no problem. It will get come when everything gets launched. So now after the bill got success, as you see here, we opened for us a new terminal. And this terminal is showing us that bundled project index.js got executed. And as I told you previously, that index GS contain the entry point for our application. And as you see here, we have all the compiler, which is called Metro. And as well here we have the simulator and the application which is default comes by React Native boilerplate. So now when you are going to make a change in the code, for example, I am going to change this step 1, this sentence to something else. So let's go there to the code and find in app.js, as I told you, it would be the entry point for our project. So here our app.js. So as you see here, the determinant which we opened previously, it's done and made its own job, so you don't need it anymore here. So when I go and search for step 1, it doesn't matter that code, how you see it here. I'm going to explain it step-by-step, but let's change this step one sentence here. So I will change it, for example, to React Native goals. And when I save, we will see the changes are immediately reflected to the phone. And this app will be a really native app. It's breached by metro to iOS project to execute JavaScript in iOS and converted to a native application, as you see here. So every time I change something, it would be reflected here. So it will be very helpful for us for coding. You don't have to reload all the application again because this is called hot reloading. So it's directly reflecting the changes which we are going to do. So when we are building the application, we don't need to reload on every change we are doing. So just save it and it would get directly immediately executed here. So this is the way how we are running the application. So when you were there is like for example, some mistake. As you see, I'm going to make mistake. It will show you the error directly here. So on the phone itself, and also on Metro, that terminal which automatically opened, it will show you the exact line where the error happened. So you don't have to worry about the errors. So you can't see them directly when you press Save and you have a mistake already. So I put it back and the project runs again. So after you are making sure that your installed Xcode and as well you have downloaded as simulator as I showed you previously. Now we are able to run the project very easily and smoothly. So in this way, you will be able to run the application on iOS phone. 13. Running on Android Emulator: Okay, now in this lecture we are going to run our project on Android device. This device will be Emulator like a virtual device. How we did exactly was iOS device. So now I'm going to go to the documentation of Android or running on Android. So the same documentation which we were following, I want to say target Android. So now if we go down, we will see that comment where we are going to run the project. So we have created a project previously, as you saw. Now we are going to run the project on a device. But here there are some instructions we have to do first. So first of all, we need to create a physical device or a virtual device. In this lecture, I am going to show you how to create a virtual device. So we have to follow the instructions which are written here. And also maybe they will get updated in the future after recording this course. But now you can follow this instruction which exist here. It will be the same always for the future. So first, let's create a new AVD. It's called virtual device, Android Virtual Device. So first we go android Studio, as you see here, and we click on Configure and then AVD Manager, we click on it and we will have another window. And in this window, as you see, you can add your devices as you want. So there is a default device which is used in, already in Android Studio, but we are going to use a default one or one which is recommended by React Native documentation. So I will click on Create Virtual Device. And of course it will be a form. Of course, if you are developing for tablet or for example, automotive or TV, it would be different, but still the operating system will be the same. So now we are going to select one of those devices. So I recommend, for example, to use the Pixel 3 or Pixel 2. No problem. So you can have a proper sizing of your application. So now we click on Next. And then as you see in the documentation, they said that it's better to use Q system where we have 29 image. So if we go to the Android Studio, we have to search for X86 images. We have to go for images. And then we will select the one which is called Q. This one we have downloaded previously, as you remember, when we were installing Android Studio. And after that, you click Next and you give a name for this device. And you can choose if it's landscape or portrait. But it doesn't matter. You can change it during running time of the device, and then you click Finish. After that, you will have the device is here. So now we need to run the device which we have installed. So after that we can go here and we click on Play button. So if you see this Play button, then it will, it's going to run the AVD. It will open a phone for you virtual form, exactly how we have done in iOS and the difference here that we have to run the phone manually here. And then we have to wait until the phone is taking off or it's launching. Then we have to do something to run our application on the device. So as you see here we have now the device is running, everything is fine. We have like a real phone. As you see here, it has camera, it has applications, and it's exactly like a real phone. So now we need to run the application which we have created previously with React Native on this bond. What we have to do first, first of all, they are recommending to find the device by AVD, or common line of Android. So how we can do that? So for that, we need to make sure that really the device is attached to Android. I mean that React Native can see the device that we can run the application on it. So how we can do that, we can open a new terminal window in Visual Studio code and run the command ADB devices. So ADB is like the common line which we have created at the, at the beginning when we are installing Android Studio. So here, when we run the command ADB, it will have some options. One of them is devices. So when we click Enter, we will see that we have emulator 55, 54 device. If you don't see anything here, you have to make sure that you are running the emulator. Otherwise, you will not be able to run your application with React Nate. After that, we need to run the application using and also how we did previously with when we were running or we installed the application. So if you remember, we had this command which is called MAX React Native run Android. You can skip this step because this comment is going to run this command automatically after that, which is like running metro, as we talked previously. So now let's run the command which we have run Android when you want to run iOS, who just replace it with iOS. So let's run now the application. Again. It's going to build it and it will take some time until it run the application on this device. You don't have to do anything. You just need to wait. And when it's finished, it will open a new terminal for metro and also USE the application is created here. So I'm going to put two simulators. One is the iPhone which we made previously, and here the one with Android. And I am going to skip this video to make fast for loading and running the application. So as you see here, the building is finished and it's building the application on the phone slowly. And it's going to run the application, install it on the phone, and we will see exactly how we did with iOS. So as you see here, Metro is still running and bridging to the boards devices. So now it's converting the JavaScript code to Android code and iOS. And it shows us this implementation here. So let's change something in their god, I'm going just to make this smaller here. And then we can close this. And I'm going to put, for example, a React Native course. And I will click Save. We will see that the changes are applied on both forms. So without any issue and without any problem. And as you see here, we have all the updates immediately, which is coming like hot reloading. So to see our application running and we can do our changes immediately. So this is a way how to run the Android device. If you have any issues, you can go always do troubleshoot, which is located here in troubleshooting page. So here they were collecting some common issues and they are fixing them through this troubleshooting, which you need always if you have some issues. So that's it. You just need if you have problem, just go to troubleshooting or ask me in the Q and a, or you can also ask on their GitHub repository for issues. And you can open a new issue and they will reply to you about how to fix it. But I hope if you follow my steps, which I explained to you, you will not have any issues when running your application. 14. Running on Your Mobile Device Using Vysor: Some functionality which we are using on our Android device or emulator will not be available, like how we have a ray device. So also, some people are suffering that Android Studio is very heavy for their computer and they have limited amount of RAM. So you know that Android Studio need a lot of RAM and a lot of resources so far that you can also develop on your own mobile phone. So either it can be iPhone or Android. I'm going to show you how I am going to connect my Android device and I am going to develop on it. But first step we have to do that to make sure that the emulator is turned off. So we must turn off the emulator, which is running on Android Studio. So you can't click on this button, which is called power. And then it would turn off for you that device totally. So after Dunning of the device, you need as well to close it from here. So you need to close the device totally from your machine and also from your emulator. You have to be sure that on Android Studio you have anything running in your virtual devices. After that, we are going to move and install some program or application which is called Visor. And this visor, you can go to the website visor dot io, and you can download it for all your operating systems, Windows, Mac, Linux, and also you can install it on the browser using some extension. Okay, how we can use this visor? I already downloaded this application, and as you see here, I am running it on my device. So we have here two options, android devices and iOS devices. I'm going to show how we can develop on Android device. So I am going to show you myself and then I am showing you how I am connecting my device and enabling that debugging mode, USB debugging mode, as it's mentioned here. Hello and welcome. I am family and I'm going to show you how to connect your Android device. To compute that, first of all, you need to use the original cable, USB cable, which is coming with the phone originally. So otherwise you will have some troubles with connecting to your PC. First, I'm going to connect it, use it, this USB. And then you will have on the phone multiple options when you slide down or when you have a drop-down, that dropdown, it's saying like charging via USB as you see here. But now what I'm going, I'm going to click on this charging via USB. You will have multiple options. So this is different from mobile to mobile. So some devices they are having only transfer photos, transfer files, charge only, and reverse charge, and import midi. So some devices work directly with their computer when you say transfer files. But some of them, you need to have something called Import midi. As my device saying here, I have Huawei phone and it's, I have this option here. So I'm going to select this option at the end. So as you see here, and then the behavior of the device will be changed. So till now, as you see that visor, they didn't detect anything because we need to enable the debugging mode or developer mode, how we can do that? First of all, you need to go to settings on your phone. So I will go to Settings and Settings. At the end, you will see something about the phone. You click on it. And then you will have something called Build number. And as you see here in the build number, I'm going to click multiple times on it. Like I will put my finger and do it like in a way that I will have options. Like it will tell me down that you are now behaving as developer. Okay, now everything is fine. My device gut as a developer, but we need to enable the USB Android debugging. So as you see here, we can as well search in the setting. So when I go to my setting on my device, as you see here, we have a surge on the top. So we can search in the setting. And in this search you can type Android or USB debugging. And it will be found directly at the second option of your options in the settings. We click on it. And then it will take you to something called developer options. And in this developer options, you need to enable the debugging mode. You just scroll down and you will see USB debugging as you see here. So in USB debugging, you just need to allow that. So I am going to allow that. And click, Okay. And you will have like some, some notification saying that advisor is trying to connect to your device, then you have to allow it. So you have to press in this case. Okay. So I am plus OK. And now everything is gone and is fine. And as you see on visor that my device got detected. So when we go to my device on the laptop or computer, when I click on play, I will see that my device is running on the emulator here. So I will have something exactly like the emulator which we had previously with Android Studio. And it will show a metal ring of my device here. So now as you see, I have all the information or showing my phone totally live with this application. So with that, you can then deploy the application to your device, to your mobile. And then it will run on your mobile device at the NIH, think it would be installed on your application. It would be saved here. So you don't have to bother yourself to install the application again or deploy it and then put it on your device. It will be already deployed on the device. So if you didn't see those options, which I talked about before, it's here. So when I click, as you see, I have done sphere photos, transfer files. Some mobile ions have input midi. So something which is like music equipment, it doesn't work in other way, but some devices works with transfer files. So in that way, you need just to switch until you're wiser application detect this change. And in that case, you can select what you want. So let's continue and deploy our application to the mobile phone. See you with that. Okay, So now as you see here, my phone is connected already to this visor and we are going to deploy the application to this device. As I told you, you must make sure that the Android emulator, which we installed with Android Studio, it must be turned off. So to make sure as well, we need to do the same steps as we did previously. So first, we need first to run the ADB devices, as you remember here. So when I run ADB devices, my device would be detected automatically. This is the code of my device, and then it would be here. So please make sure that you have only one device in the list. Otherwise, the React application will not work properly. So let's run again the application using Android. I'm going to put the command again. So as you see, it's installing the application. It's going to install the application to my phone, to the physical form which is connected to. So it will take also a little bit of time of building. But as you see here, that it's getting faster than the emulator. Because here the application got installed and got deployed directly to the device, and it's using the resources of the device. We don't have to use resources of the PC to debug their code and then deploy it there. So every time I do something with my application, I'm going to change here again, cores and save. We will see the directly, the change will be detected here. And also the simulator of iPhone is working and still working fine. So as you see here, you have a freedom. You can use emulator or iOS emulator or simulator. And also you can use your device. And as you see, you can also go offline. You can turn off the, totally the development or for the application. And you will see the application is deployed to your device. So I will show you quickly. And as you see, the application is here, cores projects. So when I click on this application, I will see you directly opened and also an I disconnect the phone. We'll see still the application and running without any problems. It's like installed to my phone. So this is a great feature because it's using the native Android. That's why I prefer to use React Native CLI than x bar, x bar as well. Okay, You can run the application, but over some bridging which is called x bar application, you must have it installed on your phone and also on your PC. But here, the application is getting stored directly and you can use it on your device. 15. Hello World App and Logging: The easiest way to debug the application or mobile application is doing and logging. Logging. I mean that I do a console log, as I showed you before, that we have console.log and then we have a data. So console log, it will look for me in the terminal, but which terminal? The terminal which is running under Metro. Metro Bundler, is going to show me all the console logs which I am doing. And it's like our console. So in this way, if you console log something and save the application, it's going to log the data there. But let's make this code simpler. You know that this is a little bit complicated. So we need to make this simpler so we can go step-by-step. If you go in the application itself, you will see something called the basics. It's like helloworld application. So let's click on this link and it will take us to something like introduction. And we will have here some example which we will be full application for Hello World. So let's copy all of this code. I am going to explain it later. So we go again to our application in app.js. As I told you, the entry point of our application, we delete everything. And then we would this code, let's open against the simulator and then we press Save. So we are going to save our code. As you see, it's automatically formatted. And as you see here, I have here my application is debugged and loaded. So if I change this, I will say, for example, here, Hello world. So just to be sure that everything is working fine. Okay, nice. We have here Hello World. If we go to the parts of the application, you will see that it's very simple. So first we have to import React from React library, and also we need to import some components. And those components are used always. The application, as you know, React Native is not HTML or CSS. No. It's something like we can say components, we are using a components and then we call those components and place some data inside them to display them in our application, we will go in our course for the components which we will need to build our application. So for that, I'm going to explain the components which we need for the course itself. So for example, we have here to this view. This view is something like you can say in HTML, is a div and div which will contain, for example, something else component inside, or for example, texts or buttons or textboxes. So here, as you see that this view is implementing as a div inside my application. Also, I can have a view inside of you. So we can use like div inside div exactly the same way. Text. If you want to place a text, you can use it as well. Like you can place any text is like a span or we can say paragraph. And then you can place the text inside that tag here. So now after that, we can say that our component app is called your app. We can say that this one, your app, is loaded here. So when I create my own component and place it here, then the component will be called inside my entry point of my application. So let's rename all of this. We can say this is AB and this is AP. It shows that this is a function and this function return for me that React Native template. And this function will be exported and called in the index.js as you see here. And it will be loaded and register the main component as AB and AB registry will do for me the running of the application. This abridged history, if we go to it, it's communicating with Android and also with iOS libraries to run the application and change it to a native app. We are not going to go in detail of this. We are going to do a practical things. I don't like to do many Theory. I like also to do always something practical. That's why my whole courses are impractical. Because actually I like to learn from practical thing. I need to see something in front of me. So let's do a console log. As I told you, we are going to do a console log. So the logging can be like we can say the entry point of my application will be inside this function. So this function will return for me this template. But before that, you can write any JavaScript code, as I told you. So JavaScript code we can say console.log and we can say hello world. So we can console log our things. And where I will see this will appear, it will appear in my terminal, which is called Metro, as I showed you, that it will run immediately after bundling the application. So let's zoom that. I want to make it bigger. And as you see here, we have Hello World. Nice. So now if I go again to my application and change this, like I say here, Hello World. So we will see that the login is still log here, and that is information which is called log. Okay, great, so let's define, for example, constant, line it up constant and I say x. And this x will have, for example, value, my course. And then I will put this, and now I am going to console this x so we can remove this one, save everything. Auto formatting is working fine. And as I go to the terminal, again, I will see my course. Nice. So this is JavaScript. Actually we are writing here JavaScript, which we are going to use inside of our components for this part, which is called styling. It's like styling, but Nazi SS, It's React Native styling. And we will see later how we are going to style our application. I will talk about all the things which we need to style for our components. So in that way, you can console log and debug your application using the console of your application. 16. Debugging Chrome: Okay, In this lecture, I'm going to show you how to debug our application. Of course, debugging is a very great feature, so we can use it to track our problems, as I told you, okay, We can use console log, but it's better off as well to use the debugging. There are two ways for debugging in React Native. First of them is using Google Chrome. Yes, using the browser. Of course you can as well use a browser to debug your application. How we can do that. First, you need to click on your simulator, and then there is a shortcut. You have to make it, which is Control D on Windows or Command D on Mac. So when you click Control D, you will have a menu like this one. So you will have multiple options. One of them debug with the Chrome. So when you click on the bug with Chrome, it will open for you at debugger. So I debugging page. So as you see here, we can see that we have some debugging page. And this page contains some information. So you can start debugging. Okay, so I'm going to create the debugger. How I can see, like how I can place a breakpoint in my Chrome. So first we have to open that DevTools. So how to open the DevTools? You just press F2 by pressing F2. As you see I have here the inspector, the DevTools of Chrome. Okay, now I need to place, for example, a break-point, but where, how I can get to the file, which is for example, for me, the ab.js file. So first, if you remember, we have a console log here. So I'm sure if you open this one and open the console as well, you will see the message which we have printed. It will be located in the console here. So I put it like this. So when I press reload, I will see that my application got reloaded. So now we can see this message. So when I click on this app.js six, it will show me in the code where I have placed this comment, where I have placed this console log, and it will open for me the code exactly how I have it in Visual Studio code. So in that way, you can create a breakpoint. You know, in Chrome you can create a breakpoint by clicking on the line number. So when I click here, I created a breakpoint. Okay, let's reload now the app. And as we see that we have stopped on the breakpoint automatically. So now I get to see and check the value of x, for example, by just putting the mouse over it. And I can see what's going on here. So when I want to go one more step, I click on this arrow. So we can go one more step. And then I will see that x has value, my course. So in that way, we are doing debugging via Chrome. And of course, after you finish debugging, you press play and the application continue loading. So you cannot treat the app.js file exactly from the sources here, as you know always. But you need to place a console log or you can enable this one and enabling the end bows on coat exceptions. So when there is an exception, it will show you in your application code where the exception is placed. 17. Debugging with VSCode: Another way to debug our application is using Visual Studio Code debugger. Visual Studio also provide with a debugger tool which we can use as well how we did with Chrome. But first of all, and very important information that you have to do before setting up the debugger in Visual Studio code, you have to turn off Metro. Metro how it's opened in our terminal automatically when we run iOS, React native app. So in that case, we need to close Metro. The same thing can happen with Android. So let's close that. So I will just stop it here. Like by pressing Control C or Command C. And then I'm going to close it totally. And as you see here, that we don't have any debugging anymore and our application cannot be loaded and we have now normal form. So in that case, we are going now to set up a debugger using Visual Studio Code. So how we can do that? First, you need to go to this button. We can say run and debug. And then you will find here something like create Aidan JSON file and laundry JSON file is the file where we are going to put the configuration for our debugger. So when you click on this link, then you will get some options. One of them must be the AC native. But as you see here, I don't have this option because I must install the React Native tool extension, which I have told you before. This is React native tools. So in a case that it doesn't work, sometimes it's asked geu for reload. So you can just reload the application again or clicking on reload. Or for example, you can just disable and enable it again, and you will have that option. So for example, I have here again just to be sure that it's working, okay, it's fine. Now I will click on debugging tool and I will create, create long JSON file. Now I have React Native option. So if you don't have this option just to start the extension and you will have it again, okay, you click on React Native, then you would get another options. One of them is attached to package it. There are multiple debugging way, but for example, attaching to packager is the easiest one. So we can uncheck this one and add that to packager. Now I'm clicking OK. And it will generate for me a file, JSON file, where it has some configuration called attach to packager. And this attempt to budget and packager has some comments where it will work with my debugger. Ok, now we need to run our application. We are not going to run our application in a way how we did before. Like, I will not go to Command Line and I will say in px React Native or an iOS or not. We are going to let the attach to packager to run the application for me. So if I go here to the debug, Of course, like if you are on the file list, you go again to the debugger. You will have button here and this button, it's called run and debug. And you will have multiple options. One of them is at that to packager. It's based on the configuration which we have here in the loan JSON. And if you are curious to know where is this long Jason is created. As you see, it will be in dot v is code folder. As I told you before, that inside this folder we putting some configuration which we shared with the team, like I settings like launch, like for example, some recommendation for extensions, etc. So now we can add and run our application. So let's click on run. And as you see, it's going to run the application exactly how Metro is doing. If you remember that we have the same sign here and now the packager got started. Okay, nice. But now my application that didn't start automatically, so you need to do that and run it automatically or manually, sorry. So you just click on it. And you have, of course, as I told you, the application will be installed on your machine or on your device and you just run it. And as you see, like the attacker is already knows that there is some phone is running the application. So now we can start debugging it. Okay, let's try to place a break point. I'm going to put here a breakpoint on our constant which we created before. For example, this one, and then save. So as you see that debugging start to work. So I am going now step-by-step. And here I have the value of x, exactly how we had with the Chrome. Okay? Sometimes the breakpoint will not work for you because we need to activate the debug with Chrome. So I don't know, they are calling it activates the work with grown, but it should be like only activate debugging. So how we can activate debugging, if you remember, we pressed shortcut, which is Control D or Command D on Mac. And sometimes you need to press multiple times Control D because it doesn't appear. Fast, so you have to do it multiple times until it gets up here. So now after that, you see here start debugging with Chrome and then you click on it. If you don't click on that, for example, I'm going to stop the debugging. And then okay, I need to continue my application. Okay, Let's continue. You see there is no any response anymore because it's not attached to the debugging because I cannot now debug my application. This breakpoint cannot see what's happening in the application. So it's very important to activate the bug with Chrome. Okay, it's written with Chrome, but it's with anything which is like attached to packager. So we can just right here, attached debugger or debug with Chrome. Now I can place my breakpoint, reload the application, I stopped on the breakpoint. So you must be sure that two things. First, close the metro, that terminal, which we closed at the beginning. Second, you must enable the debugging here in the DevTools of the application are we have it here. Another important information if you want to stop debugging, because you know that debugging is making the application very slow. So you need to stop the debugging. You have to stop the debugging by doing many things. First, you need to click on this stop debugger and also stopped debugging in the DevTools as you see here. And as well, you need to find a comment by pressing F1 and the F1, you need to search for React Native. Stop packager. It's very important to do that because otherwise the packager is still running in the background. And when you run the package or again, or you run new application, it will tell you the packager is already running and you will not know because you stopped everything and you stopped it from here and it's still running and you don't know from where to stop it. So the best way to do that is by doing and pressing F1 and finding stop packager from React native command. And then it will stop the package or totally. And you will be able to run, for example, the application again as normal as we saw in the terminal. Or you can run it again with attached to package or by mentioning the error which I told you, maybe you will get this issue as you see here, that you would get the sum. Another debugger is already connected to packager. Please close it before trying to debug with VS code. So this is very important. So you need as well to stop the packager, as I told you Here, stop that packager, package or stopped. And you need also to check the terminal. Everything is fine, you don't have anything running. And also that then minnow, which we have used here. So you need to know that or glossy totally. So I have it here. Quit. Okay. You have now on your phone disconnected from Metro and then you run attach to packager and the application will run again. So as you see, I have it running again, but I don't have any application. So you just need to open the DevTools again. And for example, maybe you can say reload the application just to get it connected again. And as well debug with Chrome to activate the debugging with breaking points. So all of these troubleshooting, you have to take care. Watch this video multiple times. If you have problems, then you will know how to debug with VS Code. 18. Getting Movies Data API Overview: Okay, now we are starting the second section after we have prepared our vitamin and add installed what is required from us. First of all, we need an API, we need a data, we need images of the movies. We need somehow to run a video of the movie. So for that, we need something called API. And the API will provide us with a list of data as a JSON data, which we can use in our application and show how it seen here in the website. There is a website which is called the movie db.org or the movie database.org, which is offering this API. So as you see here, we have list of movies is just going. Some reviews about movies is just showing like some images who are the actors and somebody views, et cetera. So I am going to use the API of this website. And again, we are going to display this information but on mobile application. But of course, if you want to build your own framework, you need to build an API. And building an API you can use multiple backend technologies, like for example, NodeJS, all C-sharp. Even you can use a Firebase. But for making it quick, because we are specialised here in front and, and mobile development. We are not back-end developers. We are going to use this API which is implemented already. And if you want to know how to build an API which is like based on back and based on Node.JS. You can follow to my page where it's blue bits though Dev, I have a full course about building a complete e-commerce web API. That API you will, or in that project, you will learn how to build the API by yourself. In our case, it will be like a movie's API. You are, you can store them movies, for example. Make them always a filtering all of these information. So this is a real practical project with e-commerce, but as well, you can know how to upload images, how to create the APIs, and how you can secure them. For our course, we are going to use the API which is provided in this website, which is for free and available for everyone. First of all, we need to click on Join, CMDB. We have to register there and create an account to have an access to their API. So I'm going to fill this form quickly. And as you see here, I filled my data and I am going to sign up. And after that you will get an e-mail and forward that e-mail you need. Verify your account, so you must go to the e-mail. You will get there a link, and then you click on the link and then your account will be verified. So I'm going now to my email. I got information that my email got verified. So I am going now to login. So here we have already the screen. I'm going to put my password again and then look in. So let's look in after my our application or our account got created. So now I have the account is created. We can as well use the API for that. So how we can start to use API, it's very easy. You know that EPI, it's something like a link. And this link, you can get it and you can get data from it, how we can use that link or how we can find it. First of all, you need to go to your profile settings. So you'll have to click here and then you click on Settings. And then after that settings, you see I have all my information. I have something called API. And for the API we need to request an API key. Okay, let's go first though, documentation of this API. He said that our primary documentation is located at this link. So you go to this link and as you see here, we get all information and all of the steps, how we can use this API. So now I am going to show you those steps quickly. So first of all, we need to go to our account there and then API. And then I want to generate or request an API key because every API need a key. Afford you you can choose the option develop because we are developers and we are going to use this API. And we say that our project non-profit. So we need to approve some agreement so we can read all of this information and then we can accept that. And after that, what the type of use. So you need to know what is the type of usage for your application. For example, I am saying a mobile application, or for example, a desktop application or a website. It's up to you. For now I'm going to use a mobile application, for example. Application name. We can say Movies app by just a name, which is simple. And then you click on submit. And after that you have a notification that you need to fill all of the form. So I'm going to fill it quickly in front of you and I would click Submit. So I feel down all the required information. I just put in front of you some random information for privacy. So I'm going to put submit. So if it says here, address state cannot be blank. So I can put here state one, and then we can click on Submit. Our changes have been done, and then I get an API key. This API key, you can use it to get data from the database of this website. So for example, there is an example here, API requests. So we can take this URL, this link, and then we can go to Postman or any other tool where you are tracking or seeing a data. For example, you can use this URL as well in the browser. So for example, I will go here and then I'll put the link on the browser. And as you see, I got multiple data and information about some movie. So for example, I get adult falls, all of this information for that. As you see here, that this API is ugly. So I am using a tool which is called Postman. So this post-money, you can download it from their original website. So I will go here. And as you see we have on Google the first link. And in the first link you can install and download a postman. Or if you don't find the link easily, you can go directly here on Google to download Postman, and then you will have download the app directly based on your operating system. So after downloading postman, as you see here, I got this view or the screen. So this is postman which we are going to use or to test our API. So I'm going to open a new tab. And this tab will show me multiple methods for GET, post, PUT, etc. All of these are information I'm going to explain for getting the data. We are GET request, we are doing a get request. So then you just paste the URL here. As you see, the API is a link which is provided and it always suffix with API key. And this API key, what we got for our account. So for that, after you paste this example API, we can then click on Send. And when I send a request, then I will get all the data about, for example, some movie. And this movie is called Fight Club. And there is description about movie popularity and all of these information and reviews at countries, runtime, spoken language, all the data which I need. And it's exactly the same data which you see on their main website. So for example, I will go here and I will check Fight Club, which is like a movie. Or we can click on any movie, for example, the Simpsons. And then you see description overview, and you see who are the actor. All of this comes with the API, which I showed you now in the Postman. So for that, you need as well to use that API in your application to display, for example, as you see also an image so the user can click on it and see some detail. Okay, let's take a look to the documentation of this API. As you see, there are a lot of information you need. So for example, there are movies and inside movies, there are a lot of information like get images, get credits, good changes. Raid movie for example, get latest movies, get now playing movies that are, for example, I want to get popular movies and popular movies. As you see you go and try it out. You will see the same link here. So to test this API, you just need to copy all of this URL, go to Postman and then place it here. And then you need to replace this API key between all of those arrows with your key. So I'm going to my account again. And then I'm going to and copy the API key. And then I will go and replace with this API key as you see here. So now I have all the information. It has some other information like language and pages because it will be multiple pages, like page 1, page 2, etc. So let's click send and wait for the response. Nice. We got a response. We've got multiple pages or multiple like results. One or first of them is first movie and second movie, third movie, as you see here. And every movie has like some name or title and it has like some image and overview. So far that always you need to follow the documentation to get what we want. And during the course, I am going to use this documentation to fulfill what do we need for our application. So what is required from you now, just register on this website, create an API key, and then we are going to move to that documentation. And we will see in the next lecture during building our application. 19. Creating Movies App Project: Okay, now let's create a new project. The project we saw previously that we created a Hello World project or something like course project, which we saw in the introduction. But now we are going to create a new project for our movies app. So to do that, we do that same step. We open the terminal by clicking Control J. And then we are going to write the command MP x React Native in it, and then the name of your project. But before that we need to know where are we. So now I am opening the terminal ay, you need to create a folder. So I prefer to create the folder on my desktop. So let's say, for example, to know I am now using Mac system. Of course you, when you are on Windows, you will see the folder where you are opening Visual Studio Code. But now I just opened Visual Studio Code. I am not in any folder because if you click here, there is nothing. So first of all, we can open just the terminal and check where are we? So I will type LS, like list for me, the folders where I am in. So I have here all of those folder. I'm going to desktop. So you can say desktop and you press Tab, it will do auto-complete. And then you can say clear, like you can clear the screen. Now you are under the Desktop directory. So let's create now a new directory. We can give it a name, For example, projects or for example, applications in general, like where you are going to make your applications. So I will give it for the exam make dire, which is creating a directory. It will create for me a folder on my desktop and I will give it a name, applications, not just that it. So now I will say CD, like access, the applications. Like I am now under Applications here, I can put my React native command, as we saw previously to create an application. So how we can do it and px React Native, and then in it. And then I give a name for the application. For example, I will give movies at, in this case, I'm going to run and it's going to download for me the templates and all required files as we saw previously in the introduction. So I'm going to skip this video and come back to you when all the files are installed. Okay, so now my application got installed and we have now their recommendations which we got used for. So I'm going to go to or navigate to the directory. I would say cd, movies app. And then I will go inside the movies app. Let's be sure that we are inside. We type ls, okay, we are inside here. So now let's open the project in Visual Studio code. So I will go here and then I would say Open Folder. I will go to my folder, to the desktop applications, and then I will choose movies app and then open the project. So as you see here, we have all the files which we talked about before. So let's open the terminal again, MP x, React, Native, and then run. So here you can choose a system which you want to work on. In this course. I'm going to work on iOS system. And of course, when we finish the application, I am going to show it to you on Android as well. So let's run the application on iOS. So my simulator where to start. And then we will be able to use it and see the application which we have created. So our application is running now as you see on iOS system. So what we need to do to replace all of their default code which we had or had created here, and replace it with something like Hello world. If you remember, we have created an application which is called Hello World. And to get the code back from this application, you can go to the documentation of React Native, and then you say introduction. And then in the introduction there is helloworld application. You can use it for startup in that project. So first of all, I am going to copy this code. There is two types of like React Native styling code styling. So we can use one of them. For me, I prefer to use function component because it's shorter and easier to read, not like a class component. So you can up to you, you can choose one of them. Function component. Let's take this one and take all of this code. Go back to our Visual Studio. Let's make the screen like normally I develop in a way like I put this screen like this small size. And here the application. And also we make this smaller here. So we can work with more freedom. So in the app.js, Let's remove everything and put here our code. And then we save at our application will be eroded and restarted and you can start coding here. So if you remember that we have set up all like prettier, all the configuration which we are needed for coding in React Native. So all of them, they have configured by default, you can add your configuration as you want. So here we have the app application. Let's remove all of this and rename it, for example, to app only. Like you don't have to have Hello World app, it's not nice. So we can just rename all of these to add in index.js. You go there and you just make sure that you are importing app only and everything will work fine. So we save, we have app.js and now we are ready for coding. 20. Create Data Service Display Popular Movies: Okay, we saw before how we can grab data from movies API, which we built previously, or which we got from the movies database. So as you see here, I am using Postman and this postmen, for example, I am using one of the APIs to grab popular movies. And popular movies are returned in this way. So there is a field called page to refer the number of the pages which we have and also their results. So inside that is all, it will be array of movies. So what we are going to do now that we need to display, for example, list of names of popular movies which are coming from this API. So to do that, we need to use a services. And using a service to grab data from the API, we need a library called axis. So we go to the terminal and we need to install a library which is called axis. And this axis, you can install it by MPM or NPM install and then axiom. So after installation of this, make sure that you are in the folder of your application in the same level of package Jason. And you go and check package Jason, you will see that axis is added. So after that, we can use axes easily. So how to use axes? Let's go to the app.js. And here we can say import axioms from axis. So it's very easy because we have installed it already. So I can say import axis from axis. So before opening the application app, I go here and I define a constant like in general. And I gave it a name, for example, get popular movies. And this will be a function defining a function will be in that way. So we can say that we have a row function, as we saw with the app function. So the app is arrow function and it's opened in that way. And you can do what inside it. It's like function and then get popular movies. And then I opened those tax. So it's exactly the same way. But here we are doing it in different way because we are using ecommerce script or ES6. So we have to get used for the styling of functions. So I want to store the returned list of popular movies in some variables. So I have here constant. And I gave this constant like a name. We say response, which is the response which comes from the API like this one. And then I'm going to have the response using axis. So I will have here axis, which I have imported here. Axioms is behaving like Postman that we can say in the background. Because I give a GET or post or both, or delete anything from the API. So we are going to use get. So when you put a dot, then you will get here multiple methods. One of them is get. So to get the data, as you see, it's asking me to provide with URL and this URL string. If you remember, we have that previously and we saw how we build this URL. We got it from the API of movies and we passed the API key between it. So now I am going to use this link and I don't need to have the other parameters like language EN us unless if you want to have a different language of the movies for now, I'm going to just use it like this. So I will take the main API URL and then movies popular. We saw how we get that previously. And then the API key. So I will copy this part and then go back to the code. And here I will place the same string which I have got from movies API. So we place this drink. And then the best way to know if we are really getting response. We've used console log, look log, and then RESP, and that's it. So let's see what axis is returning for me. But first, where I can call this missile, do we need to call this method when the application is running? So if you remember, we were consoling globe something before return and it was getting executed every time I reload or refresh the application. So we can use it here. So I can say gets popular movies, the same method which I have created here. So let's save everything. And now after I save the IC that the application is loaded, but we need to see the console log to the console look is in the terminal. If you remember, our terminal, we have created and it's opened automatically when we run the application. So I'm going to make it bigger to see that data. And as you see here that we are getting null because we are saying here, like we are getting some API or some response, but it's empty. It's totally empty. We are not getting anything like you're 0 something and understandable. So we need somehow to get the right data. This because that method, these get popular movies is executed before this getMethod, which is provided by axis. Because this method you must provide like wait until this happened, and then we can console the response. So the response here is getting nothing from axis because it's not finished yet. We need a time, we need to wait. The API okay, responded to me and then I can continue to their console log. So how we can solve that, we need to use Asynchronous JavaScript. We can add a keyword before axes dot get. We can say like Wait, wait until the response is ready, and then continue with the code. So how we can do that, we just say here, await keyword. This await keyword is reserved in JavaScript, but it requires something that container method, which is this one, must be a sink. We must make it async like how we can say like it's ice synchronized method, it's isochronous JavaScript. We need somehow to wait for the response here. So we must in that way make this method as asynchronous. So let's save that. And then our application will be reloaded. Let's go to the terminal. And you see that we got all the data. We got all the data in the console log exactly how we have them in Postman. So it shows us that all of the data are coming, which as we wanted with extra data. And as you see, it's a dirty a little bit. We need to align it because it comes as JSON and we need to align those JSON data, how they are coming in the back-end. So to see the response as we have it in Postman, as you see here in the console log, we can do like some trick which will be in JavaScript. So I can use a JSON library. So it's called JSON or with capital letter and then stringify. And this stringify method, I can surround their response around it, but you need to have extra parameters which are null like this. And then the value, some value which is a space which will be 2. So in that way it will give a format for the JSON exactly how we are seeing it in Postman. So I am dust string defining the response. And I want to display it somehow more styled and formatted. So when you save and go to the terminal again, we will see the response is working by that. So you can see the JSON response in more nice way. So in that way we are ready for grabbing the API. But first axiom is putting extra data over the API. So for example, you put data and then he put another information about the API, about the headers which we don't need and we don't care about. So we need to get only the data because the data will return for me only page and results so far that as you know, we need check how the response contained. So what is containing, so I, I put dot and as you see here, that axis returned for me extra fields for this response. One of them is data. Here, the data is stored data which are coming from the API. Other things like status headers, we will see them. We will see like for example, the status for 0 for like the API not found, et cetera. So for now I'm going to get only the data which are coming inside that response. Let's say go again to the terminal to check if everything is fine. We go to our terminal. Okay, nice. We are getting now only the data, but it's very long list. Let's take one movie. So here, if you remember, I get the data and inside the results, It's array. And inside this array will contain movies. So every member of this array is a movie. Let's take the first one. So I will go again to the code and then I will say here, don't return for me, the whole data returned for me, results. Okay, you cannot find here results because the data is any, it's unknown. We cannot see in the editor what the API is very tiny returning. So I have to make sure that okay, I get results. And then exactly how we got embossed man or in the terminal. And then I will get the first result. To get worse results, we put this array tags and we put 0. So first entry of this array. So I go to the terminal. Again, we go to the end. We can see lobe here. So it means like it started a new log. And in this log, you see we got one movie. So that's very great. Now we are ready to display this movie in our application here. 21. Display Movie Data: Okay, So now instead of displaying hello world, let's display one movie and the movie which we got in the console. We are going to display it here. Okay, First of all, we have to distinguish between the template or the template of React Native and the JavaScript code. So in that way, when I get some data through a service, I want to display them in the template. How we can do that. I cannot go like this. For example, I go here and I put the method here and then okay, that, that I got displayed. No, it's not possible like that. We need first to get the data to our application, which is in AP function, and then display the data which is returned from the API or from the service itself. So first of all, we have to return the data. So instead of console log the data, I want to return this data. So we can say in that way return and the data we don't need anymore to the JSON stringify because we used it only to style that code in the order the output in the console log. Now we have more and movie returned by this method. Or we can call this method get popular movie, but now we have it movies. So let's return all movies first. So this method will return for me popular movies. But this method, How now I can use it in the application. So if I go now here and I say dot after the method, after I call it, I will get here then, because this movie now is returning a promise. Why it's returning a promise? Because I used it as async method. And async methods, returning promises. Promise mean, like I promise you to give you data once I get them. So here, this method, it's promising us with git acts years when the data are ready, then it will return them to us. And then is a callback function. So we can use the callback to get the data which are returned from this function. So I can do here like something like we can say movies. And after that, it's a callback function. So we can use a row method to get the movies back. So we can just, for a quick test, I just want to console log here. So to be sure that I am really getting the movies here. So let's take also the first movie, because here we returned only the results. So after that, I go to the console log, okay, everything is fine. I got the first movie. Okay, now our case is just to replace this Hello World, for example, with the movie name. Like I want to use original title field. So I want only to print the original title so I can say original and underscore tight. Okay, now, as you see here in the log, I got only the original title. Okay, so somehow we need to replace this HelloWorld with the method or some valuable which I can create. For example, I can give it a name like title. And this title will have, for example, initially some title. So if I want to use this variable inside the text here, so instead of hello world, I can put it here, but not only title, but we can surround it with curved brackets. So here I can do a curved brackets. And then I scanned say here for example, movie name. Okay, I have here the title, movie name is printed here. Okay? Now if I go and I say, okay, don't console log but make Title is equal to movie name or the movies original title. When I save, then I will see that I am still getting the original name. And it's like it's never went here. It's like title, it not changing. So when I reload the application save, it's still on movie's name. The issue here is because that the title is set after the template got initialized. So maybe this then is getting executed after The title Gut initialized in the template and rendered and displayed. So we need somehow to update the title. Even the template is loaded. So for that we need to use something called state React native. State is very important. We don't use normal variables like this. We use the state. So anything or any variable you want to create and display it in the template, you need to use it as a state, especially when this variable are getting updated after some period of time. So how we can do that to define a state, I'm going to use the same thing. So we can say const. And then I open an array, and this array will have two things. For example, the variable name which you want to create. For example, I will give an aim like a movie. And the second parameter of our second item of this array will be setting the movie. So I want to make set movie. So this will be a method where I am going to use in my application and use it here when the data are ready. So we can go here and say Equal to use state, uses date. It's going to be imported from react. So it's something internal in React. So we are going to use this valuable as a state variable so it can get updated after I make, for example, the render that template. So for that, I go here, I don't use a title anymore. I just say set title or sets movie. And this movie, we'll have not all only the title because we are going to use a title somewhere else. So we set the first movie which is returning from the service to set movie. In that case, movie, we'll have a state or it has a value of the first movie which is returned from the service. So when I go here to the movie and replace it here, then we save, we will get an error because always a state you need to initialize it somehow. It's not always, but it's better to initialize it. So now for example, I can initialize it with empty string. So this date or this movie will be initialized as an empty string. Of course, we are going to see how we can handle that in different way, but we are going step-by-step. So now I save, but we are still getting an error. It's saying objects are not valid in React child because here movie is set to a movie and this movie is one object. If you remember, postman, this movie is an object, contains adult author, you an overview, popularity, et cetera. So we need to use one of fields of this movie. So I will say here, this movie dot original title. So I want one field from this movie. So when I reload the application and save, I will see that I got the title of the movie. Okay, You can add another thing. For example, we can add, like we can say, let's check the fields here in Bozeman language. Okay, we can't get the original language and we can display it in here. The unholy and then E n. Of course you can mix also with the strings so you can say movie name. And it will be something like the unholy. And also the language. You can say it will be e n. Let's add another text field. For example, let's take duplicate this one. And for example, we go to our API and we get release date. And we go to the release date, put it here. And we can type here release. And we go and reload the application and we will see the release date is here. So in that case, we used the state, which is very important because the state is automatically setting the variable after some period of time or the period of time, I mean, here is getting the data from the server. So this is how we are displaying the data from the API to our application. 22. Using Effects: After the previous lecture and maybe you noticed that the CPU of your PC got a higher and it's using a lot of resources because of the change which we made previously. So I made separated lecture for that because it's very important before we start our project to know this issue. So as you see here, we have our Movi app in my activity monitor or in Task Manager in Windows, you will see that it's using 183% of the CPU. This is because that we have making the state management without using the effects. Affect is something to let you perform side effects in a function component, which is like reflecting the relationship between the DOM and also that state of your application. It's very important when you are using some async methods and you are sitting estates or setting a variable, you things estate, you need to use effects. So how we can use those effects? Normally, affects can be used after defining the state variables. So you just go here and you can say exactly how we made here uses state, you are going to use effect. So we can say use effect. I'm explaining it in simpler words if you are not familiar with React. So now we have this huge effect. It will have a callback function or callback method, which would contain and run for me the API which I got or the service which I have created to set a movie. So always with that FH King setting up subscription and manually changes in the dorm with React required to use effects. So it's better to have them do not have unlimited loop between the DOM and also the state management in React. So the effects are running one time only to make sure that we are only getting the data once. So for that as well, you need to pass a parameter which is coming at the end as a second parameter OF US effect function, which will be an empty array. So if you want to update the data or call this async function multiple times, you can specify time here. I want to update my data every 1 second. So you will see in your application this data are fetched from the database or from the API every 1 second. For now we needed only to be executed one time. And use effect is coming as well from react exactly how we are going to use estate. So let's save that again and reload the application. And you will see now how my activity monitor is calming down. So as you see here, movie app now is using 0.3% of the processor. So in that way we are doing the right thing. Be careful. You have always to use the effects to do the right management of the states between the DOM and your state in the application of React Native when you want to check the performance of your application. For example, to see how much memory it's using and how much, for example, what are the requests are going there. So it's better to use the tool which is provided here with the developer tools. So you can monitor your network and also your performance. So you just need on the phone to press Control D. And on Control D you will see short inspector. So with Show Inspector, you will see multiple things. One of them is network. So for example, when I reload the application, I will see that my application send a request to this API. And then when you click on it, you will see details of it. So it's very important to use this to know what is happening there. So I want to show you how, what will happen when I put this method, which I am calling the data for outside of the effects, like how we did, how it was done before. And I will show you how it's doing that. Unlimited times. So when I click on it, you see it's unlimited times. It's asking for data from the server, which is totally wrong. Let's stop it fast to not have an issue here. So now, if we see we are not having any more this loop. Also there is something else you can press Control D to C also the performance monitor. It will show you always how much application or your application is performing here, which is very helpful, beneficial for your application. So you can always watch how much RAM is using and how much another data, which are very helpful for you during development. If you want to know about affect hook, which is coming from React, you just go to React js.org documentation and then you count find hoax effect. You will understand it more with you don't know anything about React. But in this case here, you can just consider that the effect is managing their state and their functions and fetching the data between the DOM and also the React Native application. 23. Services Error Handling: Okay, what if we have a problem with our API and the server is not responding. So we want to display a message to the user somewhere here to say that okay, there is error in the server. So to do that, it's very easy. We can implement that very quickly. So first of all, we need to see if we have error or not. So after then, the then method, as you see here, we can have something like catch and catch. You can catch the errors which can happen in your API. So I will say here error, and it will be exactly a callback method as well. So this callback method, I can do something like console the error or replace error message. So far that I'm going to use another state constant, which will be called error. So this one will be here, error. And then I can say set error. And as well, we are going to use the state. So for that, I will say that set error will be here, the error itself. So after that, we are going to display error message to the user if there is some error catched. So far that we can, for example, use text tag, exactly how we did previously. I'm just making the things simple. You can understand it. So here we will have a text and then we can display like error in the server. And also you can make some styling on it. You just make a style. And this style you can be, it can be an object as you see here. It's exactly the same of the default. So this style can be as well color. We can give color, and this color will be red, for example. And let's save that to see everything is fine, okay, we have error in the server. So I want to show this message when there is an error. So how we can do that? So first of all, you make object. So here you have to open two brackets. And this brackets we contain the state constant which we have created previously. And then you can say and add inside this object, you put this text, so you cut it and put it here. So when there is error, then show that text. That's like if there is error and text, then show it. So that way. So when we save and as you see, I got an error. It says text string must be rendered within a text component because this error is initialized as a string, so we need to give it an initial value. So the error by default is false. Like we don't see any error by default. But when this sketch will update the error and make set error to be error. And then it will be have a value and it will be something which can be rendered here. So for that, we can just initialize this to false. And then, okay, everything is working fine. We don't have error. Let's make mistake in our API, for example, I'm going to remove this letter here, the b. So when I make Save, I will see that I have at or in the server. When I remove it, the error will stay because we have not three loaded the fully the application. We need to empty their state. Here we are just using a hot reload. Hot Reload is just doing the things which are updated in the DOM. But we need also to reload the application, to reload all this date here. So how we can do that? So you just need to go to the DevTools again. And then we want to reload the application totally. So you can click Control D and then you have something here, reload. So in that way, you will reload the whole application again. And you will make sure that you are not updating or having this error again because we have the right API. So this reload mean that I am opening the application. The user is coming to my phone and open the application for first-time. So this is the meaning of this reload. It's very important to know it that you can reload your application or you can press as well. Control our control are will help you to reload the application totally without opening the Dev Tools menu. So when we make a mistake here and save, okay, We will have the error. Let's reload the application. Okay, we have movie name language trees, they are empty, so we don't have any data here because our API is wrong and it's giving us an error in the server. We will make all of this beautiful in the next lectures during our course. 24. First Section Refactoring: Okay, in this lecture, Let's do some refactoring. For example, always the services which grabbing data from the server, something like that, are coming in separated file. So I'm going to create a new folder here. We can make it in the root of the folder. So we can create a folder, we can call IT services. And these services is going to contain my services, which I want to create here. So I created a folder and then we have a file. We can call it services dot js. Inside the services, I'm going to have the call of this API, for example, I will take this one and go to the services and put it here. So what I need for that to import axis. So we need as well to copy this Import and go again to our services and then put it here. So now we have get popular movies, but get-go popular movies is now undefined here. So we need to import it. So first, I need to export this method. So be careful you have always to export the things in way to use them in another files. So here I will have also import and I'm going to import this method. So here this is the method. And then I say from, and then this will be dot like I am in the current path of app.js and then I will say services, and then I would select the service file. So in this way, I have imported the method in the right way. After that, Let's save everything. So I save the services here and as well save their services in the app.js. Now we make sure that everything is working fine. We have separated our services away. So another step we can do here that we can do some comments, we add side like some comment. We can say like to explain this method. So for example, I can say get popular movies. So in that way you can explain to other developers that this is service for getting popular movies. Also, we can make something great like we don't have to add all of this Nyquist goes, we are going to create another services in the future, so we don't have to repeat this URL multiple times. So for that, I prefer like to use something like a variable. And we can use this variable everywhere. So I can say here const, and then I can give the valuable some name. We can say API URL. At this API URL, we will have this thing here. So after that we can use this API URL as we see here. And then we can combine it with this movie array. So how we can do that, we just need to open something like called a backticks, this sign and this line you can use as dollar. And then with this, as the lawyer can put variables which are inside same file. So you can have here API URL and inside this API URL or after it, you can say slash. So it would be considered as a string here. So all of this, what is written here, it can be a string, so I can copy all of this part and remove this string also and pasted here. Also the key is very nice to have it separated, also valuable. So we can as well create here a key. We can call it a constant. And then API key of our API, and we give it inside that string. So here we have API keys, or I just need to call again these as dollar sign. And after that, I will put the API key in this way. So I'll make sure of the URL. So the URL already built like with this prefix, as we see in our API. And then we can have slash and then more v popular. What do we want to get? Because we will get popular. We would get family movies, we would get upcoming movies. It's the bend. And then I will bass a question mark to pass the parameter of API key, which I stored in API key here. So let's save everything and check if everything is working fine. Let's make Hot Reload or full reload. Okay, Nice. We don't have any issue here. So now we have the services in separated file and you can create another methods. For example, here we can make the popular movies, we can make pop upcoming movies. For example, the upcoming movies API will be followed with upcoming. And this is already, I know from the API documentation of this movie's. So we can say here, up coming movies because we are going to use it as well in our application. Let's also check another APIs. For example, save here. And let's take another APIs which we can have from the documentation. So I go again to API documentation of movie database. So let's zoom in a little bit too, so you can see it well. So here I'm going to go to movies, for example. Where is it Here, movies. So let's get some APIs which are going to use in our application. For example, we are going to have popular and upcoming, as I told you, maybe you can get also top-rated. Let's take a TV series. So for example, we have a team and get as well the popular one. So let's get popular. And here it's exactly the same. So it's exactly like the movies, but we just need to add here. So we copy the popular movies one and then we pasted here. And we can say popular TV is d dt of movies. And here we will have as well TV like we can make it this method get popular TV. And we just change this to TV is Td of movies as we saw the documentation. So we save, now we have the popular TV. So in this way we got all the APIs which we will need. Maybe we will need more as we will see in the application. So we are going to add them to the services and how we did edit factoring here. So in the next section, or for now for this section, we learned how to use the API. So we learned how to grab data from the server and display them on our phone. And then we will see later how to style the things. We will start with the homepage and we will build the first page of our application in the next section. 25. Creating Home Screen Component: Alright, now in this section we are going to see how we can create the homepage component. As you see here, I'm able to navigate over the movies through a slider where I am going to create in the homepage. And as well, I have multiple sliders for every type of movies. For example, as you see here, we have popular TV show, we have family, we have documentaries, all of them, we call them in the services. So I have this running version on my device. I am using visor, but of course we are going to implement that and continue our coding to reach to this level as you see here. So first of all, we are going to create a homepage component. And this homepage component, we will call it in App component or to the entry point of our application. So when I open the application, I'm going to see this. So let's start now with creating the homepage component. Okay, at the beginning, I would like to move all of this code which we created previously to a new component. We call it a homepage component. So first of all, let's create a file or a folder. We call it screens. So I click here on this icon and I say that I want screens. And if you see like sometimes it's created inside another folder, just click away again and then just click, for example, on app.js to be on the root level. So then you will be able to create the folder on the root level. So I'm going to give this name of this folder will be screens. And inside this greens, I'm going to create a new file. And this file will be called home dot js. So we can say this is the homepage of my application. So if you remember before, I told you to install some extension is very important for speeding up our code. So for example, I want to create a component quickly. So with React Native snippets tools, you can also create a component. So I want to show you that. So when you go to the extensions which we have installed previously, you will see a lot of comments. One of them like we can create stateless component return. So we are going to use this format because as you see here with React, we have a component and then we have a return. So here we can define our variables because I want to show you the both cases. So if you go here, we will say, for example, let's create this one stateless component. So I will say as L and it will automatically complete for me. So I would create a component, but in that case, I don't have a return, so I cannot define my variables. Easy. So now we can create another component, which is with S L return, stateless component return. So with that, it would create for me a component and also whether return and all of the things in every component as well. It's very important to import React. So also there is a comment for that. So in this extension, if you go there, see IMR import React. So how we can do that quickly. So you just put here I, MR. and then it will import for you react quickly. So now let's move the code from app and then to homepage. So if you remember, we have in the app.js, we define some valuable. Let's move all of them. Let's make a gut like we can cut them totally before the return. So all this variables before return, we are going to take them and place them here before the return of our home application or homepage or Hong component. Now, we are going to take everything which is inside this view. So we can also take all of this, all we can take all the view. So everything inside that He turned off app.js. So we go here and we paste it inside a return of home component. So we paste everything here. And we don't forget that we copy the imports. Let's now copy them, not got them because we will need some of them later. So now I am going to copy all of them and paste them here. So when I press Save OK, it will be automatically formatted because I have prettier, nice. Now I go to AS and then I save, then we wouldn't get error unexpected token because we need to put something inside this app. We need to put a view so we can as well put this view which was here with the Hello World application. If you remember, it came with some styling. So let's copy the same and put it inside here, the view, and the view is going to be closed as you see here. So after that we save, okay, everything is fine. But now we have empty app.js. So we need to call here the home component, the home which we created here. So for that, we can just type as a tag home. And as you see, it's suggested to me to import it from screens home. So in that way, I can also import this one. And as you see here, we have import home from screens home. When I save, we get an error. This error comes from the home component as you see, because the home component, if you remember, is inside the screens folder. So when we are importing the goods popular movie service, we need not to be on the same level of the folder because here we have inside this green folder on JS is inside screens. So we need to move one step up and then we call the service. So I need to move up. And then I enter to service component or services folder, and then I call the services JS. So to be sure more you can delete all of this and you put dot and then slash. And it would suggest for you the folder. So you will see that there is no any folder. So you need to go one level up. So when you go one level up, you will have access to the folders which we created on level upper of this home component. So I go to Services and then slash and then I call the services, the services dot js. So now everything is fine for the home component. And as you see, the app.js called the home component inside this view. And then it will be rendered exactly how we created it here. So this is a way how you can divide your application. You can say, for example, I will have home screen, I have searched screen, I will have as well a detail of the movie screen. So in that way, we will be able to divide our application. And also, you have to remember that if you don't get all you don't put style here, maybe you will not see anything if you put only view. Because now you cannot see because all of the items are here. So we will talk about styling later. Let's give the things like this now. And we just save as it is. And just at the end we remove the imports which we don't need. For example, we don't need this one. We don't need at, well the effects and we don't need this one, which is called text. So let's save everything. Now we are green and we can work fine. In the next lecture, we will see how we can create the slider, the first page, or the slider which is on the top, which contains images of my movies. 26. Latest Movies Images Slider: All right, In this lecture we are going to see how we can create this slider. We would grab the latest images of their movies, of latest movies. And we are going just to make a slider so it can be swiped automatically so that people, when they opened my application, they can see images of latest movies. So for this slider, there is a component which is called React Native slider. We are going to use it. So using components require always to install some external libraries. For that, we will install a library which will contain this slider and we will use it in our homepage components. So let's move to our code. There is a library which is called React Native image slider box. So let's put it on Google. We can say React Native image, slider books. So all of this name, you search for it and you will have it in NPM library. So now we go to this library and we can see documentation about it and how we can use it. So as you see, we have here the library. So first of all, we need to install it. So we go to npm, install React Native image slider box. So let's go there and we are going to open the terminal and then we paste our comment. So npm install, React Native image slider box. So until the installation finish, let's take a look here. So we can have, first of all, some components. And these components, we can use it in our template. There is also an example. So you can say here, import slider box. We have to import this slider box to our code. And then we create a view. And this view, which will be a slider box, will contain array of images. So we are going as well to build this array of images. So here our library got installed. Let's go there and to the documentation. And we will see first, like we need to import slider box from the native image slider box. So we go here and in the homepage component, we are going to import that slider box. And after that, let's close the terminal or hide it somehow so we can have more space here. And then we are going to see how he is using this component. So in slide there, a box in React Native, he has slider evokes images. So it's require us to have some images. So let's remove the part which created previously this one movie name and all of this stuff. So let's remove them so we can keep only the view because I told you the view, it will be like a div for me, a div or a container which will contain everything inside it. So we then go to their documentation and we call this line. So we say slide there walks images. We'll go again. And we call that slide there box as we imported here. So let's save that. We will get in the simulator and error. But don't worry because we are not having the right images here. So we need to have all create the images. So for that, first of all, we need to create a state variable. And this state variable, it will be filled with the images of upcoming movies. So let's call this constant not movie. We can call it movie images for example. So we need to set as well this to be movies or movies images or more of these images. So in that way we have the right naming. And now we will use that so we can get popular movies. But in our case, we want to grab the upcoming movies. So we created a service before, as you remember, we just called get upcoming amorphous. So let's get them. And I am going to keep this one, keep this method. So we will create another call for keep upcoming movies. And these keep upcoming movies, we are going to call it again from this airless. So in that way, we need to import it as well. And it will be exactly the same. So we will need also then and catch. So we can as well use the same syntax which we have created here for popular movies, but we don't have set movie anymore. So we can remove this part will not have an AdWords. So we will come back to this service later when we are going to use or create the other sliders. So for now we are going to have set movies images here, but where we are going to use it. So we need here images somehow. We cannot have the movies, the whole movie. So for that, if you remember, I am returning the movies with their callback here. So we can use this callback to create a constant. So I will create constant, I can give it a name which is called movies images. But this movie's images to not have a conflict with this name. We would give it as well some suffix. We can't call it an array. So in that way it will be initialized with empty array. So when I get the upcoming movies, I don't have anything in that array. So we are going to fill this array. So we will say movies. Images, array dot push. So we are going to push movie by movie. So in this way, we will have here multiple movies. So before that, I will go here to another line and I will say movies dot for each. But we can write that, no problem. So you can have movies for each. Because if you remember, we were returning from this upcoming service. We were returning always data dot results. And if we go to Postman, as you remember, we have here in the array results. So all of them with Come here. So let's go back to our code and then we will add exactly the same syntax. So for each movie inside movies array, which is returned from the API, I will get a movie. So from this, for each, I will get a movie and this movie or a callback function where it, I can use it to use this movie from that callback function. So I can move then these movies array to push the movie, which I got here. But we don't want to push the movie itself where you need to push only the image of that movie. So if we go again to Postman to see what is the content of this API, Let's take first movie, for example, as I told you, results contain multiple movies. So let's get the first result. One of those fields we have bolstered path. And in this poster path, I will get the image of the movie. So let's get this one. I will go here and I will say more. We don't poster path. So push for me movie poster path. And after that, movies images array will be set movies images. So we need to set this variable or this date variable which we created. So here I will say movies images array will be inside movies images. So let's save everything. Now, we have formatted our code, and in that way, we will be able to use movies images where in the slider. So we will have here slider box images. It will be the movies images. So the field movies images. Let's save that and go to our simulator. And we will see that we cannot see anything because we need the partners. We need as well, the full path. If we go to Postman, we will see only part of the image, like only the image name. So this must be prefixed with something. If we go to the documentation of the movie that obeys API, there is something here after the introduction which is called images. At inside this images, it will show us how we can get those images because as I told you that Boston bath is returning only the image name. So to get the full path of the image, you must prefix it with the link where you will get this image. So let's prefix our image path with that name. So in that way, so when I push the items to the array, in that way, I just need to push as well the path. So we can say here, just push this link which we have copied before, and then we say plus. So you can say this as prefix. And then the poster path which is coming with the movie as you see here. And it's coming always with a slash. So you don't need to put a slash in the code. So we can remove this slash, because in this way you will get two slashes. So after that, we can save everything, go to our simulator. And as you see, we have here the images. So now we are getting the latest images of the latest movies or upcoming movies. 27. Styling Movies Images Slider: Okay, now in this lecture we are going to see how to style this slider. First of all, if you see here that we have some complain from ES lint, which is like fixing for me the errors in my code like live, I talked about ES linked previously. So ES named is complaining that we have to put the styles somewhere outside of the component. This is like coding style, like nor inline styles. This is called inline style. So when you have inline style ES lint, we complain about it. So it's better to put them somewhere outside of these component. So how we can do that? We can't define outside of home component, as you see here. Outside, we can define a constant. We call it styles in general, like normal styles. And this styles will be coming from style sheet and stylesheet component. We must import it from React Native. So I will go here and I will call the React Native style sheet from React Native. So when we go back here now, I will have a method inside this which will be called create. So I will create a styling file or multiple styles which I can use inside my component. It's like for us in case of HTML, like a CSS file. And this CSS file will contain classes, so I can use them in my components or in my HTML tags. So how we can create a Classes, let's call it a classes now. So the way like we have an object and then you define your classes. For example, for this view, I will call it a style container or slider container. So we can have here slider container. And this slider container will have some properties. Our exactly mentioned here. So I can cut all of this off and then based it here. So in that way, I have defined my glasses. So everything center, center. So of course when you remove all of this stuff, I will show you later. So we have to use this class slider container somewhere here. So how we can do that, we just say styles dot the styles. Which one? It's this one, which the constant which we define. So styles. And then I put the slider container as you see here. So styles dot slider container, it will call those styles which are created here. So when we save, we will see that everything stays the same. Let's give, for example, some space from the top. For example, this just for an example to show you that the styles are working. So how we can give some space, we can use batting top padding top is making a space inside the container from the top, like not outside, not pushing all the container. If you want to push all the container, you can use margin. So we can say margin top, and then you give a value in pixels, so we can say 20. And now as you see, it's pushed a little bit from the top. So in that way, we are sure that our container is using this class or this style sheet. We can say if you remember that we have like some height of this slider, it was taking almost half of the screen or three-quarters of the screen. So we need to give a height for the slider books. So when we go back to the documentation of the slider, we will see multiple properties. For example, we can say the images which we used previously properties. I mean they are props which I can pass to this component, for example, I can pass images, I can pass another options which can help me to style it or do something with it. For example, disable on press. It's like if present, then the unguarded image breast will be disabled. For example, Slider box hide this one which we need. It will be by pixel. It will give a height for the slider and also bought into it dot color because there are some dot autoplay. This is nice. Let's use it. We can say auto-play like it will automatically sliding whenever you open the application. So we can set this property as well. After the images I made space. And then I say auto-play. And then I open an object and set it to true. So it's Boolean, it's taking values ball. So true or false, default is false. There is as well, cycle, loop, cycle loop. It mean like we can say an infinite loop. So the user, when he slide and when we get the latest images, he would get again back to the first image when he's still sliding or swiping. So we can also fit this one to true. So we can go to the code in the same way. We put space and then we open an object and inside it, we said at rule, let's save that. Let's see if our application is still fine. Nice. So if I go now to the home images, like somehow. I keep sliding. I will get back to the first image again. So if I keep now sliding, I will get you see the first image again. So we are sliding in a loop. So as well as I told you, we are going to use slider box height. So we can use as well this property and we set it to integer to a number. And this number will implement for me the height of this slider in pixels. So we can set, so we say here space. And then we put the property which we wanted to put. So we will have slider height and then we give a value. So I will put here equal, and then we can put a value, for example, 600. We can forget, say like here, 600, it will be in pixel. And as you see, I have here, thus lighter, bigger. But we have an issue here. What about the small forms? Because when I put here to the height static, then maybe on small forms, this slider will be bigger than the font size. And then I will have like half of the image appealing, which is not nice. So it's better to get the height of this phone or of any form where is my application is running? And then calculate this. So we can say 1, 0.5. So what we can say, for example, use three-quarters of the screen for the slider. So how we can do that in React Native is providing me with the dimensions of the phone which I am using. So how we can do that? We can import something from React Native, which is called dimensions. And those dimensions, it contains two properties, width and height and width and height will give me the height of the phone and the width of it. So to prove that, I want to show you, we can define a constant. We can call it dimension or weekend, define this constant somewhere out. So I say here const. And then dimensions, we can say diamond Russians. And this dimension will contain also a property which is called get. And this Get, it has a property which is called screen. And then we say git screen. And in that way, I will get the dimension of this screen. So let's save that and we can console log this property. We can console log the dimension to see in the console what are the dimension which I got? So we can go to, for example, beginning of my application and we can make it here. So we can say at home, make at the beginning console.log, console.log. And then I will put here dimensions which I have defined here. So when we save, we open again that terminal to see what we have in the log. As you see we have here Font Scale. I have to make it bigger just to make it to show. So we have here now Font, Scale, Height and also scale and also widths. So I need the height, so we can get the property height and use it to measure our slider. So how are we gonna do that so easily? We can say here dimensions dot height. So in that case, I can use this dimension variable. So when we go to the slider books hide, I will say dimension dot height, as you see here in the auto-complete and then divided by 1.5, it's like a three-quarter of this screen. So when I put it, for example, one, it would take full screen as you see here. But we need only the 1.5. So let's get this one. And as you see what I put it on full, there are at the end, at the bottom some dots. So we need to remove all so those dots because we are going to put another containers under our slider. Sliders. So to remove that as well, we can go to the properties of our image slider, and we will see one property which is called dot style. Dot is dy. So we can give a style for those dots like height or the radius and etc. I am going to make this height of those dots zeros so it can be 0, it cannot be seen anymore. So we have to say here, dot style will be Hide and then 0. So as you see here, it's Eastland is complaining again that no inline style. So we can't give a style for this lighter box. For example, I can say styles dot. We can give it slider style. We can say just at all. And this slider style, we are going to define it inside, here, inside our styles and style, your style will have object and this object will have a height, and this height will be 0. So in that way, we will not be able to see those dots. But we have an error here because here I have extra brackets. Let's remove them totally. So it's enough like this. Now we have full height and those dots are disappeared. So in that way, we have removed the dots. So let's put back the height to be 1.5. And then we will have quieter of the screen. And you see now we have the styling of the slider. 28. Working with Movies Lists Carousels: Okay, in this lecture, we are going to see how to continue with our homepage and start with the carousels. That carousels, I mean, with the those components which we will see here, that we can slide among our multiple movies. Like we have categories of movies like popular, popular TV show and family and documentaries. So we can as well have a slider here so we can see the latest popular movies. So in that way, we finished the slider, which was on that top here. And we are going to work with this one which is popular movies. So we will start simple and we are going to style it and to have the right way of creating components and how we can as well works with those lists. So first of all, let's work with a very simple list or carousel. So how we can put it here in our application as you see under the slider. So we can work on that with using a component which is called a flat list. If you remember, I told you in React Native, it has also in the documentation some components. So we can go to components button here. And we will see that there are a lot of components which can be helpful and useful for your applications in React Native. One of those components is flat list. And with a flat list, you can create list of components or list of decks, or list of anything in React Native. And you can make Cardozo with it. So the usage here, so let me zoom out a little bit. So you see here that we have a list and this list, for example, now it's vertical. We are going to see how we can make it horizontal. It has a lot of properties. This component, you need to read all of them. We are going to use. What do we need to create our carousel for the amorphous? So the simplest example that we can use is this one, the beginning. So we can't say or create a view. And this view will contain for me the name or the list which we are going to call a flat list here. So the last list will be inside some of you. So let's create another view in our code. So we can go here to Visual Studio Code and then we will create another view. So let's say that would be the same one. We can give it like this one. And we can say here, not slider container, we can say cutoff cell. And this cell will have the same properties of these lighter container. So we can as well go here, define carousel and carousel, we'll have the same properties. So let's copy them and save everything. As you see here, we are getting an error. So this error, I wanted to mention that we cannot put two components on the same level in their return because this is not working as React Native, you must put them in a container component. You can put them, for example, in another view. And these views will be inside the bad interview. But for that, it will be like a little bit tricky. So React Native provided with something called React dot fragment. And this React dot fragment, It's like a div container, but it's not rendered in the application. So you cannot see, when you are inspecting in the application, you will not see anything related to that fragment. So because of that, as you see, our slider got smaller. So you need to make it a little bit bigger, as we will see later and how we are going to style it and do some refactoring. So first of all, now I am able to have two views in one component or in one fragment. So in that way, I can have also my flat list here. So let's call our flat list from the import. So I will go to React Native imports and I will ask for flat list. It's from React Native as you see here. So we go here down and we say that we want to have a flat list called here. And we are going to pass the properties which we will see in the documentation. So as you see here in this example, we have a data and render item and extractor. So first let's see what is data. Data will be, for example, our movies. So we can say the list of popular movies. Let's get the list of popular movies first. So we go here and again, we have previously defined popular movies. We can call as well a constant state. We can define it as popular movies. So we can say here, not movies, images, but we can say popular movies. And in this popular movies we need also to set it. So in that way, we will have our popular movies, but popular movies will come from get popular movies service as we saw previously. So I would say year set popular movies with movies. So the more visa callback from this service will be returned at set our popular movies here. So the data of this flat list. As you see here that we need to define data will be our popular movies. So let's see another properties. The property is called render item. So we need to have a render item. We need to split display the item, the movie itself, as you see here, we have here multiple movies and we are displaying item, item, item. Every item is a movie for me. Now let's start with movie name only. Like it will have a text to not make it very complicated, we are going to have step-by-step to grow up in the application. So we will use render item as a render item. And what is render item here? It's a function Back item, and the item will be used as a component, or he defined his own component here, which is called item. And it will be defined somewhere in the application, for example here. And it has a view and it's sided at text. I am showing you a SEMP. I'm going to show you the simpler way. So we have to go first to render item. So render item will have a call back like this. So we go again to our code and we will see how we can create a render item. So render item, it will be, as I told you, a callback which is called item. But this item will be inside an object as you see here. So we have here item as an object, this item will present for me every movie which is returned from those data. So in that way, I can put this in an object and then the call back of this function will be returning for me a component of React Native components which I can create by myself or use one of their ready components which we have in React Native. Now I'm going to use the text. So we can say that text component, which we had seen before. And I will say that inside this text component put for me item. And this item will be like this. We have object, item dot title. Why title? Because the movies are returned to me here with a title. If you remember in Postman, we have all movies, like the popular movies. So the popular movie, every movie in there is all 310 with a title or another properties. So let's take now for example, that title. So I will say here render item will be item dot title. So let's save here as we will see what will happen. So I'm going to save this and I'm going to return the movie name or movie title. So let's see our simulator. What is there? Okay, Nice. I got least list of movies names. And one of the properties which are defined in this component, which is called horizontal. So if you scroll or read the documentation, I'm not going to do all the properties. You just see what you need and then you can use it. What I need now is something called Horizontal. Horizontal must be set to true. Then in that case, I can use these items as lists, flat list as horizontal, as we see in our application, something like this. Horizontally, we don't need it a vertical. So in this way I will say horizontal equal to true. And then we save, go back to our simulator again. And we will see that we have the list here. But it's very tiny and small because it contain only the names of them movies. Now we are able to get the movie, so it's very great. So what we need here to create a component, which is like a component will make for me as a card. So this guard, we can say the movie card, we can say here. So this one, It's guard. So they will implement for me as a component. So I am showing you in the next lecture how to create your own component in React native to render it here and not using the ready components. 29. Create List Component: Okay, in this lecture we are going to move to a bigger step. So I'm going to show you how to work dynamically with React. So now in React Native, when you are going to create a component which will hold multiple repeatable things, like we have a component and we are going to use it multiple times. So for that, for example, I can say that this flat list will contain a title and also some, another component which will be exactly like flat list. And then we are going to display it like as I showed you in the demo, we have a title and then list of documentary movies. Another title which is hold popular movies and least popular movies under it. So we need properties for that component, title and the content of that component. So far that I am going to create a folder which can be called components. Just we are going to hold the components which we are going to work with. So component. And inside this component, we will put a file which will be called least NodeJS, because I want to have a list of movies and this list of movie has a title. So, and then in that case, in my homepage, I can say that I want this list component multiple time. So here instead of this, we are going to have at least four popular movie, least for documentary, least four, for example, the family movies, etc. So to create component, as you see here, I have a component and I showed you previously the shortcuts, snippets for React Native. We're using that extension which I told you before. For that extension, if we go again to React Native sleep beds, which we have downloaded here. And you will see like multiple shortcuts we talked previously about React pure components or for example, stateless components and with return. So we used this one, but now here in this case we are going to use different type, which is called a pure component. And this component, we are going to use it as a component as well to import it in our application. It the same as this one, but in different way. So in this course, I am showing you multiple things to generalize or like cover all the topics about React Native. So let's go here and say I want, for example, the shortcut, which will hold for me a pure component class. So I will go here and I say B, C, your component class. And then I will have this component. And as I told you before, we want the component which has inputs or props. And those props, we can create them in a way like the following. So you don't need this stage 4 now we are not going to use it, but inside the surrender and Rick, before the return, we can define a constant. And in this constant, we can define a props. And those props, how we can define them, for example, I need a title. I'm going to render a title inside this component. And as well, I want to have a content, and the content will be the list of movies. And this constant you have to put like this dot props and those prompts with come from React Native. But in this case you don't see any autocomplete here because you need to import a pure component which is extend so that pure component is a class which is used in the React Native. You can import it from React. So for that, we need to import React as well. So exactly how we have it here in the snippets, you can say I am import React. So we have here I am. And then you will get react and these component, it will extend from pure component which comes from react. So in that way, you will have the right import here. So after that, this dot props, we'll get defined. Of course, because this dot props is coming with the pure component, like this is what we extend from the pure components. So we extend as well its properties. And one of those properties or variables is props. So let's try now our component. So for example, I want to render a view, normal view. So we can say here have you. So we need to import it here as well. So I will say here Import view from React Native. And let's say we are going to put only the component, or for example, the title. So we can say here, we can import as well the text component. So this text component will come as well from React Native. So I've bolded here. And then this text will hold only the, like, some random text. It will hold that title, that title which is gum as a property for this component. So let's save that. And then we are going to use this component, how we can use it or how we can call it. So I am going here to create another view under this one, under the flat list. So the dipole should appear here down. So we have another view. And this view inside it, I will call my component, which component I called it list. And this list with come from where? From this component. So in that case, I need to import this component. As well here. So I have to say here Import and then list from. And then I have to say like double components and then list. So here I imported the right component from components folder. So we go again here. And as I told you, there are props. How we can use props exactly after the name of the component. You can say the props which you want. So what I want here, I have two prompts. One is diagonal, one is content. We would only title as example. So I will go here and I say title, and then I will pass like any hard-coded text, Let's say for example, my least component, Python. So just like that, because we are going to see it here. So when I save, I got an adult. Why with this element type is invalid expected a string for building components. Always, I made this error by purpose, just to show you that how is the difference between the acute components and that function components. So function component, something like this as you see here. But a pure component, you need to call them without all of those brackets exactly how we are calling react. So when you want to call a pure component, you have to import it like this or to class component. And then without all of this brackets, it would work fine. So now let's save again. And we will notice that we didn't see anything because we need to put a styling for this view. And let's, for example, now copy this time for a quick show and save again. And as you see here, I have in my title, my list component title. So in that way, I am able to use z component. So when I go here and I say, for example, add for me a string. We can say title and some number, 2 to 2 for example. And as you see that, it's come that component with that input which I specified in the home. So I said title has an input, my list component, title and inside the list component, I added it to this thing. So in that case, I see it also. So in this way you can create a dynamic components. So for that, I'm going to move this list, which we have here in the homepage to that component. So let's do that quickly. First of all, let's got all of this part. So we have here like not anymore the view, we will have only the list. So I got that flat list. So when we go again here to the list, I will remove this text. I will put here that I have the flat list, but at least we need to call it again as a component. So from here, we need to copy always all the important component in that target components. So we can have here as well dimensions dive cheat because we will need them later. So let's remove this important to have the application. All of them are imported from React Native. And here, as you see here, we need a data. And those data, they will come not from the title. They will go with the content, that content appropriately. So this content property in that way, I need to specify it as well in the list component here. So I will have, in addition to the title, I need to say content. And also like some property, which will be, for example, my popular movies. So I will put it here as well. So in that case, you will be sure that you have the right properties are passed to that list component. So again, let's remove this flat list because we don't need it anymore. And now we have here the view, we don't need it as well. So we have here to style guide or cell. So we save here, and as well we save here, okay, we are still getting some errors because variable popular movie doesn't found here. So instead of popular movies, because I told you this, popular movies, we've come through this property. So I said, content will be popular movies which I got from the backend and I pass it to the list. So in the list component, we have to use that content in steep. So let's save. Okay, we have now that list. So as a recap, quickly, we have defined a new component which is called list. And this list component will hold for me a title and a content. And inside this audit template of that, it will be a flattest and as well some title. So maybe you have another view like over this. So we can have a view for the title. So I will have as well a view here. And as I told you, you can't have another view like container because you cannot put two component the same level directly in the return, you need to contain them all in one container. For example, here I used. Reacts fragment as you remember, but here let's say we can use the view as well. So view we contain multiple views. And also I need another view for that item. So in this case, we will have you and views inside as you see here. And inside this view, I will specify a text, and this text will hold for me the title. So here I have as well the fight. So the title which would come from the homepage component and which I specify here in the prop. Let's save that. And as you see, the title is shown up, but it's under the Cardozo because we need to style all of this stuff here. So let's create as we'll hear, a style sheet. So I will have the same thing. We can have here, a constant. Recall it Stein's. And this is tides will hold style sheet and then Create. And then we can open and put our classes here. So first class I need to have here like styling for the text, say it's died. And then it will come from Stein's dot text for example, we are going to define this class. So I will go here again to my classes. I will say the find for me, the text glass. And inside this text object will have font size. For example, we put 20 and 20. It would be like an pixel. And we can put as well font-weight. It's exactly like CSS, but as you see, we don't have font-weight normally in CSS, you write it like this. But here, no, because we are using objects, javascript objects, so it will be like CamelCase. So we can have here font weight and this font weight, we will be a string, and this string will be bold. So in that way it's something like CSS, but you are changing it to JavaScript syntax somehow. And the color, maybe we can put some color which will be black or anything. So in that way you can put color. And you can say here padding bottom, like to push the text under it or the list under it. Some pixels. So we can say here at 20. So in that way as you see, like it's shown up here. So the view itself need to be pushed from the top. So for that view we can define as Will Stein and this style glass we've contained. We can say Styles and then we can call it least to view on for example, yeah, just list. We can say like that. So we can say list. And the list will have another class. So we can't say list. And we can give it like batting top or margin top for example, I would say. And this margin top like to push the list from the top about 25 pixel in that way. And here we, I forgot the comma. And then as you see, we have the title in the right way for this list. In the next lecture, we are going to do more styling and as well, we are going to show the images of the movies as we saw in the demo. 30. Create Card Component: Okay, in this lecture we are going to see how we can style and more make beautiful this list. So you remember we were only displaying the title. What about displaying some images? So let's do that in a way that we see like the images of them always. So first of all, if you remember, we knew how we can create a components. So we created a list component. And this list component, it contains flat list, and this list is rendering a text-only. So what about, instead of that, we render a card component, a god I'm going to create now and make it clickable. So when you click on one of the movies, it will take us, as we see later in the navigation that it would navigate for us to the details of that movie. So instead of that may be, I will pass the item to a component which would be called card. So let's create a new component and we are going to call it card dot js. And this guard dog JS, I would use as well, that pure component styling. And in that way I can use as well exactly the way how we did with the list components. I would import here the three act and as well the React dot view components. What are the properties of this component? We can define a constant and we give it a name like item. And the item will be like the movie, which we are going to display in that garden. So we will say this dot props. So in that way, I defined a constant which is called item. And this item would be a property for that component. And of course, this should be inside the render and before the return. And we will need to make this guard as a clickable. So how we can do that? If you remember, in React Native, there are multiple components which we can use. One of those components called touchable opacity. And touchable opacity is giving you the ability when you click on some button or some component or some item, if we make like some opacity like shaded. And it will response for the clicks of the user and will be displayed like a deemed, as you see here. So in that way, we are going to use that component as well. So we need to import a touchable opacity component. So we need to say import touchable opacity from React Native. And in that way I have the touchable opacity and I can call it as a component, the return here. So a touchable opacity will have also another properties, as we will see later, and we would give them some styles. So let's prepare our styling file. We can say style. And this dials would be like from this tides. So we need as well constant, which called styles. And it will create a style sheet here. Also, we need to import this time sheet. And this style sheet wouldn't have a Create. And we are going to create our classes here. So let's call this touchable opacity style as for example, we give it the name and we call it container, for example. And here I will go to the style and I will say that I have a container and this container will have the object and the following properties. We can give some batting in general, something like we can say five pixel. And also we can say like we need a position relatives. I will tell you why later. So in that way we are preparing this component to have some styles. So we have here the style will be styles here and touchable opacity. So let's save that component in general, and I'm going to import it in my list. So instead of text, I would use guard. And this guard has a property which is called item. And I will pass what the item which is returning from the movies list as you remember. So we have here that item, which is boss to their card. And this card, we will be closing it. And so you don't need to use all of this, so we can use that one side closing tags. So we need to import that cart item. So we will go here and I need to do import glass guard from components, which will be in this same level of the folder of the list. So it would be like that. So we have GOD, from the card file because they are on the same level of the file. So we save and we have here our component, item or title, but we don't have anything here because it's empty. So we go to that card, we need to put inside this touchable opacity, something. So it's now working as a touchable opacity, but it's empty. Let's put also another component which is called image. I will put that image of the movie inside this component. So as you see here, it has also style. You need also to import it. From React Native, and then you can use it. And it has two properties. One of them has died and then the source. The source would be the source of the image which you want to use inside that component. So I will go to import the image also from React native. I will put here image. So I will put here that image component. And the image of component has some property. And it will be also one side components, so we don't have anything inside it, so you've got to use it like this. So first we need this died for that component or for that image. So we would use as well the styles. So I would say styles. Image for example, or movie image is up to you. And after that we can define that died here. So I will go here and I would say style, and we need the source as we saw in the documentation. So what will be the source? The source, if you remember that we are getting the item to that component so that the content of this popular movies were written for me array of movies. And those arrays of movies are used in the flat list. And the flat list would make them item by item, movie by movie. And I pass every movie to that card. So every movie year is passed to this card. So I can use the properties of movies. So I do remember that property which we are going to use for getting the image will be that boast or image. So I can put here item that bolster path. So as you remember, we have here repartee post their boss of the movie, which we used before. But let's read the documentation more carefully. I'm going to save here, we have here field and it's called like it's giving us an error, that invalid property. Why? Because year, when you want to use that property and you want the display of the source image from URL, you'll need to use this object which is called URI, cannot put that source of the image or for example, the path of the image directly. In this course, you'll need to use a property which is called URI. So for that, I am not enough to use only the item. We need to put another object inside. And inside this object we have a property which is called URI, like this. And then, okay, the image would not give me any error. But we are not seeing any image. Deal now. Why? Because if you remember, we need to prefix the image with some bath, as we did with this Finder. And we have created the images array. And these images array is prefixed like this. So we need to use also every image to have URL prefix like this. So let's copy this part as well. And go to our guard. And I will say u is the URI, this string plus the item dot poster. So when we save, we will see that we still don't see anything because we didn't give a class for the image so far that we need to go to the Styles and give a style, a new style name, which is called image as we defined here. And I will give a height for this image, let's say 200. And also we can give, for example, wheat, which will be 20 or 120 weekend say. And we can see as nice as you see, we have that list already of the images, but we need also to give it like some border-radius. I'm just showing here like some CSS skills. You can do them all as you want based on what do you need for your design. So I'm going here to give border-radius 20. And we have here our list, and we have our components or movies. And when you click on them, as you see, it's exactly as expected from our application. Sometimes if the image of the movie is very small, maybe it would be cut like this. But because we are using same API, we have reliable images. So in this way it's better to use some property which is called re-size mode cover and this resize mold cover it. We cover the container of that image exactly in the same height and width we just specified here. So that size of the original image doesn't matter. It will fit exactly in this width and height. So when you save, you will have the same width and height, exactly how you specified here, even the image is smaller. So when we want to use multiple lists, we can just go to the home and we duplicate all of these views. So I want to have another view here. Then I will get another movies, and also I will get another movies, etc. So in that way, you will be able to find out your popular movies list. Of course it need more styling as we will see later. But in that way we are reusing that component but with different data. So in that way, we have created our component and we see the list of the images. So let's go here to the homepage and give for this component a name like or this list we can say popular movies. So we can't put here popular movies. And it will display for me the popular movies. And later we will see how we can list more and more lists for our movies. But we are going to do more steps like styling and refactoring and displaying placeholder images to make this card component more better and more dynamic. 31. Image Placeholder in Card Component: Okay, One of the important questions that we can face in the future if there is no image displayed here. So when we cannot receive from the API any image. So how we can solve that? For that, I would use a placeholder image and image which is stored within the application. And when there is an error of loading that image, then I would show a place holder here. So for that, I want to store an image inside my folder structure. So that folder can be, for example, named as assets. So in this assets, you can put anything which you need for your application. One of them can be like images. At inside the folder images. I can create my own images and place them here. So for example, I have created a place holder image for me. I did it right with Photoshop. So with Photoshop, I can place this image instead of the movie image when there is no image available. So for that, we can use that as well. So how we can display that image when there is no image available. So when I go here, Let's define a constant. We can call that constant placeholder image. So let's say a year constant place holder image. This place holder image would be required from the bath which I have specified, which will be in the assets folder. So for that, I would use the assets folder. I will go one step up assets images, and then I will specify the image which I want. And the name of the image will be placeholder that B and G. So in that case, I will have my image inside placeholder image. So in the image component you can specify URI or directly a file. So when you want to use a fine, you use required. That's why I used that required. So the source of the image either can be URL or it can be a file. So for that, I need to specify something inside the source. I will say item dot poster path. It's like I am doing here. And if, and then I put question mark, this gold inline. If. So, you can, for example, put an if in one line so that after the question mark, you will put the value point It's through. And then you put colon, and then the value will be when it's false. So in this case here it will be when bolster path has a value, or it's defined, or it has a content, and when it's undefined, it will get this value. So for that, I would use when it has a value, give me this object, which will be you are I and all the poster image. But when it doesn't have any value, I will put here a colon. And after this column, I will put placeholder image. So in that case, after I save, it's formatted. If item, the poster path is undefined or it's not available, all of that is error, or it's empty, then it will not show that you ought I to uptake the place holder image. But when there is a value, it will take the first value, which is after the question mark, which this will be when. Okay, So how we can test that? We could thus this place holder image in a way that we flipped. But this condition, so let's put here not. So in this case, when there is a poster image display for me, that placeholder image and save, we will see that we have the placeholder images. But in that way, we don't know what is the name of the movie. So it's better as well to display the name of the movie. So we display the name of the movie just in case there is only image placeholder. So we can say as well some condition here. So I will add as well, like after the image, I will have a component text and this text will be displayed when there is no poster path. So I will say here and object after the image. So we have here, like when there is item, that place holder, or when there is no item and place holder, then and do times as you remember, we did that when we were handling the error. So then I will place a text component. So we call a text component here. And we give this text component a value which will be item dot name. So we can have the movie name, or in this case, we have in our API, It's called item dot-dot-dot. So when I save then okay. I don't see anything because I said when there is no poster image, but in our case, that is a poster image. So just for test, as I told you, we flip the conditions here to see what we are going to do with the placeholder image. So as you see, we need to import as well here the text component, so I will copy it and okay, nice. We have now the name of the movie, but it's ugly because when the movie name is long, it's pushing the other movies near. So to do that, or we can handle that by placing, for example, the movie name here in the middle of the image of the place holder. So let's give to this text some style we will see here. Style and this style we can add as well some glass which can be styles. And then inside this dies, we can't say movie name, for example. And inside this movie name, we are going to style our name of the movie in the place holder. So let's go now to the styles I will add here and your glass, which will be the movie name, which we have as we named here. So I will say here that movie name will be an object. So the first property for this class, we will give it a position, absolute. I will tell you why. And as well we can, for example, just to see what's happening. The position absolute is locating the component in the middle or at the beginning of the parent component. So in our case, we, our parent component is this container, as you see here, touchable opacity. It has our parent component of the text. So in that case, we need to put the parent component are relative. So when I have a relative or absolute position, then they will be related to each other by relative. Because when I remove this relative, then the position of this item, sometimes or an Android, it would be located on the top of the screen because I will not have an elective position for this child with his patent. So let's put it back. We have now position absolute. You have to be sure that you have position relative. And now I will give like some properties. For example, to give it some width, we can put the like, the width is the same over the width of the image but less like 20. And as well, we can make that text align with the center. So we can have that text in the center. So it's exactly like how we do with the CSS normally. And as well, we can this item located in the middle or put it in the middle, you have two options. Here. You can make the container as a line items. You can put it in a way like center, as you see here. Or you can make, in this case are the item itself. You can say align self and this myself would let, the component will have a center position. So one of those two options, I prefer to use our line items, like I want to align all items inside this container in the center. So now we need to push the text on the top a little bit like from the top to not be exactly on the border of the image. So you can as well put it here in the center. I want to mention to you that it's very important to put a height for the container because our container in this case is this card. So in that way, if you see, if you align their components like you can, for example, let's try to put it in the center here. The instruction for that you can say justify content will be centered. So when I save that, when I put justify content center, as you see, all the contents pushed down this because that the height of this container has the rest of the view. So we have here this slider, and then we have the rest of the view is automatically assigned because the main container is a flex. So in that way, we have to be careful with that. It's better to give height for that container. So I will give it as well to a 100 pixel. So in that case, we will see that our item is located exactly in the middle and the name of the movie is located in the middle and height of the container is as well to a 100. So in that case, you have to guarantee all the sizes to not have issues in the future. In my case, I will not put the justify-content center, but I will keep the height. But I will push a little bit that text here from the top. So we can say here DHAP of the movie name, it will have like 10 pixels, we can say. So I will put here then pixel. So after we save, we will see that the text is more nicely way when the movie doesn't have an image. So now, when we want to make it work normally, we have to flip their conditions again. So when there is a poster image or bolstered path display for me the image than normal image. So we don't need this knot. And there is no post-doc bath display for me, a text where it will hold the name of the movie, so we don't need it like that. So we say when there is a no poster image, then don't like this blade, that text. So we just save that. And then we will have the normal behavior. As you see here, everything is working fine. We don't have any issues. 32. Type checking in React Native: As your application is growing, you need always to catch a lot of bugs and errors with died checking. For some applications, you can as well use JavaScript extensions like law or TypeScript for type checking. But there is an easier way with the TypeScript or JavaScript which we are using here. So you can as well check the thigh of your variables, all of your props. So when you want to make a prop types, we can as well do that here. So we can define a constant, we can call it drops types. So we can't say this const. And then prop types. And this prop types would be an object. And this object will contain also that prop which we have defined here. So we defined here item, this dot props. And this item here, we will not assign only like a value or something. We would assign a diaper and I'm where I can bring type. I can't bring diaper on a library which is called prop type, and it's already installed when you install React Native or will you start up a project? So now we have a prop types from prop types. And this prototypes we contain all types which you need for your prompts. In our case here we have the item will be an object. So we can say prop type of this item will be object. Or you can define string. You can define as well, for example, number. So you can define any type you want. So here I will say that prop types of this item or this prompts will be like object. And then this is not enough you have as well to attach those prototypes to the component. So how we do that? We go down when we are going to export the class or the component or the pure component, we say guard the class name itself and then dropped types. As you see here. You can then say that prop types, which are defined on the top. So the prop types of this guard will be the prototypes which we defined on the top. So after you save that and when you are debugging your application or when you are doing, for example, some assignment for this prompts, it will give you error when you say this item is S3, know it must be an object. So let's do the same as well for the list item, we need as well the list component which we have created previously. So we need as well to define a constant, copes types. We have here title. So that title would be prop types but died of string because we are receiving the string of the title or for the movie. And also that content will have object because it would contain all information about the movie. So we will put here as well content and we don't forget to import prop types from rock types. So here we will put as well the book Types. And at the end you have to export it, so you don't have to forget that. So we say list dot props type is equal to prop types as we see here. So when we save, we guarantee that everything is working fine. We don't have any errors in the console or something like this. So we now holding our components with prop types. In that case, you will not get any mistake when you are calling those components. So I will going to show you for the exam. I would call here a number for this title. I will not call, for example, a text. So we would save, you will see invalid prop, title of type. So we have here an error in the time. So when you put this one as string, then you will not see any error. So you must be sure that the type is right here. Otherwise you will get errors. So when you see in the next lecture, it is when I am defining a component, I do this prototypes is just for debugging and catching a lot of bugs, maybe comes with a typing. So as you see here, when I get an error, invalid prop title of type string supplied to list should be expected as object. This is because as you see, I have defined this title as an object, but it must be a string. So we have year to put a stirring and we save that. And we go again to the console. We don't get any new error. We've got only the error where we have the type was object. So in this case you can see as well your errors here. 33. Adding Scroll View to Scroll the Home Screen: Okay, in this lecture we are going to see how we can make a scroll for this review or for the homepage. Why I am going to make a scrolling here. Because if you see that if I create another view, for example, we will have documents, movies and also we will have family movies. So in that case, you will see that you will not be able to scroll. And a view is getting smaller and smaller. And our slider, Our view is divided by all of those views. So in that case, it's better to create a scroll of you. So creating a scroll view is by using one component from React Native, which is called a ScrollView. So we can use this scroll view easily. You can import it from React Native as you see here, and then you can use it. And to Raul you're content with that ScrollView. So I am going to surround all the views which we have here with that ScrollView. So inside their react fragment here, we need to locate the scroll view and then we close it before the closing tag off react fragment. So I won't go here again and I will close it. And as you see here, we have now scrolling possibility in the application. So in that way, when I create multiple views for other movies, such as like for example, we can say here multiple views. So we can then scroll our application safely and peacefully without any problems. And as you see, we have, we covered the back, the signs of the slider, which we had made before. So let's put back everything. In the next lecture, we will see how we can grab the data of popular movies, families, and documentaries, etc. 34. Popular TV Shows Family Movies Documentaries: Okay, If you remember, we have created multiple services for getting popular TV, upcoming movies and popular movies. So let's create as well a slider for those services. And as well we are going to add more services like the family movies and documentaries. So let's start create a slider for the popular TV. We have popular movies, we have upcoming movies recreated here. Now let's use the popular TV. So I'm going to the homepage and then I will say as well, get for me the popular TV so we can call the service again in the same way how we did exactly with the previous services. So here we will say get popular, dv is exactly that name of the service as we have it here. And we are going to imported from the services. So you have to remember that you're always import those services. And then we move down to the surface again and we need to set something like set popular TV. So we can say a variable where we would get popular TVs. So in this way, we can as well create another state variable which will be exactly like popular movies, but it would be called popular TV. So we do with their same, we copy the same line and we say popular TV. And here we say set popular TV. And in the same way, we are going to use the variable which is called popular TV to path it to the list. So let's duplicate this view. And then we will add here, not popular movies, but we can say popular TV shows, for example. And then the content will be popular TV valuable, which we have created on the top. And now we will have that popular TV. Here. You see that? Yes, lead is complaining that empty components are self-closing. So it's better to not have closing like this. I wanted to mention that before, but I didn't have that chance. So you would just have here to put like this closing tag is deed of the whole DAG component which is like a door, make it one side closing tag. So in that way that he has length would be happy. So let's save. And then we go here. We've got that popular TV shows. So what we have now, popular movies, popular TV shows, let's have documentaries and family. So the same way we go to their services and then I am going to have a new service which will be called get family or get family movies or documentaries. Let's start first with good family movies. So here instead of get upcoming movies, we can say Get family movies. And for many movies, we need to check the API for that. So you need to go to the website of the movie database API and then you need to check how to get the movies or family. So we would put movies and we will see that we have a lot of resources. And let's make it a little bit bigger. And you will see that we don't have something like a special family movies like we don't have the categories. In that way. I prefer for you to read the documentation more to get what you want. So after reading the documentation, I found out that there is something called Discover. And within this cover there is more we discover and TV discover and whose movie discover. You can use this API like this cover slash movie to get more of these based on some filter. It's like filtering the movies based on something, for example, by region, by, sought by, and also gantry certifications include adult, include video, all of those information. You can get them when you want to factor the movie. So I want to filter by, for example, Jenna, Jenna, for example, it's type of them will be org category of the movie. And then we need to pass the ID of the Geneva where we want to see the family movies. And then we will get the family movie so far that we need as well to list the generous before using this API. But let's first put a bear on what API for that. So now I will use this bath of the API in my service is Paul. So here we will have the API URL, the original one, and then I will pass here the thing which is called Discover and then movie. So in that case, after that, we passed the API as well. And here we will have that Jenner filter. So gender, Jenner filter will be like after the API key we put end. And then we go to the documentation and copy the part where it's saying which Jeanette or which parameter you want to use with this API to get the filtered information. So for example, I would get with Jenna. So in this width Jenna, I can bias it here. And after that, I will put the ID, which it will be a number, where it will be the family categories movie. So how we go and get that ID? So we go again to the API and we will see one of those APIs, which is called generics. So here we can use that and we would get like generic movie list. And we can use this API in the same way how we did with a postman to get as well, the more V's or the ID of family category. So let's open Postman and it the same way we are going to call that service. So here we were calling popular movies and we will call again the ID or the engineers or the categories of the movies. So let's copy this part. We can say generic movie list. We want to know the ID of the anymore visa so we can, after this popular, we have, this is a basic API as we saw here we are replacing and here is our API key. So in this way, we put it here and don't forget to remove this slash. And then we press send ice. We have now all the genomes and one of them is family, and the ID of that will be 10,751. So we will copy this ID. It's very important to copy the ID, not the name. So in that way, you would go here with Jenna and then you will place that ID here. And we save. And then we would get as well their family movies in the homepage. So exactly how we did with popular dv. So we copy the same part here and we call the service, which is called Get family movies, angry. Again, up, we imported it from the services. And then we say here a new state variable which will be constant. Popular TV, no, we need as well set popular or family movies. So here we will get speed of popular movies. We will add family movies. And here it will be set family movies. So it will be set family. So in that case, we can use as well those two state variable. So first, let's set the family movies, which we got from the API we have here movies. And then we say set family movies. And then we use that variable which we created here. We just call it family movies. We use it in our list. So let's create another list or another view including the list. And in here, in this way, we will have exactly like as well, some family movies. And here instead of popular TV or popular movies, we would call family movies valuable. So here we will have a mini movies variable and then we will run the simulator. Again. We save everything. We will see that we got as well the family movies, which are listed here. As you see, it's still like the documentary or a popular TV. This is because we have important the service, but we didn't use it, So we must use it as well. We have still here popular TV. So in that way we would get family movies and it will refresh mice. We have now that family movies Jenna, or category which is coming from the APR. So there is last thing which is called documentaries. I will let it follow you as a homework. You can do it fast. I'm sure you can do it. It will be exactly the same. Just search in the API and you would get exactly that from the documentation audio and get it from the general how we did before. So as you will see here, that we have hot aromas, thriller wisdom. And as well there are something called documentary as you see here. So I want you to create a service and then you as well, you need to create the oldest service, creates state variable and add the list or the scroll list to our application. 35. Second Section Refactoring: Okay, let's do some refactoring now on our homepage component. So the first refactoring, which I want to do is about those collecting the data of movies in multiple methods, such like we have multiple promises, like then and catch multiple times. So we can also make all of this in one goal by using combination of promises. So you know that this one is returning for me a promise as I showed you before. So now we are going to make it like all of them in one method and then we will have one then and one catch. So in this case we will not get melted multiple errors or multiple thens, and we will have long chord. So to do that, first, I go at the end of this effect, as you see here, we have used effect. After it. We define a component or a constant or a function, or you can define that as well before it. So you can't say constant, we can say go get data. So with this good data, it will be a function where we are going to collect all the promises together. So creating a function it exactly the way how we did here in the component. We define a function like this. And then we have a arrow function, and then we have the detail of the function. So I will go here and I will say like I have those brackets and then a row. And inside this method I am going to define my data. So before that, don't forget to put equal to have the constant in the right way. So now that Get Data is a function, I'm going to make a promises where it will return for me one promise of all of the functions which I have defined already inside the effect. So to do that, we put return, just return. We'll have a promise like that, like that poem is glass is coming from JavaScript. And we say all. So when we set all, this will be array of multiple promises that they are going to be combined together and give me that exalt as well in the array. So let's open use effect again, we have multiple methods. So I will put here in all the array where I am going to call all the functions which I need for the movies. So let's get, get upcoming movies first. And then we will get that popular movies. And we would get as well that popular TV. And then we will get that documentary and family movies because I told you that I created the documentary movies in as a homework for you and you did it. I am sure. So now we have get documentary movies at the end. So in this way, we will have all those promises were returned for me in one goal which is called array of promises. So now let's call get data method. So to use that data method, we are using it as a promise as well because its return for us a promise. And this promise, we can call it inside use effect. So we would get rid of all of that. So let's now keep it like this. And we call that get data function here. Just we can do a console log to be sure that we are really getting the data in the right way. So I will say here, Get Data. And then it gives get data, it will return for me then because it's a promise. So in that way, I will say then, and then I will get values. And those values in that way they will be also an array because we have the promise as array of old. So in that way we will put the array of promises exactly the same order how we placed it here. So the response will have all the callback will be an array contained upcoming movies, for example, and as well the popular movies and popular TV and family movies. So I placed that array responses in this way. I am upcoming movies, popular movies, and popular TV, family movies document any movies. You have to be careful that you have the same order as you placed that calls here, you must have the array the same way here as well. So be careful to not lose your data. So the popular movies will not take place of something else if you mix that up. And as you know, this is a callback function. So in that way, I need also to return something like it. We can do that using arrow function like this. And this arrow function, I can specify what it's going to do with those variables, like set the document that he movies set family movies and popular TV. So in that way, I can move all of those items which are here called, so we can move them inside this Get Data then. So let's Save now to see if we are formatting right now everything is fine. And now I am going to put my data and setting the data inside. So first of all, we need to have the upcoming movies and we have the movies as images as you remember. But instead of having movies here, we will have it like as a popular movies. So in this way, we can cut this part and put it here. And then we say upcoming movies for each movie. And then we build the movies images array as we saw previously. Again, we need as well to get the popular movies. So we can as well put it here after popular movies, but the variable will not be movies, will be popular movies. And we need as well to get the popular TV exactly the same way how we done with all of those stuff. So I'm going to do it fast. So in that way, we set all of those variables or state variables with their byte arrays or responses from that getting data from the services which we have created before. So we don't need anymore all of those called services. We can remove them now. So because we don't need again to have dry and then add catch for every service. Now, we combined everything in one and we will have less space for code. So we don't have a lot of calls here, but we need also to catch the error. So after that then you see here we have here, then, and then after that then I will put here catch. And with this catch, I will catch an error. And it's exactly how we did before to catch the error which is coming in case there is a problem in the back-end. So in this way, I will say error and then set error, which is this one. We have also stayed valuable created for set error. It will be an error. So we can, in that way, we show some error message as we saw previously. But in any way, we will do a special component for the error as we will see later. So now let's save everything and see if our application is still working fine. As you see, we are still getting the data fine. The only small issue or warning we can call that we have duplicated names of variables. So because here we have the state variable which is called popular movies. We have again here popular movie. So I would like maybe to suffix those variables with a data we can put like this. So upcoming movies data and as well for all the rest. And in that way, we can distinguish between those valuable and the state variables. So in that way we will have all of them suffix to his data. And here we will have as well upcoming movies data and then popular movies that, and here we will have popular TV data and many movies data. And the same for the documentary. So in that way, we will have, keep the, like. We don't have duplication of naming of constants because we don't have popular movies as a state variable. And then I define it here as like a data variable, so it's better to have them in that way. Another thing which I wanted to show you like we can also don't show that view or the list totally, for example, this slider until the data is ready. For example, for the slider box, I can surround it all in an object as you see here. So we can put here an object. And this object will contain for me data which I am calling. For example, in this case here, the movies images. And then I put and 2 times, like if there is movies images, then put this view. So in that way, I can as well put the view in the way. Like we don't have any problem when we don't have any movies, images. Those are slider, will not show if there is no movies images or movies images is undefined. So we will do the same for the others. So in the way how we can do it like to avoid any problems. You can just create an object. And inside this object you put the data variable. And then you put and, and then you put another brackets. And inside those brackets you can put here the view itself. And when you save prettier, we'll save for you all or reformat for you that code. So I will do the same for the other movies types. So we can have here the movie name and also those brackets so we can put it on all. So we will have this one and also this one and also this one here we will put popular TV. If there is no popular TV then booked. Don't show anything and put the view if there is popular TV. The same thing we will do also for family movies, views and as well here. So why I am doing this? I am doing this because I want to avoid any problem can happen to my application like hanging or that is not showing or anything. So you will need to surround your application always with the right data, because otherwise you will have issues. Always when we will appear for the user. So nothing should be shown to the user, user C, always the application is stable without any unexpected errors. So you need always to surround the, any expected problems can happen in your application. And maybe you will wonder how I can add comments in React Native. So if you see here, you can add a comment by pressing Control Slash. For example, you can put here family movies like this. And then you put Control Slash or comment slash on the keyboard. And then it will be like this. So it will be object and inside it a comment. You cannot put a comment like this alone in React Native because this is unrecognized command. So to put a comment, you have to put it in this way between objects. So you can say as well that we have the comments, like for many movies or any comment to describe your functions in the right way, I will put as well the popular TV shows and other comments which we do here. So in this way, we are going to make also documentation for the developers. So you can as well put comments for the developer that to describe what is this method or what this view is doing. So in that way, you will not have any issue of not understanding your code. We're among the developers. But before we move on to the next step, maybe you will see an error happening in your application when we set all of those conditions, like here, as you see, we have here movies, images, and all of those conditions. And this error saying that text string must be rendered within a text component. This is happening because we have initialized our state variables with a string value. So in that way, when you are saying that, okay, I have a string, empty string value. We needed that previously because we wanted to initialize our state. So in that way, we scroll or view, we'll have here a string, empty string value, which is not possible to render because you must have a string inside a text or a text component. So in that way, it's better always to put all of these initial states as like nothing, like undefined or not. So in this way, your application will get loaded fine without any initialization of strings. So you will avoid that error if you see it. So in this way, you can render like an object or undefined value initially in the ScrollView, and then it will be filled with data and then the, our views will be rendered correctly. So just important thing, be sure that you are initializing cure states with empty values. Nothing special. So we have here like for example, the error is initialized was false. Okay, that's fine because we need at the beginning that we don't have any error. And then we set the error to true when we have like some error. But here we have, we are assuming that all of those state variables are null or undefined at the beginning. So in that way, we have now comments and clear documentation of my code. And also I surrounded everything to not have an errors here. So this is the most important refactoring which we can do for the homepage application. In the next lectures, we will see how to add loading and how we can add also the error component in case there is a problem in our API of the application. 36. Add Loading Spinner: All right, Here we are in a new section. We are going to see how we can implement a navigation. Why we need the navigation, that navigation is required in the case when I want to visit some movie, when I want to go to the detail of the movie. So when I click on that movie, I will navigate to another screen or another page. So that navigation in React Native is working with some specific way where we need some external library, which is called React native navigation. And we need to install this library to be able to navigate multiple screens in our application. But first of all, as you see here, we have an error which is, I forgot to fix in the previous section, we just say failed prop type invalid prop content. The content of Europe member of the content list is coming as an array. And we said here is an object. So when the API or the homepage is sending to their list an array and here is an object, then we will get this error. And also you can see the detail of this error in the terminal. As you see here. For example, I have here like filled prop type invalid prop type content of type array because I provided here and array. So it's better to change it as well. You can't have an option array or list, so you can have multiple options of that foreign to me. I will put it as an array. And as you will see, the error is gone and we will not have it anymore. So that's y is a benefit of typing. When the data comes in different type than what you specify here, then you will notice that error. And this is a great thing about prototyping. Okay, let's go to our React navigation. When you want to go and install that navigation, you need to visit a website which is called React navigation.org. And when you go to this website and you go to the homepage, as you see here, you will see something called redox. And we need here to install this library. So I advise you always do read the documentation really carefully because it's really sometimes a complicated to install the navigation library, especially with React Native. And we are going to use here React Native CLI, not export. So you have to take into account that you are using React Native CLI. So now let's get started. So first of all, you need to see some brick mystics like for example, like here you need to have a React Native Express. You need some knowledge in React whose rebukes React Context. Okay, no problem about that. Let's start install the library. First of all, you need to run npm install React Native or react navigation native. So then you will be able to install this library. Let's go to our Visual Studio Code and install this library. I'm going to open the terminal as always as we learned previously, and paste this command here. Okay, Here the library got installed and I have my installation ready. Let's continue in the documentation. You have to read the documentation very carefully. So here it says that this library will install now our React Native gesture handler, React Native, 3D animated React Native screens React Native safe area contexts. They act native mask to view. So all of those we need to install them. So here it's saying that you have to installation for different CLI's. One of them is Expo and the other is React Native. And as we are using React Native CLI, we are going to copy this comment. You have always, sometimes something called Yarn. Yarn is exactly like MPM. You can go to the documentation of yarn and you can as well install it and use R1 or yarn instead of MPM. So in this way, I'm going to copy this comment. You have here a copy button so you can copy it. And then all of those libraries which are mentioned here, will be installed. Now, let's go again and try to install those library using our common line. And then I will paste it and we will wait for the installation. Okay, now the installation got ready. So I have some warning here that it's saying like MPM is available, update on NPM, its update of NodeJS. So always when you need to install, you can just see how to update it. It's just running npm install a global MPM. So when you see this note, it means that you can update to a higher version of NodeJS and also to the package management system so you can update it as well. So here our libraries got installed because we are using React Native, we need to run some comment. Here. It says that you don't need to or from React Native 0.6 and higher. Like linking is automatic. What he means like by linking, linking React native to iOS components or Android components, which are in the projects which we have. Like we can see here. They are automatically linked like iOS and Android. Because the installation. Of those libraries is go to the Node Modules and you need to link the components and the native components which are installed in iOS or Android or a node module, you need to link them together from React Native 0.6 and higher. You don't need to do that like React Native link. But if you have low or lower React Native, then you need to run this comment. But in my case, I don't need it for now. So then he is saying if you are on Mac and developing for iOS, as my case here, as you see, I'm using iOS, I'm using Mac. You must run this command which is called MAX pod install iOS. So in that way, you need to install another libraries, but they will go where to the libraries of iOS project. So in this way, I'm going to paste this comment here and run it. And then after installation of these libraries, you need to know that any installation of like for example, those pod install, as we saw previously, you need to restart the project URI to restart the iOS simulator as well. So in that case, our project will not work only when we restart the project. So as we see here, we have the terminal, for example here, this one, you need to close it totally. And then in your terminal, you need to run the comment which is called React Native run iOS. The same thing goes for Android. So you need as well to restart your project again after installation of some libraries to not get an error as we see here. And in React Native is saying to finalize the installation of React Native. Like gesture handler, which is a library which is attached with those libraries which he installed. Add the following. At the top. The top of entry file, which is ab.js or index.js. So in this way, I need to use this import and added to my app.js. So we need to go here, and then we go to app.js. And here I need to import this library. And he said it's better to be on the top. So we need to put that on the top of the list of the imports. So after that, we are making sure that the library of the navigation will work fine. So here we see how we install this library. Always when there is some updates, you need always to follow the documentation because some updates may be come up, some updates maybe we'll change or some installation way will change. So its better always to follow the documentation in the time of recording this video. That way is as I showed you. So now we are going to make an example of the navigation, as we will see in the next lecture. But remember, restart your application before you start the next lecture. 37. Add Error Component: Okay, in this lecture we are going to make an error component to display like some error here in case the data is not loaded in a right way. So we can create a component as we did previously. So I will go to the components folder and then I will say here error Node.js and this arrow dot dot JS I will use the snippets. So to generate a pure component and generating pure component to a, B, B, C, S and weekend pure component class so we can remove this state part. And as I told you previously, we need to import this from or extend this from react. So we need to import as well in this component react. So we can do that using EMR. So in this way we have React imported from React. So now our component is ready. So for me, as a component, I would create, for example, two errors. And those errors, they can be like something. First line can be something went wrong. And the other, we can be like make sure you are online and restart the app. But we make also these components somehow dynamic, so we can give default values for our props. First of all, let's have two prompts. And those two probes, we can give them names. They can be, for example, we can say something like error text1 and error text two. And those two prompts then again get a name like error text1 and error text too. So I will put here constant, like as a prompts will be error Text1 or error text. We can say one and error texts to line two. And then it will have this dot props. And we can make divs for those prompts. So we can as well import the types in a way or right, the types we can give here, prop types and error text one will have prop type a string because they are going to be a string only. And error takes two will have as well as string. So in this way I have the prop types, I have as well, the prompts for their component. So next we can create in the template like some view, and this view will be in the middle of the application. So we need to import also the view component. So we have here a view, we need to import, a view from React native soil. We have here view and it will come from React Native. So in this way, we will have the view in the right way. And then inside the view I will have two texts components. So we need to import as well that text components. So I will have here text, and then I will call here that the x component. So we have here Text1 or like fixed component first one. And it will include inside it the, the, the component or the error Text1. So in this way we will have error text one in the first line and error text too in the second line here. So let's do also some styling. So I will define a constant, we can call it styles. And these styles will be imported from style sheet, which we are going to import. And this will have create method. And we can create method, define the possibility to have multiple classes for our styling. So let's import the style sheet as well from React Native component. So we have here, the component is important. We have create and we will define a classes as well. So let's do like for the container as always, we can give it a style and this style can be imported from styles. And we can give it like we call it container, like any class always we do in the application. Then this container will have exactly the same things which we are defining always. So container will have legs one, justify contents center, align items, center. We can as well give us dying for these like error texts. So we can give your style and this styles will have like the name of text. We can give it like that. And the same thing will happen for the second line of the adult component. So here we will have another class which will be called text. And this text would contain like the properties we can give the color. We can say color. Here, we can give it like like black or we cannot give any color. It would take by default the color black. And we can give here font-weight to be like bold, to be something like a big, a little bit so that the user can read it. And we don't forget at the end because we have prompt types, we can say that as well. Error component, this one which we created before is props types of it is the prop types which I defined on that top. So in this way, I guarantee that this component is reading those prompts types. So in that way, our component is ready, we can use it. Now, I have to remove this semicolon. As well. Here I have an error which is called props types. I need to import the prop types, which we did as well before. So we need to import the prop type from prop types. So in this way we will have all the items defined and our component is ready for using. So we got again to the homepage and we can in the home screen, you was this error like state body able to display an error exactly how we did with loaded. So we can define as well here if there is or there is error, like we don't have an error. So if there is error state, and then you can display the component which is called error. So this way we need to import our component. So we have here error. And this error will be like closed immediately because it's a single type or single line. It doesn't have any content. So we need to import the error. So we go on the top and then we go to our imports. We can do it here after importing the list. So I will say here Import error from, and then I will put my components, and those components will be one of them error. So in that way, I have imported by error component. Now, nice, we have everything is fine, but we don't have the ability to see the error message here because currently we don't have any error, because after this error initially has a false. So when there is an error in our API, then we can set it to 0, not at all what to do. So in that way, we can as well remove this error. We can just put a call back like this to not make a asleep complain. And then we have the set error too. So we need to say that if there is, it's loaded and there is no error. So we can also add another end to say that if there is no error, then okay, Display for me, the application or the scroll view, all of it. But when there is an error, then display that error component. Nice. So we have now here, if there is no error, so let's flip the condition as we do always just for testing. So I am getting an error here because I think there is a typo. So I know it's a prototype, so we must have a prop types, crops types. So you have to be careful always with typos to avoid like some arrows like this. So let's save. Okay, we have now an empty page. So this empty page, because we don't have any value, we don't have any input or parameter for this error because we have props here and those doesn't have any value. So in this way we can set a default values for those errors. So in the same way how we did with props types, we can set as well at default values. So those default values, we can define them in the same way how we have abrupt types. So we can define a constant, we call it a default props and error. Text1 will have like orbs, something went wrong. Error at x2 will have also this sentence. And then we can use the same way how we did with the error prop types. We can say Error dot default values. So in default props. So in that way, the default ports will be assigned exactly the same way how they are named. So the name error text1 will have this value and error takes two will have this value. When we save, we will see that we have Ops. Everything went, something went wrong. So let's flip back that conditions. So when there is error, show me this error message. When there is no error, then show me the movies loading and the movies application or the movies list which we have here. 38. Installing React Native Navigation: All right, Here we are in a new section. We are going to see how we can implement a navigation. Why we need the navigation, that navigation is required in the case when I want to visit some movie, when I want to go to the detail of the movie. So when I click on that movie, I will navigate to another screen or another page. So that navigation in React Native is working with some specific way where we need some external library, which is called React native navigation. And we need to install this library to be able to navigate multiple screens in our application. But first of all, as you see here, we have an error which is, I forgot to fix in the previous section, we just say failed prop type invalid prop content. The content of Europe member of the content list is coming as an array. And we said here is an object. So when the API or the homepage is sending to their list an array and here is an object, then we will get this error. And also you can see the detail of this error in the terminal. As you see here. For example, I have here like filled prop type invalid prop type content of type array because I provided here and array. So it's better to change it as well. You can't have an option array or list, so you can have multiple options of that foreign to me. I will put it as an array. And as you will see, the error is gone and we will not have it anymore. So that's y is a benefit of typing. When the data comes in different type than what you specify here, then you will notice that error. And this is a great thing about prototyping. Okay, let's go to our React navigation. When you want to go and install that navigation, you need to visit a website which is called React navigation.org. And when you go to this website and you go to the homepage, as you see here, you will see something called redox. And we need here to install this library. So I advise you always do read the documentation really carefully because it's really sometimes a complicated to install the navigation library, especially with React Native. And we are going to use here React Native CLI, not export. So you have to take into account that you are using React Native CLI. So now let's get started. So first of all, you need to see some brick mystics like for example, like here you need to have a React Native Express. You need some knowledge in React whose rebukes React Context. Okay, no problem about that. Let's start install the library. First of all, you need to run npm install React Native or react navigation native. So then you will be able to install this library. Let's go to our Visual Studio Code and install this library. I'm going to open the terminal as always as we learned previously, and paste this command here. Okay, Here the library got installed and I have my installation ready. Let's continue in the documentation. You have to read the documentation very carefully. So here it says that this library will install now our React Native gesture handler, React Native, 3D animated React Native screens React Native safe area contexts. They act native mask to view. So all of those we need to install them. So here it's saying that you have to installation for different CLI's. One of them is Expo and the other is React Native. And as we are using React Native CLI, we are going to copy this comment. You have always, sometimes something called Yarn. Yarn is exactly like MPM. You can go to the documentation of yarn and you can as well install it and use R1 or yarn instead of MPM. So in this way, I'm going to copy this comment. You have here a copy button so you can copy it. And then all of those libraries which are mentioned here, will be installed. Now, let's go again and try to install those library using our common line. And then I will paste it and we will wait for the installation. Okay, now the installation got ready. So I have some warning here that it's saying like MPM is available, update on NPM, its update of NodeJS. So always when you need to install, you can just see how to update it. It's just running npm install a global MPM. So when you see this note, it means that you can update to a higher version of NodeJS and also to the package management system so you can update it as well. So here our libraries got installed because we are using React Native, we need to run some comment. Here. It says that you don't need to or from React Native 0.6 and higher. Like linking is automatic. What he means like by linking, linking React native to iOS components or Android components, which are in the projects which we have. Like we can see here. They are automatically linked like iOS and Android. Because the installation. Of those libraries is go to the Node Modules and you need to link the components and the native components which are installed in iOS or Android or a node module, you need to link them together from React Native 0.6 and higher. You don't need to do that like React Native link. But if you have low or lower React Native, then you need to run this comment. But in my case, I don't need it for now. So then he is saying if you are on Mac and developing for iOS, as my case here, as you see, I'm using iOS, I'm using Mac. You must run this command which is called MAX pod install iOS. So in that way, you need to install another libraries, but they will go where to the libraries of iOS project. So in this way, I'm going to paste this comment here and run it. And then after installation of these libraries, you need to know that any installation of like for example, those pod install, as we saw previously, you need to restart the project URI to restart the iOS simulator as well. So in that case, our project will not work only when we restart the project. So as we see here, we have the terminal, for example here, this one, you need to close it totally. And then in your terminal, you need to run the comment which is called React Native run iOS. The same thing goes for Android. So you need as well to restart your project again after installation of some libraries to not get an error as we see here. And in React Native is saying to finalize the installation of React Native. Like gesture handler, which is a library which is attached with those libraries which he installed. Add the following. At the top. The top of entry file, which is ab.js or index.js. So in this way, I need to use this import and added to my app.js. So we need to go here, and then we go to app.js. And here I need to import this library. And he said it's better to be on the top. So we need to put that on the top of the list of the imports. So after that, we are making sure that the library of the navigation will work fine. So here we see how we install this library. Always when there is some updates, you need always to follow the documentation because some updates may be come up, some updates maybe we'll change or some installation way will change. So its better always to follow the documentation in the time of recording this video. That way is as I showed you. So now we are going to make an example of the navigation, as we will see in the next lecture. But remember, restart your application before you start the next lecture. 39. Creating a Stack Navigator: Okay, till now we are not done with the navigation to now we cannot navigate to another page or the detail of the movie. So let's continue in the documentation of React, Native, and navigation. At the end, when we have did all the first page information, there is something continue to Hello React navigation. Here it will give us an example how we can move to another page of React application. So in this way, you need to install something called stack navigator library. And installing this library is just using a comment MPM, install, React navigation, and then stack. So I'm going through the documentation fast. Of course you will have time to read it and as well, you need to know more information about this doc navigator stack navigator actually is like something like is holding my old pages where I'm going to navigate to. So in this way, I will have the homepage, I will have the detail. I will have their search page. I will have all other pages which I want to show in my application. So in this way, we need MPM install, React native navigation stack. So let's go to the code again and then paste this comment. And it's going to install for me this library. So after that, using this library, we will see an example provided by React Native Navigator. So we have to create a stack navigator, creating a stack now Vd navigator is provided in this example. So for example, we have to create a component. This component we are going to call it in something called navigation container. And in this navigation container, I will have a stack navigator. And for every page in the application, I will have a stack screen. So in this way, I will have home screen. I will have as well detailed screen and I will have the search screen. So let's do it exactly the same way how he has done it. So first of all, we need to import two things. One of them is create stack Navigator. So I am going to import this method which is called Create Stack navigator. And as well, he could define a constant which is called stack. And this DAG, he called this function which we imported here. So let's do the same in app.js. So let's close the terminal. And then we will say here import, React or create stack navigator. And we will define our constant which is called stack. So we go back again to the code and then we define this constant here. So after that, inside this view, you will not have this view. We are not going to call home. We are putting this home component in the stack. How we can do that. So first we need to say or navigation container. Because navigation container, as you see here, is a component which manage your, our navigation tree and contains the navigation state. This component must wrap all navigator structure. Usually, we would render this component in the root of our application, which is usually component or exported from app.js. So let's do the same to not go out from the documentation. So I'm going to have a navigation container and then stack navigator, and then I will call that component so we can copy all of this part and then go to our application. We remove all of this view or let's put it like near it to see what we can copy again. So I have navigation container, we need to import it as well. So I will important again. So we go here and we say that we need to import the navigation container. And then we have the stack dot navigator. Exactly. This stack has a method which is called or has a component which is called Navigator. And this stack Navigator has also a component which is called screen. So we can reach those component using this operator, which is dot normally. So then we can say a name for that component. For example, poverty that navigation, and then we specify the component which we are going to navigate to. So in our case, it's called home. We have already imported the home component, so I can put here home. And then let's sit anymore this view which we had previously here. And then we save our application and go to the simulator and we will see what is going on. So now we, as you see that we have no problem in our application. And on the top, we will see that we have some saved area, like before the application was full on the screen. So I'm going to have a control that quickly, just to show you, you see that our application is full fall on the screen so you cannot sometimes read all of those information are multiple forms. So the navigator is using something called Save area navigation or safe area screen. So in that way, you can guarantee that your navigator is working in a way that to save all of this area is not going to move or to the top, to the form. It will have like some space here. So I'm going to put that code back. And as you see, we have here this safe area. So we will see later how we can remove all of those properties. Like for example, we can remove like this name which is called home. We can as well make some another options as we will see later. So now let's remove this import of this view so we don't need it anymore. And we have imported all of this stuff. And our navigator in that way is working perfect. When you get some errors, make sure that you started your application as I told you previously. So you need to terminate the terminal and then clause it totally and then run the application again using the run iOS command, as we saw previously. 40. Navigate to Movies Detail Component: Okay, so in this lecture we are going to add a new screen, which will be the tail of the movie. So when I click here, I must navigate to the detail of the movies or a new component which is called details. So here if you remember in the stack Navigator, we have created multiple screens and one of them is home. So in this way we can as well add the detail page so we can go here and say that I want here details. We can give it like an IM, like a details. And also the component will be called detail. So let's create the detail component. I will go to the screens folder and then I will create a file. I will call this file detail. And in this detail, we are going to create a component. If you remember, we haven't created the component of homepage using the snippets, and we will do the same way with the detail. So if you remember, we have that comment which is called F, are stateless components return. And in this way we will have this const and then we will have the detail. And of course we will have the other information which we need. And let's import as well, they react. So I will say here are your three act from React. And then we will use here the fragment if you remember. So I will put here a component. I will say React dot fragment. And inside this fragment we can place some text, all of you, just to say that this is the movie detail so we can see how we can navigate to it. So I will say here like a text. And this text component will contain, for example, something like say, movie detail, just like that. So in that way, we will be able to see the movie detailed page when we want to navigate to it. And also don't forget to import the text component from React Native. So let's save this component and we will go to our app.js and we need to import the detailed components. So here we have to do an import and then detail from. And then we put the screens exactly how we did with the home component so we can as well get the detail. So in that way, we called the balls component. Okay, nice. Everything is working fine. We didn't get any error till now, so we can continue it and documentation of the library. And if you remember, we have added like one screen and we are going to add another one, which we added already. So there are some inflammation which maybe is interesting for you, like configuring the navigator. Configuring the Navigator comes always like with some extra configuration you want to add to the navigator. For example, he says, like we can add something called Options. And then in this option you can specify a title of this navigation. So that title will be displayed here on the top. So in that way you can have like some extra options. But let's continue more. Like we will come back to this passing additional props later. But first we need to see how we can navigate between the screens. So I want to move to another section which is called moving between screens. So here we have as well something like exactly like HTML. I want to have a link and I press on it, and then I will go to the detail page. But it exactly how it's done with HTML. We will do it with React Native. So we need a button, we need an event. We, when we need the user to click on something to go to the detail of the movie. In our case here we have clicking on those buttons or we can say clicking on those cards. If you remember, this component called card, and we have created this card as a touchable opacity, if you remember. So we need to use as well the component which is called touchable opacity. We need to add the compress function. So we have here on press and then you have to pass some parameters. Let's go to our card and then we will see that how we can do that. So guarded dot js, if you remember, we used something called touchable opacity. So let's go to this component in component library and we will see how we can use this touchable opacity in the documentation. As you see, we have some method which is called on press on press for touchable opacity. So we can use the same method or the same property to specify a method exactly how he has done in the documentation of the navigation when using a button. So let's add this function to our guard. I will go to the code again and I will see here that I have touchable opacity. And then we have compress and we have on press method and compress method. It's not defined yet. We are going to define it exactly how defined in the way in the navigation library. So you'd he has on breast and then it will be a function call arrow function. And he said navigation, dot navigation and details. So in that way, I need to specify in their card that I need to navigate navigation. To navigate to the details page. Okay. And what this navigation come from, from where it comes from here, home screen, you need to use something state variable, which is called navigation, and it's inside an object. And then you need to define a navigation and you can use it inside. So in this way, the homeschooling component knows it has some property called navigation. And this navigation will help me to navigate to another screen. So it's exactly like something, a link, I'm saying, okay, in this home screen I have a links. And in this links I want to link or go to another page which is called details. So let's do the same way. But here we are not in the home screen as you see, we are in a card, in a component. So first of all, let's go to our home screen and then add this object, which is called like inside it, we call it navigation. And this navigation, I'm going to pass it as a props to card component. It's very important because we need to pass this function you cannot do with here like directly. Otherwise it will move at it has out of this DAG of the navigation tree. So the navigation tree must be consistent, it must be specified. So I need to go from home screen. I use the same navigation reference or same navigation three. So I want to pass this navigation tree to my card. So I will go here again to my card. I don't have here cards because I have a list and list contain multiple cards as you remember. So here I need to pass as well that navigation as a prop. So I will define a prop, call it navigation in that list component. So I will go here to the list component. I would have multiple props and one of those prompts will be called navigation as well. So here How will you see that we are passing the navigation tree? So passing the navigation tree from the home screen to the children and component to use the same reference. Otherwise, we will go out from Navigation 3 and it will cause us some problems. Then I have here that card component which I called previously as you see here. And then this guard component as well. We'll have a property which is called navigation. So we need to go to their card component. And in the props, I will add the navigation prop. And in that way, when I have here the method which I want to do on press on touchable opacity. I can use the navigation exactly the same way how it's done here. So remember, the three must be consistent. So it's exactly the way how to keep the dark of the navigation. Okay, let's copy this method now and go to our card component. Instead of these on-premise, we can define the method in that way. So we have here that method navigation, which I have used as a reference, and then navigate to the tail. Here we don't have details. We have a detail component. Why I have detail? Because in the stack I have defined a component which is called or screen navigation, which is called detail. So we have here details, but also we need to define it as detail. So the name here must be the same name of the navigation where you are going to navigate to. So I have here detail, then I must have in their cart as well a detail. So let's save that. Let's save that list. That's safe home and save everything. And then we go to the application. And in the application now I have all the movies. I don't have any error. So when I click on one of them, okay, It says that undefined is not an object. This happened because I clicked on something which is not undefined yet. So we can have, here we have something like in the home screen, we have multiple lists. If you remember, I passed the navigation only for their first list. So we need to pass it to every list in the library or in the homepage components. So we have list, list, multiple lists. We save everything. Now I go to this list, okay, We see that we moved to a movie detail. So in that way, I will be able to navigate to another page using like this navigation tool. And we have now the navigation of that detail. What do we need now is just to style this movie detail and put a real movie detail of the component of the movie. And we will need to see how we can pass the data of clicked component or click movie. So I clicked on this movie, then I want to see the detail of this movie as well. So in that way, we need to send also some extra data with the navigation, as we will see in the next lecture. So as a recap, we have started from this deck. So I will recap it like now quickly. We have to stack screens. So we have one is home, one is detail. And with the details, we need to do something, so we need to navigate to it somehow. So in our application we have a Start home screen is will be this one. So in my case, I want to click on one of those card. And this card is component which I created before. So I will go to this card component and I will say that navigation dot navigate to detail. But in this case, we have a problem from where I would get this navigation. We did the navigation as a prop because we need to pass the navigation, not directly how we have it here in the home screen and in the documentation? No, because we when we want to keep their stack. So I created a prop call it navigation. And then this from home screen using the same method how he did exactly. So in the component itself, I defined the navigation and then the navigation. This variable let's call it, is passed to the list because I don't have access to their car directly here. So I am sending to their list. And inside the list, I define a property which is called navigation. And in their navigation are in the list itself. I have a card, and this card has also property is navigation. So I'm using exactly the same navigation tree. You have to be careful with the thing. So in that way, you will not lose the references because sometimes we will add like go to home screen, go to the top, or remove the navigation tree. So this is very important for you. In our case, we have just movies detail. We are going to navigate to it and see the movie detail. 41. Movie Detail Overview: Okay, what we are going to do in this section, we will see the movies detail. If you remember, I have a demo running on my application or on my Android simulator, and I'm using the iOS simulator. But now if you want to see you there movie detail like what we are going to do in the future or in this section. So when I run here or when I click on one of the movies, I will see like an image of the movie. I will see here some URL like to go back. And then I will have a play button. And also like the title and what Jenner, this movie is belonging to or what category. And also we will have some rating and as well, we will have some description and release date. All of those information will come from the API of our movies. So in that way, I need to pass that data from their clicked movie to the movie detail component as we talked previously. So let's start working with this, and I hope you will enjoy this section. 42. Pass Selected Movie Data to Detail Component: Okay, going back to our project, if you remember, we stopped at the end when we were trying to navigate to our movie detail, but we don't have the data yet. So I want to get the data of the clicked movie. When I click on this movie, I want to see at that as well. So we can go here and as well we can read the documentation of React navigation. So after moving between screens, we have something called passing parameters to the routes. So passing parameters to the route, like I want to pass the movie which I clicked on the homepage and then sending it to the component of movie detail. So in that way, I will be able to read those data. Passing parameter is very, very easy with React native navigation. So you just go here and you can go to the on-prem, like when we created the on-premise on our guard, I pass as well some data as a second parameter of that method, which we talked about, which is called navigate. So actually, when I go to my application and go to the guard component, for example, we go here, guard component and we have defined here the click event or compress event. So here, after I specify the component where I'm going to navigate to campus as well. I can pass as well some extra data. Those data can be the item or the movie which I am sending to navigate to that page. So in this way, I can give a name for our detail. I can call it movie detail for example. So we can say movie detail here. And the value of the movie detail will be the item itself, the item or the movie which is passed to the movie detail or to their cart itself. Now we are fine. We have our card component and we have passed through the navigation the data, so okay. In detail component, how we can read those data. Reading the data in the documentation is mentioned in this way. So you go to the details screen which we have created, and then you pass route and the navigation because we have here that detail component as green in the stack. So in that way, I can't say that I can use a route. And also the navigation route is something in you where we are going to get the parameters. And as you see, he defined a constant. It's exactly how he defined it here. So he has passed item ID and also other params. And then he received them exactly with the same names in the bottoms of route. In that way, I can read as well the bottoms of movie detail and then assign them to some variable or a constant and read those variables or these backups. So let's go to our detailed component. And then in the detailed component, as we saw previously, we need to pass route. And as well the navigation, exactly how it's defined or how it's shown there. So, and then we can define a constant, and we call this constant like movie detail. So in that way, we can say that the movie b del is route dot params. And the name of the component or the object which I have defined here, where it's holding the movie detail. So in this way, I was a movie detail. So here I will have routeParams dot more detail. So in that way, I am holding the movie detail in this constant which I have defined here. So in that way, I can see also the more rename which I clicked on. So when I click on this movie, I want to see the name of that movie. So in this way, we can remove this part and say like movie detail dot. If you remember the field for which is holding the movie name, we have called it, or it's in the API called a title. In that way, when I click on this movie, I will see that the title of that movie which I clicked on. So here we have multiple movies and for example, I have familiar movies. This is Luka, another RIAA, and multiple movies. And it's dynamic for me. So in that way, I am passing all the data inside my component from the card which I clicked on. So the movie came from as an item, as a prop to this guard and then it's passed to them movie detail. And then in the detail, I read that data and I busted here. 43. Movie Detail Service: Okay, now in this lecture we are going to use the movie detail service. Okay, maybe you are going to tell me why you have to create a movie detail service. Why you need to grab the data of the movie again, when you have already the data defined in the movie detail. Of course, the API as you see here in our movie DBAPI. Okay, we are lucky that we are getting when we get list of the movies, for example, the popular movies, We are getting all the movies somehow in this way. So we get in the results, the more we bolster and adult and genre id saw in this way, we can be known that we have enough data. But if we check the movie detail, if we go here to there, get details and we will see more v, and then we will get that detail of the movie. If we go to it, we will see that we have more details. We don't have only like genres. We have ID and the name of the journalist. So we can, in this way that we can get all the, for example, information in detail, not only IDs. So first of all, I would go to my services and then create a new service which will be called get movie. So we just need to get movie detail. So in that way, we will copy one of those APIs or those services and we will rename it. We will say get movie. Here, we will pass the ID of the movie. We need to pass ID because as you see here, our API is it acquiring an ID? So to get a movie, I need to get as well the ID of it. So in this way we can have the same API. So I will put this one like here. We can have a movie slash movie and then we get rid of all of this. And we will have only like this. So we will have API URL, the basic URL slash movie, and then the API key. And we don't need these with genres. So in that way, we can save and we will have our service ready. But the data, it will not be with the results because if we check it, that response here, it says it will give us directly an object containing all the data. So I will go again, took my service and I will say return directly, that is ponds dot data. Also, if you know these in my API, as you see here, that we have to pass the movie ID. So if I go here to the movie detail, get details, I have to pass through the movie ID in the URL or in the API. So in this way, it's not enough to have it like this. We need to pass as well the ID. So in that way we can have here this method, and then I can say here slash. And then we put another parameter or another defined parameter, which will be the idea which I am passing here. Okay, exactly how we did before with the homepage, more we all getting list of movies, if you remember, we have called that state and then we said the user state and then use effect. And then we were getting their service and then setting the result of that service inside my constant or the state constants. So we will do the same. First of all, I will call like a detailed constant. I will define it here. So we can have here constant which is called detail, and then it will have a set detailed as well. And it will have used a state. So we need as well to import the user state. So now after that, we don't need this movie detail anymore, but we will need the parameter is because I am going to have the ID of the movie. We can say like on that DO put it up on the top and we can say movie ID. And then we can pass in the movie detail also dot ID. Because if you remember, we have in our parameters, so we can go to our API, which was, for example, gets popular. And they got popular. We have in that response ID, we are getting ID of every movie which we are clicking on that guard, not only their name or their Dido, we can have the ID as well. So after that, we can also use this movie ID to get the data of that movie in detail using our service. So in that way we need to use as well an effect. So we say use effect and this huge effect as well, we are going to import it from react. Sometimes it's onboarding automatically. You don't need to do that. So you just need to fix the import automatically so you can have like more consistent import. So use effect. It has a callback function and this callback function will contain for me that ability to set or set the constant values or the state variables with the result of that sediment. So as we did in home, if you remember, we were getting that data then and then we were setting the data. So in that way, I need to import my service which I have created before. So I will say get movie and then I will import this. Service, I will say here, Import, get movie from. And then I was say, the path which I have defined my services. So I will say maybe here, one step up, services and then services. So in get movie, I will have my movie detail. So here we will say gets more v. And then we will pass the ID, which is movie ID, as we said here. And then this will be a promise as you remember. And so I will say here then, and in this then I would get movie data. So in that way, I will have a callback. And inside movie data, I can say set detail with the data which are coming in that response. So I will say here said detail, more readapt. And of course, to guarantee that this executed unlimited of times, if you remember for the memory leak and performance, we need to put this an array empty. So in that case, we will not have any issues to not be executed unlimited of times. But as you see here, ES lint is complaining saying that movie ID is not known. So it's like either you included or remove the dependency. So to solve this issue and keep that we are calling this service only one time in the effect and don't have memory leak, then we just need to pass movie ID here. So in this case, you will get rid of ES lint error. So in that way, I will have the detail, or we can call this again like movie detail. So in that way, I will have more detailed and set movie detail. So to have more consistent naming. So I will rename this to set movie detail and then more of the detail, I can use it here. So in that case, we will save, click on one of the movies. As you see, we are getting error. We are saying undefined is an object. For example, this happened because the movie detail are not ready yet. So if you remember, we used loaded. So after loading the data, then I can render my application or my page. So in that case, we need to define another constant. We call it loaded and set loaded. So in that way, the default case of this set loaded or they're loaded will be false. So after that, I can say here that if loaded or first we need to set loaded. Because here we have then, and then we put here set loaded. And it will be true because we have said that data successfully. All we got the data successfully. So we can have here as well and object, if you remember, we say loaded and then we put this inside those brackets. And we are guaranteeing that we have the loaded state of our application in the right way. So let's save now and go to one of our movies. So I would go here and I will see like for example, this one. And we will see that we have an error. It's saying Service Default not a function. I am making this mistake by purpose just to make sure that you are, when you are importing a service or a function or a constant, you will need to put it inside the object brackets when you are going to import something or a service or a method exactly in the same way how we define it because we have constant and then get movie, and then we define our method. So in this way, you must be sure that you are using those brackets. After that, it will work for you. So now we have here the movie name coming exactly how expected, but the movie name is not coming from the navigation, it's coming from the API. After it got loaded, so forth, the movie, The dare, let's start first to create a ScrollView. If you remember, we were using the score of ScrollView in the homepage as well. So I am going to do it fast. So I would call a ScrollView. And this scroll view will be imported from React Native. So I will go here inside the fragment, I will have a ScrollView. And in this scroll view with come from React Native as well. And in this scroll view, maybe we can add some styling to it or we can keep it like this for now. And inside this scroll view. So I can move all of this scroll view or this loaded to the scroll view itself. So inside it will be the text. And here we will have if loaded and scroll view then put for me the content. So we can't have that in the right way. So I just need to close this object and then save. Okay, we have loaded. And then inside the ScrollView, for now, I don't need a text. I need the image, if you remember. So I will replace this with image and this image component. We can import it from React Native as well. So we can say here image and then this image will have like some properties. So if you remember, we used the image component in our guard. In our guard we defined all of those properties. So I don't need to repeat them again. So we can use all of those properties. I can copy all of this image. Just we need to replace some parameters. So I will say here image. And then we need to replace like for example, resize mode is fine. Style, okay, we need to add styles for that. So let's copy the same styles. So we can copy all of those styles except like some classes. So I put here the constant stylesheet, we need to import it. Again. Everything is exactly how we were doing before, so I don't need to explain them again. So we can have here the image class and we can get rid of all of those glasses. So in that way, we need not have an item, but we wouldn't have the movie detail. So at the movie detail, dot poster path and then the liver there is movie detailed poster path. Then display, otherwise, display the place holder image. We don't have that place holder image. So in that case, I need as well to copy it. So we can define a constant, call it place holder image, and then we can use it as well here. So I will have here place holder image, and in that case, our application will work fine. So we have the placeholder image, we have image, and after that under it, maybe we can put the description of the movie. So let's first try that. If we have working fine, all of you are working fine. So I will put here, okay, The styling looks ugly because we are using the styling of their card. So to have like more proper styling, we can give height like something like we can keep it 100 and remove this width and the more of this border-radius. So in that case, we will have the image like this. Or if you want to use some specific percentage from the screen or the mobile size or mobile screen. So you can as well use the dimensions which we talked before. So first of all, I need to import the dimensions from React Native as well. So here in React Native imports, we can say import for me the dimension, and then we can define constant. We call it height. And this height will have dimensions dot get. If you remember, exactly the same way we can say screen dot height. So it can give us with high detail everything. So we need only the height. So in that way, I can say the size of the image will be height divided by, for example, half or divide by two, we can say. So in that way it will have the half of this green here. So that's nice. I guess it's enough, or maybe you can put it like lower. You can 2.5 to just have like some sizing to have more space for using and displaying the information of the movie. Also, before I finish this lecture, we can as well display like if there is not loaded, we can display like activity indicator, like a loading indicator as we saw before. So we can say, if not loaded, then display the activity indicator in a larger screen. So we need to import as well the activity indicator, as I explained previously in the lecture when we were loading the homepage screen. So in that way, we will go to our simulator. And when I go back and go to one of the movies, and then I will get like loading because I have fast connection. So I'm not getting, I'm not seeing this loading indicator. In that way. You will see a loading indicator if you have a slow connection. So the benefit which we got here actually that we are passing the data from the navigation to the detail movie. So in this way, we don't need in that guard to pass all the movie data because we need only to pass the movie ID. So I can't see here in the card simply that I want to pass only movie ID and then not all the movie data which we got from the API. Because as you remember that the movie or the item here, it's containing some information about the movie, but not all the detail. I mean, the ones which we see in the popular movie for the example, we have in the API, like all of this information. No, I need to pass to the next screen only the ID, because again, I am creating an API call in the details clean to get a movie detail. So in that way, I will say movie ID and then passed to me the item dot ID. So nothing special. We are just passing the movie ID, Not all the movie to the next screen. So when I click on a card, then I go to the detail screen and then I receive not more we detail. I will receive movie ID, exactly the same name how I specified here. So I have here movie ID, then in the detail I will receive as well from the params movie ID. So when we go to this or mutator and try that again, Okay, We are still fine and everything is working. So in this way, the navigation will be fast because we are passing only the ID. I am not passing all the data again to the next screen. This is very important for you to do exactly when you are developing mobile application to not pass a big data or big amount of data between the screens. 44. Movie Title and Genres: So now let's make the title of the movie and the genres. So in this way, we need to create a text component as we did before. So we need to have here the x component and we need to import it as well. So I will go here to the text and then I will import this text component. And in this case we need also the to put some data inside it. So I will say here this play for me the movie detail, that title. So let's do that and then tested. So we will go to the popular movies at Click on it. Okay, we have the title here, but the title is small, so we need to make it bigger. So we need to give it some styling. So I will say here to style. And then I will define an object. And this style will have a name. We can say styles dot. We can give a name like movie title. And in this way we have to create again the class which is called movie title. I would give forum for it like some font size can be 24. So we can say here 24. And then here I have to put the colon or the font size. It can be 24. And as well, we can put font-weight, we can make it like bald. So we can hear have something like bald. And as well, we can add some margins and padding. So I will say margin top. We can put here margin top, it will be 10. And margin bottom, like to push the content under it to be like again 10. So we save, okay, Nice. We have everything fine. But we need to center it. But let's center everything like we can center all the content. So I will give a class for the scroll view. So I give it a style. And in this style I will define exactly the same way how we were doing with their containers. So I would say styles dot container. And that container, everything would be centered. So we can copy the same thing which we have here, flex one justify-content center, align items center. So we would go here and then we will put the glass, or we can say here container. And this container to be an object. And I will put this dial inside it. And I will not forget the comma. But as you see here, we are getting an error. It says that ScrollView child layout, like we must be applied through the content container. So we need to put everything like something inside of you. So we can call here a view and we can wrap all the text inside or all the contents which we are going to do here inside that view. And then doing this dial of this view, we will give the container. So we need to remove that from here and paste it in the like, the view itself. That's why I am using a view. So, you know the reason because you cannot put it for ScrollView, as you see here that we got that error. So let's import the view and then we save. And again go to some movie. Okay, we have now the movie title in the middle and there is padding margins, top margin under. Now let's work with journalists. So if you remember, we have for the movie some generous. So all of them comes with the movie itself. So we need to see how we can get them. So as you see here we have in the API, I go to get detail API. And you can see that is ponds directly here. You don't need to use Postman for example, you can use here the response in the documentation, this API. So the generous will be again like some array. And this array have ID and name. So what I need is only the name. So in that case, we can go to our code and create an array of generous and then loop in some text and display all the generous. So let's create a view in, again inside that view. So we say here of u and b have to make sure that we have generous because some movies doesn't have. So I can do that. Is it it when I say like I opened an object, then I can get movie detail, exactly how we did before. And the field name for generous, the field name is journalists, as you see here. So first, I need to check if I have really generous because some movies doesn't have. And then I can display the view. So in this way, I will put the view inside those brackets. So it's exactly like an if. And inside the view itself, we are going to loop over the journalist and make a text component. So I will have here at text component, Let's align this here to be on the same line. And then inside this text, I want to loop and display all the generalists because some more we, they have three categories, some more view, they have five, some movies they have to. So in that way, I need to loop over them. So how we can loop? So in the view itself, I can open again a bracket. So inside it I can write JavaScript. So as you see, we can write JavaScript inside the template. So this is the goal of this lecture. I want to show you how to write JavaScript inside, like the template of these React native components. So we can say here, like loop over journalists. So I can put here generous and then map. So with this map, it's like, you know, that map is looping over all the members. So I would say here, and this map, it will return for me like single or item by item. And then I can use that for wrapping the component text in it. So in that way, I'm going to return not only like their gender and what I will do inside it. So I will return a component, and this component will be the text. So I will put here return and then I will say that text at, in this way here, that January, I can display the name of it because I am looping One by one over it. So as you see here, is jealous. I am looping over them because it's array and I get the name of every gender here. So we can go and check our application if everything is working fine. Nice. I have here all the information. So this movie you luca, has animation, comedy, family, fantasy categories. But here we have a node it saying, like each child in Alice should have a unique, say what is it? Unique key prop. This is because that we have here like a text and we are looping multiple times. So I need to specify a key property. The key property must be unique. So the unique thing we can use in that case, that we get the ID of the January. So we can say here that key can be not only like any number, we can say gender, like the same, which we used dot ID. So in that case, we will have this notification gun and the text, or every text has a unique key. So through map, I looped over the genres and then I have them like displayed as a text. But here as you see, they are listed under each other. We want to display near each other, display them near each other. So for that we can give style for this view. So we can also use like style and give it like some specific view. So we can't say here instead of style journal, we can say journalists container. So in that case we can give a class with that name. I will go here and define that class. And it will be like an object as well. And to make them near each other because we are using flex. So I can't say flex direction. If you know in CSS, I can put something called a role. And also for alignment, I can say align content or align items. We can say center. In this way, they will see that or they will look like they are near each other. But as you see the artist ducking to each other. So we need to make some spaces between them. So again, I need to give a style for this text item inside the array. So we can say like just style gender. So we can give a class. And this class will be located here. And then it would be an object. And I can give some margin, right, margin left. So margin right, it will be, for example, we can give it ten. So let's try that, okay, as you see here, we have all of them pushed far from each other. Of course, you can add more stylings. We need to achieve exactly the same styling we can give as well. Like some font-weight can be walled as well, so it can be more nice. So I will give it a font-weight bold. And let's push the container a little bit from the top, like about 20 pixel to have like more space for the title. So I will give here my margin top, Let's give like 20. So in this case, I will have their generous and the title of the movie exactly how we explained here. 45. Movie Star Rating Component: Another information also which we need for our movie detail is the star rating. Like how much this movie is rated? If we go to the API, we will see multiple fields for getting the movie detail. And one of those fields is vote average, and also there is a vote count. So the vote average field is giving me the rating on ordinary review over this movie. So for example, let's create a text component and print out this value. We go to our code and we are going to create another text components. So we have here the view we are done with it. So under that we can create another text component. Of course we are going to remove it. It's just for a test. So I will say here, just print for me movie detail Dot what we have here, the vote average. So we can have in that way, the movie are average of the movie. So as you see here, we have the 8.38.3 of ten because they're rating or average of movies is rated from 10. But we want to use a star rating component. Star rating component will have a five-stars. In that way, I can divide this by two, then I can get the value from five. So we need a star rating component. So where we can find that. Unfortunately in React Native, there is no star rating component like built in with the native. But we can find one if you want to find star rating component, just Google it, and then you will find it easily. For me, I am using one which is called React Native star rating. So we just put this one and I will find in the npm package something called React Native star rating. So let's go to it and we will see that documentation of this rating. Of course, this component, a lot of properties exactly how we saw with other components which we used previously. And here an example of using it. It says that just imports drought star rating and say disabled like to not make it as input so you cannot click on it because it's only presentational value and maxes stars, you can define as much as you want stars and rating and then the value of the rating which we agreed. And also like selected stars, when you are clicking on the start or on the rating. So let's install this component. First of all, we need to go and see how we can install it. Installation is just npm install React Native star rating. So we can go here to our code, open the terminal, and then we are going to go to the terminal tab, and then we will paste the command here. So in that way, we install the library of React Native star rating. We will be able to import it and use it in our application. So the way of importing this component, as you know, always, we are for example, we see the examples. So here import star rating because it's a class from React Native star rating. So we can go here to our component. Let's close the terminal because we are done with it. So here I will say, OK, import for me star rating from React Native star rating. And here I can use this component. So instead of the text, we can put star rating, and here we will have a star, right? So one of the properties which we need is max stars and the rating value. So let's take them. We can hear go and say like we remove this part because it's one side components so we can have something like this. We don't have to close it again. So in this way we can have Max's stars. It's exactly, it has auto-complete so we can see it. It will be five. And as well, we need to have the rating value. So the rating will be the same rating which we have defined before. So it will be movie detail though, vote average. So in that way, I will have their rating in this value. But as we said before, the value is 10, so I will divide it by two. So let's save that. And then our application will load. And who would get some error is something called unrecognized form family. Font Awesome. This is because this library is using Font Awesome or font icons. So in that way, we will not be able to use this library until we install another dependencies, as we see in the documentation. But if you want to remove this arrow, you can put this miss. And all you can save again to remove this error, okay, But the error still in the background and the terminal, but it shows you the reality of the problem. As you see here. Ok, We have four stars, but the problem that the stars are not showing up because there is no icon. And as you see if you go to the documentation, they say that after the installation you need to link to a library which is called React Native Victor icon. So in this way, we need to refer to this icon or Richter icon library guide. So sometimes components are depending on other components. So in that way, you need always to install those libraries and be able to use them. Installation of the icons need a little bit of work. So I am going to make it in a separate lecture. 46. Using Icons in React Native: Okay, So in the last lecture, we stopped here where we have an error because we cannot load the font or the icons which we want. So as you see here, we see only a question marks. We said that this library between installed about star rating is depending on another library, which is called React Native icons or React Native Victor icons. From React Native 0.6. You can only run this comment and you are done. You don't need to do anything else only if it's some problems appear to you, which I will mention in this lecture. Because in this library, as we said here, we have multiple steps to install it. But this works with React Native with less than 0.6. So if you have the React Native less than 0.6, then follow these instructions. Otherwise, it's enough to do npm install and install layer ready and then restart your application and everything would work fine. I got this link exactly from the library of star rating, as I told you before. So React Native, Victor icons, this is the name of the library and here there is installation guide about it. So let's go again here to our terminal and paste this comment. We want to install this library which is called React Native vector icons. So in this way, the star rating will show us the icons in the right way. So here the installation is done. Okay, when I save, I will still have the error in my application. I would still not see or still getting this error. And I cannot see the icons this because you need to restart the application. So in this way, we have to restart, go to the metro and then we have to terminate it because this terminal is opened automatically. So we have to terminate it totally. And then we keep, of course the simulator, no problem. We will see let deeds connected from Metro. And then we'll start our application again. In this way, it will load again with the right dependency, with the right libraries. And we will see the icons again here, exactly in this page. Okay, so now my application Guthrie started. I have opened a new metro. So in this way, I can go to my movies and click on one of those movies. Of course, maybe we will get the error again because I want to show you if you get the error again what to do. So normally for some devices, it will work, but here sometimes the error will still show up. This because you have to do something more which is required from you. There is a comment in the documentation you will have to do, which is called React Native link React Native Victor icons. Though in this way, you will be able to link React Native with this library. So in that way, you can always link their iOS library and also on the iOS project and also the Android project to that library. So only when you get this error, then you can use that command. So I will go here and paste it. And after that, you will see that law library got linked, but we still not see the icon because we need again to restart the application. So this, when it's happened to you, then you have to go with this option which is called React Native link, and then use this comment. You must execute this command in the same path of your application. So I am here in the movie app and I am executing that command which I mentioned to you, react Native link, React Native Victor icons. So in that way, we need to restart the application again. So I will go and terminate the terminal. And then I will say here, React Native, run iOS or Android is depend on what you are using. Perfect here now my application is running. I want to check if there are stars already. I would go to one of the movies. Nice. We have the stars already here. But they are like big and they are like that style, well, and there are like they are clickable. So for that, let's add some properties. Some of those properties which are mentioned in the documentation of that library, which we used for React Native star rating. One of them is called disabled. So we can as well disable all of those icons are all stars. So I can put here disabled property. And with this disabled property, I can set it to true. So we can say disabled. And then we set it to true. This way, the stars will be disabled. So I go here and we will see that they are disabled. That is also another property which is called full star color. You can choose the color. So I can also use this property. So I can put here for this dark color and we can put a special color like a CSS color. So I would choose gold. So in this way, I will see that the color is changing to be gold, as you see here. Also, the stars are quite big, so maybe I can make them smaller. So we can have some property which is called star size. This star size, we can give a size in pixels. So I will put here star size, and I will put, for example, 30. Let's check the application. Okay, Now we have the started like this. That's very good. So now every movie has its own rating, as you see here. So we have here nothing. Sometimes there is no rating. Sometimes it has a rating here. So we have all the rating, but let's make some space so we can push the content of these tags under. So we can go to the where we have the journalists and we can add or we can container put padding button or margin-bottom. So we can put here margin bottom, and we give it 20. And then we will push that content in that, that way. Of course, this library, which is called Icon Library, or we can say icons, vector icons. It has also a lot of properties. We can use a component which is called Icon. And by assigning the name of the icon, as we will see later, you can specify, display some icon on your application. So we will see later when we need one icon, I will show you how to get a component icon and use it in the application. 47. Movie Description and Release Date: Okay, let's add in this lecture some like release date and also some description of the movie. If we check again the API of the documentation where we have the movie database, we have some fields which are like, for example, important for us to display some information about the movie. For example, we will have something called Overview. It will be like a string where it will have overview about the movie. And also there is some information like we can provide it to the user about releasing date of this movie or this TV show. So we can add them easily loss or we can do something like after the star rating, we can add two text fields. One will be for the release date and the other will be as well for the description. So in this way I will have two texts. So one of those texts will contain for me the movie detail. And then I copy the field which I have or are responsible for the description. So I will put here overview. So this one will display for me the overview about the movie. And also we will have another one which will contain the release date. So I can use here as well like string, we can say release date. And then we can put like here some space. And after the quotation, we can place a blast like we can add another text or which will be a valuable. So I would use more of the detail and then I will waste or I will have here the release date. So the release date which I got also from the API, as we saw here. So we have here release date. So in that case, let's save and we will see all the information. So let's do now some styling about those texts. So I will have here like as well as style. So the style will be the same how we did here. So we will give a class and we will say here like overview at as well here we would give like something called release date. We can say here, release, so just released as a class. And then we can specify those classes in our style sheet. So I would go down and I will say that I have a class new one which is called Overview. And this overview, I will give like a margin and padding from top and down over the stars reviews and also to the release date. So I will say here margin bottom will be like for example, 15. And also margin top will be 15 as well. You can put the values Any think you want. I'm just showing here like we have an educational course. So now as you see, we are sticking the content on the borders of the phone. So we need to give some space so you can give a spacing using padding. So in that way, I can remove, or for example, I can say like give me padding, left, padding right. But I can remove those as well. And I can say give me only batting from all fours besides, like I can say here from top, right, left, and down. So I can say, give me a padding which will be 15 pixel. So it will push the content from up, content from down, and also from the sides. And last thing we can give release date, which will be like a bold we can give it a bold color. I would say release, and then I will have a new class, or it could be called release. And this release would be object and I will say font-weight will be with a value called bald. So in that way, we will have the release date in this way or in this nice way. Okay, now, as you see here, we have the date formatted somehow in ugly way like not arguing, but the standard database formatting, we need to format the date based on some, for example, on your country. For example, in my country in Europe, they put the day first and then the math, and then after that they put the year. So not like this. So I want to format the day in somehow, which is suitable for my country. For that, we need to install a library which is goal date format. So I will go again to my terminal and I will say npm installed. And the library name is called date format. And with this date format, I can put it save, and I can install this library and use it also in my React native code. So after installation the library, I can say import for me a function from that library which is called date format. So I can say import date format from date format. After that, I can use this library easily as a function by saying it in that way. So let's close the terminal. We can go down and then say here that I am going to call this function which is called date format. And they'd format, as you see, it's telling me to provide a date as a string and then mask or the format. So in that way we can know what is a mask from the documentation of this library. So I would go here to the Google and i o put the date format React native library or date format MPM. And in this way I can find a library which is called date format. And this one which I am using. And we will see the documentation of this date format. So as you see, there are multiple format way to format your dates. So in that way you can choose the suitable format for you. So for example, I want to have something like, as you see here, it says here if you put four M's, then it will give you the month as its full name. If you put YoY, it will give you the year. Please be represented by four digits. So in that way, I can choose a format which I like. So you can read the documentation and check the format for me. The format which I like is one. So we go here and go to their format as the second parameter of this function. And I will say here comma. And then I will put quotations as string, and then I would use this format. This will give me the name of the month fully, and then it would give me like the day 17th of June, for example, 2021. Of course you have like for example, if I put here D, D like, then I would get June 17th, 2021. So exactly how you can implement it here. So you can just copy whatever you want. You'll need hours, you need only month orderly, for example, that they, you can get what you want through this library. So for me, this one, this format which I like the most for my application, and it's most mostly understandable for the users. So I can use that format. So in that way, we learned here how to format a date and how to add more information about the movie. So in this way, we are going to implement next about a play button movie, where we can play the movie in some dialogue or in some model. And we can see video of the movie. 48. Movie Play Button: Okay, now in this lecture we are going to have a play button here. Of course it will not be functional because we need a model, we need a video. But let's create a component where it plays a play button here. So it can be clickable for the user. So he can be able to click on it to see the video of the movie. So I like always of course we can use touchable opacity or repressible, as we saw before, but as well, we can create our own component, do not have so much code here. So of course, you can always hold all of this content inside some components, but as well, you can't give them here. For now. I'm going to create a component, especially just for the Play button. So in this case, I'm going to have here like a container as we see. So we will have here another view. And this view will hold for me my component, that component which I told you we can't call it a blade buttons for example. And this Play button, I'm going to create it. So it's not, something exists in React Native is something which we are going to create. So to create a component, as always, we just click on our folder components so you can put it anywhere, but I prefer to have it in components. I will create a file, call it play button. And this Play button, NodeJS, I would create a pure component. Creating a pure component, as we did always using B, C, S like pure component class. So in that case, we will have the butyl component got created and as well, we need to import React Native. So we can say IMR, then we can say import React. And then after that we have to say React.com because it's pure component comes from react. So we need to extend our component from React dot pure component. So let's remove now the state. And then we need here in return some template. The template which we are going to use is touchable opacity as we used with the card, if you remember, or we can use something else or more modern, which is called principle. This principle is in U, as you see here in the latest version of components in React Native, we can use it and it has a lot of functionality like on press in, on press out and on longer press and like on breast to the left, breast to the right. So it has a lot of functionality over that touchable opacity. So in that case, we can take a look and use it to have multiple variants component in this course. So how we can use it, we just need to import it from React Native. So I will import the component which is called repressible. You have to be sure that you are using React Native 0.6 and above. So in that case, you will be able to have it. So I will put here Import and then precedential, or we can have it as an object from. And we will put the React native library. So in that way, we will have precedential important. It's exactly like the touchable opacity. You, as you see here, we use that previously, but they are saying like if you are looking for more extensive and future-proof way to handle touch based on input, check their ABI So they are recommending to use this component. So in that way, I can take all of this content. So here we have some example. We can copy all of this content and then we can place it in our code, like in their return. And after that, of course, we need to import the text. So we just need to take a look to it. So we have here something like some button, but we didn't call our component yet. So we need to call the Play button component somehow in our application. So in the detail page. So I'm going to remove this on breast to not have an error. So we can just have preferable text and I am addressable. So then we go to the detail page. I will import the Play button exactly how we did before with any component. So in here I will say Import. And then I will put my play button from, and then I will put the file or the folder components, and then I will put my play button component. So here we have an error. We job because we did it, close the components. So we have here Play button, we need to close it like this. So we save again and we will see that we are still getting an error here. So the error comes because of the import. So always when you are inside a file or you are important, a class or a constant or anything, you have to make sure that if you have that default, import is like Play button. So, so in our case here, the Play button component is exported as default. So you don't need to put it inside this bracket. So when you need to put it inside this bracket, like how we have in the case of services, we have multiple constant, we are imported and none of them are default. So in that case, I put it between a brackets. So otherwise, if you don't know, if you have only one component here, then you just put it like this without brackets. So this when you get this error, so make sure that you have always the right way to implement the things. So here I am possible. So as you see here, our component and got executed in the right way. So we have the button here, but as well, we need to put a play button and it has some icon, which is a play. So to have an icon, if you remember, we talked about Icon Library, which we have installed previously in our application. So we need to import as well the icon component here we can import something called icon from the library which we have installed before. And the name of the library was React Native icons. And this React Native vector icons you can choose as well like a library which the icons belong to, because this library contain multiple libraries like, Oh, font awesome, like ionic, for example, icons, Google materials, etc. So when you put slash here, you will get multiple options, like material icons. Then you can choose from material icons. But when you choose ionic icons, then you have to go to ionic icons and choose the right icon for you. So in my case, I am going to choose this ionic icons. So here, if we go to this ion icons, here, we need to go to the documentation of this ion icons. So I'm going here to Google. I will put ion icons and then ion icons would be replayed for me. So we have all the icons here, then I can get the name of the icon. So in our case, we need a play button icon. So we need this one. So we can have here carried forward outline, so you can copy the name from here. So I copy the name and then I go to my application. I call the component instead of the text. So we have to open it and close it again. We remove this compressible. So here the one properties of this component that it can take a name and inside this name you can define the icon name which you copied already. So we can have here because we are using this library. So I am going to have carried forward outline. So it's exactly the name which is specified in ion icons library. And for sure you can give as well some size. So we can give size. It's exactly how we did with the stars, if you remember, we gave it. So after we save, we will see that the icon got displayed in this way. So we don't have any issue with the icons. Let's try another icon just to make sure that we are really doing well. So I'm going to copy the name of this icon. So we have here something called circle in the middle. So we have just not forward, but we will put circle. And then I will save. And as you see, I got the icon in that way. So this is a way how we can have multiple icons in our application. It's very great library. You can use all the icons from most famous icon library in, on the internet. Here we have like complain from ES lint. We need to remove this icon from here and we close it with one clause so we will not have an issue. This text component, we don't need it anymore, so we remove it. And now we need to have the principal or this button all totally to be placed here somehow. But before that, let's style it. So I would give for this button like some style or this possible some style. And from styles which I am creating from the style sheets, exactly how we did before. So I'm not going to repeat it every time we have to create a style sheet. So the style sheet, we have to import it again from React Native. And then I created a styling for this button. So align content like the content will be in the center of the button. And also we need a border-radius. I put 50 because if I don't put 50, it will be like a rectangle. So I gave it a lot of border-radius to make it like circular. And then weeds. And we have some height or you can give a bad thing as well. So you can give like a width 50. So it will have 50 pixel in wins and some padding to push the content 10 pixel takes a pixel from every side. And then I gave a background like something like blue. Of course it's ugly color, but we can have like more nice colors. So I have some color which is hard-coded defined, so I got it. So I have here hash and then the number or the code of the number or of the color. But we can give for this icon some coloring. Like we can give it like a color white. So you can have a property here. We are not using a style folder icon because in the documentation of this icon library, you can use a color. So if you go to the documentation of this icon or the icon library which we have used here, you will see all the properties which you need. So what I need actually is property called color. Then you can define the color which you want. So in my case, I will put the color white here for the icon. So we have here a white color. So in this way we are done with our component of Play button. So we have called it. Now we need to position it somehow like here. So if you remember, we have created like a positioning. So we can give us time for this component. So we can all, we can give a style for the view of these components. So I will have Here style and then I will use styles dot, and then I will give a Play button. So we can have here Play button class. So the Play button class will have some special requirement. So we have at the end, we will put it here so we can have a play button. And this Play button will have a position which is absolute. So we can absolute the position of this button. So let's Save now to see where it's going. Okay, as you see, it has absolute like some position and it was centered in the middle of the view. Which view? So the view which we have defined here as a parent. So here we have a container and then inside this container after the image. So it will be this view because the view over it or this other component over it is an image. So in this way, we will have this view as a parent. And then we have another view where we have this button. So in that way we can give positioning top for this button which can be, for example, minus 20. So this is after I calculated. So you see it has been here because if I gave 0, then it will be from the beginning of this view. So the bad end, this one which I told you. So it has a top 0 here. So this is proof of my OK That, that this view is a patent of this component. So I will give it minus 20 and then we can give from there, right? Like we will put it here on the right. Also a 20 pixel, not minus 20 because it will go out of their content and it will be 20 pixel. So the button will be exactly here. So let's position it in more nice way. I think 20, 25, yeah, like this, it will be mostly centered. So in that way, our button is ready so we can have some principal function to a play or a movie, which we will see in the next lectures. So we can have a model to play a video when the user is clicking on this button. 49. Video Player Modal: In this lecture, we are going to see how we can play a movie when we are clicking on this button. But before that, we need to see a place where we can play this movie. Normally you, when you want to play a movie in a full-screen, you can use a model. And model in React Native is a component which is already defined in the components of React Native. You can use it as well to display some content on the screen to show and hide it based on user behavior. So for example, as you see in this image, you can have like some a title or a text and okay, or notifications. In this way you can see a model over the application layer. So in that way, you can place a video inside the model and play that video for the user. So first, we can have a model in our application to be or to play a video inside it. So let's create this model. First of all, when you go to documentation of the component library of React Native, you will see something called model. And in this model we can use it to display some information inside it. So first of all, we need to import a model from the React Native. So let's import this model. So I will go to my code and go to the details screen. If you remember, we have placed a ScrollView. So we have the scroll view here, which is all of this area of our application. We are going to place it outside of this area. So after the closing of ScrollView, so here we will place our model. So I will say here model, and then I will close the model. So we need to import as well the model from React Native. So we save that. Okay, The model has some wrapped in closing tag. So in that way, we need to wrap all the content inside a view like which has a scroll view and the model itself. So first, before the scroll view, we will place a view. So we can have a view component here, and we close it after we have the model closed. So in this way, we will not get that error. So how we can use that model, this model require some information to add it inside it. So first of all, you see you need have some animation type. You need a transparent or some properties which are always defined here. First of all, let's have animation type, which will be slide. So we have here like property called animation type will be slide. And as well, we need to have some visibility and also onRequest close. And if you see here, we have inside it a content which is dynamic and you can put what you want. In our case, we are going to put a video here. So first, we have to set a visible property, and this Visible property which will be called model visible. And this model visible is a variable which comes as a state. So let's copy also the state variable and go to our detail. So in our state variables, as you see here, we can define the model visible state. So by default, the model is not visible when we are visiting this page, only when we click on this button, as we will see later. So back to the documentation, we have to put modal visible in the, our properties of the model. So we have here something visible which is property about the model if it's visible or not. So I will go here to the model and I will set this property. So in this way, we will not have the model by default. So by default it's false. But when I put it to true, so let's put it here to true. So you will see that we got some whitespace. This is actually the model, but here we don't have any content. Let's put some content inside it, like I am going to put here inside the model, some text component. So I will call here at text. And I will put inside this text like some name or hello, like we have to put it long hello or old, something like that. You will see that the model is here as you see, but the text is totally on the top of the phone. So the model is visible. So in that way, everything is working fine. So you don't have to worry about this white screen. Now, Let's set back the default state of this visible of the model to be false. So now we don't want to see it anymore. Okay, nice. So our requirement now we need to have to set this model to be visible by clicking on the button. But here, our button is not directly the principal component which we have created inside the Play button. So in that way, I need to pass also like this model visible to this button so I can click on it. And then inside the Play button, I can go to here to the repressible and then set on press as one of properties of this component. So we have a function where we can say, okay, height for me, the model, but how we can pass a function to the component. So I need this component which is called Play button and I created to handle also clicks because here now it's not handling anything. And if I handle the cliques inside the play buttons, I don't have access to the, for example, the variable which is called model visible. So in this way, I don't have a possibility to link between those two components. It is exactly the same way how we were sending properties do a component from a parent component, we can as well send a functions. So for example, I will say here that I will put a property which is called handle press. And this handle press, which will be something where I can call a function or a function and do something for me like Set visible to be true. So how I can pass a function property to a component in React. So to do that, we can go as well exactly how we were defining a component or a property for this component using React. So first, we need to define handle breast or a constant like after the render. And I say this constant called handled press Add. It will be from this dot props. And then on press of processable components. I will say that, okay, execute for me this breast, but call the handled press. So in this way, I will have it in that way. Because if we go to the documentation of this library, all of this press U, as you see we have here on press. And then he is passing something like a function. And then he defined a custom function which he want. For example, set pressed, something like that. In that way I can say, okay, execute for me that function which is passed to the Play button component. So in that way, when I save and also an ISA, this one, I will say that okay, handled press is working for me, but here I need to define a function. And this function will set for me the model to be visible or not. So instead of that, you can define your own function. So I will say for example, function which I will call like video shown. So this video shown will be a function, but you don't execute it, because if you executed, then it's wrong. So it will be executed directly. You will not handle that because we are handling the execution inside the Play button component with this. So if you see we are having handled press, which will be in that case the video shown function, which we pass through this component and it will be executed here. It's a quiet, complicated, but it's easy to understand. So I pass a function to this component and I am executing it. So that's it. It's very simple. And I am executing it when, when I am pressing on this button, which is called repressible, and it has this icon. Which one is this one? So let's define the video shown function. So I will say here const, and this cost will be a video shown, and it will be a function. And this function will be implemented to set the video or the model visible to be a true or false. So in this way, Let's put it for now, as I will show you how to toggle this function later. So now let's save everything. And then we are going to click on this button. As you see, I got the model, but I don't have possibility to close it. So in that way, Let's create a function or a button where we can press on it and hide this model. So I will go inside this model and I create a repressible component. We have here press civil. And this pressure will I need to import it as well from React Native. So we can go here and say import for me, press. Okay, I have it already. So we can go down here and we will have a repressible and we handle on press exactly how we did inside that button. So when on breast, I can call the function, which is called video shown. But we have to execute it in a way like this. So we have here a video shown. So and video Shawn is going to handle this process and it will have here to set the model to true. So in that way, we can also not only set the model to true, but we can toggle it. So how we can toggle that? So I can't say, like when I say video shown, take the current state of the model and then do oppose it off it. So what is a current state of the model is modelled visible. So after that, I will say, okay, set model visible to be oppose it of the current state of the model. So when it's true, then it will show it. When it's false, it will hide it. So in that way, we can go here and we will execute the video shown on press this button. But let's wrap the content of the model to be inside of you. Because always, as you see in the documentation, it's better to follow it. So here, here up everything inside of you. And then he created a repressible button. So in that way, Let's do the same. So I will go here inside the model and I will define a view. And this view, I will wrap it around all these suppressible. So I put here as well the closing of that view. So we can have here like that. So after that, we can also put a text or an icon or exactly anything. We want, exactly how we did with the button. I'm going to easy solution. I will put a text. And in this text I will say, for example, hide model. Okay, we save everything. The Height Model here on the top and I cannot click on it. So it's better to give to this view some styling where we can be able to, for example, centered this button here in the middle. So we can have here style. And this style will read from styles dot and we can give, for example, video model. So in that way, we have to define the video model somehow so we can go down. And we say here, video model defined it that already. So I have video model, flex, justify content, align items exactly the same way how we, we're centering items in the middle as we saw at the beginning of this course. So now hide model is in the middle. So when I click on it, okay, the model is hidden. When I opened it again, the model is showing up. So in that way, I am executing video shown. It's reading the current state of the model and do oppose it of it. So when I click on it, it will hide. When I click here, it will show. So after that, instead of having here hide model, we are going to have a video player. And this what we will see in the next lecture. 50. Play a Movie Within the Modal: Okay, now in this lecture we are going to see how we can play a video or play a movie. So when I press on this Play button, I will show the model. And with this model, I will have here a video. So we can do that easily using a library which is called React Native video controls. So if you go to Google and search for React Native video controls, then you will get on the first thing, something from the GitHub. So this is an open source library. You, we can use it for playing a video in our application. So as you see here, the video will be played like in this way. So the requirements first, we need to install this library. So let's see how we can install it. He said that we need to install two libraries. One is npm install, save, React Native video, and also React Native video controls. So let's install those tools libraries. So I would go to my application or to my code and open the terminal. And then I will paste this comment. And then it will going to be installed to my application and we can use it afterward. So now, as you see here, the library got installed, there are some warnings, okay, don't care about them. They are just about vulnerability. There are some fixes should be done on those libraries and they will come on the next releases. So now let's hide our terminal. We don't need it anymore. And then we are going to work with our model. So first of all, we need to remove this permissible or we can keep it aside. We would put it back later. So I will have here addressable out. So I would not use it anymore. And we will have here to import the library. So we need to import the component which has the videos. So I will go here and I will check how we can use it. They usage says that you need to import something called video player. And the video player will have these properties. Of course, there are many properties, as we will see later, we can use them as well. So first, let's take this component and import it to our application. So I will go again to the code for the top board and then we have that component ready and we can use his example. So I can, again back to the example. So I can use the one which is saying here, and I copy the component which is defined here. So going back to the code and I will put it where inside the model. I will have here a video player, some example of URL, some video and navigator will be something like for navigation, we can keep it because we will need it later. So now I will save. And then we will press on this Play button. Okay, As you see, we have an a problem. So it says like this, dot props dot navigator. So we need to remove this property as well. So I'm showing step-by-step to not have an error. And then you you don't have to ask questions and wait for an answer. So I'm showing you all the possible errors. So now we need only one property which is called source. And this source, you have to specify something called URI. And you will have MP4 video, mp4 video, like you can get it from anywhere. You can upload video, do your server, and then you can play it in this way. So you can just get the link of the video. So now we save, and now I'm going to play the video or I'm going to my video, and then I press Play, and we get here another error. The error is showing here that the library is not defined yet or their library video is not defined yet. So for that, we need to find a solution which can be possible to do without linking. Because as you know that doing a linking like React Native link is just done automatically on React Native six and above. So I prefer to go back to that documentation of the library. And then we see step-by-step, what are the solutions for that? So as you know that this library is depending on something which is called React Native video. So as you see here, if you read the documentation, we need to click on React Native video because we have installed it already with this command. So we have React Native Video and React Native Video control. So in that way we have to go to React Native Video library and go and check it step-by-step how to install it, because it's not enough that you do only MPM install sometimes. And then the application is running like a magic. As you see here, there are some steps for iOS installation, Android, and also there are another systems. What we are working now on is iOS. If you want to follow for the Android, you can do the same way as well. It says that if your project using React Native less than 0.6, then you have to do that linking. Otherwise, you don't have to do that linking be taught because automatically react Native would make it works on Android. And of course, if you have more troubles, you can do the following as is mentioned here. So first of all, I'm going to iOS installation. I will go here to iOS detail and it stays for me again. Okay, You are using React Native 0.6 and above. Then you have to do run pod install. So that's it. You don't need to do any linking if you are doing less like zero-point 59. And then. You have to do a linking. So be careful because if you do linking and pod install, you will get another error. And it's very hard to solve after that, and you will go to the dead point in your application. So I'm advising you to follow exactly the documentation. So I will go here and make MPM install. So doing pod install, it has either two ways. Maybe you can say pod install, all you can do like NP x pod install, so like this. So when you do in the movie directory or in the project directory, you have empty export installed. Then you will install those dependencies. And it will tell you like, okay, everything is installed and linked to iOS application. So in that case, you need again to restart your application using the terminal. So I'm going to close my application. And then again, I'm going to run the application again using React Native run iOS. So MDX React Native run iOS will help me to fix this issue, hopefully. Okay, now the application is running again and we can click on one of the movies. So for example, we go to this one and we click on the Play button. So when you click on Play, Nice, You have like player video working fine and you have control on the voice. And you can also control the place of the, like, for example, the video. And also you can stop it and pause it. And also you can see some timer. And also you can go back. But here in my case, I cannot go back out of this video or out of this model because we need on back functionality. So back to the documentation of the library which is React Native video player or React Native Video control, which we have installed before. There is a method or a property where we can pass to the component and then it will have like something and effect. So because I cannot press on back here because I need to specify a function. I need to define the function which will hide for me this model. So I can unpack when I click on back, which is this one, then the model will be hidden. So how we can do that easily, we go to our code and then go to the video player and then redefine on back exactly how we have it in the documentation. And this on back will be a function. So we can execute a function in the call back of this function. So here I will say video shown. So video shown executed for me if the model is showing. So now we save and go again to our application and then we click on back. We still have an error because this navigator or this on back function require the Navigator. If you remember, we have deleted this part here. So back to the example which he provided here. There is some property called Navigator. And this navigator is passing the navigation control of the current screen. So we need that necessary for this video player. So I will put here and navigator, and I will not use this dot prop dot navigator. I'm going to use the application which we have passed here, if you remember. So I will use this navigation to close that model. So here I would say, instead of this dot-product of Navigator, I would say use navigation. And then we will save and then go to the video application again and press back. Okay, The model is hidden. So in that way, the video shown is executed and then the model gut hidden because it's shown already. So now we are playing the video on the right way of every movie. So for that, you need to provide as well. If you want videos where you can upload to your server. Unfortunately, this API is doesn't provide with videos because of copyrights. So we can have here like some special, if you have them copyrights for displaying some movies, then you can replace this links with that video. And then you can as well do some movies application, playing some movies in the app. 51. Modal Closing Logic: Okay, in this lecture we are going to do some logic and some refactoring for our video player. So for example, I can create a component which is called video also. And then I can play or place the video player inside it. And then I can pass some properties. That goal of this lecture that I am going to show you how to create a component in a different way as well. So we can first go to the, our components and define a new file, and we call it video. So we can say here video dot js. So instead of using the snippets tools, we can use also our hand. So we can create the component by hand to understand how we are really working with components in React Native. So creating a component, a React Native required to import React. So we can do this with importer or with Snipping Tool. We can have import React from React. And then we need to use the name for their component so we can give fine, a constant and we give it the same name of the file, which will be video. And then we can define as a function. And then this function will have like return, where we are going to return the template of this component. And inside the template of this component, I am going to use the video player which we have created in the detail. So here I will copy this part. So I will take all of this and then put it in the video. So in that case, we need to import as well the video player. So in this way, I have import video player from React Native Video control. So now we don't have that control over their navigation. And also we don't have the control over the video Shawn function. So in that way, we can create property as we saw previously with the Play button. But here we can create the properties like a function in a different way. You can find or pass a prompts to a component here. So when you are calling a component or you're defining a component, you define a parameter as an object and you give it a name. For example, I am saying on clothes. So this function will be executed every time something happened outside of this component. So in that way, I have to go to the detail and then I want to call my video component. So we want to call this video component, we need to export it. So here, after having a cost defined, I can say export default, like by default as we saw previously. And then I define this component which I am going to export. So we have this video is exported, we can use it in detail screen. So here I will say when I go up import for me video from, but not from React Native video controls. We are going to import it from components and then video. And after that, we are going to call this component. So I will say here in the model itself video and then the video is going here. But before that we need to pass that property which we defined here. So I can say ON clause, so we can have the property here as well. So here we have UNCLOS. This property will be a function. So in that way, I can say this function will be executing the video shown. So you can say here, video shown function. So the ON clause will go as this function as you see here, and it would be executed inside the video component. And you can as well. You don't have to put all of this. You can put only video shown. So we can put here a video shown, so as a function and it will be executed inside the video component when on back, for example. So I can say here, instead of video shown then UNCLOS, so on back of the video player, it will be executing this one. There are also another properties which I found in the documentation, so we can use them as well to handle our application in the right way. So for example, on Enter full-screen or an exit full screen and also unhide control. Or for example, we can say like on end when the video and we are going to close the video. So in that way, I can finish the video or close the model when there is finishing of the video. So instead of that, I can say here like on end and also like on back, we have also close also this navigation. We don't need it anymore so we can remove it. So we can test now our application. So I'm going to save everything. So we have here video ON clause, video shown and also this one. It should not be closed like this. We can close it from one side to ignore the ES lint error. So now we have model and inside of the view and pure and clean, we don't have so much code here. So when I play this video, as you see here, Okay, it's played fine. But when I click Back, then it's finishing. And also when the video is going to the end, it should close as well. So let's wait now. It's going to close or it's finishing. Now, it's automatically went out from the model. So in that way, I have on back function which did for me the work and also on end function. There are also multiple properties. You can see them in the documentation, for example, toggles size mode on full-screen for example, we have this property. If we set it to true, then it will not toggle the video to be like this. So when you click on this full screen icon, it will not be like this. So it's just a case where you can handle also like this full screen mode, control, animation, timing, like the amount of time milliseconds to animate the control in and out. Like you don't have to show that controls after some period. So for example, when I have my mouse handled like this without anything, then the controls are disappearing. So what do when I move on, I touch on the phone, then I have the controls back again. So all of those properties, you can try them by yourself and then you will be able to see how this works and how this video player is working with you. So this is the functionality which I wanted to show you. It's something like to show how we can create a component by ourself and define properties in a different way for calling some external functions outside of that component. Last thing which I want to mention as well about our model that when we need to support orientation, so when I return or turn the phone horizontally or portrait. So we can have somehow some more V to be like full screen. So in that way, I can also set a function which is defined or a property which is defined in the model, which is called support orientations, which I got also from the documentation of the model. So I can say here, like supported orientation will be portrayed and landscape. So in that way, the model, we support that as well. So when my phone will turn, then it will do something like for me to support the model in the right way. So now when I go to the video, I need to add a property in that way, which would be called full screen orientation. All. So in that way, I can have orientation control over all the models. So when the model is returning to be portrayed, then also the video player will be portrayed. So let's try that. So I'm going to save this and I'm going to start the video. Okay, We have the video on the right way. I'm going to turn the phone to be like a landscape so we can put it like this. As you see, the video player also adapted to this and also the full screen mode of the phone. So we have now this ability to turn the phone based on the properties which we have and how we have defining our application. So in that way, we will be able also to see full screen when we are turning the phone around. 52. Add Navigation Bar: If you remember, in app.js, we have created multiple screens. One is for home and one is for detail. And when I navigate for the detail as well, I will see like some navigation bar on the top. And we can somehow adjust these nav bar to make fit on our application. So for example, I don't need to show this detail. I don't want to show this home function and also like how we have here the arrow. I want some custom navigation bar. For example, in case I am on home screen, I can have a search button where I can sell it for movies. And also I can as well. When I go to some movie, I have only that going back button. So if you remember, in React native navigation, we have defined the screens and they have some properties. One of them is called component. And also there is another property in React native navigation, which is called options. And those options you can pass the options which you want inside your navigation. One of those options is called header. So the header can be of this navigation adjustable to receive some specific component, not this component or not the default component which is defined in the navigation, also include another properties like they're back image header title, and also header background header Left had their light. A lot of information you can specify in the header of this navigation or of this screen. So for example, let's try one property that is property which is called header transparent, and this header plant balance. If you put it to true, then it will make the header is a transparent as you see here. So the navigation will be inside this screen. We can have the navigation directly inside our screen, not outside of the screen, like so we will have like some space in the safe area as we remember. So because we call this as a space area, because outside of it, it's not safe area. So also let's set this option for the detail page. So I will go here to the options, copy them, and set them as well for the detail page. So in the detail, I will have a transparent header as well. But as I told you, we need to get rid of this home and also the title which is here. So for that, we can create our own component by saying that I want header. The header totally will be different somehow by calling a function which is a callback function where I can specify the rendering component which will be rendered here. So for example, you can say I want a text-only, I want just a specific component. I want just a button where I have a search. So in this way, you can create your own component and specify it in the header here. So let's try the app and create our component. So I will go to components, create a new component. So here we will have a component, we can call it navigation. So I would say here navigation dot js. And then we would create a pure component as we saw before. So using the snipping tool weekend have a pure component class and this computer component class will be imported and extended from React Native dot-dot-dot pure component. So I will have your IMR and then class navigation extends React dot pure component as we saw before. Or we can rename our navigation to not have a conflict in naming weekend, say like navbar. So we can call this component as a navbar. Do not have a conflict with other names of the navigation. So we can rename this file to be as well and nav bar. So let's return for now just a text components. So I will have here text, and this text will hold like the name of the application for example. So I can say Movies app. So in this way, we will have the navigation on the top so we don't have to forget as well to import the text component. So I will have here text from React Native. So now our component is ready for the import. So I will go to app.js again, and then I will say import for me the nav bar. So we say here import navbar from component nav bar. So it's exactly the same way how we do with the other components. And here in the header, in the callback, I'm going to call the nav bar itself. So now when we save or we can make this call like one side call. So we can have here this side. And then when we save and go to one of the movies, for example, this one. And he was he that we will have the title on the top and inside the safe area. So we need or outside the safe area. So we need to put it somehow in the safe area. That you can do that easily and call a component which is called safe area of view, save any of you comes as well from React Native. So you can use this component after rendering it. So we will put back this return and we would surround the text component with the component which is called safe area of view. So we will have here the text inside that safe area. And as you see, the movie app title is moved to the safe area. So our application is not conflicting or the content of our application, for example, the navigation is not conflicting with the safe area like the orange and the time, and also the battery and the signal. So inside the safe area, I'm going on this navigation. I'm going to have some logo here. And also we can define something like Back button as it was before. And also we can have some icon for search. But in the detail of this movie, we can have only a back button. We didn't have to have a surge and the local. So we can have only a back button. So inside safe area we can have a view. And this view as well will be imported from React Native as we saw. And then we will have a button, so we can use a touchable opacity button. So we can have here touchable opacity as we see here. And it has property which will be on press and go back. So now we have the tuple opacity. We can specify icon inside it. So we can also use some icons from our icon library which we have installed before. So we can give this name for this icon can be a going back icon. I got the name already from the documentation. And the size. We can specify the size of the icon, which can be 40. And also we can give some color, which can be white. So we can have here color. And then we put this hashCode, three Fs, and then we close the icon from one side. So now what we need to import is the view. And we need to import as well the icon component. So importing item icon component from the library which we specified before and we used. So let's save that and try. Nice. We have here to the icon touchable opacity. We can click on it, but it's not doing anything. So on press of this touchable opacity, we can specify and navigation so we can navigate back to the previous page. So I will say here on press. And with this compress, it will be a callback function. And in this call back function, I need to specify the navigation. If you remember, we don't have the navigation here because we have a nav bar. So we need to pass it somehow from outside of this component. So somehow we need to create a prop for this nav bar. So I can go here again to the Navbar component and create a new prop, which can be called navigation as well. So before I return, I will define a constant. And this constant will be an object because we will need another properties, as we will see later. I will call it navigation. And this navigation, we'll have this dot props because we are importing this dot props and we are using it as a prop. And then here on press we can say like after we have this compress function, we need to execute something which will be called navigation dot, go back. And this is already defined method, which will help me to go back in my application to the previous page. But before that we need to not forget to pass the navigation to Navbar component. And we can do that through ab.js. And as you see here, we can specify the navigation. And inside this navigation, we can say get the navigation from their current screen, how we can get it. We can get the navigation from current screen by passing here in the callback function, something like gold as well, navigation because it has a parameter where we can use the difference of the navigation of this detail page, for example. And then I can pass it here. So let's save everything and then try again to click on the button. Okay, we have an error. This is a mistake which I did by purpose because I want to show you how you can pass then navigation from the balance like from this screen. So when you want to pause the navigation, It's not enough to pass it like this. You have to surround it with brackets, with curved brackets. So it can be an object. So you have to be very careful with those, like a bracket and how you can specify them. So in that way, it will be work because it will be defined, the callback function will be defined. So when I click on this button, Okay, I am going back again to my component. So in that way, we will have a specific goal, like going back button only for the component of the detail because I specified that only for the detail page. I don't have for the home screen page. 53. Home Screen Navigation: Okay, hello, hash of key from condemn and navigation has a sulfhydryl AAC. The one hand I'm a navigation asked me a subhead and the deer, the old movie details, but he then it got a 100 and that will now made navigation heartbeat us of how the ICU gave Morgan and had their own me has been and navigation and more would be a sub. How about you see your navigation mode would be a detail that MOOC and we have 30 and component equal dynamic party that had been not only how SI, leader had gone main for hadn't main, weren't going through 0. False. B has a soft heart and Mozart or for one can enter our live. How does that mean we said default props or headquarter you do. The hadn't mean it's gone around falls. He had gone older AC yet, but hidden in Auth0, the one typing, typing properties is up to zed cuttlefish eidetic, and go ahead and mainly gone I bought on Boolean. Government is now mid block types command important enough sleep study at leisure from there her will shatter Mirada and what they don't like, bad heck man and certain Amaka man and misled, hand long-sought in Lean and drop divs with default props enough but you won't get an amine. Hey, come on, hacking into, won't get a nav bar, dot broke divs were nav bar, the default props been sanded it on hey, Althea for my adhere kind of Guan And component j has thermal get this to have a main body and why any firm with him? I didn't go ahead than me. Start them on Azure, the Arab navigation bar, MC that if a navigation bar and modulus of hot water body that it had R4 and all the navigation huddling is gone. Main Lemma at corpus of how the ACA or my dad cool, main and most gone be a soft heart and found a fatty Derek and R3, that nav bar property that I'm a nodal prop for how the gleam talk falls. Highlight enough bottom of equal bit detail. I had a team taught through p-hat and nav bar. High corn came to 0 overhead Gombe, a sub AC. But eidetic maps and navigation bar enough settle implementation. When old folk got a no, BS have had an easy at a heck when a rider on it, it'll, but do you think that they will get gamma and this dye you, the unknowns don't need. False, there are no limit if did all the added component for woken up through Italy, he behind it a sulfhydryl. You see yourself height at home screen. And then the component in the main for how that domain but double click on a button and feed and if fat, if and the head that mean that I wanted to rule out Dudley, Alice had been me said logo and hospital application. What could that a li a search for the day with a hot object all in the main body in a shot at this diff-amp job, Danny, hey Ayesha at that this diff-amp habe Dann emitted if inline, if any, B cell to the wide for Euler or how hot the heart really bad shot that is, the founder had coffee highland mainly through the heart again and main force that a hotline for a while, don't view it a lot. If you had in Maine can't force but he then it got a lot to him for Bob. Hi gone, interview enough. So Italy who were lamellae mainly call false Yanni and then make on a domain a sulfhydryl ACA navies of height at the direct method then. But he then ic and then my mom and half was over. She let him talk around them up. Gwas shown to the theater home and had the Mason on the APA from an Hub. Hello, honestly at a luminaire was rejected by that Bob. And why are they coming out the half-lives for ADA, it ruffles their hair mid leaf for Madelyn, find a buddy, I won't get an a component that oh, if else buddy, buddy that it can any of you had highly, if you are not main filmmaker had gone opposite of how I see it. I take on and nav bar fight it. When it comes to a high-fat IE and IC that you would go on a little journey sub AC. If I did, then it could have been they had lead component. I will view it'll module that heartbeat us that a hamburger award she Morgan and health component. And as had been me, sad and hot solar will get logo islands had been reset for how the logo and logo husband application Debye. Then it can image component. And that image component or I bought on how see it as my source and source MAC measure for this aggrecan won't bake when I bought on my love. Oh, you are in and my left my left foot is more required. Well, but it required RF and massage, a house behead and MLF. And I'm the manifesto but continent with gold logo, some lumped with that it can y unit. When Magellan assets by the dyadic and a half backwardation when 4D plot that as assets for good or bad here is to have them hate image and image. He, I better and more v's look PNG within my hurricanes, have fun. And I had my side. I have law that agenda mudra by then a hot component off on assets for bile acids and movies. Image on movies dot PNG. For a hard it won't get out of it. Image or logo. And nav bar, if you had an AAC by the hair comb can dominate an image or an ad or fall or import, React Native for a buddy, I'll be corn and Andi. Judy, be him. Ghani is to have them be authentic lasagna leg and it has a choice diving for image be a lot of gamma1, but he could not yet such weights dialing from health this dyne well now I'm an additive object styles McDermott, that wasn't in their own way, but on style sheet, why that study sheet that I have to add a class is more local. But he then it could riff and a horn constant there. Any hydrogenic glass or how digital component and how old. And they are constant. When I bought on styles and did a weedy ADA as dynamite at how Soviet component, genetic buddy if directed component, old style sheet here and understood a component that's most diary sheet will now create. We create the object elbow on a glass out between my shadow. Homicide declined. For logo to high corn. I bought on width, height and width. A lot of the high gone home scene or bad headache or hay, corn and high that as Amy said. Come on. I'm seeing further had gone I bought on Logan. He nodded again. Why in fees LU minus ECA and I'm going to import that stylesheet. Buddy up, not on the logo. More Drew's Michelle can come in with a magazine on bees Elliot, SHE, for bad, hey man, you won't get a leaf on us if Danny a bad image for method and we'll get help. A horny in here on the edge it fname for degenerate the hook on it. My study then it can touchable opacity component ileum and had that knows. Yep. So I've had a lot of them OR they've had touchable opacity that they've Coursera trialists had been me sad, I started with a fully allele group. The commandment ion icons out the message, outline what the size is, 18, equivalent it up yet. But Hickman can function hay and then I had to make one until Jack, Nevada and navigate navigate Allah's of D-Day and later Hannah, I'm Debbie, the rules of Cloud, the main ideas of how to coordinate. And Sache as such that ACh either search components are UFO. Well, I said we saw a surge almost. A flat bed can hold unless dialing issue almost going to be styling. I don't know, unsorted thought a pot on a locally there. And as you recall, Janet bottom, thermodynamic data had an annual or not, The Hustler year olds die indeed why they decided to D the higher the logo and then the ADSR. What a funny that it can hang out on style be how it is direct RF, styles command, what I had gotten my son and I got on a domain f. But lumen had a name main, never heard of an asset or hostile as Mohak did it. It'll have Huntley had that answered. He hooked Oh, highly on also called magenta bottom for all she does it inflicts warhead to have the older NACADA review had a flicks by giving you content or model or a hand on Adorno's it V been at on space? Yeah. The logo, a horny, a high-quality minute space between any why did I shut or they will not anyway, that elisa plate. Bad HIG. And that's all. I'll see you there. Any external fat and regenerate bottleneck and know how to lift it all the year. Then flicks and high-quality is small, flex direction of column. That was a handheld total Danny Meyer hi corner column, that model and all other animals, doll, study else either the mean or the ADSR firm will get out the padding and had the Nevada and Schwann, how off a shirt you quantitate, embedding Asherah, what I call will go off if the mob that they go on and I'll helped my bobbin won't get an fishy is align items, send that photo. The acetyl be Shaquille, MALDI, Mozilla, and bop put a harness on him, Ghani, above honest edge. What I assert. 54. Third Section Refactoring: Okay, in this lecture we are going to see how we can make like the app.js more simple. We can move some code to a separate component. I like always the superego the things to some components to have a lower codebase in my applications or in my files. So for that, maybe we can move all of this navigation container to another component because we need to make some loading screens and also error when there is some error in the API, so we can show it in the app. So I would go with creating a new component. Maybe I can call it a main navigation. So here I can give a name in the component. We can say main navigation dot js. And then we can create like a pure component audio guy and create the component with a stateless. So we can create a pure component here. So I will call my snippets, and I will say pure component, I will remove this state. And also we can cut all the contents of like from navigation container. Like we are not going to have the navigation container. We will get only the stack. So in that way, I will get only the two screens or the stack Navigator. So I would cut it and then I will paste it in my main navigation. And also we are going to bring back what is missing for us, for example, we are missing constant, we are going to get it. Here. I am teaching you how to do a refactoring for the things because otherwise, you will have a complicated code and you will not be able to know how to handle or maintain this code. So we need also some imports, like as you remember, we have here to import React. So I will get a React and put extend from pure component. And as well we need here to have some imports as we will see later. So I need, for example, the Create Stack Navigator so we can take it. And also we need the screens that components, which we are going to use as Greens in that component. So I will cut them and go here and put import, but our component in different place. So we need to go one step up and then do the screens, and then I get the components screen. And then also the same thing for the detail. But here the component nav bar is in the same folder. So we can just put it like this. After that we save. Okay, It's, our code is formatted, we don't have any mistake or any problem. So here instead of having all of those tags, navigator and all of this stuff, we can just call our component, which is called main navigation. So let's import the main navigation. I will say hit Import. And then without any brackets as we learned. So we have here a main navigation. So I will get here components and then give me the main navigation. So in that way, I can coil here in the navigation. I can say bring me the main navigation. And it will be closed from one side because it's a component without any content. And now here we need to put back those. Or when you want to save automatically prettier, we'll put, put all of those brackets. Now, our component is working fine. So when we go to detail, okay, Nice. And as you see here, we have a still, a bug that the header or the navigator or the main home navigator is still existing. Even I said when EDS detail then don't show it to him. And for this issue, we need also to add some properties to our navigator. So one of those properties which you need to add to not have this overlapping of the main navigation inside the detail navigation is called header mode. So you have to be sure that you are adding it to the navigator stack dot navigator. So the header mode can be set to screen. So you can say that the header mode of the application must be screen. In that way. As you see, we don't have anymore this navigation of home navigation. So as you see, we have all defined. So when the application is coming to the home screen, it's choosing the navigation, but the main is Drew. So in that way the navbar were render based on the main. If it's true, then it's going to show the logo and also the Search button. If it's not, then it's going to show only the back button as you saw here. So now we are ready with our application like within navigation. In the next section, we will see how we can click on this to navigate OT on the search, to navigate to the search page and search for amorphous. 55. Search Movies Tvs Services: Okay, in this lecture we are going to see how we can create a surge. So we need to search for a movie or a TV show. So in this way, I need to find the right API for using that. So if you go to the API documentation, you will find something which is called surge. And into surge, you can be able to find out. So something like search movies and also search TV shows. So search movies will have some specific API which is called surge movie. And it has some parameters which you have to pass. The same thing is going as well for surge TV. We need also to have SRD and then dv. And then you can pass the parameters like the API key and also language and page and also the query which is required so that query, it will be the thing which the user will enter here in the application, and then he will get the results based on that. So let's go and create the service for this. So for me, I'm going to have like the same services which I have created before. So we will have here the services. I would copy one of those services, so let's copy this one and go here. And then we are going to call it surge movie or TV. So I will tell you why we, how we can merge those services to get. So in that way it can be called surge movie or TV. So search movie and the DV. So we can search for both together. And here we can say search for movie or TV by keyword. So we can have like something, some keyword or a query which will pass as a parameter here, and we will get the result based on that. So let's build our URL. So first of all, we need a query, as we saw in the documentation. So as you see here, we have something like gold a query. So the query will be passed as well, do the application or to the API through the URL. So for that, I need to pass a parameter when I call this error is like from the application when the user we click on this and have some thick books. And then he will press Search, then he is passing the query. So I need to have here something called a query parameter. And in this query parameter, I can pass it through the API. So how we can pass it. If you remember, we have parameters like this one. We can pass as well a query instead of it, because those parameters exactly, you can pass them through a URL. So now we need a query, and this query will be the square which is passed to this error is, so we can have here then, okay, pass for me the valuable query. So in that way, I will have my API having this query. But instead of this, we need to have search, as you see here. If we go up, we have here surge TV and Serge movie. So it's exactly the same way, but this is different. So let's put this as search. And now we are discussing the type. So I need to search for a movie or a TV. So we can't have also another parameter here. We can say type. So, and this type, we can give it a TV or a movie when we are calling the service. So I will put here also, instead of movie, I can put parameter which is type. So in that way, my API URL, the original one, as you see you will have slash search and then the type that would be movie or a TV. And then I am passing the parameters, the pedometer, that API key, as we saw, which has this one. And also the query which the user entered to find some movie or TV. And then it will return that data as a results. Let's see that is ponds in the API how it will look like. So as you see, we have here some page and also results and the total results. So in that way, you have here some results as well. So we will put it our response dot data, because this is come from axioms. It's returning for other data. And then I can access that results, add, then it will be returned with the API like this. So we will have this same thing, movie, diethyl bolster, video, and all of other information which we are getting here. So now our service is ready. In the next lecture, we are going to create the search screen, and we are going to use this service to display movies, which we found in the database. 56. Search Movie Screen: Okay, After having our service is ready, we can create now the screen. So I am going to screens, create a new screen. I will call it search. And in this search we will place our form where the user can search for components or movies. So I am going to use here stateless components returned as we did before. So it will be called Search. And with the search we are going to return as well, like some navigation in parameters. So you will have here navigation. And as well, we will return some template, and this template will be inside the safe area. So first we need to import React. So I will say here, IMR import React for me. I will create here we act fragment. So I will have here something like React dot fragment, and then it will be inside it, our safe area view. So we can have here save area view. But I would like to mention that save any of you, it's better to get it from React Native that from React Native safe area context. So you can get this component from React Native two don't have like some conflicts in the errors. So here we have now like safe area view, we can create like some view, just like for an example. And inside this view we can put a text component where we will see like some changes happening, like to be sure that our component is working fine. So now let's import the view and as well the text components. So I will go here at import all of them. So now we need to navigate to this screen. If you remember, when we click on this component or this button, we were able to navigate to something called screen. So what I need to do to go to main navigation and create a new stack screen. So in the same way how we did with the home or within detail, we can copy one of them. And then we can add a new stack screen. And this new screen will have a name, will be surge. And as I told you, you have to be careful with the names. So here we will have as well as surge component, so we need to import it as well. So as you see here, it's automatically imported and it will have the same properties like it will have navbar, and also it will have some navigation and navigation input. So now let's save that and try. Okay, we click on the Search button. Okay, we went to the search screen and it's now empty. And it has here a surge. 57. Search Form: Okay, so our screen is working fine now we don't have any issues. We just need now to make a form where the user can input some text to search for some movie. For that, I am using a component which is used and React native library. And this React native library has component called text input. And this input you can have like some special style on it, on Jane, the next event, and also like some value. So at the beginning and it's also import these components so we can copy this part here and go to our application and replace the text here with that component. And also, we will have here that text input imported from React Native. I'll use u. We need also some stylings. So we need to Stein the input as well. So we need to have this dialing sheet, as we saw before many times. So we just need to have some constant and we can define that constant as a style sheet and use it in our components. So we need to import that style sheet also from React Native. But as you see here, there are some events, so he is using this date for that. So let's go and use this date for this. So I will say that I have a constant text and onChange text, and then this ongoing stakes will be returned in the state. So I will have here as well like some also constant and then I would say use state. And this uses date will be imported from React Native. And we can also give a default value as he did here. So we can give like use less text like something like or we can say surge movie. So this is like a basic information where we can provide for our input. And as you see here, we have the import already so we can work with it. So we just need to push the view a little bit like to have as well. Like here we have the arrow. It's totally on the top and it's overlapping with the input. So we can put it a little bit down so we can give, for this abuse some styling as well. And I would call it exactly the same way how we were doing before. And we will give it a name which is called a container. And this container, I'm going to put the styling of it here. So it will be exactly the same. So we can give it like some banding top from the top to not have the conflict which I mentioned. So we have, sorry, hey, Apple put the column, so I will put here padding top and bad egg dopa will be like about 100 pixel. We can say, let's try that, okay, 100 is too much. Let's put it 60. So 60, Okay, we have search for movie. So, and then the user can put some text inside. And as well we need to put some information like flex direction, flare, center, justify content. We will see that later when we will have the submit button as well. But let's give some styling for this input to fit with our design. So I would give at first like something, we can say border-radius. We can have something like 15. And we can give as well border width, something quick, give it like 0.5. So we can have here at 0.5, we can't give as well some height for that. And we can put some fixed height or you can make some height using percentage and dimensions from the screen. So we can't give like for now, fixed height because it's not affecting anyway, when you have different mobile sizes. So we will give it like for example, 50. And as well we will have like some padding to push the content inside the like to not be fixed here or exactly on the borders of the input. We can give it something like eight pixel for padding. And also we can give some coloring for the border and also some background as you want or as you want to style it. So as you see, we have like this input, we can change this from padding top to be batting only. So 60 is too much, so we can keep it as a padding top. But we can put here padding first. And padding will be 10. And then we put padding top, and then the padding top will overlap over this padding. So we will have padding top 60, and from other sides would be 10, 10, and from down, it will be exactly like how we do with HTML and CSS. You can add, will add some other properties which you can see in the documentation. There are a lot of properties for this input. One of them like something called placeholder, some default value, editable or not important for autofill a lot of things. So we can as well add something which can be called placeholder. So I can put here a property called place holder. And in the place holder you can define a default text. So I can say here, search for a movie or TV, like this, surge movie or TV show. So in this way, we will have placeholder and when you remove the default state, like when we have like some undefined value, then we will have this placeholder like this. So you can be able to type directly. So the place holder will show when there is nothing in the input. So to submit the result, we need also some button here, like for the user that he can submit the value which he entered and then he will get the results of the movies. So in that case, we can as well hold all this, put this input inside of you. So I will give again another view and maybe we can give it a name like form. And this form will hold for me that text input. I will close it again like this. And then here, this view, I will put another component which will be touchable opacity, exactly how we did with the search icon here in the nav bar. So I will put as well that touchable opacity, something like this. And on press not, we will not have an navigate, but we will have something else so we can keep it for now empty and we can have as well like icon. So we need to import multiple things. One of them is touchable opacity, which we have from React Native. And also we need to import the icon and the icon, we can import it exactly the same icon which we used in the nav bar. So I will put it here as well. So let's save everything and then we will see that, okay, the icon is coming here. So we need somehow to change the icon to be near that component. So let's remove that color on this icon to see it more clear. Okay, It's black now. So we need to put like some styling for this container to hold the view of the form and the button near each other. So first of all, I will go to the styling of the container and I will give it some properties. One of those properties will be flex direction if you remember to put them near each other. So I will say here, flex direction will be rho. So in that way they will be near each other, but now they are AGI. So we can also align the items to be on the same level together. So they will be aligned in the center. So we need somehow to put this input more here and the Search button on this side. So the view of this form, I can give it like some special properties, for example, which can be able and helping us to make some spacing for that input. So first of all, I will go here and give a form, the form class I defined on the top, if you remember. And one of those properties will be a flex basis be auto. And also we need another perpetuity is called flex a girl. And this flex grow will be one. And also we need to have something like as you see here, padding, right? So we can push, the textbook's a little bit away from the input. So we can put some padding right, where it can be like something like eight pixel. So in that way, they are aligned near each other. And also they have like, like the button is here. So as you see flex basis, it's called Auto. It's giving like the flex to be dynamic of this form and get the rest of the space from with this Item is booking. For example, this touchable opacity is booking only, let's say five or 10 pixels. But here this input will take the rest. So by saying flex basis auto and flex grow one. So it means that take the rest of the space and align it in that way. And we give batting right to not let this input to stick on the touchable opacity. So last thing we need to handle like something on submit. So for that button, so touchable opacity it has on press and we need to handle the onsubmit for that. So we will have some method which can be called on and submit of the value of the input which is entered in the input. And for that onsubmit, like quick and make it like capital letter on Submit. I can define it on the top. So we can have like results and the data will be always a resolved and calling our service. So in that way, I will define another constant which can be called onsubmit and which will be like a function. And this function will return for me something like calling the service which we have created before. So for now, I am going to console.log the value which I want to get from search. So I want the user to put a query parameter. So I want the user to put some query and I receive this query and I pass it through the service as we said before. So we can call this as a query. So now I'm going to console log this query as well. But here we don't have anything, we didn't pass any query. So in that way, I am going to use this text. So this text is changing based on the change text or the user here. So we can take this text and pass it as well to our onsubmit method. So let's save that. And we can open our terminal to see the console log. So let's make it a bigger a little bit. And I am going to put some value, like we can say here, movie. And then I click on Submit button. As you see, I got the movie, movie like this. Okay? Search for example, like a new movie, something like that. And I am getting the result on Submit. So now I am going to use their services to grab the data and display that guards here exactly the same card component which we used in the homepage and other pages. So in that way, we will see that how we are going to call the service in the next lecture. 58. Search Results: Okay, now in this lecture we are going to make a template for displaying the results of the search. But first of all, we need to call the service which is responsible for bringing us the search results. So follow that if you remember, we have created a service which is called Search movie or a TV. And it's asking for two parameters, which is a query and a type. So I'm going to put this also called here. So when there is onsubmit, I'm going to call this service. So we will have something like search movie dV, which I am going to import from services. So I'll put here Import and then I will put the name of the service and then forearm. And then we will put like services. And we would call services in that way. So now we have the surge movie TV. So this surge movie TV will ask me to have two parameters. First will be the query, and the second will be movie or TV. So let's put for example, movie like now. So what we have here, movie or it depend on the API, how we were using it. So it was saying, yeah, okay, movie and TV, so we will pass movie. So now this will return for me a promise as we saw before. So I will see you then and after then we will have the results. So we will call like those as a surge, or we can call it like a data. This is the search data and this data we are going to do something with it. And if you remember for that we were creating another state variable. And this state variable, we were using it in the template. So I will say here we can give like search result and this surge or results, let's make it like this and then set search results so we can have as well here said surge results. So in that way we are going to store all of this inflammation in that search result. So we can't have here set search result to be data. So in that way, we will have the results or the array which were returned from the API with the movies reset or set in the search results here. So here I am going to use a template which comes from the search results. Because we spoke about that multiple times and I told you that we have like multiple ways to arrange all of these templates. We talked it about it like when it's loaded, when it's not loaded and when there is error, I'm going to paste the template I prepared already. Do not explain, and I will provide you the code. So I have created this template. This template will have a view. It will be inside the scrollable, scrollable view. So we have here a view which is called container. And this container will hold the form and also that touchable opacity. And then we will have another view where we will have the results of search item. So I have created here is u, if you remember something called search result. So I am checking here. If there are search results and the search results dot length is bigger than 0, then I have to display a flat list with their cards. If you remember, we have done this already multiple times when we were doing that. Guards in the homepage here. So you don't have to worry about this point. Only one option which I have extra, It's called num columns, which is like I am showing how many columns in that row. So for example, in the search result, I will have three columns barrel. So I will not have them like this scrollable. I will have only fixed three in the mobile and they are like I can go through them. So also you will have that data property and render item. I want to render them as a guard. I'm not going to render them as anything else. And the guard component we have created before, if you remember to use it in the homepage as well, we have something like key extractor. It's going to make like a speed up for our search. So it's going and it's related to something like gushing. So you can use extractor and you can specify what is the key. So it will be the item ID or the movie ID which is returned from the search results. And as well when there is certain results, but the length is 0, then that means that we have no values or results matching our criteria. So we can try different keywords. And also if there is no search results at all, which is the initial state of our search, then I would say type something to start searching. So after that, we have some component which is called error. And in case there is error, then I am going to show the error component which we have created before as well. So here we have like some error by default is say, something went wrong, etc. So this is a template. We talked about all of this before. I just make some different EFS, some comments for you to not have, like any mistake or any mistaken. All of them are in safe area of u. Okay, Let's go to the search and I'm going to save my results. Nice. We have here type something to start searching. So I'm going to type like for example, New. And I will press on Search button. Nice, I got directly, that is alts. So we have here something and you gauge and you groovy, et cetera. So when I click on one of those movies, as you see here, I'm going to the detail of the movie. So I can get also that do the detail bait because I am using the card that God has touchable opacity which we have created. And when you click on it, you will navigate to detail. That's very great. And this hell, we see that we are using the dynamic of React native of creating components. Okay, Nice. So I'm going to make somebody's old, which is not found. Okay, Nobody's old matching your area. Try to find our different keywords. So when we remove everything and put like search, okay, This will not respond because we are not sending any results and we don't have any results. So now we have our, our template ready with the movies and the guards. There is just small thing that here are the guards are very close to each other. So we can give to their guard margin bottom. So we can go to that guard component. And if you remember that guard component has something called container, which will be the touchable opacity. And in the container we can give it a value or a margin button. So we can't say here margin-bottom, we give it like five. So in that way, there are going to be far from each other. We can give it more, for example, eight to be more noticeable. So now we have again our API running. Everything is fine. So in that way we have the search template. Nothing can you either didn't create anything, can you? Just like this? I have just a new class here which is called surge items. I gave padding about five, where it will hold the container of search items just to push the content a little bit far from the content here. So we can't have something new. And then it will search for me to not be sticking on the borders of the form. So that's it. This is the search items. I am going to attach their code in the next lecture so you can use it and find out if there are like it's matching with your code. And you can work on it easily without any problem and without any issues. 59. Merging Movies and TV Search Results: Okay, As you remember, we have created search movie TV and we used only for the movies. So if we want to use multiple, like we need to mu's for movie and TV. How we can do that? If you remember, we were using something which is called promised all. So it is possible to marriage for me multiple promises. So we can't do that here as well. So I will say here, promise dot, and then All. And then I can have here two merged. And then I can have here Services, marriage together. So first one, it will be the search movie TV, but for movie and the other one with can be like for search movie TV but for the TV. So in that case, I am calling the service 2 times for the TV and movie. And then I can merge the results somehow, because here the results will come for me as array of two items, if you remember, one is movies and one is the visuals. So I can't say here like okay, I will get here movies as a first goal because I searched for movie and also I will get here dv. So in this way, I will get two items are two members here. So in that way we have an array so we can put all of those in brackets so to not have any mistake. And then we can get to that data, which we have them here, and merge them together. So we can merge movies and TV together. So how we can do that easily for merging is pretty simple. We can just do data. We can define a constant which is called data. And these data will hold like array using operators, like spread operators. So I will have movies together and also the TVs. So in that way, I am merging two arrays together to be in one array. So in that case, when I save, I will get the results from this promise dot all. And then I am merging them in one array. So let's style the code a little bit. Nice. We have now gone to service two times and then we are merging that data and then send them to their search results. So in that case, I'm going to search for something here. I will put in you. And then I will get results mixed between the TV and also the movies as well. And normally the TV will be at the end because we said here that we want to show that TV after the movies. 60. App Theming: From the title of this lecture, maybe you know what I mean? I mean that we can add some coloring for our application without having these hard-coded colors, which we created before in navbar and other components, we carefully placed them with some variables where I will be able to change the theme of my application. So in that way, I can have an external variable and can I read from it? And then I configured my theme based on something like on those colors. So first of all, we can go to the application files and create some file which is called theme. So we can create folder on the root level. So I will say here like theme or themes, we can say. And inside this theme folder, I can add also like something called colors. So in these colors dot JS, I will have my application reading colors from this file. So in that way, I can create also a constant. And this constant, I can give it a name like colors. So we can say here const. And in this course we can't say it's colors and these colors will be an object. And I can say inside this object that I am going to define the colors which I need for my application. So those colors, I have created them already. Like of course you can create your colors as you want. So I create something like we can say, I have, for example, background, which will be like this one, black, white, light gray, primary color also, which will be this blue which we have for the Play button. So you can also add theming for your application in a way that it can be different from customer to customer. So after that, it's better to give capital letter for exports. And then we can export default, like we can say export default, and we say colors. So in that way, we will be able to import it somewhere in our application. So after that, I will go to my example where we were, we were enough bar in bar. I have, for example, some issue with the color that it's hard-coded. I got replace it with a white color. So I will go here and I will have here Import, and then I will get like for example, colors. And these colors comes from Theme Colors as we saw before. So now I will go and use these colors exactly to put my colors inside this. So I will have here instead of color FFF, I will say colors dot white for example. So in that way, my application where NDR on the right way that I will have, the navigation will be color. So as you see here. So now we will put all of these colors, for example, for this navigation somewhere here. And of course we can't sell it for all hard-coded colors and place them in our application. For example, I would go to the Play button and then I will say here that I don't want here, also color, so I need to import the colors as well. So I will have here import colors, theme from colors. So we can have also the same Exactly way how we did before. So in that way, I have here that the colors will be colored white and also the color of the button. If you remember, we hard-coded some color here. So we can also place it with some colors, like a primary color. So we can have something called a primary. And in that way, my application will have a primary color of this color. So I can use the primary color everywhere in my application. So now I will go like here, two colors I will change, for example, to this we can make a 000. And in that case, all the using colors of this color will change in the application. So in that way, you can theme your application in a proper way without having a triple, like you have to change our color everywhere to be the same. So I will not use this hard-coded color. I will use only like colors don't primary. So in that way, you need only to change those colors in case do you want to deliver the application to another customer? But you want to change somewhere in the layout and the colors. So at the end of this section, you will not see like the code with hard-coded colors. We will have it like with the theme, but do not take sale so long in the lecture. So I'm going to do it fast and attach the code for you in the application or the resources of these lectures. 61. Styling Fixes: Okay, we are now in some lecture where we are going to fix the styling. So the styling, as you see here, we have some bugs. So for example, here, the title is ticking too much to the phone. So let's fix that and do like some easy work for this lecture. So now I'm going to have to, they're at, in their least we have this text and this text, it has some styling so we can give it as well, some batting around. So we can have some space around it. So we can't have something like batting in general or bad in like this. And we give some spaces. So in that way we have to move it before because then by adding button would be all boride it. So I will put here like say then, and let's try it to see if it's working fine. Okay, It's good. I guess. Now we have like better this and we can reduce at it a little bit the batting button so we can put it 15. Okay, I think now it's nice. Okay, now let's check if we have another styling bugs. So we can go here and we can see eyes here. We don't have anything. We have in the navigation or when we go to the search we have here, the coloring of this icon is not so much clear, so it's wide. We can put it like some middle color, which can be light gray for example. So all we can go to the application or to the nav bar. And in the nav bar we use this icon. So we have here chatter von back. So here we put a light gray like this. So we can make this as a darker color, for example, you can put it three Cs, okay, nice. It's now better like this. And also if we go to some detailed page, okay, we can still see it. Okay. Yeah, it's good. Okay. Other styling fixes, we don't have any other siding fixes. Everything is fine. Our application is working smoothly and easily without any problem. And if you find some bug, it would be great to report it to the Q and a and questions. We can fix it directly, and I would be very happy to fix all of those bugs.