Customizable Bottomtab React Native

In this article I will show you how to create a customizable bottom-tab in react native and react-navigation

First, install react-navigation native, bottom-tab, and react-native-vector-icons libraries by using these commands

yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/bottom-tabs react-native-vector-icons

For iOS run this command

npx pod-install ios

create folder src and its three subfolders context, navigation, screens in the main folder of your folder structure looks like this

Then make your all screens what you want as I have created 7 screens Chat, Contacts, History, Home, Notes, Group, Profile.

I have exported all files in the screens folder in the index.js file

After that create a context file in the context folder I have created a file with the name BottomTabContext which creates the context for bottom tab screen details.

import useState, createContext, useContext hooks from react, and all screens from react folder

create context exporting variable for using bottom tab context

after creating context variables create states for active and reserved tabs and add value isActive:true for those who you want active in initial state I am using react- native-vector-icons library for icons so I have to provide names of icons from this library

The whole code for the context file looks like this after creating active and reserve tabs state and creating context provider

After context create a file for BottomTabs in the navigation folder I have created a file with the name BottomTab

First import react-navigation bottom tab and vector icons library and create reference variable for a bottom tab like I have created const with the name Tab

After that, I have created Tab.Navigator after that I have provide screenOptions prop with tabBarInactiveTintColor: ‘grey’, tabBarActiveTintColor: ‘red’, headerShown: false.

In tabBarIcon I have initialized two variables with names activeIcon and InactiveIcon, after that I have the map activeBottomTab which I have imported from the context file where I have initialized state for active bottom tabs in mapping context I have written a condition for checking active and inActive icon and save value for them in variables.

After that, I have created Tab.Screens using map with activeBottomTab context and code will look like this

After that in App.js import NavigationContainer from the react-navigation library and import BottomTab from navigation and BottomTab Context to make ContextProvider parent in App.js it will look like this

Now app is ready for running but one thing is remaining to add and remove tabs from the History screen now do this.

In the History screen, I have customized UI and mapped both active and inactive (reserved tabs) and created functions for both add and remove tab

First, add a function in which I have duplicate context values in temp variables before updating after that first it checks the length of the active bottom tab by using the filter function of javascript if the active length is less than 5 then it will add an item on the index of History tab which I have provided by using findIndex function of javascript which provide array of object and after that set temp value to context for all this function code will look like this

After that, add a function for removing items inactive tab for which I have duplicate context values in temp variables before updating after that first, it checks the length of the active bottom tab by using the filter function of javascript if the active length is greater than 2 it will move an item on the index tempActiveBottomTabArr?.length and after that set, temp value to context for all this function code will look like this

After this call, both functions onPress prop of your UI, My complete UI code for the History screen looks like this

Now you can run your app and see the magic

Github repo for this code is

https://github.com/AghaShayan123/Customizable-BottomTab-ReactNative