callstack / callstack/react-native-paper
Add possibility to override default elevation of BottomNavigationBar
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
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](https://github.com/callstack/react-native-paper/blob/main/src/components/BottomNavigation/BottomNavigationBar.tsx#L588) 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 (
// ...
);
}
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 = ({
// ...
return (
Contributor guide
Assessment
This issue has not been assessed yet.