CODEWITHSUNDEEP
react-nativereact-native-stylesheet
Rahman Haroon
Rahman Haroon

Reputation: 1145

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

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

Here is the image of output I have: Image 1

The result of image I need to get:

Image 2

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>
    )
}

Upvotes: 0

Views: 2158

Answers (2)

ZealousWeb
ZealousWeb

Reputation: 1751

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.

Upvotes: 2

nipuna-g
nipuna-g

Reputation: 6652

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

Upvotes: 1

Related Questions