Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

alignContent: stretch doesn't actually stretch rows in a flexWrap: wrap layout #1792

Open
benjdreier opened this issue Feb 28, 2025 · 0 comments

Comments

@benjdreier
Copy link

benjdreier commented Feb 28, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant