Original subtitles

the existence of react native makes

react one of the most valuable skills

you can learn think about it about 75%

of what you already know from building

websites carries over to mobile

development and that's exactly what you

learn in this video I used to compare

react native to react but now it's more

like nygs because now on mobile you can

do everything from file based routing

and component driven architecture to API

routes even react server components

react native is evolving fast and this

crash course will help you keep up hi

there I'm Adrien and welcome to the

ultimate react native crash course in

this course you'll learn react native

from scratch Master the latest features

and build a modern fully functional app

we'll start with a quick look at react

native's Journey why react native is the

go-to choice and how it actually works

an introduction to Expo the official

react native framework mastering core

building blocks file structures routing

and more and then we'll dive straight

into building a fully featured movie app

with a home screen that has the top

trends feature showing the hottest

movies using an algorithm that you'll

write and that will power using the open

source tool called aite and you'll also

be able to see some latest movies here

then of course there's the custom tab

navigation as search screen to find any

movie in seconds and a full movie

Details page where you can get all the

info you need and more but this course

isn't just about building an app it's

about building it the right way by

writing clean scalable and maintainable

code and to make your journey even

easier I've put together a free react

native roadmap that covers the essential

tools you need to know the projects you

should build and the exact path to

getting hired as a react native

developer you can download it now it's

completely free and the link is in the

description so by the time you finish

this course you won't just know react

native you'll be shipping relaps with

confidence so let's build something

great before react native building

mobile applications for multiple

platforms was a nightmare you had to

write separate code bases for IOS and

Android which meant double the work

higher costs and slower development

Cycles but with react native you can

write a single code base that works

seamlessly on both platforms making

development faster cheaper and more

efficient and it's not just me saying

this big companies like meta Discord

Microsoft Tesla Amazon Airbnb and even

Call of Duty use react native to build

their mobile apps react native has

evolved so much that you'll find fewer

people flattering these days and with

the release of react's new architecture

performance has been improved

significantly so the next time someone

says Hey react native apps are slow just

take a deep breath and say not anymore

flut boy let me break it down first

there's the new JSI JavaScript interface

which replaces the old bridge allowing

JavaScript to communicate directly with

the native code for a faster and

smoother performance then there are the

new turbo modules that load native

modules only when needed reducing

startup time and memory usage and third

there's a new thing called fabric which

optimizes UI rendering making animations

gestures and updates faster and more

efficient with JSI turbo modules and

fabric react native apps are now as fast

and smooth as the native ones and aside

from its new architecture crossplatform

support and Native components react

native also comes with hard reloading

allowing you to see the changes you code

instantly a huge community that just

keeps on growing and an easy learning

curve which means that if you already

know JavaScript and react you can

quickly pick up react native and that's

exactly what we'll do today in this

video we'll use Expo to build a react

native application and before you say

wait real developers don't use Expo hold

on if you check react natives official

documentation Expo is the recommended

way to get started read that again but

what the heck even is Expo you're

familiar with tools like vit right well

Expo is just that only for react native

apps it provides many tools and services

that simplify development and help you

build your app more easily Expo is the

react native what nextjs is the react

it's a framework that simplifies react

native development by handling the

development enir setup which means that

you don't need to separately install

Android Studio native dependencies and

pre-built components for navigation

gestures camera maps and more it also

supports something known as overthe a

updates so your app users can get the

latest code without needing App Store

approvals and this is huge with Expo you

can deploy your app in minutes but don't

just take my word for it companies like

Discord Burger King coinbase X box and

more than 2,000 companies are using Expo

for their tools and Expo just like njs

just keeps on getting better so if you

still think react native CLI is the

better option well think twice so now

that you understand the importance of

react native and apparently how easy it

is to build apps with it let me show you

I'll first teach you some basic react

native Concepts and then very quickly

into this video you'll build a real

mobile movie application so let's Dive

Right In all right let's Jump Right In

we've already talked about the benefits

and drawbacks of react native and how

Expo can make your life easier now it's

time to dive into the code and see how

it works if you worked with react GS

before you'll find that react native

uses a similar syntax but of course

there are some differences you should be

aware of so let me show you the ins and

outs of react native code we can check

out how it looks and how it functions

when compared to to react GS to help you

understand the similarities but also the

differences between the two so super

quickly you'll understand the react

native's components and how to use them

when coding in react native you use

JavaScript just like with react but

instead of rendering HTML elements

you'll be rendering native mobile

components take a look at this basic

react native component here we're

importing two important components from

react native Library View and text then

we create a functional component called

app that Returns the text component

wrapped inside of a view what's

interesting here is that we're using jsx

syntax which makes it super easy to

create and visualize our components in a

more HTML like way but if you take a

closer look you can quickly see that

this is neither a P tag nor an H tag nor

anything that we're used to while

writing code that runs in the browser in

react native we use text instead said

it's pretty straightforward the text

component is used to display text in the

app and you can style it using the same

CSS like syntax as in react you can set

the font size color and weight using the

style prop react native also offers a

Styles sheet utility that allows you to

Define styles by creating a single

JavaScript object this is super handy in

larger applications as it optimizes

performance but as we all know tailin

CSS is rising in popularity so so in

react native World native wind came into

the picture allowing you to write

Tailwind likee CSS Styles in react

native isn't this crazy it feels like

you're writing a regular web app but

instead you're developing apps for

mobile now let's talk a bit about the

view component think of it as a box or

container that holds other components

similar to the development in HTML but

with some added functionality specific

to mobile apps The View component is

often used to create layout structures

for other

components it has many different props

that can be used to control its

appearance and

behavior and one thing to note is that

the view component uses flexbox layout

by default which makes it really easy to

control how its children components are

laid out so you can use flexbox

properties like Flex Direction justify

content and align items to achieve any

layout you want but what if you want to

add some interactivity to your re act

native apps well get excited because

there are some amazing components that

do just that components for creating

buttons links and other interactive

elements the first one on the list is

touchable opacity which is great if you

want to create a simple button think of

it like a cousin to a react button

component but with even more room for

customization and instead of an onclick

in react native you're not clicking it

you're pressing it so let's provide an

on press the second similar component is

called a touchable highlight which

allows views to respond to touch in a

unique way when touched the component

reduces the opacity of the wrapped div

revealing the underlying color and then

there's the touchable without feedback

which is there if you need to create an

element that is clickable but you don't

want it to have any visual feedback when

pressed it is super useful when creating

links or images that don't need any

additional effects and apart from these

touchable components there's also

activity indicator which allows you to

show a spinner or a loading indicator

within your app sure there's also a

simple button allowing you to set

properties like the title color and an

on press that is called when the button

is pressed but whenever you need some

more Advanced Styling or behavior you'll

find yourself using the touchable

components much more often as they offer

greater flexibility now the next super

important component on the list of

components I want toach teacher right

now and which we'll use later on within

our app is called a

flatlist a flatlist is perfect for

rendering long lists of items that need

to be scrolled it's like the map

function in react but with some extra

features like optimized scroll

performance and item separation the way

it works is you of course import it from

react native and then you define some

data such as an array of objects you

want to map over then you put it all in

a view and you call it flatlist a

flatlist by default already accepts some

props such as the data prop to which you

can pass an array of data you want to

map over and then a render item prop

which allows you to Define exactly how

you want to represent each item in the

array pretty cool right now when should

you use a flat list and when should you

just map over the

elements well for larger lists where you

want to have smooth scrolling

go for the flat list while for the

smaller lists the map function will do

the job there's also something known as

a scroll view you can think of it like a

magic box that can hold multiple

components and Views providing you a

scrolling container for them it's like

the Overflow scroll property of a div in

HTML allowing you to easily navigate

through a list of items or large amounts

of content in our app you can put it

within a view call it scroll View and

then render some elements within it by

using the scroll view component you can

make sure that users can easily explore

all the content making your app more

intuitive and there's also a component

which you'll find yourself using super

often called safe area view which gives

you some sort of a safe Zone to render

your apps content within without it

being covered by the devices Hardware

features like the notch home indicator

or a status bar it's great for building

apps that are supported on different

devices with different screen sizes and

shapes the way you use it is whenever

you think something might be too long or

awkwardly placed you just wrap it within

a safe area View and while that default

safe area view is amazing for most cases

sometimes it does fall short for some

devices making it not the optimal choice

so I often like to use a package called

react native safe area context which

works across all devices even for the

Bottom bar but you don't have to worry

about remembering all of that right now

I'll show it to you once you start

developing your own first app but bear

with me for a moment I first want you to

know which components exist so we can

later on use them more easily for

example we'll surely have to display

some images within our app right so how

can we do that in react native well

thankfully once again it is super

similar to how it looks like in react

you just use the image component

provided by react native you pass the

source to it which can be a path or a

URL and you're good but if you want to

display an image as a background then

you should use the image background

component which works in the same way

but just renders it as a background it's

specifically designed to allow other

components to be layered on top of it

whereas just the image is used for

displaying images on their own and both

of these can handle different image

formats like pngs jpegs gifs and web PS

but nons support SVG files because of

some native rendering limitations so if

you want to use svgs there's a

thirdparty package called react native

SVG once again don't try to remember it

I'll show it to you once again later on

so you can use it within your own code

okay now that you know how to use images

what about models well thankfully react

native has components for that too it's

called a model just import it from react

native set visible to True add an

animation type and Define what happens

when you close it pretty simple there's

also an alert component which you can

again just very conveniently report from

react native and call it by saying

alert. alert provide a title and

functions which you want to execute on

cancel or on okay and if you're creating

forms you might want to create some kind

of a toggle in react native and for that

you can use a switch component once

again it is super simple imported create

a state for it same as in

react create a function that manages it

and then simply call it like this within

your code provide some colors its value

and what happens when you click it

there's also a component that I use

super often called the status bar both

react native and Expo have their own

versions that allow you to control how

status bar should look like for each

screen within the app I prefer using the

one from Expo you can define a view with

some text and just beneath it you can

define a status bar but what am I even

trying to do I'm just listing all of the

different components that you can use to

build your mobile applications well I I

guess I'm just trying to show you that

there are some differences like P tags

and H tags are now becoming text divs

are becoming views but other than that

there are so many components that feel

like you're writing react code within

react native allowing you to build

mobile applications from touchable

opacities for buttons to models alerts

and more the list doesn't stop there of

course I don't want to waste your time

we're not going to go through every

single component that exists in this

video but I did take some time and I

wrote down the most important ones

within the free react native guide

Linked In the description so if you want

to check them out there see the

differences and similarities and just

have a place where you can recap what

you learned that guide is what you need

but now that you know the most important

components and Concepts in react native

let's Dive Right into action I'll show

you how to set up your app what files

and folders are involved and everything

else that matters step by step

step all right before we dive into the

development of the movies app let me

quickly tell you what you'll build and

learn along the way you'll get the

firsthand opportunity to put into code

many components I was just telling you

about a couple of minutes ago core react

native components like view touchable

opacity image flat list scroll view safe

area view text input and more different

Navigation like stack navigation tab

navigation with custom styling and

advanced file based routing including

nested and dynamic routes custom Hooks

and fonts to make your app more flexible

and reusable types and interfaces with

typescript for better type safety

responsive design to ensure the app

looks great on any screen of course

Tailwind CSS for clean and scalable

design backend with aite to handle data

and user interactions and many other

best practices we'll go step by step and

I'll teach you to implement amazing

stuff which you'll see yourself using

across any future apps you build like a

search feature with optimized

performance fetching movies data from a

thirdparty API smooth loading and air

handling and then a trending movies

algorithm that tracks user searches and

helps us recommend the most popular

movies based on real user activity

pretty cool right will use aight to

store that user activity for this

algorithm to work so let's quickly

create an account click the link down in

the description to be able to follow

along and see exactly what I'm seeing

create your account at the top right or

just sign in as you can see I'm using

app right for many of my projects and

now you can just create a new one for

this one I'll call it

JSM RN movie app you can do something

similar and you can choose the region

and click create now with can set up our

project's file and folder structure and

very soon we'll put this project to

use let's get started with developing

our app by first setting up our

development environment I've created a

new empty folder on my desktop called it

mobile movie app and opened it up within

my IDE throughout this course I'll be

using webstorm the most powerful

JavaScript and typescript IDE until

recently it was paid so not everyone was

able to use it but as of now it is

completely free for noncommercial use

I'll leave the link in the description

you can check it out and download it for

your operating system once you install

it you can set it up to look exactly how

you want it to look currently I'm using

the material deep ocean theme and lately

I prefer using it over vs code so once

you create an empty folder in whichever

editor you're using we can create our

new react native application if you head

over to react native. deev click get

started you'll notice that there are a

couple of different ways in which you

can initialize your react native

projects and as I've mentioned in the

crash course the recommended way of

course is Expo it'll provide us with a

lot of important features out of the box

making our development experience that

much better so to start your react

native app with Expo the only thing you

have to do is run this command in your

terminal so let's write it together by

opening up the terminal and running MPX

create D xo- app add latest and then add

slash to install it in the current

directory now it'll proceed to install

all the necessary packages that we need

to run a react native application and

you can see that it's also starting to

create our file and folder structure

very soon I'll explain exactly what all

of these files and folders mean and what

they do once it gets installed you'll be

able to run it now going back to the

docs it says Hey run this command and

then continue with Expo and when you

click it it'll show you how you can set

up your development environment no

matter which device you're using in this

case I'll be using a real iOS device but

you can also use an Android then it's

asking you how you would like to develop

and we'll be using Expo go so depending

on your operating system you'll be able

to scan the QR code to download it or

visit the expoo page on the App Store

once you install it you'll be able to

