React Native createBottomTabNavigator with Vector Icons Android iOS Example

React navigation has launched it’s latest 5.x version with new and improved features. In today’s tutorial we would learn about react navigation’s createBottomTabNavigator component. Bottom tab bar navigator is one of the most usable Tab navigation used in both android & iOS applications. One live example of bottom tab bar navigation is Instagram. In today’s tutorial we would use one of the most popular icon library React Native Vector Icons in react native and use Vector icons as Bottom Tab bar navigator icons. So in this tutorila we would React Native createBottomTabNavigator with Vector Icons Android iOS Example.

Contents in this project React Native createBottomTabNavigator with Vector Icons Android iOS Example Tutorial:

1. The first step is to download and install all essential libraries to achieve our goal. So first we have to open our react native project root director in Command Prompt ( CMD ) or Terminal and execute below command to install React Navigation latest version.

Screenshot of CMD:

Screenshot of CMD after done installation:

2. Now we have to install react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context and @react-native-community/masked-view library. All these libraries is compulsory to use react navigation. So execute below command to install all libraries.

Screenshot:

Screenshot after done installation:

3. Next step is to install React Navigation’s Bottom Tab Navigation library. So execute below command to install bottom tab navigator.

Screenshot :

Screenshot after done installation:

4. Now the final step is to install React Native Vector Icons library into our current react native project. Execute below command to install vector icons in your current project.

Screenshot :

Screenshot after done installation:

5. Configure React Native Vector Icons for Android :

1. Open Your_React_Native_Project_Folder -> android -> app -> build.gradle and put below line inside it after first line.

2.Again open the Your_React_Native_Project_Folder -> android -> app -> build.gradle file and put below code of line inside dependencies block.

Now here below is my own build.gradle file source code, It helps you to understand where to put both above code lines.

3. Open Your_React_Native_Project_Folder -> android -> settings.gradle file and put below line of code inside it.

Source code of my settings.gradle file :

4. Open Your_React_Native_Project_Folder -> android -> app -> src -> main -> java-> com-> YourProjectName -> MainApplication.java file and here we have to import the Vector Icons package.

5. Now again we have to open Your_React_Native_Project_Folder -> android -> app -> src -> main -> java-> com-> YourProjectName -> MainApplication.java file and call new VectorIconsPackage() inside getPackages() block.

Source code of my MainApplication.java file after adding above code :

Here you go guys, Now your react native android project is successfully connected with React Native Vector Icons :).

6. Configure React Native Vector Icons for iOS:

1. After done installing all the library we have to link all the installed libraries via Pods. So execute below command in your react native project root directory in MAC.

Screenshot of Terminal :

React Native createBottomTabNavigator with Vector Icons Android iOS ExampleScreenshot after done installing Pod :

2. Now GoTo Your_React_Native_Project -> ios -> Your_Project_Name -> info.plist file and put below code inside it to connect the Material Icons.

Source Code of my info.plist file after adding above code:

Here you go guys now the iOS react native project is successfully configured. Its time to start coding for App.

7. Start Coding for App:

1. Open your project’s main App.js file and import Text, View, NavigationContainer, createBottomTabNavigator and MaterialCommunityIcons component.

2. Creating a function named as HomeScreen(). This is our first home screen of application.

3. Creating another function named as ProfileScreen(). This is our second profile screen window.

4. Creating a constant named as Tab createBottomTabNavigator() type object.

5. Creating a  function named as AllTabs(). Inside this function we would make all 2 Tabs  using Tab.Navigator method.

6. Creating export default function App(), here we would call our AllTabs inside Navigation Container.

7. Complete Source Code for App.js file:

Screenshot in Android device :

React Native createBottomTabNavigator with Vector Icons Android iOS Example Screenshot in iOS device:

React Native createBottomTabNavigator with Vector Icons Android iOS Example

Leave a Reply

Your email address will not be published.