React Native demo with React Navigation v3.0

React Native demo with React Navigation v3.0

Hello there. I'm Augusto Rosa (https://twitter.com/agttrosa) and today, I'm going to introduce yourself to react-navigation library on a react-native simple project. Are you ready?

(This image was taken from https://rocketseat.com.br/)

What are we going to build? A demo app using react-native and react-navigation lib to change screens, check this out:

If you want to learn step-by-step how to make it, please read.

You can find all the code of this article here: https://github.com/aagtt/native-navigation-demo

We are going to run some commands using yarn — You can run using npm too, I just think that yarn is faster :)

You can read more about it here: https://yarnpkg.com/lang/en/docs/install/

To run on Android devices you must follow the started guide about Android Studio or even Expo. https://developer.android.com/studio/intro/?hl=pt-br

About react-native lib you can check it here: https://facebook.github.io/react-native/docs/getting-started

Considering that you have an environment installed, let’s run some commands and start our journey.

On your terminal, run the following command: react-native init navDemo

Wait till it finishes, this will create a folder named navDemo (No shit Sherlock).

So, In the beginning, God created the heavens and the earth. The earth was void, empty and dark, AS OUR PROJECT NOW

Now, we got to enter that empty and dark folder and start some steps.

cd navDemo to access it. Then run the following command to add the react-navigation lib on our project: yarn add react-navigation — Wait for it to install.

Now, run the following command: react-native link react-navigationto link the installed libs.

Alright, we just created an empty project using react-native init and installed the react-navigation lib into it.

To the next steps, I’ll be using macOs to run, so, if you are not a Mac user, make sure you have a whole android environment installed on your machine. For that, you will have to follow the android studio started guide to create some devices using their features. Please follow this link: https://facebook.github.io/react-native/docs/getting-started.html

— MacOS

To run the app on a mac you will have to enter the folder of iOs files that react-native init created. So run that sequence: cd ios >> (once into ios folder) >> open reactNativeNav.xcodeproj

It will open Xcode to simulate the device

— Android

As I said before, you will have to make your whole environment works to run Android devices.

If you’re sure that you can run, please follow the next steps to run it on an android device:

1. Open Android Studio
2. on File > Open > Select the android folder of our project (ReactNativeNav/android).
3. Wait for android studio to sync the folder.
4. Click on Play icon on the right upper corner and select your device (if you don’t have any android device connected via USB, try to emulate one. Again, check the android tutorial to make it).
5. Your device is ON!

Once your device is running, run these commands: cd navDemo >> react-native run-android

It must run the app on an android device.

Since I’m on a macOS, the next steps will be on the Xcode + iOs devices, but don’t worry. I will explain how to run it on android too!

Ok, so now that you have a device running, a demo app started by react-native init and react-native navigation lib installed. We must write some codes and make it running the right way we expect!

Let’s begin.

The first screen you are seeing is the Default one:

Now, let’s open our project on Visual Studio Code to edit some files :D

Open visual studio code > Click on File > Open > Select your folder.

On your root folder, there is an archive named App.js and we going to edit its content. Remove all content inside the main view and make your return method like this one:

Save the file and reload your app.

Now you can see Our app on your app. Am I right?
(If you’re not. Try to follow the steps again :[ )

So, we have one screen that your index.js render: App.js
To see how react-navigation works we must create some sample-screens to check if we can navigate into them.

On your root folder, create a folder named src and inside it create one named Screens.

On the Screens folder, we will create our first screen and name it HomeScreen

Check this out:

I won’t explain line-by-line for that, I guess it is simple and there is no need to.

For now, we just change our App.js to render our HomeScreen instead of running the <Text> Our App </Text>

So change your App.js for that:

You now can reload your app and see if it appears Home screen on the first screen =)

Ok, let’s continue. We will add more screens to our Screens Folder.
Just copy and paste the HomeScreen code, change it name to the follow names and export it as default.

So, at this point, you will have 4 Screens : HomeScreen, MessageScreen, SettingScreen and ProfileScreen.

I know they are simple and just show us some text, but the focus here is to show how navigation works, not how to make beautiful screens :p

Pretend that you opened the application at home screen and want to check the Message screen, how you navigate into it?

I’m here to explain how.

Explaining how React navigation v3.0 works

Our tab navigator will be located on the bottom of our app, and for that, we going to use createBottomTabNavigator to place the tabs of our screens.

According to reactnavigation, createBottomTabNavigator is:
A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized — their screen components are not mounted until they are first focused.

Also, we going to use createAppContainer to wrapper and maintains the navigation state of our app and handles interact with the outside world to turn linking events into navigation actions and so on.

Excuse, me. Whaat?!?!?

Don’t worry, you will understand.

First, assuming that you’ve added that lib on your project, we will create a file on our root project named Navigator.js (or any name you want to describe our bottom tab navigator).

And now, let’s see how your folder structure must be

Check this out:

As you can see, we have the Navigator.js file on the root folder.

Enter on it, let’s CODE.

First, import those little guys from the lib:

import { createBottomTabNavigator, createAppContainer } from "react-navigation

And now we start writing our file by creating a new const named Tab:

const Tab = createBottomTabNavigator({});

What we did here?
We just created a const to receive createBottomTabNavigator props after we make it.

So, inside that createBottomTabNavigator thing we will add our screens and bottomTab properties.

As told before, this createAppContainerwill wrapper and maintain the navigation state of our app, you will not be able to run the navigator without wrapper it and create a container using that.

After you create your navigator file, we have to import our navigator into our App.js instead of return <View>.

You can copy this code into your App.js

Now check if your first tab appears on your App :)

You must see something like this:

As we can see here. Our first tab is Home (line 5). It represents the name of the tab that you will see on the app. So if you want to change it, just change and see :)

The second prop represents our screen that our tab must call. So, on line 6 we can see screen: HomeScreen

What if I want to add more tabs?

Just follow the example above… But, we will do it together.

Now, let’s add more tabs on our Navigator.js by following Home example.

Check this code:

We just made 4 tabs and passed the screens that represent it.

Make sure to reload your project and check on your emulated device

It must be something like this:

I just made some sketch to show which tab is which inside our app. I guess that now you can understand what I meant.

Each first row represents what appears on our App.

Ok, great.
We’ve created some tabs and it now may navigate for each screen/tab.

Congrats for that!

AWESOME!! But what if want to customize my bottom tab?

That’s our next step!

Let’s customize the whole tab inserting some default style. To do that we going to use the second parameter that createBottomTabNavigator provides.

createBottomTabNavigator(RouteConfigs, bottomTabNavigatorConfig)

We just created our route configs, and now, we going to add some config to bottomTabNavigatorConfig to show some style on our nav.

Start by adding a bottomConfig after you close the routeConfigs keys.

You can check our Navigator.js here:

And after you copy that code and UNDERSTAND IT, reload your app and it must be something like this:

So, if you reached here, you must have something running with some tabs to show.

Also, you can navigate tab per tab just clicking on the tab you want to show.

We used react-native to create some screens and we can navigate through it using react-navigation.

We can discuss more features of that lib in another topic or post. But for now, make sure you understood the whole simple process to show tabs and navigate :)

Thanks for reading, if you got some question make sure to comment here!