-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Description
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