Creating Instagram-like Bottom Navigation Bar using React-Native

Hello there, I have just started developing apps using React-Native and expo and the first word that comes to my mind for this combo is ‘AMAZING’. It has provided me with a decent amount of confidence boost because of its simple implementation. P.S. This is my first post on medium, so cut me some slack ;)

I started creating an app some time back and I want to share my progress by posting this article on how to create a bottom navigation bar using react-native. You may want to refer the documentation for react native here. Another library that I make use of is react-navigation, to refer to its documentation, click here.

Step 1: Creating a new react-native app

I’m using expo to create my app. You will have to install expo-cli in your machine. And then simply run the following command:

By default, the first page in your directory that will hit first is App.js. So you will have to make changes to this file to proceed further with your app.

Step 2: Installing react-navigation in your project

Next up, install react-navigation using npm. After the installation, import createBottomTabNavigator and createAppContainer from the library.

Step 3: Creating Bottom-Tab Navigator

Now, you want to make use of the createBottomTabNavigator(route, config) function. This first parameter is the routes or the screens you wish to display in the navigation bar. The second parameter deals with the configuration of the navigation bar.

Initially, I define two screens, a HomeScreen as ‘Home’ and an ExploreScreen as ‘Explore’. In the configuration parameter, I will define the initial route as Home.

Simply wrap this navigator in the AppContainer and display it. Your code should look something like this:

Step 4: Adding icons

I make use of react-native-vector-icons for this step. To add an icon, we need to customise the navigationOptions in route name. The tint color attribute can be configured in the config parameter of the main function.

Conclusion

I went on and added a few more screens. You can find the code for this sample gif below here.

Your reviews and suggestions are welcome :)