Bottom padding to <CurvedBottomBar.Navigator /> component style

[alexandermirzoyan]

I am facing such an issue when I want to set a space from bottom of <CurvedBottomBar.Navigator /> component.

<CurvedBottomBar.Navigator
  style={styles.bottomBar}
  shadowStyle={styles.bottomBarShadow}
>
  {...}
</CurvedBottomBar.Navigator>

const styles = StyleSheet.create({
  bottomBar: {
    backgroundColor: 'yellow',
    paddingBottom: scale(20),
  },
  bottomBarShadow: {
    backgroundColor: 'red',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 0.5,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 1,
  },
});

When I remove backgroundColor property from bottomBarShadow selector, the bottomBar selector's color renders in that place, and there is no way to set color to only bottom part.

[dante-cervantes-rocketlab]

hi @alexandermirzoyan i was able to fix the issue wrapping the CurvedBottomBar into a View, and apply the styles to that view.

i.e

<View style={{ flex: 1, paddingBottom: 20, backgroundColor: 'black' }}>
   // your CurvedBottomBar here
</View>