How to make a border-radius on MaterialTopTabNavigator in react-native

Question

I'm making a top navigation bar in react native.

Here is the image of output I have:

The result of image I need to get:

I need to add a border and a background color in each tab

Here is my code:

import React, { Component, useState } from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();
const TopBar = () => {
    return (
        <Tab.Navigator tabBarOptions={{
            activeTintColor: '#e5e5f0',
            labelStyle: { fontSize: 10 },
            borderColor: '#e5e5f0',
            position: 'absolute',
            style: { backgroundColor: '#5858a0' },
          }}>
            <Tab.Screen name="All-Time" component={OrderHandler} />
            <Tab.Screen name="Today" component={OrderHandler} />
            <Tab.Screen name="Yesterday" component={OrderHandler} />
            <Tab.Screen name="This week" component={OrderHandler} />
        </Tab.Navigator>
    )
}

Answer 1

You could do something similar to this.

<Tab.Navigator tabBarOptions={{
    labelStyle: { fontSize: 12,backgroundColor:'white', paddingHorizontal:20,paddingVertical:5,borderRadius:50,color:'#5858A0'},
    style: { backgroundColor: '#5858A0'},
    renderIndicator: () => null
          }}>

You could add/change styles as per your requirement.

Answer 2

You can get close to your design by customizing the styles. You will need to provide the styles using the following props

• style - For modifying the tab bar container styles
• tabStyle - For modifying individual tab styles
• labelStyle - For modifying the text

Something like the following can help you get close to where you want.

<Tab.Navigator
  tabBarOptions={{
    labelStyle: { fontSize: 12, textTransform: 'none' },
    tabStyle: {
      height: 20,
      minHeight: 0,
      backgroundColor: '#e5e5f0',
      borderRadius: 100,
      margin: 5,
      marginVertical: 10,
      padding: 3,
      width: 'auto'
    },
    style: { backgroundColor: '#5858a0' },
    renderIndicator: () => null
  }}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

But to completely change the way the tab bar works, you will have to use a custom component. The Tab.Navigator takes in a prop called tabBar. You can find more about it in the docs here.

There, you can pass in a custom component which renders the tabs in any way you want. An example can be found in this Snack