callstack / callstack/react-native-paper

Add possibility to override default elevation of BottomNavigationBar

Abierto
#4,582 0 comentarios 1 reacción 0 asignados Ver en GitHub
BottomNavigation feature request
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

**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 (

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Start in src/components/BottomNavigation/BottomNavigationBar.tsx at the referenced line and inspect how barStyle is handled for v3 versus earlier behavior. Verify the supplied Android example: an elevation in barStyle should affect the BottomNavigationBar while existing iOS shadow styling remains usable.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native, typescript
Área
mobile
Tipo de issue
Nueva funcionalidad
Dificultad
2/5
Tiempo estimado
1-3 horas
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
55/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.