1

0

By Krissanawat Kaewsanmuang Following Unfollow Follow   8,387 November 18, 2020 Following Unfollow Follow

Category:

React Native

React Native Lessons

Build Real-world React Native App #2: React navigation and React native vector icons

In this chapter, we use React navigation version 5 for bootstrap app navigation and create a blank screen to show how it works finally we setup react native vector icons for add icon to tabs.

install react-navigation version 5

In this version, the expo team divides into multiple packages for this app we use stack and tabs so the list below is the package that we need to install:

1. react-navigation/native is the core package
2. react-navigation/stack for general stack navigation style
3. react-navigation/bottom-tabs for tab-style menu in bottom screen

In order to install these packages, we need to run the following command in the command prompt or command line of your IDE:

Here, we have installed the react-navigation package along with the react-navigation-stack and react-navigation-tabs package. The react-navigation-stack package enables us to create the navigator stack of our app screens. The react-navigation-tabs package enables us to create the bottom tab navigation on our main screen. Now, we also need to install the required dependencies in order to run the react-navigation package properly, Hence, we need to install the following package as well:

Setup React Navigation on iOS

In case of iOS, we need to navigate to ‘./ios/’ folder and then run the following command:

Setup React Navigation on Android

For Android, we may need to link the packages if the version of the react-native is less than 0.60. For that, we can run the following code for each package:

Organizing Project files and folder structure

n this section, we need to create the required files for the screens as shown in the ‘./screens/’ folder. We also need to create a Navigator.js file in ‘./components’ which will contain an overall code for navigation as shown in the screenshot below:

Folder structure

Now, for every screen file inside the ‘./screens’ folder, we need to add the starter react native template code. The starter template code for the Home.js screen is shown in the code snippet below:

Now, what we can do is, we can copy the same starter template code to each screen file and just change the main function name and the text between the Text element based on the name of the files.

Handling Navigation

Here, we are going to use Navigator.js which will contain React navigation-related code. But first, let us see the navigation flow of our app in the following diagram:

Navigation diagram

From the diagram above, we can learn that Home, Categories, Bookmark, Setting screens are on the main screen linked by bottom tabs navigation whereas SinglePost, CategoriesList, Feedback screens are linked by stack navigation. To implement the navigation configuration in the Navigation.js file, we need to import all the required packages first as shown in the code snippet below:

Then, we need to import all the screens as well, as shown in the code snippet below:

Now, we have all the prerequisites necessary to configure the navigation for our app. First, we are going to code the stack navigator for each main screen namely Home, Categories, Bookmark, Setting screens. The code to implement the stack navigator is provided in the code snippet below:

Here, what we have done is, each stack function represents one stack for every main tab screen. Now, we can freely add what we want to the stack navigation. Now, we assemble all the stack navigators for each main screens into one single bottom tab navigator as shown in the code snippet below:

Finally, in our App.js file, we need to make the main entry point to React navigation. For that, we need to remove the previous code from the App.js file and import Navigator.js. Next, we need to create the Navigators component and return the Navigators component from the App.js file as the main entry point. The code to do this provided in the code snippet below:

Now, if we re-run our app, we will get the following result in our emulator or device screen:

Result on add navigation

Here, we can see the bottom tab with all the main screens’ names included.

Integrating Vector Icons Package

In this step, we are going to add the icons to our bottom navigation tabs by using react-native vector icons package. The icons will make the app look more elegant and intuitive.

First, we need to install the react-native-vector-icons package by running the following command:

Installation on iOS

Here, we need to using Cacaopod again and run the following command:

Lastly, we need to Xcode and add the code below into info.plist file inside the ‘./ios’ folder:

Here, we are manually adding the icon fonts name in case of iOS platform.

The exact location to add the fonts code manually is provided in the screenshot below:

Setup vector icon in Xcode

Installation on Android

In the case of the Android platform, we need to run the following command to link the vector icons package to the native project:

Adding Icons to Bottom Tabs

Now, we navigate back to Navigator.js and import the MaterialCommunityIcons icon package from the react-native-vector-icons package as shown in the code snippet below:

Next, we need to use screenOption parameter in the config option of tab bar NavigationContainer. Then, we choose the icons based on the route names in the tabBarIcon configuration option as shown in the code snippet below:

Finally, if we re-run our app, we will get the following result in our emulator or device screen:

Result for add vector icon

Conclusion

In this chapter, we learned how to set up the react-navigation v5 package with all it’s dependency packages. Then, using these packages we learned how to set up the bottom tab navigation in our project. Lastly, we learned how to set up the vector icons package and use it along with our navigation configuration to set up the bottom tab bar icons. In the next chapter, we start using react-native-paper together with the Flatlist component to build the Home screen.

All the code is available on Github.

About the author

Krissanawat Kaewsanmuang

Registered 09-12-2019 | Last seen 3 years ago 79

3 Comments | 32 Publications