-1

I want to customize MaterialBottomTabs, i am trying to do it for long time please help me also i am a novice in react-native. here i am share screenshot of bottomTab which is i want,enter image description here

and here i am sharing screenshot of current bottom tab barenter image description here

Please help me thank in advance.

Ajay Batham
  • 210
  • 1
  • 4
  • 14

1 Answers1

1

To style the tab navigator you have the tabBarOptions prop use labelStyle to style the label and tabStyle for tabs etc.

to make the text appear in 2 lines you need to set the label width or add padding

to add a line below the active tab use indicatorStyle as in https://stackoverflow.com/a/47025116/13196047

these options are just an example, you need to customize them to your style...

const options = {
    style: { height: 36 },
    labelStyle: { fontSize: 12 }, 
    tabStyle: { marginTop: -5 }
    indicatorStyle: { borderBottomColor: 'white', borderBottomWidth: 1 }
}


<Tab.Navigator tabBarOptions={options} >
    <Tab.Screen name="CropDetail" component={CropDetail} />
    <Tab.Screen name="SoilReport" component={SoilReport} />
    <Tab.Screen name="SomeOther" component={Component} />
</Tab.Navigator>
Guy Binya
  • 26
  • 4