create your account and your screen

should look something like this so the

first thing we have to do is start a

development server by running MPX Expo

start so back within our terminal let's

do just that run MPX expose start and

you'll be able to see different letters

that allow you to do different things

but you don't have to press any of them

what you have to do is just scan this QR

code so I'll open up my camera and scan

it right here it'll say bundling and in

a couple of seconds the app will run on

your phone there we go we are live as I

mentioned we don't need to rely on heavy

tools like Android Studio or xcode

instead we're using this easiest method

to develop apps with react native which

of course includes this Expo app on your

phone and as you can see I can switch

between different pages touch different

elements on the screen and it feels like

I'm using a real mobile application now

if you're not seeing what I'm seeing on

the screen then that must mean that

you're having some problems and

thankfully there is a couple of quick

fixes first make sure that you're on the

same Wi-Fi network on your computer and

your device and if it still doesn't work

it may be due to the router

configuration common for public networks

on iOS you might have to Grant the local

network permission to the Expo Go app or

you can try using this MPX Expo start--

tunnel or just read whatever the Expo

app is saying and try resolving it step

by step but with that in mind we are now

ready to make our first change to do

that we can head over within our app

tabs index. TSX and if you see this

welcome theme text you can say something

like

welcome to my movie app because that's

exactly what we're building if you save

it you can see that it'll change

immediately and we can remove this wave

so this means that we have established a

connection between our code and our

device so we can see all the changes

live now that our project is running let

me quickly explain what each one of the

files and folders here does so you have

a better understanding of the entire

codebase so you can more confidently

make changes to your application later

on let's start from the bottom to the

top first we have the TS config which

contains the rules that typescript will

use to enforce type safety throughout

the project and no worries you don't

need to know typescript to be able to

proceed with this course I'll teach it

to you as we go next we have the read me

which is a text file containing some

information about the project then

there's the package lock and

package.json which contains the project

scripts dependencies and additional

metadata after that there's the app.

Json file which contains the

configuration options for the project

and is often called the app config these

options change the behavior of your

project while developing building

submitting or updating your app

everything starts with an expo object

which is the root object containing all

the app configuration then of course

there's the app name shown on the home

screen or the app screen very important

in case you want to make it custom then

there's the slug which is a unique

identifier for the project used by Expo

it's used when defining the URL if you

want to show your project in the web

there's the version of the project the

orientation ation which defines whether

your app should initially open in

portrait landscape or the default screen

orientation mode the icon is the full

path to the image you want to display

the scheme is a custom URL to enable

deep linking in this case let's set it

to movies so later on we can do

something like movies Colin sl/ some

path there's also the user interface

style which we can leave to automatic

this determines the dark or light mode

and then there's this new Arch enabled

which enables the new architecture of

react native for better performance it

was that thing that I talked to you

about in the crash course part regarding

JSI turbo modules and more and what's

best is that Expo immediately supports

this new architecture without you having

to do anything along with this you're

also getting the newest react features

like transitions moving on we have IOS

specific features that you can extend

specifically on iOS devices in this case

you can define whether it supports

tablet devices and then there are also

Android specific properties such as apps

adaptive icon path to the image color

and more and similarly there's also

additional options for the web now

coming out of the app. Json there's of

course the git ignore which allows us to

ignore some environment variables or git

related things there's the scripts

folder currently having just one part

which allows us to reset the project to

the bare minimum code and and then

there's some boilerplate code like

custom hooks constants some components

assets and finally the app folder which

allows us to route to different pages

similarly to

nextjs or in this case we're not calling

them Pages we're calling them screens

you can see this tabs group in which we

have more files within here you'll be

able to manage the layouts for different

pages and very soon I'll show you

exactly how it works there is a lot of

code but you don't have to memorize all

of this boilerplate code because I'll

teach you how everything works from

scratch so let's use this nice script

that Expo has given to us called reset

project which will set the project to

its bare minimum I'll stop the

application from running and then I will

run mpm run reset Das project it's going

to ask you whether you want to move

everything to the example folder I'll

say no just go ahead and delete it so as

you can see all of these folders have

been deleted deled and some new files

very Bare Bones have been created we can

once again run MPX expose start to start

the development

server and then you can just press the

letter R to reload it automatically on

your device now if you check it out

it'll look much simpler the app only

consists of a very simple layout and an

even simpler index. TSX page where we

can say welcome and we can dive right

into extending it to build our MO movie

application great job on completing the

setup we're done with the general setup

of the application but there are still

some things we got to set up such as

additional packages for styling and

configuration that will make our job

easier later on one of those packages is

called native wind native wind doesn't

even have its own landing page it just

says do you like using Tailwind CSS to

style your apps well this helps you do

that in react native so we use it for

that exact reason you can install it by

opening up a new terminal keep this one

running because it's the one running our

app and run mpm

install native wind Tailwind CSS react

native reanimated and react native safe

area context these are some packages

that are going to make our styling

easier let's give them a few moments

until they install and once that is done

run MPX Tailwind CSS init this will

generate our configuration file you can

find it within your code right here

Tailwind Doc config.js and you'll get a

default configuration but to make sure

it works properly with a react native

setup we'll need to update it a bit here

you want to include all the files that

you want ta into to style so in this

case everything within the app folder

that ends with JS jsx or TS or TSX and

we're also adding a babble preset so

just copy it from native winds Expo

setup and just override what you had in

the tailin config file finally create a

new file within the app folder and call

it global. CSS and within it you'll have

to import three things or rather add

three Tailwind directives Tailwind base

Tailwind components and Tailwind

utilities after that we'll have to set

up the Babel preset so copy this config

and create a new file in the root of

your directory called

Babel Doc config.js and paste what you

just copied after that we'll also have

to modify our Metro config so just copy

it open up your terminal and run MPX

Expo customize metro. config.js

this will generate that config file so

you'll be able to find it right here and

you can override it with what we just

copied from native wind get default

config with Native wind we wrap that

configuration and we set it up you don't

have to worry about understanding what's

happening here this is just the setup to

make the styling work finally we can

head over into our appor layout. DSX and

right here we can import the/ global.

CSS so we can actually apply some of

these Styles and then at the root of

your project create a new file called

native wind- EnV .

D.S and within it add a triple for slash

open up a new self-closing component

called reference and add types equal to

Native wind types this will enable tab

script to recognize tailin CSS classes

preventing constant error messages and

very quickly head over into your Metro

config and make sure that the input

points to the right path to our global.

CSS file so it is not/ global. CSS

rather it

isapp SL globals with an s. CSS this has

to match this global. CSS file once you

do it close all of your files and open

up your terminal to make sure that

everything we've done right now actually

works you'll have to restart your

application by pressing contrl

C and this can get boring pretty soon

but whenever something is not working or

your changes are not being reflected

just go ahead and set it it'll help so

start your app with a command MPX Expos

start-- clear this will make sure that

everything we've done actually gets

taken into account and then press R to

reload your application it'll first

bundle it and then depending on your

internet speed it'll download the code

and it'll display it right here on the

screen so while that is happening let me

head over into the index. DSX file and

now hopefully we can style our

applications using Tailwind instead of

these default Styles let's remove these

default inline Styles and instead let's

give it a class name and say something

like Flex

D1 justify Das Center and items - Center

which should keep it centered like it

did before and we can also style this

welcome by giving it a class name of

text- 5xl and by the way notice how my

webstorm IDE is giving me all of these

options in a super nice way so I

immediately know exactly which Styles

will each one of these tailin CSS

properties apply we can also give it a

text blue of 500 as well as font Das

bolt if you save it in a matter of

seconds you'll be able to see the

changes reflected on your device now

instead of saying something like text

Dash and then manually defining the

color like hash2 3 1 2 3 this is not

going to work right whenever you change

one color you have to change it across

hundreds of different files so what you

typically do when using Tailwind is

Define custom themes within your

configuration file so head over into

Tailwind Doc config.js and extend your

theme with some additional colors such

as a primary color of something like #

0314 now going back to your app you can

just say text- primary and and it'll

automatically take that color into

account pretty cool right so where did I

find this color well just below you'll

be able to find a link to a complete

figma design of this project you can go

through it a bit and if you go ahead and

click a couple of times on different

elements it'll tell you what is the

color of that specific element so for

example we have this accent color of AB8

BFF so we can copy it and back in the

code we can add that accent color just

like this and then you can use it very

easily within your code by saying text

Dash accent there are also a couple of

other colors from this design that I

want to add maybe the dark background

color or this gray color right here that

we want to use you can find them on the

design yourself and then copy them

within your app such as this variant of

the dark color or we can do it together

right now there aren't too many

alongside the primary color we'll also

have the secondary

which is going to be hh1 151

312 we'll also have a couple of

variations of the light color such as

the 100 variation of hash

d6c 7 FF we can also have a 200 variant

of hash A8 B5 DB as well as 300 which is

going to be set to Hash 9 C A4 a and we

can have a couple of variations of the

dark color one for the bottom navigation

bar and one for the background so I'll

say 100 # 221

f3d as well as 200 variation of # 0 F0

d23 if you save it all of these

variations of different colors will be

extended in our theme so now we can very

easily use them by saying text- dark

D200 for example and with that we have

just set up native one inside of your

project allowing us to style our

applications more easily you'll

definitely want to save this entire

process somewhere as this is something

you'll have to do with every single app

and as you saw it's not easy as ABCs if

you mess one thing the Styles will not

be getting applied so I'll include the

entire native one setup within that

react native guide down below so you can

always refer back to it even when you're

building your own applications in the

future great job on setting up the

styling next routing oh and I almost

forgot to mention something that is

super relevant here if you're struggling

with tawin CSS and you think that would

hinder your work on the react native app

just recently I have published the

updated version of the Tailwind CSS

crash course which teaches you

everything you need to know about

Tailwind in less than an hour so if you

want to revisit your Tailwind styling

game before we proceed with the rest of

the course checking it out might be a

good idea

it's time to do the routing and as I

mentioned before routing in react native

Works similarly to routing in nextjs but

even if you haven't tried it in xjs

don't worry because I'll show you

exactly what that means it simply means

that your file within the app folder

represents your route and the file name

is a URL pointing to that route for

example the app. index DSX represents

Your Home Route the starting point of

your app and and if you want to create

another route like let's say you want to

onboard users to your app you can create

a new file and let's call it onboarding

ttsx and within it you can run RN FES

which is a simple react native

functional export with component Styles

so just a quick boiler plate so we don't

have to write it by hand if this didn't

work for you that must mean that you

don't have the react and react native

extension for plugins installed so just

search for your plugins and search for

react or react native plugins once

you've created this route we have to

figure out how we can get to it from the

index route so let's head over into the

index and just below the view that says

welcome let's put a link coming from

Expo router and let's give it an href of

SL onboarding and it can simply say

onboarding if we save it you can see it

right here on your screen and if you try

clicking on it you can see that it says

unmatched route but let's first reload

I'll open up my terminal and press the

letter R and click on onboarding and

there we go we have been redirected to

the onboarding screen and now you can

use all your devices native back and

forward functionalities such as on

iPhone it is normal to scroll from left

to right to go back this works

seamlessly similarly let's say you want

to create a route that shows the details

of a movie well we can create a new

folder and let's call it movie and

Within movie we can create a dynamic

route so that means creating a file in

which we wrap its name within square

brackets and you can Define what the

actual parameter is in this case I'll

wrap it in a square brackets of id.

TSX here you can once again run

rnf and this will create a boilerplate

function which we have to fix a bit I'll

call it details export default details

and we have a stylesheet at the bottom

so now the question is how can we know

on which movies Details page we're on

are we on the Iron Man's Details page or

bathman for example well we can extract

the route Pam information in Expo like

this by saying const D structure

whatever name or title you put within

the square brackets and then get it from

use local search prams coming from the

Expo router if you do this now you can

use this ID variable so I'll say movie

details and then I'll render the dynamic

ID right here so now back in our index.

DSX we can create another link and this

one will point to slov slash

Avengers and we can say Avenger

movie if we go back you can now see this

new link and don't forget to reload so

one more time just press the letter R

and wait until it reloads so we make

sure that this new route we created is

recognized you'll have to do this

whenever you add some new pages now if

you click on the second link you'll see

that we go to the movie Details page but

it knows that we are on the Avengers

movie details you can play with that a

bit more to fully understand how routing

works but what I'll do for now is remove

those two examples that we have

created by entirely removing the movie

folder as well as the onboarding file

that's because I want to teach you how

you would begin creating the screens for

your entire application by first looking

at the design this right here is a

typical react native application well it

definitely has a design better than most

of the apps out there but you get the

idea we have the homepage some kind of a

search page and also a Details page for

whatever it is that we're searching

through we also have a bottom navigation

for the home screen search saved and the

profile and of course there's also off

so if you'd like me to extend this react

native course to include authentication

2 let me know down below but with that

in mind we now have to figure out how

many screens we have and for each one of

these screens we have to give it a

proper route first of all there's the

home screen the search screen the save

or bookmark screen the profile screen

and finally the movie detail screen out

of these four screens we only want to

show the navigation for the first four

screens and not the movie details

because we'll get to the movie details

by of course clicking on the movie card

Expo allows us to do just that with

route grouping we can prevent a segment

from showing in the URL by using the

group syntax which is just a pair of

parentheses so for example if we have

app Root home. TSX it'll match to home

and if we don't put it into a route

group then we'll have to say root home

which we don't want to do so groups are

great for organizing sections of the app

so let me show you how we can group our

routes within the application first

let's create a group route folder for

our tabs I'll call it in parentheses

tabs within tabs we can create a newcore

layout. DSX so now we want to ensure

that we show the mobile navigation only

on that screen keep in mind that there

can only be one index. TSX route and

right now it is right here in the root

of the directory but we actually want to

put it within tabs because the homage is

a part of the tabs layout next let's

create the other three routes by

creating a new file and naming it

profile. TSX let's quickly run

rnfe which will quickly spin up a new

functional

component and let's create a second file

right here or a second screen should I

say and let's call it saved. TSX also

run rnf and finally create the last

screen let's call it search. TSX and run

rnfe now for the movie details since

it's outside of that tab layout we want

to create it within the app by creating

a new movies folder and within movies

create a new Dynamic route of id. DSX

Within square brackets there you can

also run rnf and make sure to fix the

name to movie

details there we

go perfect now we want to hide this ugly

header that we have right here at the

top that says index how can we do that

well we can head over into the app

layout. DSX that is this one that we had

from before not the one within tabs and

here we can expand the stack component

and within it we we can render something

known as a stack. screen which is a

self-closing component where we can give

it a name and say that it'll be a string

of tabs this is the route Group which we

created and we can also give it options

of header shown is false and we also

want to repeat this stack. screen for

our movie Details page by saying name is

equal to movie SL ID like this and we

can

say options header shown is set to false

if you save this and reload because the

header is still here well to hide it

completely we have to head over into the

underscore layout of the tabs folder and

then you can run

rnfe right here to create a new layout

instead of returning a view right here

let's instead return something known as

tabs coming from Expo router within tabs

you can render a tabs. screen component

it is a self-closing component that has

a name in this case it's index for the

homepage and then you can provide

additional options here you can also

provide a Heather shown is set to false

as well as a title sets to something

like home as this is the homepage now if

you reload your application by opening

up your terminal and pressing the letter

R you'll see that there is no header

shown on top and if I comment out this

tabs. screen you can see that we still

have index so it is hiding that single

route and then this one stack that

screen if you comment it out this one is

actually hiding the group route so we

are right now Under tabs

Index this one right here hides the

route groups header and this one right

here hides that specific screens header

and it also gives it a name which is

then shown right here at the bottom so

tabs allow you to modify how your bottom

navigation looks like now why did I say

modify and not create your tabs

navigation well that's because you can

see even though we have only declared

the Home Route immediately right of the

bat three additional routes are here and

they work out of the box we didn't do

anything but yet react native recognized

that we have three other routes right

here profile saved search and the the

home and at the bottom we can switch

between them but what tabs allow to do

is to further customize them so let me

say tabs.

screen make it self-closing and let's

give it a name of search as well as the

options of title search and header shown

set to false so now we can see it has a

capital S right here and let's duplicate

it two more

times this one for the saved so let me

call it name saved and title of Saved

make sure that you called it exactly as

you did right here and the last one will

be profile and I'll call it

profile so now no matter in which route

we are you can see that the header is

hidden but this results in a super basic

boring navigation to make it look more

similar to what we have on the design we

have to customize it by defining

different icons for each tab of the

navigation screen so I took the time to

find some cool images and icons so I can

share them with you below this lesson

you'll find this Project's video kit

which includes the link to the project

repo which then includes the readme that

has the assets so simply go here and

download them once you download them

simply unzip them head over within your

project and delete the current assets

folder as we don't need it then simply

drag and drop all of these folders

within your movie app there we go I'll

now explain everything that we brought

in here first we have the assets the

assets contain the font that we'll be

using some icons such as the home logo

person and more and also some images

like the background image the Highlight

logo and more we also have some

constants such as the icons and images

where we export all of these images from

a single file with a specific name so

it's easier to import them later on and

we also have some interfaces so the

typescript knows what kind of fields

will each one of our documents have so

with that in mind let's head back over

to our tabs layout to make our Tabs go

from this right here at the bottom to

something that looks more like this we

can start customizing them let's start

with the Home tab button react native

specifically the Tab screen allows us to

specify how the tab bar icon will look

like you can provide a callback function

where you get access to the state of

that specific icon whether it has

currently been clicked or not and then

here we can return an empty react

fragment for now and within it we can

return maybe like a background image

what do you think so first I'll return

an image background coming from react

native that'll have a source equal to

images make sure to click enter right

here before you finish typing them to a

to import them from constants my

webstorm did that very nicely for me

here so you can see that I imported

images from add/ constants SL images and

then we can say images. highlight

highlight is this little part so when

we're currently on that screen you can

show this little pill likee shape next

within this image background we can

render a regular image coming from react

native with a source equal to

images. home and we can give it a tint

color equal to

# 151

312 as well as a class name equal to

size-5 and we can close it right here

and we can also give it a text property

that'll simply render the word home okay

so now this is looking a bit off

definitely not what we expected so let's

style it a bit I'll give this Source a

class name equal to flex Flex - row w-

full Flex

D1 m-w of 112 pixels I found this value

to work the best with a Min height of 14

a margin top of

four justify Dash center items Das

Center to fully Center it rounded Das

full and overflow Das

there we go so now we have this real

pill like shape if it's active let's

also render an actual icon it is under

icons. home but also make sure to import

the icons from constants and now we can

see this icon and we can style this text

by giving it a class name of text-

secondary

text-base font D

semibold and margin left off

two okay so this is looking good now we

want to repeat this for every single

icon and instead of copying this code

and duplicating it four times let's

actually extract it into its own custom

component so this is not a react native

specific thing it is just how we do

things around react so take this as a

mini lesson whenever you have to repeat

this multiple times it's better to

extract it okay so now I'll take this

entire image background and I'll create

a new component out of it by saying

const tab icon is equal to a functional

component that returns this image

background which I can just space right

here but it seems like we have an error

so let's put this component to use by

rendering it right here instead of the

code that was previously on here tab

icon and immediately we get the same

output but it looks so much better but

now here's the problem whenever you

extract something into a custom

component

well how are you going to reuse it right

because now if I head into the options

of the search screen and I say something

like tab bar icon where again we can

Define how it looks like and then I

specify that I want to show some kind of

an icon well what happens it's going to

be the same one as in the home so of

course we want to figure out a way of

how we can differentiate those two

places where that component is being

used and here this is a mini lesson on

reusability you want to figure out how

to make a custom component reusable and

you can do that of course through props

so many things here are always going to

be the same such as the image background

component the classes we're going to use

and the colors of the text but what will

change is going to be the icon the text

and maybe the state of the focus are we

currently on home or are we on search so

whatever changes from component to

component you have to pass it as a prop

I'll pass a focus State equal to focused

as well as an icon equal to icons. home

as well as a title equal to home and

I'll put it into multiple lines so it's

easier to read I'll copy it and I'll

paste it right here for the search but

for the search of course it's not going

to be just icons. home it's going to be

icons. search and the title will be set

to search

and now we can also just copy this

entire tab bar icon and add it for the

other two icons this one the third one

will actually be called save so I'll say

tab icon icons Dove and the title can be

saved the icon name is save without the

D but I decided to add the D right here

saved and finally the last one will be

the profile so here we can render

focused icons. person and the title will

be profile now if I save this you can

still see that all four of them say home

but now let me collapse them just so you

can see how tidy this looks like there

we go so now we have four different tab

screens with different titles and icons

and the only thing we have to do is

extract those props right here at the

top focused icon and title for now we

can make them of the type any and we

have to use them whenever something has

to be dynamic so instead of icons.

something I'll simply render the icon

through passing through props and here

instead of saying home I will render the

title if I now save this you can see

that the icons for all four of them have

changed also not always we want to show

this image background we only want to

show it if it's focused so I'll say if

focused in that case we can return

whatever is right here so I'll indent it

properly and end it else I'll return

something much simpler like a simple

view that'll render an image of a source

equal to Icon a tint color equal to #

a8b 5db and a class name of size of five

of course import the view from react

native and give it a class name of size-

FO justify - center items Das Center

margin top of four and the rounded Das

full if you do that you'll notice that

now the icons are going to look much

better so let's collapse our tab icon

and let's further customize how all of

the icons together look we can do that

through options not on the individual

tab screens but we can do it directly on

the tabs by saying screen options and

here can say tab bar show label we can

set that to false so now we have no

labels just the icons we can also modify

the tab bar item style and I'll give it

a width of

100% a height of 100% as well I'll give

it a Justified content of Center as well

as a line items off center as well and

we can also modify the tab bar Style so

this is the entire tab on its own where

I'll change the background color to Hash

0 F0

d23 border radius will be set to about

50 there we go we can also give it a

margin horizontal of about 20 let's also

give it a margin bottom of

36 a height of 52 a position of absolute

overflow of hidden and Border width of

just

one with a border color which is going

to be the same color we used above 0 F0

d23 and there we have it we have a

navigation bar that looks much more

similar to the one we have here to make

it perfect we just have to fix this

small little inconsistency where the

height of this pill like shape is not

matching the height of the entire bar so

let's quickly head over into the tab

icon and increase the mint age from 14

to 16 and that did the trick perfect so

now take your phone in your hand and

just click between different pages

you'll only see welcome on the home

screen and the rest of the pages will

appear blank but if you pay close

attention to the top left corner you'll

see that some text is changing it's just

that it's not visible within our current

view but if you've been paying close

attention to the crash course I already

mentioned that there's an element that

can help us make sure that everything

fits nicely within the screen so we'll

explore it soon but I'm already super

happy with this because you have just

implemented a fully functional routing

system with a custom bottom navigation

bar that allows us to switch between

four different screens great job I know

this was a long lesson so I'll keep the

next one much shorter but equally as

important I'll show you how to customize

the logo of your application so when

users want to use it they know where to

click before we start developing this

beautiful home screen UI I want to

quickly show you how you can customize

your Expo app to show the logo of your

application when it's loading if you

check out your terminal you'll see an

error saying asset not found and right

here unable to resolve your asset assets

images icon.png within your app.js or

app.config DJs this is because when we

change the assets we're no longer

satisfying the need of our app.js to

show our applications icon it's pointing

to a pad that doesn't exist so let's fix

it we can show an icon called assets

images

logo.png you can copy it that full path

and we can also change it for Android as

the foreground image and while we're

here let's also change it for the web

right here as the favicon oh and right

here under the Expo splash screen let's

modify it here as well perfect so once

you do this open up your terminal and

press R to reload your application for

the changes to take effect as soon as it

bundles the error will be gone and our

icon will be applied so now if you

reopen your XO app you should be able to

see something like this mobile movie app

right here or if you want to change the

name too to something better like movie

Flex you can do that too and for this

change you'll actually have to reopen

your Expo app and rescan the QR code

too there we go now we can see this icon

even on the splash screen and when you

open it within Expo there we go both the

icon and the title are here too of

course we're within Expo right now but

this would be reflected on your devic's

home screen I mean just imagine opening

up your iPhone or Android device and

seeing your app on the home screen right

there with its icon and the title pretty

cool right there we go as promised this

was a short and sweet lesson next we can

focus on a super important part of this

course which is building out the UI of

our homepage so let's do that

next to start developing the UI over our

home screen head over into app tabs and

then index.ts X here is where we have

this welcome so for now let's focus on

implementing the header component

I'll clear this entire View and create

another this one will have a class name

equal to flex das1 and BG of primary

finally we're going to go away from this

light screen to a nice dark color within

this view we can render an image coming

from react native see how webstorm very

easily Auto Imports it at the top and we

can render a source and give it a source

of images now keep in mind if I just

press press enter it'll autoimport it

once again from at/ constants SL images

and I'll call the images. BG for the

background let's position it a bit by

giving it a class name equal to Absolute

let's also give it a w full so it takes

the full width of the screen as well as

a z index of zero so we can show some

elements on top of it right below it we

can render a scroll view this is used to

make the whole screen scrollable so if

there's a lot of vertical content that

might not fit within a single view then

you need to wrap everything within a

scroll view for users with smaller

devices to be able to see it let's give

it a class name equal to flex D1 and a

padding X of five to give it some

horizontal spacing within it for now

let's just render a single image that'll

have a source equal to

icons again coming from constants . logo

with a class name equal to W of 12 for

the width h of 10 for the height margin

top of 20 to divide it a bit from the

top margin bottom of five and margin X

of Auto to center it in the middle there

we go this is starting to look like a

real app already now if we had more

content we would have this ugly scroll

bar at the right side so to remove it we

can give an additional prop to the

scroll view called show or rather shows

vertical scroll indicator which I'll set

to false and I'll also give it a

Content container style which will be

equal to an object where Min height will

be set to 100% And also padding bottom

will be set to 10 so now you can see if

you scroll up and down it kind of moves

the logo moves right but we have no

content to show so very soon we'll be

able to add some content but first

things first we have to ask ourselves

what is the first thing that we want to

show on the homepage and it'll be the

search bar which will be our first

component of the day so let's create a

new components

folder and within it let's create a new

file called search

bar. TSX and within it run

rnfe to quickly create a new component

now we want to be able to see that

component somewhere so let's head back

into the index. TSX and let's head right

below this logo image and render The

View that'll have a class name of Flex

one and margin top of five and within it

just render a self-closing search bar

bar component coming from at/ components

SL

searchbar now you won't be able to see

it yet because right now it is just a

single piece of text which is hard to

see on a dark background but of course

we're going to style it further so let's

start by giving this view a class name

equal to flex Das row items Das Center

BG dark 200 rounded Das full and padding

X of five as well as padding y of four

to create some spacing in between it we

can render an image which is going to be

kind of like a search icon so let's

import the image component and give it a

source equal to icons.

search with a class name equal to size

of

five a resize mode equal to

contain as well as a tint color equal to

Hash

AB8 BFF and of course don't forget to

