Box Shadow in createMaterialBottomNavigator

How to / Third Party Tooling
1

How to add shadow on top in createMaterialBottomNavigator for both ios and android ?

2

Hi

You might find that a better place to ask about React Navigation is:

https://reactnavigation.org/en/help.html

3

This is the style we use on a navigation header to add a bottom shadow (may be able to reverse it to apply a top shadow):

shadowColor: '#000',
    shadowOffset: { width: 1, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 2,

Keep in mind that Android doesn’t support the shadow props, but they do support elevation.

Check the style props on createMaterialBottomNavigator (Redirecting to https://reactnavigation.org/docs/material-bottom-tab-navigator) to see where you want to put this. May require some trial and error.

1 Like