what up everyone welcome back to the channel Jahmal here and in today's video we're going to
learn how to clone a react native project from within github so let's get into it
all right so the first two main tools that you're definitely going to need to have is
android studio as well as xcode so if i go into my
launchpad and i do xcode i already have this installed you can install this via the app store
as well as android studio so two very important tools that we're going to be using and demo
in today and we're also going to need some build tools so you're going to need to have
react native install on your machine as well as node and yawn so if you don't have that installer
you want to check to see if you do already you can go into the terminal and we can do npm version
that's going to tell us our npm version we can do yawn version
what's up with my s's and these today
and we can also do the react i also have some notes if you want to take a look at some of
the notes so we just did the react i can just copy this just to show you that i am running oh
make sure to move bullet points sometimes it gets a little tricky so it's easy just to copy paste
react
native version
okay oh there there it is so it did work i didn't
see it the first time but here it is so you're running on 2.0
so these are our build tools so we just have these already installed you do need to install them
you can just simply run these commands i'll paste these in the description if you guys need to have
them so you can install your tools so let's hop into cloning our very first react native
sample project got template whatever you want to call it so i'm just going to go into google do
a quick search for react native free templates um you're gonna find this website 21 plus best react
native templates of 2022 including five free so we're gonna scroll down to the free section it's
here we are so the the template we're going to be looking at today is number four the react
native starter um just pretty nice and simple just a basic app just to show you
how you can clone a react native project in github so you just want to click react native
starter you do have different versions we're just going to do the free open source and you can get
it via github and it's going to bring us to this page all right so now we're on the github page
so you just want to scroll down read some of the documentation and see what you're really
getting and this is what we're going to try to build on both android and ios and that's the
beauty about react native it's cross platform google app store so it doesn't really matter
so let's let's get started so the first thing you want to do is clone the git repo i have a mobile
projects folder so i'm going to build that react native right here and let's open up
our terminal and we're going to cd into that location so i'm just going to cd i like to
have my folder next to me and i'm just going to drag that right into here and then click enter
all right so now we have cd into that mobile project so what i'm going to do is git clone
the react native project right here so let me make this a little smaller
get my terminal up and loaded
clear some of these windows okay so you're gonna copy the very first line and we're going to paste
it so now you see clone info and it already cloned that project really really fast which is good and
the next thing you want to do is navigate to the clone folder and install the dependencies so we
can do cd react this and install but before we do that um i do want to make some updates into a few
few files and just going to make sure that our app is built correctly with no
glitches or no issues um so let's let's fix those so we'll go back to my notes
i have upgrade grill and react version so upgrade gradle to 6.6.1 and upgrade react to 0.63.2
so let's do that so let's hop into our folder
so this is the react native a folder that was cloned into that
location and what we want to do is go into android and we're going to go into gradle we're just
going to go into the gradle wrap properties and open with let's do visual studio code
so what you see here gradle on version 5.5 so let's update that to 6.6.1
command s to save that because i'm on a mac
and then i'm going to close that file and the next one we want to do is update the package json
so we're going to update react inside the package json we can open xcode okay
and we want to update it to react 0.63.2 so once our pack and json open up we're going
to scroll so we see react so we are currently on 0.63.1 so just do that to 2 and click save
all right just those two small quick tweaks and now we're going to go back into our terminal
and let's continue so navigate to the clone folder and install dependencies so this cd re
cd react native starter and yarn install is going to do that so let's come here pace and
then enter so right now it's just going to build so i'm just going to let that build for a little
bit all right that's good so the next thing we want to do now is install pods so we're going to
do a cd into the ios and do a pod install so copy this line copy and this is going to cd into ios
and do a pod install
all right so now that is complete what we want to do now is before we open up our
um re or react project what we want to do is start our metro bundler so create a new window
and what we're going to do i'm going to cd back into
my cloned my clone folder so right here just just going to click and drag to
make the process so much quicker so once i'm back here what i'm going to do is now
i'm going to do a yarn start so this is going to start the metro bundler server so do yarn start
nice and now we have our react metro bundler server running pretty good
all right so now what we're going to do now is i'm going to build the android version of the project
and if everything goes well i'm going to build the ios as well and show you um how both of them
just look so the first thing i want to do is open up my visual studio code um go to the top
go to file open folder and we are going to open our react native starter folder and it's going
to look like this which is good so what we want to do is in visual studio let me minimize this
so what we're going to do is go to terminal a new terminal and once we are here we're going to
once we're here we're going to do a yawn run android so let's copy this
copy and we're just going to paste this here yarn run android so before you run this please
make sure that you have an emulator already set up on your android studio if you haven't
i already have a video on how you can configure your android studios and build an emulator so
please be sure to check that out if you haven't so what we're going to do is now is click enter
now it's going to build the package and this may take some time so i'll be back once it's done
all right now we can see our build ran successfully so what we're going to do is
give it some time to load so there it is loaded successfully so this is the react native starter
and this is let's see what it comes with so there's a calendar
you can open this up let's see what happens have a nice little calendar page
we can close this x right here so it won't be too distracting we have grids okay nice
so you can click on each of these items available in full version so we go back
scroll works i love how you have that lazy load as you scroll down it loads the image
you have a list view so you click on that yep available for in full version as well
as listview components so in the components we have different radio buttons one two three
um action buttons icons a drop down option one option two
pretty good until you build your android react native
and this is done just by cloning via github didn't take much very very easy to follow next what i'm
going to do is create the ios build so now that we have the android let's head back to the home
let's try to create one for the ios now so now that we have our metro bundler open um
we're going to use xcode to build our project so navigate to the finder and let's go back to
our react native startup um folder and we're going to go into the ios section
and we're going to open the react native style workspace double click let that open up
okay all right now that it's open up you can see its process and we can change the device that we
want to use so let's say i want to use an 11 pro on version 14.4 so that's a simulator that i want
to try to push this application onto but let's let it do its thing and go to the process and files
all right it said it's ready to build um so let's click the play button and see what happens
all right let's say we are building it's constructing
okay so far so good so let's give this a little minute or two to load
all right now that we have our iphone 11 pro booting up it looks like the bill
looks successful so let's just give it a minute or two and see what happens
so we see the metro is doing its thing it's going to load boom and it's up so now we have the ios
device loaded with the application that we just built on android and its function and functioning
well here is under ios so if you take a look both display the same um there's so much real estate
on the iphone 11 you can tell how much space is below we have settings so we click settings
it just takes us to the map the calendar excuse me
we have components so it takes us to the components
components components
and pages let's see pages
everything works looks good we have our footer icon so we can click these as well
and it moves nicely
and but there you have it guys that's how you create
a clone your very first react native project using github and actually build on both devices as well
if you guys like this video or you found this video helpful
please be sure to smash that like button subscribe to the channel i'm going to be doing more videos
on appium and mobile testing so definitely going to be a lot more content so much stuff to learn
so stay tuned and i'll see you guys in another video thank you for watching
you