import the icons coming from constant

if you do that you should be able to see

this little icon at the top left below

it we can render a text input okay so a

text input is like an input component in

react or in regular HTML and it allows

you to pass similar things to it such as

the onpress functionality which for now

I'll just leave as an empty coolback

function a placeholder that you can pass

to it which can be something like search

for now a value which can be equal to an

empty string for now an onchange text

which for now will be equal to an empty

callback function a placeholder text

color which can be similar to our tint

color

a8b 5db there we go now we can see it

and finally we can give it a class name

of flex D1 margin left of two and text-

white so now we have what appears to be

a very simple search and when you click

on it you can see that your keyboard

actually opens up giving you a way to

type something in now what we need to do

to make this somewhat functional is pass

the real onpress value from the index so

typically when you have smaller

components like a search bar on its own

it doesn't necessarily have to be

concerned with what it is doing

typically you have some logic that you

pass from the parent component to the

child component in this case the search

bar so what we can do is Define the

router right here here in the homepage

you can say something like import use

router coming from Expo router you can

Define that router right here by saying

const router is equal to use router by

the way this is the first time we're

using the router right here and what

we're doing here is essentially using

something known as a hook so in react

and therefore in react native when

something starts with the word use that

means that it is called a hook and hooks

are typically called at the top of our

functional components and then they

expose additional functionalities in

this case the router functionality

allows us to move between different

screens programmatically not necessarily

by clicking a button or something but we

can use it to go to another page or

screen when something happens in this

case I will pass two props to the search

bar the first one will be the onpress

functionality that will for now call the

call function and then call the router.

push which will push it to for SL search

okay so we want to move to the search

screen once pressed and I'll also pass a

placeholder equal to search for a movie

now if we head into the search bar we

can accept these different props so

right here at the top I can destructure

them and accept the placeholder as well

as the on press and these can be of a

type props so right above it we can

define a typescript interface called

props and just say that the placeholder

will always be of a type string and on

press will be optional and it'll be of a

type function that returns void meaning

nothing the goal of this function is not

to return something rather it is to use

the router functionality to push to a

different URL so if you haven't used

typescript before don't worry what this

interface does is it simply tells our

react application or react native in

this case what the types of those props

should be so now on press we can call

the onpress functionality that we're

passing through props and also we can

pass in the

placeholder there we go search for a

movie now check this out as soon as I

click search for a movie it actually

redirects me to another screen called

the search

screen which will Implement very very

very soon but of course it doesn't make

sense to start implementing the search a

movie screen if we don't yet have any

movies to search for so in the next

lesson let's go ahead and fetch the

movies data from a third party

API to fetch the movies for our great

mobile movie application we'll use tmdb

a database off I think every movie that

you can possibly think of this is their

public facing website but they also have

an API so if you Google for tmdb API

getting started or I'm going to also

leave the link in the description then

you'll be able to find this getting

started guide head over to the API

reference and here you'll be able to

give it a shot we'll be using no JS to

make the calls and you'll have to get

your API key it'll ask you to log into

your account or to create it if you

haven't before so feel free to create

your account as it is completely free

you don't have to worry about paying

anything and you'll get access to all

the data once you log in you'll be able

to see something like this which is your

account and then head back over to the

getting started guide and click the link

that says API link there we go here

you'll have your API read access token

so copy it and save it somewhere and do

the same thing for the API key head over

into the API reference and if you're

logged in you'll see that all of the

credentials will be filled in alongside

a demo request that you can try in this

case they're making a request to the

authentication so if I click try it you

can see that it succeeded in this case

we'll be using the endpoint for

discovering movies so search for

discover movie and you'll quickly be

able to find that movies is deprecated

but you should use discover movie

instead and it tells you right here

which API request you have to call find

movies using over 30 filters and sort

options and it tells you right here what

you can pass over into it we can also

give it a shot by clicking try it and

then you get back the total number of

pages which is

49,000 pages that has almost 1 million

movies and here of course you get more

details for every single one out of

those almost 1 million movies how cool

is that now let's actually try to call

this within our code let's go ahead and

copy this entire fetch request by

selecting it and then pressing control

or command C and then heading back

within our code we'll create a new

folder that we'll use for the API

configuration so let's create a new

folder let's call it

services and within Services let's

create a new file called api. TS within

it for now you can paste this request

that we just copied but comment it out

we first want to set it up from scratch

so it's fully reusable and more

structured first things first we need to

extract this key that was given to you

so if you head back to your credentials

header select it and copy it you can now

store it in a more convenient place such

as a EnV file this stands for

environment variables and make sure that

it is in the root of your directory I'll

call it Expo coru if you're going to use

it on the front and side of your Expo

application you have to preen the name

of your environment variable with Expo

public and then say movie API key and

paste your environment key now we won't

have to every time spell it out within

our code for every body to see but we'll

be able to just refer to this variable

so instead of just making one single

request let's actually form a tmdb

configuration that is reusable so we can

actually change the way we interact with

it we can call it for multiple different

endpoints to do that you can export

const

tmdb config and it'll be equal to a

single object within the object we can

first pass the base URL like this and

the base URL will be this starting part

up to the part where the endpoint will

actually change so sometimes it'll be

discover movie sometimes it'll be my

profile for example but there's always a

base URL that each API has so https

Colin api. theme.org

sl3 and leave out the last forward slash

we don't need it here next we have to

pass the API iore key which will be

equal to process. env. EXO

undoru moviecore API undor key this is

coming from our environment variables

next we can pass the headers that we're

making with the request where we're

going to pass the accept property to let

it know what kind of data should it

accept and this will be equal to

application Json and also we have to

pass the authorization header which is

equal to a template string of Bearer and

then you once again render the process.

env. Expo public movie API key we're not

spelling it out like this perfect so

with that we have basically utilized

this entire part and the only thing that

remains to be changed is the URL that

we're calling so in this case you can

see we're looking for forward slcover

for/ movie but now that we have this

configuration object it'll be super

simple to create a function that just

call one endpoint let me show you export

const fetch movies is equal to an

asynchronous function that will accept a

search query and we can open up a code

block now for this query we also have to

pass the type and we can say that the

query is of a type string it'll look

something like this next we have to

define the endpoint that we're calling

so I'll say con endpoint is equal to

slash discover slovie question mark sort

by popularity descending so this will

give us the most popular movies then we

have to get the response out of that

call by saying const response is equal

to

await fetch we're going to fetch a

specific endpoint with the following

options I'll pass the method of get so

we want to make a get call and I will

also assign the headers to be equal to

tmdb config do headers finally we'll

check if the response is not okay so if

not response okay then throw new error

failed to fetch movies and we can also

consol log the response. status text to

see exactly what went wrong I'll

suppress this TS warning right now

because I assume there will be a

response. status text that might give us

more info and then if everything is okay

we can extract the data from the

response by saying respon data is equal

to await response. Json and finally we

just want to return the

data. results which contains the actual

movies out from this function and this

would be great I mean this works

amazingly well for just fetching the

most popular movies you could say fetch

popular movies and you would be good to

go with this function but I want to

teach you how to make it more modular

how to make it work both for fetching

the popular movies as well as to work

for fetching the movies that we search

for so if a user heads over and clicks

search right here we actually want to

use the same function not create a

duplicate one that'll fetch the movies

based on the user's search query so what

you can do is say that the endpoint is

equal to and then if there is a query so

if query exists then we can change the

endpoint to be equal to/ search slov

question mark query is equal to and now

here we can pass over the query like

this but whenever you pass plain strings

into a URL it is always better to encode

them just to make sure that we don't

have any weird characters that the

browser might not be able to process so

you can write in code URI component and

then pass the query into it this way

we'll be sure that everything is good

and then if we don't have the query

simply search for the the latest movies

now the final thing we need to do to

make this work is also make the bottom

one a template string why because for

both of these we actually want to add

the

tmdb config dobas URL at the start of

them so everything starts with this base

URL and then we're changing the exact

endpoint depending on whether we have

the query and if so we pass it or if not

give me all the most popular movies I

think you can now understand a bit more

detail of what I meant when I said that

we're going to make this reusable and

just better configured and it makes

sense because the endpoint is different

but the actual data we turning from the

function is still the same they are

movies so with that in mind you have

successfully created an account on tmtb

you extracted your own API key for free

and you made a function that fetches the

movies either the most popular ones or

the ones that match the user's query

very soon we'll put it to use but just

before that in the next lesson I'll show

you one more optimization that we can

make to use the fetch movies functions

we created in a more optimized

way in the previous lesson we

implemented this fetch movies function

but before diving into using it which

involves API calls using the use effect

hook managing loading and error States

and potentially clattering our code with

repetitive logic there's a more

efficient approach instead of repeating

the same code for every request we can

improve this process by using something

known as a custom hook this hook will

handle fetching the data in a clean

reusable and scalable way so let's

create a new file within the services

folder and let's call it use fetch. TS

and we can develop that custom hook this

hook will allow us to handle API

requests without cluttering the

components by abstracting away the logic

for fetching the data managing loading

and error States and it'll even provide

us with a way to manually trigger a

refetch when needed let me show you how

it'll look like we can say const use

fetch again notice the keyword use

indicating that it is a hook and we can

make it equal to a function call and we

can make it equal to an arrow

function now bear with me for a second

the use fetch hook will accept the fetch

function as a parameter okay so what can

this fetch function be well it can be

like fetch movies or it can be something

else maybe like fetch movie details

whatever it

is we're going to pass it into this use

fetch call so it'll look something like

this use fetch fetch movies we

immediately have to let it know that the

first parameter will be that fetch

function and we need to Define its type

and the type will be a function that

returns a promise and the promise will

be of a generic type t t makes it a

generic function allowing us to later on

pass the specific data types that we

want the function return to be it'll all

make sense once we start using it we

also have to add this generic T

parameter here and as the second

parameter we'll pass the autof Fetch and

make it equal to the true if you don't

understand what this means specifically

This Promise generic parameter T again

don't worry about it I'll explain it in

more detail once we actually start using

this function great with that said this

use fetch function will have to work

with some kind of data so we can create

a new state called data and set data

which will be equal to the use State

hook and it'll be of a type t or null

you define it right here before we open

the function call of this function and

by default we'll set it to null next we

need to define the loading and set

loading at the start equal to false and

also the errors const error set error is

equal to the use state where the type of

that state is either an error or a null

by

default now that we have implemented

those different states let's create a

function const fetch data which will be

equal to an asynchronous function within

which we can open up a try and catch

Block in the catch we'll of course get

the access to the error I'll shorten it

for err and within it we can set

error if an error is an instance of

error then I'll just forward the entire

error else I'll just create a new error

and pass in a string of an error

occurred and also press the typescript

right here for this line by saying TS

ignore then we're going to also add a

finally Clause finally block of code

gets executed either when a try succeeds

or a catch finishes either way we want

to set loading to false but now what we

care about the most is dealing with the

tri block which means actually fetching

the data first we're going to set

loading to true because we want to start

the loading action we're going to also

reset the error to false or rather null

there is no error and then we can say

const result is equal to await fetch

function so keep in mind that this fetch

function is not yet declared the fetch

function will be passed through props

and it can be either the fetch movies

function which we created not not long

ago or maybe another function which will

create in the future like fetch movie

details or maybe another function which

will create soon in any case the

function we want to call will be passed

through as the first parameter to the

use fetch hook and then we'll call it

right here get the results and simply

set them to the data so set data is

equal to result also below this entire

fetch data function we can also have a

reset function so con

reset is equal to an error function

where we set the data to null set the

loading to false and set the error to

now as well finally I'll also create a

use effect hook and a use effect Hook is

called when you want to do something at

the start of your component load so in

this case as soon as the component loads

we want to check if autof fetch is

turned on that means that we want to

automatically fetch the data in that

case so if if autof fetch is true we'll

simply call the fetch data

function finally hooks have to return

something so I'll return almost

everything the data State the loading

State the error State the refetch

function which I'll call fetch data as

well as the reset function so later on

when we use this hook it is dealing with

everything data related fetching

loadings errors and finally the data

that it's returning so let's say export

default use fetch so that in the next

lesson we can use the use fetch hook as

well as use the fetch movies function

merge them together to be able to fetch

and display

movies and we are finally ready to fetch

and display the movie data to do that

let's head over into our homepage app

tabs index. TSX fetching the data now

should be super simple since we have

already done all the hard work of

actually implementing scalable reusable

fetching functions that contain all of

the necessary data fetching logic let me

show you what I mean instead of handling

all the states and everything right here

now we can do just a single thing const

destructure the data that we're going to

fetch rename it to

movies and make it equal to the call of

the use fetch hook coming from services

use fetch to it we have to pass a

callback function in this case fetch

movies which is another one of our

functions we created and to it we can

pass a query which by default will be

set to an empty string let me actually

put this into multiple lines so you can

better see what's happening there we go

so we're calling the use fetch hook and

to it we're passing a callback function

called Fetch movies to which we pass the

query this this query right now is empty

but later on once we Implement search or

once we navigate to the search page we

can fill in the query data but it

doesn't matter if it's empty right now

because you know what happens fetch

movies if a query doesn't exist Returns

the most popular movies so we're still

good now alongside the movies themselves

back from the use fetch hook we're also

getting the loading which I can rename

to movies loading and we're also getting

back the error state which I can rename

to movies error and just so it's easier

to read it I'll put it into multiple

lines and there we go all the data we

need nicely contained within a single

call so let's put it to use right below

the icons logo we can check whether

we're currently loading the movies so if

movies loading in that case we can show

an

activity indicator built right into

react native it is a self- closing

component for which you can Define the

