Material Top Tab Navigator Going too much top As shown in picture , how to fix this?

uservpcp 0
Viewed 40

enter image description here

My code


const CartContainer = () => {
    const Tab = createMaterialTopTabNavigator();
  return (
        <Tab.Navigator
        screenOptions={{
          tabBarLabelStyle: { fontSize: 12 },
          tabBarItemStyle: { width: 100 },
          tabBarStyle: { backgroundColor: 'powderblue' },
        }}
        >
          <Tab.Screen name="Medicine" component={MedicineCart} />
          <Tab.Screen name="Lab" component={LabCart} />
        </Tab.Navigator>
        );
}

This is a simple top tab navigator everything's working fine , but the top tab going too much top as you can see in picture how to fix this?

react-navigation react-native reactjs
1 Answers

Hey this is because status bar is taking up the space.

import { Text, View , StatusBar , Platform } from 'react-native';

const heightStatus = Platform.OS === 'android'?StatusBar.currentHeight:24;

const CartContainer = () => {
    const Tab = createMaterialTopTabNavigator();
  return (
        <Tab.Navigator
        style={{marginTop:heightStatus}} //add this
        screenOptions={{
          tabBarLabelStyle: { fontSize: 12 },
          tabBarItemStyle: { width: 100 },
          tabBarStyle: { backgroundColor: 'powderblue' },
        }}
        >
          <Tab.Screen name="Medicine" component={MedicineCart} />
          <Tab.Screen name="Lab" component={LabCart} />
        </Tab.Navigator>
        );
}

Hope it helps. feel free for doubts

Gaurav Roy0
Related