You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm seeing a big discrepency between react native web and iOS/Android for the behavior of alignContent: stretch for views with flexWrap: wrap and flexDirection: column. I noticed the discrepency when I tried to set the alignSelf property of an individual element inside the flex container.
On web, alignContent: stretch works as expected. Each row becomes tall enough that I can align elements individually within their respective row using alignSelf
But on iOS and Android, alignSelf seems to have no effect. This is because, even though alignContent: stretch is set, the implicit row containers don't actually stretch out to their full height. Rows begin in their expected positions, but the height of each row is implicitly fit to contents instead of stretching. This means my elements can't align themselves properly — they have nowhere to go, their container is too restricted.
An almost-workaround I found, for example, is to add an empty view inside the flex container that has the desired height of a row — that makes the row stretch out enough so that other elements are visibly aligned correctly. But this isn't a real option for me — first of all, it breaks any layout that depends on the number I can't guarantee the height or number of any particular element, as I need to build very generically.
The text was updated successfully, but these errors were encountered:
REPRODUCER: see web vs ios/android in this expo snack: https://snack.expo.dev/OT-sH48w22h3vDCqD6nra
I'm seeing a big discrepency between react native web and iOS/Android for the behavior of
alignContent: stretch
for views withflexWrap: wrap
andflexDirection: column
. I noticed the discrepency when I tried to set thealignSelf
property of an individual element inside the flex container.On web,
alignContent: stretch
works as expected. Each row becomes tall enough that I can align elements individually within their respective row usingalignSelf
But on iOS and Android,
alignSelf
seems to have no effect. This is because, even thoughalignContent: stretch
is set, the implicit row containers don't actually stretch out to their full height. Rows begin in their expected positions, but the height of each row is implicitly fit to contents instead of stretching. This means my elements can't align themselves properly — they have nowhere to go, their container is too restricted.An almost-workaround I found, for example, is to add an empty view inside the flex container that has the desired height of a row — that makes the row stretch out enough so that other elements are visibly aligned correctly. But this isn't a real option for me — first of all, it breaks any layout that depends on the number I can't guarantee the height or number of any particular element, as I need to build very generically.
The text was updated successfully, but these errors were encountered: