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

New Issue

2025-02-28T14:13:19-08:00

benjdreier commented

2025-02-28 14:13:19 -08:00

(Migrated from github.com)

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.

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 in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1792

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

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