size in this case I'll make it large the

color which I'll set to Hash

0 FF and you can also Define the class

name which I'll set to margin top of 10

and self Center but if we're not loading

the movies then maybe there's an error

so let's check if movies errors exist

then we will render a piece of text

that'll say something like

error is equal

to movies error question mark.

message and finally if we're not loading

and we don't have an error we can return

a view within which we'll have the

search bar and the rest of the content

so basically I can just copy this view

that we had before and put it right here

instead of this view that I created next

below the search bar we can create an

empty react fragment and within it we

can display a piece of text that'll say

something like latest movies to be able

to see that text let's give it a class

name of text- LG text- white font Das

bold margin top of five and margin

bottom of three and I'll try to reload

the application just to see whether the

changes happen there we go you can see

the latest movies right there sometimes

you have to manually restart it now get

ready to use one of the most important

react native components called a flat

list imported from react native and let

me show you how it works a pretty cool

thing about the flat list is is that it

accepts a lot of props so for it to work

you don't have to customize it that much

outside of figuring out which props to

provide first of all we have to provide

the data prop that will simply be equal

to movies that's the data data we

rendering and then we have to tell it

how it will render each item each one of

these movies first we can destructure

that item which is a movie itself and

then for each item we can have an

immediate return what does an immediate

return mean well it means that we're not

opening up a function block here with

curly braces instead we're opening it

with parenthesis so whatever we put in

here such as maybe a text element means

that we will automatically return it so

for each movie Let's automatically

render an item. tile and give it a class

name of text- white as well as text- smm

so take a look at that we get back a

list of 20 most popular movies at the

time of the recording pretty cool right

another thing we have to pass into the

flat list is the key

extractor which simply helps react

native figure out how many elements they

are and where they're positioned so same

as before we get access to the item and

we simply want to take the ID of each

one of these

movies next we can Define the number of

columns in this case let's make it equal

to three and then you might need to

reload for the changes to take effect

because you cannot change the number of

columns on the Fly there we go so now

they're showing in three different

columns let's also Define a column

wrapper Style by making it into an

object and passing a justifi content of

flex Das

start gap of 20 in between the elements

padding of right five margin bottom of

10 so now if we save this they're going

to be positioned a bit more nicely and

we can also pass a general class name to

the entire flat list as margin top of

two and padding bottom of

32 Also let's say scroll enabled is set

to false as our entire view already

Scrolls by itself perfect so now we're

displaying 20 of the most popular movies

in the world just by passing the movies

array as data into the flat list pretty

cool right and I think you can now get

the idea of what I meant when I said

that the flat list is super extensible

and you can modify everything just by

calling different props data render item

key extractor num columns whatever we

needed to present our data nicely in a

list was already there and provided to

us through the flatlist component props

and you'll find this practice pretty

commonly in react native where the

pre-built components are super

extensible you just have to figure out

which props to pass and how can you know

well you just Google it which will bring

you to the documentation page you can

check out the example and then very

quickly you'll be able to see a list of

different props that you can pass to it

and exactly what each one of these props

does pretty cool right let me Zoom this

back in right now and now that we're

fetching the data properly let's make it

look a bit more interesting of course

visuals are what's going to change the

game right now we are showing just the

title but what if we could show an image

for each one of these

movies just so we don't have to declare

it in many places we'll create a new

reusable card component for the movie so

let's create a new file in the

components folder and let's call it

moviec card. TSX run rnfe to quickly

spin up our movie card component give it

a class name equal to text- White in

text

DSM and let's call it right here instead

of this simple text element instead of

that I'll call the movie card and I'll

self-close it like this now we have a

simil problem that we had before with

the tabs layout where each movie card

now shows exactly the same data so to be

able to make it different we have to

pass the right props to it so what does

it mean in this case well we can simply

spread out all of the properties of the

item or of the movie so that way we'll

be able to extract them directly within

the movie card so let's head over into

the movie card and let's accept all of

the props that we have passed into it

such as the ID the poster undor path the

title and where am I getting all of

these from well remember we already made

a mock response before and tmdb gave us

back exactly the data that we're getting

such as the poster path overview title

and

more so let's get it vote uncore average

as well as the release

date and these will be of a type movie

which we declared before under

interfaces so we already know what each

movie has now we want to make each one

of these cards clickable because once we

click it we want to go to the movie

Details page so I'll make it into a link

and this link of course has to be

imported from Expo router it'll have an

href of for/ mov slid and as child as

child simply means that the card that is

inside of the link will actually be the

thing that's clickable in this case

we'll make it a touchable

opacity so like a card is technically a

clickable button in this case coming

from react native we can give it a class

name equal to w- 30% so each card takes

only 30% of the screen and within it

let's first render an image this image

will have a source equal to an object

where the URI is we can check if the

poster path exists if it does then we'll

set it to be equal to

https colon SL SL image.

tmdb org SLT SL

pw500 and then poster path like this

else if we don't have a poster path we

can render just the placeholder so it'll

be a string of

https

col placehold doco SL600 by

400 SL1 a1a1 a SL

f.png sorry for spelling out the entire

URL just thought it would be the

simplest way to share it with you now

reload your application and let's also

give this image a class name of

w-o

h-52 and the rounded dlg for the rounded

Corners we can also give it a resize

mode equal to cover right below that

image still within the touchable opacity

let's also render a piece of text that

will simply render the movie

title and we can give it a class name of

text DSM font D bold text - white and

margin top of two and there we go once

again you can see all of these movies

but hey where is the poster why can't we

see the images well let's first consol

log the poster path to see whether we're

getting back the Pats of those movies so

the URLs are coming back but hey where

is the poster why can't we see the

images well for the image to be

displayed we need to give it a URL which

I do believe we're getting as the titles

are here so the poster should be two but

images also need a width and a height

and I thought that I was providing a

width of 100% and a height of about 208

pixels so why is it not getting applied

well if you head over into your Tailwind

doc config.js you'll see that we're

saying that only the app folders and

files will actually include Tailwind

Styles but we we have to do the same

thing for the

components so right here as the second

part of the content I can add a second

string and say/ components and then also

Target all of the components and

immediately that will allow us to apply

Tailwind Styles within our components

folder and immediately the images will

appear so this is looking absolutely

amazing and it is so nice to be able to

scroll with my thumb across all of these

movies and since we're using touchable

opacities you can see as I hover over

them it appears as they are clickable

all of this is happening natively within

our mobile application beautiful for me

I see some of the movies that are

currently popular if you're watching

this video later on for you some

different ones might be so in the

comments down below let me know what is

the popular movie from your list that

you like and with that said we also have

one little error right here saying that

the path of movie slash is not a valid

path and it's actually pretty amazing

that react native can understand that we

don't have a movie ID path we only have

movies plural so as soon as we change it

that's working great so now that we're

showing the image and title already this

is looking amazing but we might as well

show some more information so let me

open up another view right here and give

it a class name of flex - row items Das

Center justify Das start and a gap of X

meaning horizontal only of

one within it we can display another

image but this time a much simpler one

just coming from icons which is coming

from constants do star so we want to

display the number of stars for each one

of these with a class name equal to size

is set to four and below it we can

render a piece of text that'll round up

the current score so I can use the

math.round vote

average divided by two because it goes

up to 10 we want to have it up to five

so if we do this and reload our

application the changes are still not

getting applied so sometimes you might

need to just reload your application by

pressing contrl C and then run MPX

expose start one more time and then

press R to fully reload it but why can't

we see the star yet oh it's not SRC in

react native it's Source oh it's those

little gotas right that always get you

there are some small differences between

react and react native so be careful but

thankfully there aren't many let's also

give this text a class name of text- XS

extra small text- white and font Das

bold as well as uppercase so now we can

show the rating right here below this

view let's render another

view this one will have a class name

equal to flex D row items Das Center and

justify Dash between and within it we

can render a piece of text that'll have

a class name equal to text- XS text

dl-300 font D medium and the margin top

of one and within it we can render the

release date but it'll be too long like

this so we can just split it by saying

question mark. spit based on the dashes

and we can only take the first part of

the dash which is the year we just care

about when this movie was

released and below this piece of text we

can render another that will simply say

movie and we can give it a class name

equal to

text- EXs font D medium text- light 300

and uppercase and if you save it it'll

now say movie this is cool to have later

on in case maybe some are not movies but

maybe TV shows so you can specify which

one it is but for now I will simply

comment it out and I also want to make

sure that the title takes only one row

because if it doesn't that can mess up

with the view so where we have the title

that's going to be right here under this

text property we don't have to shorten

the string react natives text element

comes with a pre-built number of lines

prop where you can say that this text

should only take one line and

immediately you can see that it is

shortened to just a single line looking

great with that in mind I invite you to

further style this card right now we're

just showing the title the profile photo

the rating and the year but as you know

we're getting back so much more data

about each one of of these movies so you

can go ahead and utilize something else

like the original language or the

popularity or even show the overview

right here so feel free to play with it

and try to further customize this card I

will suggest with simply destructuring

some more props from right here and then

using them within your jsx but don't

worry about it too much because very

soon we'll be able to show all of the

details about a movie within our movie

Details page so keeping that in mind I

am now more than happy with how our

homepage is looking and if we head back

to the index. TSX you can see that we're

fetching back all the movies but now

what we can do is for the time being

manually change the query to see whether

our function works for fetches where

we're searching for a specific movie so

if I type something like Iron Man and

click save you can see that it'll reload

and show all of the movies that match

that search term pretty cool right and

if I bring it back we're back to where

we were it's not that hard right once

you understand the basics using it the

next time will feel much easier but this

was just one example of creating a

custom hook for fetching data you can

create custom hooks for many other

things like handling forms like react

hook form managing themes or storing

data in local storage you can do

whatever you want but don't give me me

wrong you don't always need to create

your own hooks only when it really makes

sense to do so because react 19 comes

with a lot of pre-built hook like the Ed

hook yep it's only used like this and it

does some pretty cool things there's

also the use action State use form State

use transition which make working with

forms and requests much easier and I

actually explain all of these in detail

with real examples and even better

projects

within the new react native course that

I'm right now building for JS Mastery

Pro it's a new learning platform where

you can learn Lesson by lesson with real

examples and even better projects so go

ahead and check it out I'll leave the

link in the description but with that

let's go ahead and develop the search so

we no longer have to manually pass the

query right here instead we can use the

actual search page and then pass over

real values great job so far the app is

already looking amazing but now we'll

make it stand out with even better

functionalities similar to what we did

in the home screen now is the time to

develop the search screen so let's open

up our file explorer and head over into

tabs search. TSX now we could totally

just copy the entire index. TSX and just

paste it over into the search but I want

to take the time to guide you through

the the process of building it out one

more time because although it'll be very

similar there will be some differences

here and it's just a beautiful chance to

recap everything we've learned so far

just to make sure you totally get it

I've made the font a bit smaller just so

you can nicely see everything and we are

ready to get started first this view

that we're wrapping everything with will

have a class name of flex D1 and BG -

primary just so we don't have to stare

at that blank screen anymore next within

it I'll display another image which I'll

import from react native and it'll have

a source equal to images coming from

constants BG so this is our background

with a class name of flex

D1 absolute W full and Z of zero as well

as a resize mode equal to cover

similar to as on the homepage next in

this case instead of wrapping everything

with the scroll view as we did on the

index here we don't want to scroll the

entire view because the search bar

always has to remain on top so here I

will actually just render a flat list

pass the movies to it and pass the

similar render item as before where we

will destructure the each individual

movie and for each one we'll simply

render a movie card to which we will

spread the item property or in this case

the movie itself so let me put these

props in a new line so it's easier to

see and we are rendering this movie card

right here there we go now of course

where are these movies coming from well

this part we can definitely grab from

the index we're getting them by simply

calling our use fetch fetch movies this

is a custom hook we already created we

might as well grab this used router at

the top we'll surely need to use it and

I'll paste it right here at the top of

our

search make sure to also get all the

Imports such as this movie card right

here and now if we go back to the search

you'll see we have well something right

a broken layout so far next as before we

need a key extractor to let react native

which ID does each one of these elements

have and here we can just say that each

one will get it from item.

id. to string we'll also render a class

name and give it a padding X of five so

some spacing a number of columns will be

set to three as before and we have to

reload our application for the changes

to take effect there we go this is a bit

better as well as we can provide the

column wrapper style which will be an

object that will say justif a content is

equal to center a gap of 16 in between

the elements as well as a margin

vertical to create some space for the

search bar of 16 as well we can also

render the content container style as

before which will simply have a padding

bottom of something like 100 and now

bear with me before we display the

search bar at the top of the flat list

because we were able to scroll the whole

thing we didn't need to see the search

bar but in this case we'll render the

search bar as a part of the flat list so

I'll do that with yet another special

flat list prop called list Heather

component I'll open up an empty react

fragment and whatever you put within it

will be displayed at the top of our list

so let me say something like like View

and this view will have a class name of

w-o

flex-r justify Dash Center margin top of

20 and items Das Center and within it we

can display our logo that'll be an image

with a source equal to icons make sure

to import them from icons constants do

logo with a class name of W12 and h10 so

now we get the logo at the top as I

promised whatever you put within the

list header component even though it's

just a part of the flat list it'll

actually show on top as that's what this

component does rendered at the top of

all the items now below the view that's

wrapping the image we can render another

view this one will have a class name

equal to margin y of five and here we

can render the search bar coming from

components search bar and we can give it

a placeholder of something like search

movies dot dot dot there we go it

appeared right on top right below the

view we can also check whether we are

currently loading so I'll say something

like movies loading and if movies are

loading then we can show an activity

indicator with a size is equal to large

a color is equal to

000000 FF and a class name equal to

margin y of three so now we have to get

access to this movies loading and we're

getting it right here through this use

fetch call but I have to spell it

properly the L in loading is uppercased

now if we go back if you're paying close

attention you would have been able to

see the loading for a short period of

time but if we don't have a loading then

it is possible that we might have some

kind of an error so I'll say if movies

error in that case we can render just a

single piece of text that'll have a

class name of text-

r-500 padding X of five and margin y of

three and the text will say

error and then we'll render the movies

error die message no errors for now and

finally below it I'll open another

Dynamic block of code and if we're

neither loading nor there is an error

then we can take a look into the current

search term let's say that the search

term right now is hardcoded search

term. trim so we want to trim any extra

spaces and if the search query exists as

well we want to check if there are any

movies. length so movies question mark.

link length for that search term and if

that is greater than zero in that case

we can finally return a piece of text

and this piece of text will say search

results

for we can put an empty string right

here and then render another piece of

text that'll say search term and I'll

style the second piece of text by giving

it a text- accent class name and I'll

style the first piece of text text by

giving it a class name of text- excl

text- white and font Dash bolt oh and

now I see that I call this just loading

an error instead of movies errors and

movies loading so you know what it might

be just simpler to call it like that it

makes sense that we're loading the

movies so I'll just not rename the

loading in the error to loading movies

and loading error I'll just keep them as

loading and error so here I can now

change the mov loading to loading and

error to error same thing right here and

now this message right here makes sense

if there is no loading and no error and

search term exist and if movies that

length is greater than zero well then

display this piece of text so now if you

go

back you can see search results for

search term so let's make it Dynamic

right at the top of this component I'll

create another Ed State we don't need

the router in this case so let me delete

it and let me Define a use State snippet

called search query set search query at

the start equal to an empty string also

when calling these movies in this case I

want to pass a second parameter to the

use fetch function of false because in

this case we don't want to autof fetch

we just just want to let the user

actually trigger the fetch on search so

that's why we initially extended this

custom hook to allow for autof fetch

when we're on the homepage or to

disallow it when we want the user to

search First and of course we can now

put the search query to use and say give

me the movies where the query matches

the query that the user currently

searched for so now that we have access

to the search query right below we can

replace this big search term with search

query. trim and also below where we're

saying search term we can render the

actual search

query so now if I open up my keyboard by

clicking on the list and I start typing

you'll see nothing is yet changing and

that's because we haven't passed proper

values into the search bar so to the

search bar alongside the placeholder we

also have to pass the value

equal to search query as well as on

change text equal to a callback function

where we simply set query or set search

query to be equal to text that is coming

right here through props and we can set

the type of this search to a string but

as you can see the search bar is still

not accepting the value prop so let's

head into it and let's implement it I'll

simply say also accept the value

and the value will be of a type string

once you do accept it simply forward it

here value and also forward the onchange

text I believe that's how we called it

onchange text so it'll be a function

that doesn't return anything void and

now we can make that onchange text right

here instead of this dummy cack

function if we now do that looks like I

did properly defined the type here we

are getting something as the first

parameter and it is text of a type

string so if I fix that you can see that

the error goes away and now if I start

typing something like

Batman you can see that the search

results change immediately right here

below I can type Marvel that works as

well it works incredibly well and as

soon as I delete it the search results

go away great

but finally what matters most is

rendering the movies that match that

search term so I'll create a new use

effect right here below this use effect

will have a callback

function and a dependency array we want

to recall it every time that the search

query changes so I'll say if search

query. trim exists so if there is

something that the user has searched for

then await and as a return value of the

fetch we're also getting access to the

refetch function which we can rename to

load movies because that's exactly what

it does and also we get access to

reset so now if there is a search term

whenever the search query changes just

await load movies like this else simply

reset the state and since we're using a

w right here we'll have to wrap this

into an asynchronous function so I'll

say const funk and I'll make it equal to

an asynchronous function that then has

this if within it that'll look something

like this and now we can call this

function just below if I do that

initially you'll see no movies but if I

search for Iron Man you can see all the

movies that match that search term and

if you start deleting it you can see

that we get back to well I I think we

got back to whatever the letter was

there before we actually removed it so

this is the letter i movies and then

yeah if we remove it we have nothing now

there's a couple of problems with this

and that is that let's say that I want

to type a normal movie name like Iron

Man like what happened here is that the

app made a request to the API for every

single letter that I type that is a lot

of different requests and for each one

we're getting many movies but hey I just

wanted to see the ones that I get back

once I type the entire search term so to

not overload our application with too

many API requests for every single

keystroke what we need to do is

something called

debouncing we can debounce a search term

by wrapping it into a timeout function

so I'll say const timeout ID is equal to

set

timeout and then we have this function

and we can close it here as well and in

this case you don't have to call it but

we do have to give it a second parameter

which is a number of milliseconds of how

long it'll wait for the next keystroke

I'll explain what that means soon and

now we can return a callback function

where we can clear the timeout with that

specific timeout ID this is just to make

our application work more efficiently we

need to clear out all the timeouts but

with that said check this out if I type

very quickly you'll see that as long as

I continue typing no request will be

made but as soon as I stop typing for

500 milliseconds which is half a second

immediately I'll get the results this

means that a user that types fast can

only make a single request and get the

data they would usually get as well but

this time in a single request instead of

a dozen great but now what happens if I

search for something that just doesn't

exist we are left with a completely

empty screen something that you never

want to see within your application you

always want to show some kind of an

empty State and believe it or not once

again I think you can now start seeing

what I was saying from the start in

react native components there is a prop

for everything from the data render item

key extractor to defining how a header

will look like two even defining how an

empty state will look like yep list

empty state is a valid flatlist prop

that allows us to specify what the user

will see if there's nothing in the list

so I'll say if there is no

loading and if there is no error

in that case and of course if we're

empty we'll show a view with a class

name equal to margin top of 10 and

padding X of five a text

element with a class name of text-

Center and text- gray 500 and within it

we can say search

query. trim if the search query exists

will say no movies found

but if a search query doesn't exist

we'll say search for a movie and of

course if there is a loading on error

we'll just return null for the empty

list component because we want to

display something else so currently we

get no movies found and if you wanted to

you could display a nice illustration

right here and say you know go ahead and

search for something cool or here's a

movie recommendation that you might want

to watch based on your history there's a

lot of things you can do on empty States

but hopefully the users won't be staring

at this for too long as they're going to

put our search to use great so in this

lesson we recapped what it means to

create a react native screen that uses

our custom hook fetches data from a

third party

API changes it based on the search query

that the user types in using their

keyboard as well as how to debounce a

search term to optimize it further and

not make too many requests and finally

how to use a flatlist component with all

of its props to properly render the

layout doesn't get much better than this

now in the next lesson we'll bring our

app to the next level we'll Implement an

algorithm that displays trending movies

so I'm not talking popular or searched

but rather show the movies that match

what the users within our app are

searching for that can kind of give you

an idea of who your users are and how we

can further customize the app so let me

show you how to implement it in the next

lesson so hey custom algorithm right

well technically yes you'll Implement a

feature that displays the movies that

The users are searching for within the

app to be more specific the more

frequently a specific search is

performed by multiple users the higher

its trending status becomes this

requires tracking and analyzing search

patterns over time for example if many

users Search for Avengers that search

term becomes trending and to track and

analyze these searches we need a place

to store that data permanently this is

where a database comes into the picture

it keeps all the information organized

and accessible and traditionally Ally

implementing this would mean building a

full stack application you'd have to

create a server set up a database

connect them host everything together

and then integrate it into your react

native project while this approach works

it can be a lot of effort and requires

diving into backend development which is

a whole different area of expertise an

easier way to get backend functionality

without starting from scratch is using a

backend as a service platform it'll

provide you with apis and tools to let

you store your data manage off and more

without needing in-depth backend

knowledge in this course I'll use aite

because it's simple open- source and

free to use plus it'll save us from

diving head first into backend work when

we really just want to focus on making a

react native app great so click the link

in the description and create your

account and then head over to your

console if you haven't already create

your project or just head over into the

one you already created and copy its ID

back within your app head over into ourv

file and let's create our second

environment variable Expo public aight

project ID and simply paste the one you

just copied now we'll have to set up a

platform for a project in this case

aight already comes with react native so

let's select it and you'll have to

choose Android or for

iOS and give it a name I'll do JSM movie

app and as the bundle ID you can type

something like com. JSM doov app like

this and click next it'll give you some

dependencies you want to install so copy

them open up your second terminal and

paste them right here to install app

right click

next next one more time because we'll do

this together and go to the the

dashboard and now we can set up the rest

of the back end together specifically

create a database and some collections

within it so let's do that next just to

give us some extra space to work with I

have hidden my Mobile screen from here

for now and I'll create our first

database I'll call it movies and create

as soon as you create it you'll be given

a database ID copy it and store it

within your editor within the EnV file

as Expo public aite database ID next

create a new collection within that

database call it metric you'll also be

given the ID of the metric collection so

copy it and paste it as the

Expo public aight collection

ID and baste it now you'll want to

create different attributes for the

metrics

collection the first one will be a

string of search term so let's say

search term let's say that it can have

maybe 1,000 characters and let's make it

required after that we'll do an integer

of

count it won't be required and we don't

need to enter the Min and Max size but

the default can be set to zero so this

is how many times has a user searched

for each specific movie or rather for a

specific search term let's also create

another attribute of a type URL and call

it poster URL I'll make it

required so we can store the poster of

the movie that people are searching for

we can also save an integer called

moviecore

ID and I'll make it

required and finally we want to save the

title of the movie people are searching

for I'll enter the size of 1,000 better

to have more than less and I'll make it

requireed

great and now we just want to make sure

that we give this collection all the

necessary permissions to be able to

update it so head over to settings

scroll down to permissions and click any

and tick create read update and delete

this is the easiest way to do it just to

make sure that we don't have any

permission errors now we just want to

make sure that we can read any kind of

value from aight so to be able to do it

let's create a new file within

services and let's call it

aight. TS within it we'll Implement two

functions the first function will track

the

searches made by a user it'll have to

accept two different params so let's

Cote it out export

const update search count and let's make

it equal to an asynchronous function

that accepts two different props the

query of a type string so what the user

is searching for and then the first

movie that matches that search query so

I'll say movie of a type movie then we

have to perform a couple of steps we

have to call the aight API to browse the

database and check if a document already

exists for the given search term so

check if a record of that search has

already been

stored then if a document is found

simply increment the Search Count

field but if no document is

found in that case it means that it's a

new search term so we want to create a

new document in aight

database and then we want to initialize

its count to one so how would that look

in practice well something like this

first we want to check everything that

we have in our app database by saying

const result is equal to a weit and now

we have to call the aight database but

before calling it we actually have to

set it up to be able to make that call

that looks something like this we can

first Define our environment variables

by saying const database unor ID is

equal to the variable coming from

environment variables process. env. exop

public aight database ID and make sure

you don't have a typo like I do right

here and at the end of that line you can

add an exclamation mark which tells

typescript that we know that this value

will be there because it cannot know

what we have within our envs but we do

know it and I'll also create another one

const collection ID will be equal to

process. env. Expo public aight

collection

ID just like this now we can set up a

new aight client const client is equal

to new

client and make sure to import this

client coming from react native app

right and we want to call a method

called set endpoint on it to which we

want to pass the default aight endpoint

https

colon cloud.

aight.

slv1 and we want to

choose our project by passing the ID of

our project that is the process. env.

Expo public aite project ID perfect so

now we have our aight client and we are

ready to set up our database instance

belonging to that aight client by saying

cons database is equal to new

databases this is coming from aight so

make sure to import it and to it you can

pass the client that we want to

initialize this database on once you do

that we can go back to where we were

result is equal to await

database. list

documents and you want to pass in a

couple of things first is the database

ID within which we want to list the

documents then we have to specify within

which collection do we want to fetch it

collection ID and then you want to pass

the actual query so query. equal and we

want to match the search term with the

query that the user is currently passing

and of course this query is also coming

from react native aight oh and make sure

to put it within an array not within an

object because there can be multiple

queries or multiple criteria that we're

searching or listing the items by so

let's go ahead and conso log the result

and before we try to get back any result

let's make sure to reload our

application by stopping it from running

and then rerunning MPX Expo start when

you change your environment variables

you you might want to always reload it

just to make sure the changes are taken

into account so I ran the application

and now back on the search page we want

to call this update Search Count

function so let's head over into search

within tabs and I'll add it for now just

here at the top of this use effect call

the update search count and make sure to

import it from Services aight if you do

it properly and navigate over to the

search function you won't be able to see

anything yet but if you pass the search

query into the update Search Count

function as well as the movies zero so

the first movie that you get back for

that search

query you'll see that you'll get back

documents zero total zero which means

that we're successfully accessing the

app right database but there's nothing

to be fetched yet this is good this is

the only thing we wanted to see for now

and if you don't yet see it that's okay

don't worry about it now we'll actually

create our first document and then we'll

be able to fetch it so now we have to

check if a record of that search has

already been stored so I'll say if

result. documents. length is greater

than zero then we want to search for the

existing movie so con existing movie is

equal to

result. documents zero so this is the

top movie that shows for that search

term in that case we want to say await

database. update document so if the

movie already exists and we need to pass

it the database ID to be able to know

within which database to update within

which collection to update and then

finally the ID that we want to update

that's going to be existing movie do

dollar sign ID and finally what do we

want to change well we want to set the

count to be equal to existing movie.

count + one because some other user has

already searched for it before else if a

