Bottom Navigation Setup

[00:00:00]
>> Let's move on to navigation but as we'll show we're going to use bottom navigation so firstly let's just install the navigation library. So this is those quite a few packages so I'm going to copy this line open your terminal and right? So just to go through what this is going to install.

[00:00:21]
So we're going to use react navigation in the world of react native. You can pretty much use react navigation or react native navigation personally, I prefer react navigation, because I've used it before and also that's the one that's pre built into expo. So, if you use expo before, you will be familiar with this one.

[00:00:39]
And react navigation, they are a mono repo with multiple packages, just so you wouldn't have to for example, if you only use bottom navigation you wouldn't also have to install stack navigator. So it's just to keep your bundle size small. So this is why there's so many libraries then we have NACK react native screens which is and which is a library for managing the actual screens and it's got built in optimizations to make sure it's it's as optimal as possible.

[00:01:05]
On mobile devices, then we have react native safe area context, and this is the library that basically allows you to know what kind of insects there are on a device. So for example on an iPhone X, you have an inset at the top and the bottom or most android phones, you don't have an insert at the bottom, etc.

[00:01:25]
And lastly, it, we're also going to add the bottom tabs library. This is this specific library we need to use to add bottom tabs to application. Now, if you're building an android app, there's some additional native code. Do you need to add not a lot but I did say that this might happen.

[00:01:46]
So if you go to android app source main Java mood tracker and the main activity so this is the main entry point for the application and copy these lines of code. So let's go Android source, main, Java main activity and we need to add this just underneath our existing component name function and we also need to import this bundle library and add it to the top.

[00:02:25]
So for IOS remember on android android kind of handles all the dependencies automatically. On IOS, we need to explicitly install them. So if we open our terminal, go to CD, IOS, and pod install. And you actually see that it's saying what it's installing. So these are the libraries, which we've just installed that have native dependencies.

[00:02:51]
So there's usually a pod file in this libraries repositories that will list which dependencies they rely on now we go cd back into our main directory. And the last thing, whenever you add anything that has needed dependencies, we will also need to rebuild our app. So you can do this via xcode, or you can do yarn iOS.

[00:03:22]
All right we have successfully rebuilt the app now let's do the same for Android so again on Android you can either run your Android or you can always do it from Android Studio. In this case, I'm going to run yarn Android. So one thing to note is that once you've built native bundle, you don't actually need to have this process running all the time in your editor, because like the native bundle will stay the same unless it's changed.

[00:03:53]
And we're not going to be changing any of the native code. So that's why I can pause this execution on Xcode and Android Studio. And then just run the CLI tool, which builds the app once installed it and then exits. So I'm doing this just to save a little bit of my computer's memory, so interesting, so it worked through Android Studio, but not via terminal.

[00:04:18]
So it could be that it just hadn't had the time to download the dependencies. Well, regardless let's move on we have both of the apps caught so we got Android and iOS, cool. So before we do anything so this is a plain react native template. I'm just going to make a couple of super quick adjustments.

[00:04:41]
So firstly, we're not going to be using tests in this course. Maybe in another course, so I'm going to delete the test directory personally, when I write tests, I prefer to write a test put the test next to the thing that we're testing anyway. But I digress and the other thing is in Ts config, there is a option for skip live check and currently it's set to false.

[00:05:09]
So I turned this true so I set this to true so it doesn't check the node modules. Because at the moment if you run the TSC command on this template you'll get a couple of TypeScript errors which are due to some of the modules that are installed. But if you turn this on, it will only run TSC on the code that you write.

[00:05:34]
And lastly, this is just a preference but I'm going to turn bracket spacing to truth. Because I like having spacing between the brackets, alright that's it no preferences.