callstack / callstack/react-native-paper

Surface and Card on iOS is weird

未关闭
#3,943 5 条评论 0 个 reaction 已指派 1 人 已被 @tjaniczek 认领 在 GitHub 查看
bug Surface
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### 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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。