6

Stack:

  • React Native
  • React Navigator
  • Core components only

I have this style on TabNavigator.tsx:

const styles = StyleSheet.create({
  tabStyle: {
    backgroundColor: colors.background,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    height: 80,
    overflow: 'hidden',
    // position: 'absolute', // needed to ensure the bar has a transparent background in the corners
  },
})

I keep commented the position absolute, there is always a background behind the corners, making it looking weird when a component of another color scroll.

Here it is, colored in yellow for visibility:

Background

If I un-comment position absolute, the content flow behind the tab bar, making it feel more natural.

But...

I need to add a bottom margin on each screen to compensate the space that the tab takes, or the content in the bottom is hidden.

There i feel that there should be a good practice or a known pattern, maybe a tested workaround, that would make my life easier. Do you have an idea?

Thanks

Xiiryo
  • 3,021
  • 5
  • 31
  • 48
  • 2
    Does this answer your question? [Change bottom bar container color of react navigation tabs in react native](https://stackoverflow.com/questions/62242349/change-bottom-bar-container-color-of-react-navigation-tabs-in-react-native) – Guruparan Giritharan Oct 02 '20 at 03:11
  • Kind of. That what's I did but then I need to add a bottom margin or (in lists) a void component with a fixed height, in evry sub-screen... – Xiiryo Oct 02 '20 at 17:27

2 Answers2

7

Ahh, it's simple, after going through trial and error I discovered that just add Border Radius to it and make sure barStyle has overflow hidden. Here I pasted the snippet for it.

barStyle:{
    borderRadius:50,
    backgroundColor:"orange",
    position: 'absolute',
    overflow:'hidden',
    left: 0,
    bottom: 0,
    right: 0,
    padding:5,
}
Suyash Vashishtha
  • 677
  • 7
  • 13
0

Thnx me later...

tabBarOptions={{
        style: {
          backgroundColor: 'green',
          borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
          overflow: "hidden",
        },
      }}
asad minhas
  • 147
  • 2
  • 10