movie doesn't yet exist then we can just

create that metric by saying a wait

database. create document within our

database ID within this specific

collection ID

and we also want to give it a unique ID

so say ID and import it from react

native app right do

unique so we're now creating a new

document in our aight database that will

allow us to store the searches that

people have entered and we can then

Define an object of how that record or

document in the data base will look like

and we can say search term will be equal

to query

moviecore ID so the first movie that

shows up will be the movie. ID the count

will be set to one by default and the

poster URL of that movie will be equal

to

https col and

forward image. tmb.jpg

similar to what we did on the homepage

or rather in the movie card and we can

put all of this within a tri block

everything from where we're trying to

get this result try to do this

everything we have here so let me close

it there we go and then catch if

something goes wrong well that must mean

that we have an error so simply

console.log the error message as well as

throw the error

great so with this code we should be

successfully updating the ight database

to store the metric of what the user has

searched so let's head back over into

the search and right below where we say

await load movies that means that the

search has actually been made check if

movies question mark. length is greater

than

zero and if movies question mark. Z

exists then we can await update Search

Count pass the search query as well as

the movies zero if I zoom it out that'll

look something like this so now let me

show you how that works I'll go ahead

and search for something like Avengers

and the first movie that shows up is

Avengers Infinity War I'll search one

more time for Iron Man for example I'm

want to roll with these superhero movies

and again please let me know which

movies do you like you can let me know

in the comments below this lesson and

I'll Search for

Avengers one more time just to replicate

as if some other user has searched for

that search term as well now we can head

back over into the database head into

movies metrics oh and I don't see any

documents yet that's interesting oh

check this out missing required

attribute title so back in app right

where we're creating a new document we

want to actually pass the title equal to

movie. tile so we can store that as well

oh that was my bad but thankfully we

were getting some logs

back now if I go ahead and and restart

this search and go back and

reload immediately a new document has

been added to the database Avengers

count one with the stored poster URL the

movie ID and the title so this means

that right now this is the top searched

movie now if I go ahead and search for

something like

Avatar and reload right here check this

out in our permanent data storage we're

now getting back two different documents

and now if another user goes ahead and

searches for

Avengers oh I misspelt it that's okay

there we go now this count should update

to two oh but it didn't it is still one

but let me try one more time maybe it

didn't send out the request I'll remove

1 s Avenger and I'll re it right now to

rep. search and if I reload you can see

that even the Avenger and then Avengers

gets added so we have the count of two

if I remove it and if I search for it

one more time and

reload now we're looking at the count of

three this is great it means we're

actually storing the data of the top

trending movies that The users are

searching for within our app so in the

next lesson let's go ahead and display

them at the

top in this lesson we'll first create a

function that queries the aight database

to retrieve the top movies our users

have searched for and then we'll display

it in a cool Netflix like Carousel at

the top so first things first let's

collapse this update Search Count

function I'll zoom out a bit and right

beneath it create a new function export

const get trending movies it'll be equal

to an asynchronous function and this one

doesn't have to get any props but it'll

just return a single promise of trending

movie array just like this or undefined

in case something goes wrong so here we

can open up a try and catch

Block in the catch if there's an error

we'll simply console log that

error and return undefined but in the

try we'll actually try to list out those

documents and we have already done that

at the top of the update search count

because to update we first have to fetch

them so let me copy this starting part

and paste it here con result is equal to

a wait database. list documents database

ID collection ID and this time I'll say

query. limit to five so we only want to

get the first five elements and query.

Order descending based on the count

field so we only want to show the top

five movies that people have searched

for sorted by the count and we can say

return

result. documents just to make

typescript happy we can say as

unknown as trending movie array this way

tab script will know exactly what we're

returning next we can call this function

within our homepage so head over into

index.

TSX I'll Zoom it out once again so you

can see a bit better and right above the

first use fetch call we're going to add

the second const we know how it works

you can call it use fetch but this time

to it we're going to pass the get

trending movies instead of fetch movies

and we get back the same things the data

which this time we can rename to

trending movies the loading which we can

rename to trending loading as well as

the error which we can rename to

trending error now just below where we

we have the activity

indicator we can say if movies

loading or trending loading and same for

the error if there is movies error or if

there is trending error show an error

that error can be movies error or maybe

it is trending error question mark.

message here to the search bar we don't

have to pass the value because we're

searching within the search page so we

can make this value optional right here

and what else is optional on press

placeholder what are we missing on

change text yeah we don't need it right

here in the homepage next right below

the search bar I'll say if trending

movies exist so if trending movies then

show a

view this view will have a class name

equal to margin top of 10

and we'll render a text

element that will say trending

movies of course let's go ahead and give

it a class name so we can see it of

text- LG as well as text- white font

Dash bold and margin bottom of three

let's open up our terminal and reload

the

app just to see where we are sometimes

it gets stuck so you have to reload it

you know that by now don't you and now

you can see trending movies title right

here below the search so how are we

going to render the trending movies well

believe it or not it's going to be a new

flat list to which we can pass the

trending

movies as the data and I'll pass the

render item to be equal to as before

we'll destructure the item as well as

the index from this function and then

for each item for now I'll s simply

return the item. tile but of course we

have to put it within a text so let me

actually expand this and return a text

element within which I'll render the

item.

tile and let's give it a class name

equal to text- White text DSM just so we

can see it now if we properly close this

flat list you'll be able to see three

top movies Avengers Infinity war three

times let's style it a bit by giving it

a class name of margin bottom of four

and margin top of three and I'll put

each one of these props in a new line

just so it's easier to see what's

happening there we go data render item

and then we render a text below render

item we'll have the key extractor it is

a mandatory thing where we get access to

the item and the ID will be coming from

item do movor id. TW string and

currently the top three movies all seem

to be Avengers Infinity War I guess

that's because for all three of these it

saved that as the title let me actually

delete those documents and let's try it

one more time now there should be no

latest

movies so now if I reload my application

once again right off the bat you'll see

an error right here saying that

virtualized lists should never be nested

into inside plain scroll views with the

same orientation because it can break

windowing and other functionality what

this means is that we cannot have at

least not the list with the same

orientation but don't worry about that

for now because very soon we'll change

the orientation of this flat list to

horizontal because that'll make it look

more like this so for now if I go back

to my app go to search and try with

something like Avatar and then I delete

that and maybe search for alien okay and

now if I go back to aight looks like the

metrics are not getting added so let's

debug it together I love it when

something obvious doesn't work when I'm

recording because it gives me the

opportunity to go back into the code and

I think that sometimes you can learn

more that way than just watching me code

everything out because you can see

exactly how I would approach the

debugging process first we have to ask

ourselves where is the error coming from

in this case we know that the documents

are not getting added to the ight

database so we have to ask ourselves

where is that within our code and that

is within the search page so if you head

over to the search page you'll see that

we have a single use effect now within

this use effect we have both await load

movies as well as update search count

and these two can race together and we

never get back the meaningful results so

we have to split them into two separate

use effects so I'll I'll copy this if

statement and within this first use

effect that gets executed whenever the

search query gets changed here we just

want to await load

movies but in the second one that I'll

create right now use effect where we

have a callback function this one will

change whenever the movies themselves

change and here we want to check if

movies do length is greater than zero

and if movie first EX exists then we

want to open up a codee block here and

we can simply call the update Search

Count without the use effect like this

now if we go ahead and search for

something like Avatar we'll get back the

movies I'll go ahead and search for

something like let's do

cats there we go and if I head back to

aight you'll see that we have two

different movies stored right here we

might as well go for the third one so

I'll go with iron

man there we go looking good and if I

reload it gets saved and of course what

we care about is what if another user

searches for a similar movie so if

another user searches for avatar for

example there we go does the count get

updated and this time it does so now if

we go back to the homepage and head back

over here where we're trying to show a

flat list of the top movies let me just

make sure to reload the page you can see

that right here we get three different

movies Avatar cats and Iron Man which is

great that means that our trending

functionality is kind of working but of

course we have to improve it further

check this out we can pass just a single

prop called horizontal and if you just

pass it like this and save it

immediately the orientation will change

to horizontal we can also O Say shows

horizontal scroll indicator and set it

to false and we can also render the item

separator

component and I'll make it equal to a

simple

view that is

self-closing and has a class name equal

to W of 4 now we can see that this looks

a bit better oh and this latest movies

was supposed to be just above the other

flat list not this one so I'll go below

this one and here I can paste it it says

latest movies and right here at the top

we have trending

movies great but of course we don't just

want to show three pieces of text we

want to show fullon cards that look like

this with these top trending numbers so

to do that let's create a new component

in the components folder and let me call

it trending

card. TSX run rnf to quickly create and

now instead of this text where we're

rendering the item title we can render

the trending card just like this a

self-closing trending card component to

which we can pass over the movie equal

to item this is an alternative way of

just spreading everything out sometimes

this is preferable because then you can

consol Lo the entire movie itself and

then know what properties does it have

and let's also pass the index of that

movie equal to index so we can show that

number now let's head over into the

trending card and let's get it

implemented as with the cards before

I'll wrap this card with a link because

we want to make sure that the entire

card is clickable and that it leads to

the movie Details page so I'll add an

href of SL movies SL movor ID and I'll

say as child because we want the entire

touchable opacity to be clickable so

it'll inherit link properties now where

is this movie ID coming from well we can

destructure the movie right here from

props and from the movie we can further

destructure the movie ID the title and

the poster URL and outside of this movie

destructuring we can also get the index

and we can say that all of these are of

a type trending card props now within

each link let's render a touchable

opacity it'll have a class name equal to

w-32 relative and padding left of five

and immediately within it we can render

an image this image will have a source

equal to URI is poster _ URL a class

name equal to

w32 h48 and rounded

dlg with a resize mode equal to cover

and there we go now you can see the

cover photos or the posters for the top

three searched movies right below it

I'll render another view and this view

will be absolutely positioned so I'll

give it a class name of absolute that's

because it'll serve as an overlay over

the poster so somewhere at the bottom

left we want to show that number 1 2 3

so I'll say bottom

D9 minus left-

3.5 padding X of to padding y of one and

the rounded -4 and now within it we want

to achieve some kind of a masked layout

I'm not sure if you can see it here but

the number here will be a bit masked

like it is under some kind of a darker

mask like it'll have a slight gradient

and we can do that using a package

called masked view this one right here

has about 265,000 downloads and as the

package says it creates a masked view

where the text appears as a cutout over

an image so let's simply copy the

installation command that is mpm install

at reactnative mask view slask dvw while

it is installing we can put it to use

right here within this view I'll create

another masked View and you have to

provide a mask element in this case

it'll be a single piece of text so I'll

do it right

here text inside of which I'll render

index + one so that we don't start at

zero we start at one of course I'll give

this index a class name equal to font

Das bold text- white and text- 6xl we

want to make it extra large let's fix

the class name spelling right here and

within the mask view I will render the

image that will have a

source equal to images coming from

constants do ranking gradient

with a class name of

size-14 and a resize mode set to cover

now let's fix a typo where we have it

there we go I think we're good and take

a look at these numbers right here

looking good 1 two 3 and if you try

scrolling you'll see that this one has a

horizontal scroll whereas you can scroll

the entire page up and down so before we

had that virtualized list error because

we had two vertical lists in the same

file or in the same screen should I say

but now one is horizontal and one is

vertical so we're good now just below

this view not the mask view but the

other one we can render a piece of text

that will simply render the title of the

movie and it'll have a class name equal

to text DSM font Das bold margin top of

two and text- light 200 and we can also

make it take two lines maximum so number

of lines two and with that you have

implemented this trending card layout

which is looking great so if we go back

to the index no warnings or errors here

and if I go ahead and search for a new

movie like Avengers there we go and go

back to home and

reload you have to keep in mind this

search functionality update is not

something that has to happen in real

time when you open the app again you'll

be able to see all the new searches that

people have made and there we go a

fourth number appeared right here

Avengers that is perfect and the more

users search for the same movies the

higher they will rank wonderful now you

have not only implemented the typical

API fetch call but also implemented a

backend as a service tool that allowed

us to store a persistent data within a

database that we use to then show the

top trending movies great job

oh and now that everything is looking so

good we might as well make it a real

mobile app by hiding the time and the

battery percentage no need to show it

here within our movie app and even

though having it here is totally fine

having it within our movie Details page

which will will code next is not ideal

because if the poster is very light or

very dark depending on your theme these

numbers will not be visible at all and

they will just clutter the poster image

so to hide them you you can head over

into our appcore layout it is this

layout right here the primary one not

the tabs one and right below the stack

you can say status bar import from react

native and simply give it a hidden

property set to true if you save it and

open up your terminal you'll see that

the layout children must be of type

screen and all other children are

ignored that's why this status bar is

not taking effect so what you have to do

instead is wrap everything with an empty

react fragment just like this and then

right next to the stack or on top of it

in other words you can save it and there

we go it gets hidden away immediately

the app looks so much cleaner as the

time and Battery are not impacting our

view looking great and all of these are

just fundamentals of react native

everything from Flat lists to layouts to

knowing how to hide thisp status bar if

you need to but this is just the

beginning there's always more to learn

bigger projects to build and exciting

things to ship to production so if you

want to apply some of the knowledge

you've gotten today to practical

production level check out JS Mastery

Pro where I dive deeper into JavaScript

react react native nygs and more and the

best part is that it is a subscription

based model which means that it is more

accessible to get started and you can

always learn something new every month

so I'll see in there as it is the new

biggest chapter of JavaScript Mastery

but with that said I do want to give you

a glimpse of the kind of optimizations

that we do on the production level so in

the next lesson I'll show you one big

