iOS surface with flex style render weird.

[dribble-njr]

Current behaviour

In the source code, I noticed that iOS surface has outerLayer and inner view. However, outerLayerStyleProperties filter flex, than the inner will never has flex style. Therefore, it will never fill the remaining height. In android and web, it renders nomal.

const [filteredStyles, outerLayerStyles, borderRadiusStyles] =
  splitStyles(
    flattenedStyles,
    (style) =>
      outerLayerStyleProperties.includes(style) ||
      style.startsWith('margin'),
    (style) => style.startsWith('border') && style.endsWith('Radius')
  );

Expected behaviour

How to reproduce?

Preview

What have you tried so far?

Your Environment

software	version
ios	x
android	x
react-native	x.x.x
react-native-paper	5.13.1
node	x.x.x
npm or yarn	x.x.x
expo sdk	x.x.x

[Jerome-Jumah]

I am also facing a similar issue where on android the surface works well but on iOS it does not seem to work and I keep getting this warning in the console

When setting overflow to hidden on Surface the shadow will not be displayed correctly. Wrap the content of your component in a separate View with the overflow style.

Attached images

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[dribble-njr]

https://snack.expo.dev/@dribble-njr/ios-surface-with-flex-style-render-weird @BogiKay

[dribble-njr]

"react-native-paper": "4.9.1" seems ok.

[BogiKay]

Thanks for the repro, appreciate that. I'll investigate the issue