Adding Navigation with Plain React Native

[00:00:00]
>> So for the pure React Native, adding navigation, there's more to do. So first thing you wanna do is you want to install the dependencies. Notice that we install all the dependencies with NPM, which is why we have to do this extra work. So let's get all these dependencies.

[00:00:34]
And now, we have to do two sets of work because we're building for two platforms. Or if you're just doing this workshop with one platform, you can just follow these ones' instructions, but I'm going to do both. And so the first thing you wanna do is install the native dependencies.

[00:00:51]
And we've already installed CocoaPods earlier because we needed to actually initialize the project. So I'm going to move this documentation. But basically what we wanna do is we wanna go into the iOS directory, and now you run pod install. So actually I'll show you, if we look at what's in your iOS directory here, we have two files, we have a Podfile and a lock file.

[00:01:14]
So this actually, it's kind of similar to a package JSON and a Yarn lock or an NPM lock, and they work the same way. So this is just a record of what version of what libraries are used. And before React Native 60 you would have had to manually add some lines into your Podfile, add pods here into your Podfile in order for them to be installed.

[00:01:39]
But from React Native 60, we have what's called auto linking. Which means that they go through your Node modules and see if there are any native dependencies that need added, and just do it automatically. So all we need to do is to run pod install. And you can see it's installed these libraries.

[00:01:55]
Cool, now we go back. And because we've done a native change, we've added something natively, just rerunning our JavaScript bundle isn't going to be enough. We'll have to actually do react-native run-ios to rebuild the native bundle. So this might take a little while. Meanwhile, I'm going to just run through the Android instructions.

[00:02:18]
So for Android, their dependencies are managed kind of magically using Gradle. Gradle isn't a package manager it's kind of like a build tool. But when you run React Native on Android, then Gradle goes down those other dependencies, does the magic, so there's no manual install step. But we do need to add these two lines to add some compatibility libraries to our new React Navigation.

[00:02:46]
So with this we would go to android/app/build.gradle. Which is here, so Android, app build.gradle. And then we look at dependencies, we add these slides underneath the dependencies. So let's have a look. This is basically the configuration file for Gradle. Dependencies, okay, here they are. So we got my dependencies here.

[00:03:15]
So I'm just gonna add them underneath, cool. Okay, and now, same applies for Android because we've added some native modules. In order for the application to pick up the native stuff, we need to rebuild it. While this is building, let's do the actual import thing. So this is exactly the same as it was on export.

[00:03:47]
The only difference is we have to import the gesture handler on our own. So we go to app.js, we go to the top of the file, this is before the React import. And we add react-native-gesture-handler. And then the rest is the same, we import navigation container, from React Native navigation.

[00:04:07]
And then we wrap our entire application in it. So now that I save it, Yeah, this is what I mean, so my debugger doesn't show up as a reason anymore. So I'll that if I actually quit my emulator, then restart it, it usually plays nice. Okay, so Android works, just a moment for iOS.

[00:04:46]
React Navigation actually just released version 5 three weeks ago, where they changed how you do navigation quite significantly, but it's a lot better than what it was. It's much more like React and easier to figure out, so it's a good time to start learning it.