mistake that we've made in our hom page

yep it is hidden right here within this

file but understanding it requires

reading a lot of docs and fixing it well

I'll show you how to do it in the next

lesson but just before I show you how to

tweak that little homepage optimization

I want to make sure that we focus on the

movie Details page we've been staring at

the search results and the homepage for

such a long time even the trending

movies right now but we were never able

to fetch and show all the movie details

so let's do that next first we have to

create a function to gather all the

movie information so head over into

Services api. TS and right below fetch

movies we want to create a new function

export const fetch movie details it'll

be equal to an asynchronous function

that simply accepts a movie ID of a type

string which will return a promise

that'll ultimately resolve into movie

details and now we can open up the

function block I'll open up a try and

catch Block in the catch you know the

drill if there is an error simply con to

log that error and throw it just so we

can catch it somewhere else and in the

try we can make a fetch request similar

to the one we made above but this time

to a different endpoint so let's say con

response is equal to a wait Fetch and

now we can form the URL by first getting

to the tmdb

config Bas

URL

slov slash movie ID question mark API

key is equal to tmdb config API key so

we have just crafted the endpoint which

we want to call as the second parameter

we want to provide it an object where

the method will be set to get and the

headers will be set to tmdb config do

headers we already prepped everything

beforehand finally if the response is is

not okay we simply want to throw a new

error saying something like failed to

fetch movies or movie details that's a

bit more precise but if response is okay

we want to get the data by awaiting the

response. Json typically when you use

fetch you need to say response. Json to

extract the data and finally we want to

return the data which in this case is

the move

details so now that we have created this

function let's head over into the page

that we haven't touched so far which is

this one movies ID a dynamic route that

displays the details of that specific

movie let's start with the jsx we're

wrapping everything with a view that has

a class name equal to BG primary and

flex das1 if I save it how do we get to

that page well you just have to click on

one of the touchable opacities or one of

the buttons so choose whichever one you

want I'll go with the

Gladiator and now we can render the

movie details I'll render them within a

scroll view because it is possible that

the height of the details will span more

than the height of the device and I'll

give it a Content container style equal

to padding bottom of 80 within it I'll

display a view and within that view I'll

display an image that'll have a source

equal to URI and we once again have to

have that starting part of a photo https

colon image.

tmdb org SLT SL

w500 and then we render the Movie

question mark. poster path but of course

we first have to fetch the movie details

so this is exactly where that function

we just created comes into the picture

first we need to get the ID of the movie

that we're trying to get the details for

and we can do that by destructuring the

ID by using the use local search for

Rams Hook Once We have the ID it is

pretty simple we just say const the

structure the data rename it as

movie also accept the loading and make

it equal to the use fetch hook call

within which we can have a callback

function that then calls the fetch movie

details and we need to pass the ID as

string right into it so now we get

access to that movie and if you click on

one of those

movies you can see that we get

redirected we no longer have an error

but to be able to see the poster we have

to give this image a class name of w

fool and let's do something big like H

550 pixels there we go so now it takes

that upper part of the screen looking

good we can also give it a resize mode

equal to

stretch there we go so now it is looking

even better now below that view we can

render another view that'll have a class

name equal to

flex-all items Das start justify Dash

Center margin top of five and padding X

of five we're just creating some space

for the text elements that'll go within

it so let's create the space for the

first text element that'll render the

Movie question mark. tile and we can

style it by giving it a class name equal

to text- White font Das bold and text-

excl there we go Gladiator 2 we can go

below

this text and render another view this

view will have a class name equal to

flex Das row items Das Center and a gap

X of one in between the elements as well

as a margin top of two to divide it a

bit from the elements above within this

view we can show one more

text this one will have a class name

equal to text- light 200

and text- smm and within it we can

render the year we already learned how

to do that movie question mark. releasor

date question mark

do split by the dash and get only the

year oh but the index of zero has to

come after the split there we go 2024

right below this text we can render

another text with the same Styles so

that'll be a class name of of text-

light 200 and text- smm and within this

one we can render the Movie question

mark.

runtime so this one lasts for

184 and we can add M at the end which

stands for minutes now we can exit this

View and we can create another view

below to show some more

information this one will have a class

name equal to flex-r

items Das

Center BG of dark 100 padding X of two

padding y of 1 rounded -

MD Gap X of one and a margin top of two

and within this view we can render an

image that'll have a source equal to

icons coming from constants icons do

star as well as a class name equal to s

size of

four and there we have it one little

star right there right below that image

we can render a piece of text that'll

have a class name equal to text- White

font Das bold and text- smm and within

it I'll put a dynamic block of code and

round up the current score by saying

math.round movie mark. Vore average

or if it doesn't exist simply take zero

just so it doesn't break and we can say

out of 10 so this one is 7 out of 10

right below it we can also render

another piece of

text that will have a class name that'll

have a text- light 200 and text- smm and

within this one we want to show the

number of votes so in parenthesis I'll

say movie question mark. vote count and

then I'll say votes so this one got

2,947 votes it matters right we want to

know how many people have rated it on

average 7 out of 10 and now we want to

show a couple of these movie labels like

the overview release date status genres

and so on each one has a little title on

top and then the actual

content that means that we can turn it

into a reusable component

so right at the top I'll create a new

reusable component and call it movie

info so const movie info is equal to a

function that will destructure the props

of label and value so for each value

there is a label they'll be of a type

movie info props which we can Define

just above by saying

interface movie info props and it has a

label of a type string as well as an

optional value of a type either string

or number or null perfect and then we

can open up a function block with an

immediate return which means that we

just put parenthesis right here and not

curly braces so what do we return well

it'll be a

view with a class name of flex-all

items Das start justify Das Center and a

margin top of five and right within it

first we show a piece of

text that has a class name of text

dl-200 font

dormal and text

DSM and within it we render the label

and next we can have a text just beneath

it with a class name of text- light-1

f-bold text DSM and margin top of two

and within it we render either the value

or a string of Na a value doesn't exist

and now we can use this movie info a

couple of times right here below our

view that contains the vote count so

let's go right below it and let's render

a couple of these movie info

components the first one will have a

label of overview and the value of movie

mark. overview and if you self close it

check this out immediately it looks

super nice let's also render one more

just beneath it this one will have a

movie info of jras and the value will be

movie mark.

genres question mark. map where we get

each individual G as in genre and then

we can say return g.n name and then

outside of that function we can say do

join them with something like a dash in

between like this or say na doesn't

exist so if you do this you'll see

action adventure drama looking good now

let's create one more view below this

movie info this one will have a class

named name of flex Flex D

row justify Dash between and a w of 1

over two so that is 50% of the width and

within it I'll show another movie info

component with a label of budget and a

value of dollar sign movie question

mark. budget and we can divide it by 1

million and then render the data in

Millions that'll look something like

this budget is 310 million for this

movie still within the same view but

just below this movie info we can also

show the revenue so the label of Revenue

and a value of we want to do the same

thing right here but we can round it up

a bit so we can say a template string of

math.

round movie question mark. revenue and

one once again we want to divide it by 1

million and save it and at the start we

can add a dollar sign as well right here

so now we can see that the revenue is

458 million which means that this movie

is already profitable finally we can go

below this view that wraps the two of

them and we can create one more movie

info this one will have the label of

production

companies and and it'll have a value

equal to movie question mark.

production

companies. map where we get each

individual company and for each one we

return its name and we can join them by

a dash which will look something like

this or if it doesn't exist we can

simply say na a there we go so now we

can see Paramount Pictures scotf free

production and more many people worked

on this movie movie finally just below

this entire scroll View at the bottom we

can render a touchable opacity a button

to go back to the previous page so it'll

have an

image that'll have a source equal to

icons.

arrow with a class name equal to

size-5 margin right of one margin top of

0.5 and rotate 180

and a tint color equal to # FFF so if

you render it you can't see it just yet

but below it I'll render a text that'll

say go

back and I'll give it a class

name equal to text- White font D

semibold

text-base and now you can see it but of

course we have to style this touchable

opat capacity a bit better by giving it

a class name of

absolute

bottom-5 left- 0 right- Z margin X of

five BG of

accent rounded

dlg padding y of

3.5

Flex Flex Das row items Das Center

justify Dash

Center and a z of 50 so it appears above

other elements and there you have it a

movie Details page with a Gob back

button of course to actually make it

work we can use the router

functionalities so let me give it an

onpress and call the

router which we can import from Expo

router dot back if you save it and click

go back back take a look at that it

actually goes back but you can also just

scroll or swipe from left to right on

iOS to go back as well and now you can

see the movie details for all of these

different movies not only the popular

ones or the trending ones but also the

ones that you search for so if you have

your favorite

movie I don't know which one it is once

again let me know down in the comments

well you can find it right here and see

all of its

details and I got to say the app is

super super responsive it works very

well and you can see as I swipe up and

down and as I open different pages it is

just super efficient and this brings us

to the end of the movie Details page and

we're almost done with the entire app

this is pretty amazing I got to say just

before we finish it off I want to make

sure that we have something on the saved

and profile Pages too because right now

they look super blank so let's head over

into those two pages starting with a

profile and I'll just tighten them up a

bit so we have a nice blank screen but

then if you want to you can go ahead and

Implement additional

functionalities this is an exercise for

you to improve this app even further and

to put the skills you've gained from

this video to the test first things

first let's get rid of this ugly white

screen by rendering a class name to this

View and giving it a BG

primary as well as a flex of one and the

padding X of 10 that's better within it

let's also render another view which

we'll use to Center our icon in the

middle so I'll give it a class name of

flex justify Das center items Dash

Center Flex D1

flex-all and a gap of five within it we

can render an image that'll have a

source equal to icons.

person and a class name equal to size of

10 as well as a tint color equal to # FF

oh and make sure to import the icons

from constants and then reload the app

while it's reloading we can also add the

text element right below it that will

simply say profile and we can style it

by giving it a text-

g-500 as well as

text-base so now if you head over to the

profile you see a little profile icon in

the middle waiting for you to implement

that profile screen what we can do is

also copy this entire view head over

into saved

and override the saved as well but this

time it's not going to be icons. person

it'll be icons. saave as well as it'll

say

save so now if you head over into the

saved you can see that it looks great as

well again I don't want to Simply give

you everything in this course because

then there's not going to be an

incentive for you to try some things out

so I invite you to go ahead and

Implement that save movie functionality

to save your favorite movies into a

collection you'll have to work a bit

with aight to have some persistent

storage and it'll be very similar to

tracking our metrics right now instead

of searches you'll be tracking the

clicks when somebody clicks a heart on a

specific movie for example and then

you'll have to create a second function

that will fetch all of the favorite

movies pretty cool right I know it might

sound difficult at first but trust me as

you get a hang of react native it'll all

start making sense very soon especially

if you dive into JS Mastery Pro where we

dive a bit deeper into how react native

Works under the hood as well as how we

can optimize it for bigger applications

great that's it for this lesson this was

a big

one and to finish this course off I want

to show you one little gotcha that I

found it's those little things that you

don't find in the documentation very

easily but rather it's a best practice

that you have to dig through GitHub

discussions to figure it out fully I

zoomed out this code so you get a better

understanding of the entire homepage

that we have right now notice a couple

of things we have a single scroll view

right here where we said show vertical

scroll indicator is set to false but

doesn't matter that we're hiding the

indicator this scroll view is a vertical

View and within that vertical view we

also have another flat list this one

right here which renders all the movie

cards those movies are also in a

vertical View and it is not generally

recommended to have two virtualized

lists or scroll views or flat lists in

the same orientation see this flat list

is not a problem this one is horizontal

and that's okay when it comes to the

performance but having two huge flat

lists that are of the same orientation

is generally not considered a good

practice we're using a scroll view to

render most of the movies and if you go

to the docs it's going to say scroll

view versus flatlist which one should

you use well scroll view renders all its

children components at once but this has

a performance downside imagine you have

a very long list of items you want to

display maybe several screens worth of

content creating Js components and

Native use for everything all at once

much of which may not be even shown will

contribute to slow rendering and

increased memory usage and this is where

the flatlist comes into play because

flatlist is smart IT renders items

lazily just before they're about to

appear and it removes the items that

scroll way off the screen to save memory

and processing time so in other words

when you have large lists of vertical

elements you want to use a flat list and

not a scroll View and in our case if you

look at the flat list we technically

didn't allow it to reach its full

potential because we have set scroll

enable to FSE which technically means

that we let the scroll view do its job

even though it is totally fine perfectly

fine for our use case as we don't have

many elements and we wouldn't even been

able to harness the power of the flat

list for bigger applications it makes a

big difference and that's exactly why I

wanted to leave this for the end of this

video while it is totally fine for

smaller apps for larger apps you just

got to be smarter and utilize everything

that the software allows you to do in

this case react natives built-in

components like the flatlist are super

powerful but you got to know how to use

them below this lesson I'll leave the

improved codebase for how the homepage

should have looked like if it had

hundreds or thousands of elements so if

you want to check it out you can go

ahead and do that but this is just one

little optimization out of hundreds or

thousands that we go over on JS Mastery

Pro so check it out cancel at any time

or get a refund if you don't like it but

given how many resources we have in our

knowledge base and within our pads it's

hard not to find something that you can

learned from and that'll help you

advance your career with that in mind

great job on coming to the end end of

this phenomenal project allowing users

to find their favorite movies search for

them and then the algorithm that

actually checks which movies have been

searched most often and therefore they

get displayed right here on the homepage

looking good feeling good it is

responsive and it is the best of mobile

development that react native offers so

thank you so much for watching and I'll

see you on Js mastery. proo have a great

day