react / react/yoga

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

Open
#1,792 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.