React Native Navigation: Add Custom Button in the Middle of TabBar

Demo the custom button in Middle TabBar

There is a lot of change between react-navigation version 4.x and version 5.x

So, for this topic, I will focus on version 5.x

You know for react-navigation-5 we need to install @react-navigation/bottom-tabs to create TabBar bottom.

React Navigation

yarn add @react-navigation/bottom-tabs

Implement

React-navigation/bottom-tabs provide an option tabBarButton . To change the UI we just define and option and change the style

<Tab.Screen name="Pay" component={PayScreen} />

When the user hitting the Green Action button. The Modal will show up which means the component here is not a screen. But <Tab.Screen/> require component is a screen. So we will create an empty component representing screen for this tab.

Define a PayScreenComponent

const PayScreenComponent = () => {
  return null
}

Render in <Tab.Screen/>

<Tab.Navigator initialRouteName={INITIAL_ROUTE_NAME} tabBarOptions={customTabBarStyle}>
  <Tab.Screen name="Pay" component={PayScreenComponent}>
</Tab.Navigator>

Next Step: When we press on the Green Button, the modal will be showed. To modify the Button we will use the tabBarButton . It wraps the icon and implements onPress. I will define The button in PayScreenModal.

<Tab.Screen name="Pay" component={PayScreenComponent} options={{
  tabBarButton: () => (<PayScreenModal />),
}} />

PayScreenModal This component includes a button and a modal view when the user clicks on the Green button.

We use react-native-modal for the modal. You can install by running: yarn add react-native-modal

This is my Youtube channel, I will happy if you guys give me a 1 subscriber. Thanks so much

The code PayScreenModal is the following:

Combine the code together. So we will have a custom TabBar navigator.

Conclusion

In this example, we can create a custom action button for TabBar Navigation. Hope you like it.

If you want to start with SwiftUI, read my blog

Building a Weather watchOS app (Part 2) — Understand MVVM pattern Swift

Give me a Clap and enjoy!!!