callstack / callstack/react-native-paper

Surface and Card on iOS is weird

Đang mở
#3,943 5 bình luận 0 reaction 1 người được giao Được @tjaniczek nhận Xem trên GitHub
bug Surface
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.