WEBVTT 00:00:00.000 --> 00:00:01.700 Hi and welcome back. 00:00:01.720 --> 00:00:03.980 For this video, we're going to start setting up 00:00:04.010 --> 00:00:08.090 React Native Navigation on our social media application. 00:00:08.120 --> 00:00:10.520 For this, please go to reactnavigation.org 00:00:10.550 --> 00:00:13.000 and then open up this menu and go 00:00:13.030 --> 00:00:16.140 to Docs and let's get started with the installation. 00:00:16.170 --> 00:00:18.020 If you have Metro Bundler running, 00:00:18.040 --> 00:00:23.420 which I do, please make sure that you quit it and terminate everything. 00:00:23.450 --> 00:00:29.020 Let's just start with a fresh terminal right here and follow the documentation. 00:00:29.040 --> 00:00:30.480 The first thing that we're going to need 00:00:30.510 --> 00:00:34.220 to do is install react navigation in our project. 00:00:34.250 --> 00:00:38.140 For this, you can just go to your project. 00:00:38.170 --> 00:00:41.240 I'm going to clear my terminal and I'm 00:00:41.270 --> 00:00:44.880 going to copy this command and I'm going to paste it here. 00:00:44.910 --> 00:00:48.220 Here, and wait for this to complete. 00:00:48.250 --> 00:00:51.760 After this, we're not going to follow the expo installation. 00:00:51.790 --> 00:00:55.540 We don't have expo at all, so we're not going to follow it. 00:00:55.570 --> 00:00:57.300 What we're going to do is 00:00:57.330 --> 00:01:00.940 install the dependencies for the Bear React Native project. 00:01:00.970 --> 00:01:04.130 We're going to copy this and paste it here. 00:01:04.160 --> 00:01:06.490 Let's wait for this to complete as well. 00:01:06.520 --> 00:01:08.720 Now here it says clearly that if we're 00:01:08.750 --> 00:01:12.570 on Mac and developing for iOS, we need to install the pods. 00:01:12.600 --> 00:01:14.960 I can just copy this command, but please, 00:01:14.990 --> 00:01:18.050 if you're running on Windows, never install pods. 00:01:18.080 --> 00:01:19.980 Don't do anything for iOS. 00:01:20.010 --> 00:01:22.400 We can just copy this if you're in macOS 00:01:22.420 --> 00:01:25.320 and click on Enter, and it should install the pods for you. 00:01:25.350 --> 00:01:27.880 I'm going to say yes, 00:01:28.040 --> 00:01:31.400 and it's going to set up the pod installation for me. 00:01:31.430 --> 00:01:34.100 And then we are going to have to set up 00:01:34.130 --> 00:01:38.740 some more stuff to make sure that React Native Navigation works as intended. 00:01:38.770 --> 00:01:42.820 Here we're given some specific instructions that we got to follow. 00:01:42.850 --> 00:01:49.460 Let's open up our file system here and it says that inside the Android folder, 00:01:49.490 --> 00:01:53.180 we got to open app and then source and then main. 00:01:53.210 --> 00:01:56.210 And inside here, we're going to find Java. 00:01:56.240 --> 00:02:00.420 And then we got to go into the main activity file here and make sure that we 00:02:00.450 --> 00:02:04.440 copy this and place it at the end of our file. 00:02:04.470 --> 00:02:08.860 Please place it before this brace ends here. 00:02:08.890 --> 00:02:10.140 Let's save this. 00:02:10.170 --> 00:02:14.320 Now we need to make sure that we imported this in the beginning of our file as well. 00:02:14.350 --> 00:02:17.400 Let's just import it right here. 00:02:17.680 --> 00:02:23.120 Then what we can try doing to make sure that everything is working fine is that we 00:02:23.150 --> 00:02:27.260 wrap our application inside the navigation container. 00:02:27.290 --> 00:02:30.220 Let's do that. Let's go to our app 00:02:30.250 --> 00:02:35.480 and wrap the whole safe area view inside navigation container. 00:02:35.510 --> 00:02:40.040 If I press on Enter, what's going to happen in my editor is 00:02:40.070 --> 00:02:43.800 that the navigation container is going to be automatically imported. 00:02:43.830 --> 00:02:46.460 Make sure that it is imported for you as well. 00:02:46.490 --> 00:02:48.260 This is how it looks for me. 00:02:48.290 --> 00:02:50.720 Then what we got to do is run this 00:02:50.750 --> 00:02:53.580 application and make sure that it works fine. 00:02:53.610 --> 00:02:55.320 Let's open up our terminal. 00:02:55.350 --> 00:02:57.660 I hope that you did close Metro Bundler. 00:02:57.690 --> 00:02:59.060 If you're on Windows, 00:02:59.090 --> 00:03:03.820 please make sure that you quit every command prompt that you have opened. 00:03:03.840 --> 00:03:05.440 On macOS, this is not necessary, 00:03:05.440 --> 00:03:07.920 but on Windows, it's recommended that every time you 00:03:07.950 --> 00:03:10.900 install a new package, you close all your command prompts 00:03:10.930 --> 00:03:15.580 and restart it because sometimes you might face issues with the caching. 00:03:15.610 --> 00:03:17.900 Now that we have everything ready, 00:03:17.930 --> 00:03:25.700 let's do npx react native run-ios and see if we're going to face any issues. 00:03:25.720 --> 00:03:29.260 Let's wait for this to complete and come back to the video once you're ready. 00:03:29.290 --> 00:03:33.520 Great, my Metro Bundler is running and I don't see any errors appear on my iOS 00:03:33.550 --> 00:03:36.460 simulator, so I assume that everything went fine. 00:03:36.490 --> 00:03:38.840 But I'm also going to run this right now 00:03:38.870 --> 00:03:41.840 on Android to make sure that there are no issues as well. 00:03:41.870 --> 00:03:44.860 Let's run this on Android as well 00:03:44.890 --> 00:03:49.060 and let's wait for this to complete and make sure that we have no issues. 00:03:49.080 --> 00:03:49.520 Great. 00:03:49.550 --> 00:03:54.080 I have my Metro Bundler opened here and it is controlling both of these applications 00:03:54.110 --> 00:03:56.680 and I'm not getting any errors on Android or iOS. 00:03:56.710 --> 00:03:59.000 I'm just going to refresh this and we see 00:03:59.010 --> 00:04:02.660 no errors, which means that we have successfully installed the navigation. 00:04:02.690 --> 00:04:04.920 In the next video, we're going to install 00:04:04.950 --> 00:04:07.780 more packages that we are going to need for navigation. 00:04:07.800 --> 00:04:10.720 Thank you so much for watching and I'll just see you in the next video.