[React-Native]: Combining flexWrap, alignItems & wrap leads to unwanted alignment
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 18.9k
- Forks
- 1.6k
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
Report
- I have searched existing issues and this is not a duplicate
Issues and Steps to Reproduce
When margin is added to an item, inside a wrapping container, it should be ignored but it is taken into account during alignItems
Expected Behavior
In the following example the 2 colored square should be in the same spot
Actual Behavior
On the web (using react-native-web it works correctly)
On native, the second square is in the wrong spot cause it is centered inside height + margin instead of just height
i've added opacity to see what's happening
Link to Code
https://snack.expo.dev/@titozzz/yoga-issue-1067
Web:
Native:
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 reproduction and compare the native result with react-native-web. Trace the wrapping container's alignItems behavior around item margins; done means the native layout places the two squares consistently with the expected result and the regression is covered by an appropriate test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- frontend, mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100