Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add possibility to override default elevation of BottomNavigationBar #4582

Open
fabriziocucci opened this issue Dec 21, 2024 · 0 comments
Open

Comments

@fabriziocucci
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant