CODEWITHSUNDEEP
react-nativereact-native-iosreact-native-navigation
SDB_1998
SDB_1998

Reputation: 365

Add a margin to the custom navbar in react-native

I created a custom Navbar and it is looking great. The only problem it is displaying over the screens, where I want it to display like a normal navbar. So, is there a way to to add margin to the navbar instead of adding for each screen ?

Here is my implementation:

<Tab.Navigator
      initialRouteName="Home"
      animationEnabled={false}
      tabBar={(props) => <CustomBottomNavbar {...props} avatar={avatar} />}
      tabBarOptions={{
        activeTintColor: Colors.orange,
        inactiveTintColor: Colors.gray,
        showLabel: false,
        showIcon: true,
        tabStyle: {
          marginTop: hp(1.5),
        },
        keyboardHidesTabBar: true,
      }}>
      {tabScreens}
    </Tab.Navigator>

and Everything I put in the tabStyle isn't working

and it looks like this:

enter image description here

Upvotes: 0

Views: 158

Answers (1)

Shivam
Shivam

Reputation: 2359

You can use style inside tabBarOptions

   <Tab.Navigator
      initialRouteName="Home"
      animationEnabled={false}
      tabBar={(props) => <CustomBottomNavbar {...props} avatar={avatar} />}
      tabBarOptions={{
        activeTintColor: Colors.orange,
        inactiveTintColor: Colors.gray,
        showLabel: false,
        showIcon: true,
        style: {
          marginTop: 10,
        },
        keyboardHidesTabBar: true,
      }}>
      {tabScreens}
    </Tab.Navigator>

Upvotes: 1

Related Questions