React Native: Learn by Doing | BlueBits Academy | Skillshare

Playback Speed


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

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

61 Lessons (7h 42m)
    • 1. Introduction

      2:31
    • 2. Course Requirements

      1:42
    • 3. What is React Native

      2:30
    • 4. Expo CLI or React Native CLI

      5:43
    • 5. Installing nodejs

      2:16
    • 6. Setting Up the Development Environment

      3:26
    • 7. Setting Up Android

      16:28
    • 8. Setting Up IOs

      3:10
    • 9. Code Editor

      1:36
    • 10. Installing Extensions for Rapid Coding

      4:27
    • 11. Create React Native Project

      12:40
    • 12. Running on iOS Simulator

      5:20
    • 13. Running on Android Emulator

      7:54
    • 14. Running on Your Mobile Device Using Vysor

      10:03
    • 15. Hello World App and Logging

      6:30
    • 16. Debugging Chrome

      3:41
    • 17. Debugging with VSCode

      9:44
    • 18. Getting Movies Data API Overview

      10:36
    • 19. Creating Movies App Project

      6:04
    • 20. Create Data Service Display Popular Movies

      10:27
    • 21. Display Movie Data

      8:39
    • 22. Using Effects

      5:22
    • 23. Services Error Handling

      4:45
    • 24. First Section Refactoring

      7:00
    • 25. Creating Home Screen Component

      7:46
    • 26. Latest Movies Images Slider

      9:27
    • 27. Styling Movies Images Slider

      10:59
    • 28. Working with Movies Lists Carousels

      9:50
    • 29. Create List Component

      13:58
    • 30. Create Card Component

      11:09
    • 31. Image Placeholder in Card Component

      10:30
    • 32. Type checking in React Native

      4:49
    • 33. Adding Scroll View to Scroll the Home Screen

      1:49
    • 34. Popular TV Shows Family Movies Documentaries

      9:22
    • 35. Second Section Refactoring

      14:06
    • 36. Add Loading Spinner

      10:40
    • 37. Add Error Component

      9:38
    • 38. Installing React Native Navigation

      8:37
    • 39. Creating a Stack Navigator

      6:12
    • 40. Navigate to Movies Detail Component

      12:18
    • 41. Movie Detail Overview

      1:03
    • 42. Pass Selected Movie Data to Detail Component

      4:46
    • 43. Movie Detail Service

      16:08
    • 44. Movie Title and Genres

      9:46
    • 45. Movie Star Rating Component

      5:35
    • 46. Using Icons in React Native

      6:54
    • 47. Movie Description and Release Date

      7:16
    • 48. Movie Play Button

      13:23
    • 49. Video Player Modal

      13:02
    • 50. Play a Movie Within the Modal

      10:05
    • 51. Modal Closing Logic

      8:34
    • 52. Add Navigation Bar

      10:27
    • 53. Home Screen Navigation

      10:08
    • 54. Third Section Refactoring

      4:49
    • 55. Search Movies Tvs Services

      4:52
    • 56. Search Movie Screen

      2:38
    • 57. Search Form

      11:36
    • 58. Search Results

      7:51
    • 59. Merging Movies and TV Search Results

      2:34
    • 60. App Theming

      4:41
    • 61. Styling Fixes

      2:13
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

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

245

Students

--

Projects

About This Class

React Native is growing at a fast pace, while more and more companies of any size are adopting it to build cross platform applications with a single code base.

In this course we aim to teach React Native flow and its secrets by building a real world project where we aim to have a solid foundation into React Native framework as well React Hooks and Functional Components.

You will build a mobile application targeted for both iOS and Android environment while you learn the responsiveness of the style, navigation between screens and get and manage data from an external API.

In this course you will learn:

- Set up your machine environment for React Native CLI development

- Build cross platform applications with React Native CLI

- Navigate between screens

- Navigate to screens dynamically

- Use of The Movie Database API

- Add custom styles

- Component base development

- React Hooks

- Functional Components

- Get Movies by genre

- Lists

- Search Movie Method

- Image Galleries

- Video Player and its commands

After this course you will be able to:

- Set up the system correctly

- Manage Errors a Debug React Native CLI applications

- Build applications from scratch

- Understand good architecture flow for an application

- Get data from the server using Axios

- Handle Data

- Display and render custom Lists

- Implement search methods

- Add external packages

- Tap in the native code of a iOS and Android application

We can't wait to have you in board with us.

See you there!

Meet Your Teacher

Teacher Profile Image

BlueBits Academy

Full Stack Web and Mobile Development

Teacher

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

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 unl