Custom Tab Bar in React Native
Sometimes the standard Tabs just doesn’t have the look or functionality you need for your app. In this case, you need to create a custom tab bar from scratch. If you are searching for customizing your Tab bar according to your needs you are in correct place.
Requirement:
A simple Tab bar which on changing tabs, updates the Header component. does that sound any difficult.. Quite obvious right? But that’s what this story is about !!
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Challenge:
Customization of headers, as shown in figure is easily supported by react-navigation as per this link. But, as you see, it is not supported by TabNavigator of react navigation. Hence the solution follows:
— Create your custom tab bar component with styling for creating the tabs
— Create the header components as required for specific tabs
— Call the header components based on the tab selected by checking the current route.key that you have.
— Call this Tab bar component in your TabNavigator along with mentioning the screens it needs to route to
Done.. Hope you understood the flow. If you need help in building your code flow, please check the link here:
