`alignContent: stretch` doesn't actually stretch rows in a `flexWrap: wrap` layout
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 18.9k
- Forks
- 1.6k
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Expo Snack reproducer and compare the web, iOS, and Android layouts for a column flex container using flexWrap, alignContent: stretch, and alignSelf. Trace the corresponding Yoga layout entry points and verify that wrapped rows stretch consistently so individual children can align within them.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- frontend, mobile-dev, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100