Hi and welcome back.
For this video, we're going to start setting up
React Native Navigation on our social media application.
For this, please go to reactnavigation.org
and then open up this menu and go
to Docs and let's get started with the installation.
If you have Metro Bundler running,
which I do, please make sure that you quit it and terminate everything.
Let's just start with a fresh terminal right here and follow the documentation.
The first thing that we're going to need
to do is install react navigation in our project.
For this, you can just go to your project.
I'm going to clear my terminal and I'm
going to copy this command and I'm going to paste it here.
Here, and wait for this to complete.
After this, we're not going to follow the expo installation.
We don't have expo at all, so we're not going to follow it.
What we're going to do is
install the dependencies for the Bear React Native project.
We're going to copy this and paste it here.
Let's wait for this to complete as well.
Now here it says clearly that if we're
on Mac and developing for iOS, we need to install the pods.
I can just copy this command, but please,
if you're running on Windows, never install pods.
Don't do anything for iOS.
We can just copy this if you're in macOS
and click on Enter, and it should install the pods for you.
I'm going to say yes,
and it's going to set up the pod installation for me.
And then we are going to have to set up
some more stuff to make sure that React Native Navigation works as intended.
Here we're given some specific instructions that we got to follow.
Let's open up our file system here and it says that inside the Android folder,
we got to open app and then source and then main.
And inside here, we're going to find Java.
And then we got to go into the main activity file here and make sure that we
copy this and place it at the end of our file.
Please place it before this brace ends here.
Let's save this.
Now we need to make sure that we imported this in the beginning of our file as well.
Let's just import it right here.
Then what we can try doing to make sure that everything is working fine is that we
wrap our application inside the navigation container.
Let's do that. Let's go to our app
and wrap the whole safe area view inside navigation container.
If I press on Enter, what's going to happen in my editor is
that the navigation container is going to be automatically imported.
Make sure that it is imported for you as well.
This is how it looks for me.
Then what we got to do is run this
application and make sure that it works fine.
Let's open up our terminal.
I hope that you did close Metro Bundler.
If you're on Windows,
please make sure that you quit every command prompt that you have opened.
On macOS, this is not necessary,
but on Windows, it's recommended that every time you
install a new package, you close all your command prompts
and restart it because sometimes you might face issues with the caching.
Now that we have everything ready,
let's do npx react native run-ios and see if we're going to face any issues.
Let's wait for this to complete and come back to the video once you're ready.
Great, my Metro Bundler is running and I don't see any errors appear on my iOS
simulator, so I assume that everything went fine.
But I'm also going to run this right now
on Android to make sure that there are no issues as well.
Let's run this on Android as well
and let's wait for this to complete and make sure that we have no issues.
Great.
I have my Metro Bundler opened here and it is controlling both of these applications
and I'm not getting any errors on Android or iOS.
I'm just going to refresh this and we see
no errors, which means that we have successfully installed the navigation.
In the next video, we're going to install
more packages that we are going to need for navigation.
Thank you so much for watching and I'll just see you in the next video.