Skip to content

Add possibility to override default elevation of BottomNavigationBarΒ #4582

@fabriziocucci

Description

@fabriziocucci

Is your feature request related to a problem? Please describe.
I know the v3 spec suggests that the BottomNavigationBar should not have any shadow but currently it is possible to "bypass" the spec on iOS by simply setting the various shadow* style props (i.e. shadowColor, shadowOpacity, shadowOffset, shadowRadius).

The same is currently not feasible on Android when setting the elevation style prop because of this line.

Below a simple example of casting a shadow working on iOS but not working on Android:

const Tab = createMaterialBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator barStyle={styles.barStyle}>
         // ...
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  barStyle: {
    backgroundColor: '#fff',
    // does not work on Android
    elevation: 4,
    // works on iOS
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: -2 },
    shadowRadius: 4,
  },
});

Describe the solution you'd like
It would be amazing if the BottomNavigationBar could use the elevation set in the barStyle, maybe something as simple as:

const BottomNavigationBar = <Route extends BaseRoute>({

// ...

return (
    <Surface
      {...(theme.isV3 && { elevation: style.elevation || 0 })}
      style={[
        !theme.isV3 && (style.elevation || styles.elevation),
       ...
      ]}

Describe alternatives you've considered
Not sure there is any alternative besides monkey-patching the BottomNavigationBar.

Additional context
N/A

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions