React-native complex shape for bottom nav bar

Question

I would like to achieve a specific view shape for my bottom navigation in my react-native project. It's a rectangle shape with a center circle shape. I need both to be merged in one view because I need to cast shadow from it (elevation on Android, shadow props on iOS). Here is the mockup:

Any clue on how to achieve this? Thank you.

Answer 1

You may be able to get away with simply overriding the tabBarIcon like in this tutorial and playing around with zIndex.

Otherwise, it is possible to override the entire tabBarComponent with something like:

createBottomTabNavigator(
  navigators,
  {
    tabBarComponent: props => <CustomTabBar {...props} />
  }
)

Here is a link to the default tabBarComponent that you can use for reference in creating your own CustomTabBar component.

The shadow may be difficult to achieve. With pure React Native, you could have 2 circles, one underneath the rectangle for the shadow, and one above the rectangle to hide the shadow over the bottom circle. Then add the shadow to both the rectangle and bottom circle, at the risk of having a darker shadow at the corners where the circle and the rectangle meet. If that doesn't end up looking nice, then a solid border may work better than shadow.