CODEWITHSUNDEEP
react-nativeexporeact-navigationtabbar
E.D
E.D

Reputation: 891

bottom-tabs background color in react native app

I use in my expo app react-navigation and a bottom-tab.
I have specified some options like that :

  <TabStack.Navigator
      initialRouteName="Compte"
      tabBarOptions={{
        activeTintColor: EAppColors.PRIMARY_GREEN,
        labelStyle: {
          fontFamily: 'BeVietnam-Regular',
          fontSize: normalize(12),
          fontStyle: 'normal',
          lineHeight: 20,
          textAlign: 'center',
          marginBottom: 5,
        },
        tabStyle: {
          alignItems: 'center',
          justifyContent: 'center',
          height: 40,
          marginTop: '3.5%',
        },
        style: { paddingHorizontal: '5%' },
      }}>

I need to put some top radius on the left and the right of my tabbar but the view behind keeps its color ....

enter image description here

How can I change the color of the view behind? (Gray in the left top corner on the picture)

Upvotes: 0

Views: 1692

Answers (1)

Kartikey
Kartikey

Reputation: 5002

Wrap your <TabStack.Navigator></TabStack.Navigator> with a View with some backgroundColor

Something like this

<View style={{ flex:1, backgroundColor: 'red' }}> // Or whatever color you want
  <TabStack.Navigator>
      // All TabScreens etc.. here
  </TabStack.Navigator>
</View>

Upvotes: 0

Related Questions