Surface and Card on iOS is weird

[pnthach95]

Current behaviour

I have this item on horizontal flatlist.

const Relation = () => {
  return (
    <Surface style={styles.surface}>
      <TouchableRipple
        borderless
        style={styles.touchable}
        onPress={onPress}>
        <View style={styles.body}>
          {/** render something */}
        </View>
      </TouchableRipple>
    </Surface>
  );
};

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

iOS

What have you tried so far?

I set flex: 1 at this line

react-native-paper/src/components/Surface.tsx

Line 205 in 198c488

flex: flattenedStyles.height ? 1 : undefined,

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

[RohovDmytro]

I experience similar visual weirdness with a Card component.

[lukewalczak]

Hey @RohovDmytro, could you please also attach your example, to make sure that we'll fix both issues?

[pnthach95]

Hi @lukewalczak, I updated my snack with Card component.