callstack / callstack/react-native-paper

Surface and Card on iOS is weird

Abierto
#3,943 5 comentarios 0 reacciones 1 asignado Reclamado por @tjaniczek Ver en GitHub
bug Surface
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

### Current behaviour

I have this item on horizontal flatlist.
```js
const Relation = () => {
return (



{/** render something */}



);
};

const styles = StyleSheet.create({
body: {
alignItems: 'center',
padding: 12
},
surface: {
marginVertical: 12,
maxWidth: 140,
borderRadius: 16,
},
touchable: {
backgroundColor: 'rgb(153, 246, 228)',
borderRadius: 16,
flexGrow: 1,
},
})
```

Items have different height, so I set `flexGrow: 1` in `TouchableRipple`. But it only works on Android. On iOS, it doesn't grow to fill like Android.

Card component has same bug.

### Expected behaviour

View inside `Surface` should fill all when `flexGrow: 1` is set

### How to reproduce?

https://snack.expo.dev/@pnthach95/surfaceios

### Preview

Android
![android](https://github.com/callstack/react-native-paper/assets/31266357/94e7c16e-99fc-43e0-9bb5-357c5672d2cc)

iOS
![ios](https://github.com/callstack/react-native-paper/assets/31266357/fefe19ef-9017-464b-8418-69b5e160ff76)

### What have you tried so far?

I set `flex: 1` at this line
https://github.com/callstack/react-native-paper/blob/198c4889357a8794ce7338c244fe5541ce5864a7/src/components/Surface.tsx#L205

### Your Environment

| software | version
| --------------------- | -------
| ios | 16.5
| android | 13
| react-native | 0.71.11
| react-native-paper | 5.8.0
| node | 16.19.0
| yarn | 1.22.19
| expo sdk | x.x.x

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.