DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

[React-Native]: Combining flexWrap, alignItems & wrap leads to unwanted alignment #1067

New Issue
Open
opened 2021-03-04 08:03:28 -08:00 by Titozzz · 4 comments
Titozzz commented 2021-03-04 08:03:28 -08:00 (Migrated from github.com)
Copy Link

Report

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:
Screenshot 2021-03-04 at 16 57 17
Native:
Screenshot_20210304-165704

# Report - [X] I have searched [existing issues](https://github.com/facebook/yoga/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: <img width="245" alt="Screenshot 2021-03-04 at 16 57 17" src="https://user-images.githubusercontent.com/6181446/109991935-12e45c00-7d0b-11eb-9cf5-835ca372395c.png"> Native: ![Screenshot_20210304-165704](https://user-images.githubusercontent.com/6181446/109992299-6bb3f480-7d0b-11eb-9d9b-84608e1fe388.jpg)
👍 3
guiccbr commented 2021-08-27 20:47:15 -07:00 (Migrated from github.com)
Copy Link

Taking the chance to report something else that I noticed when using flexWrap, since it could have the same root cause as the original issue:

I have a horizontal container that uses flexWrap with two vertical child containers that will have two rectangles each. The rectangles have different heights. If I use space-between in the vertical child containers with flexWrap in the horizontal container, there will be a very weird overflow of the children.

  • Without flexWrap (expected behavior, works correctly)
    <View style={{ backgroundColor: 'purple', flexDirection: 'row' }}>
      <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
        <View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
        <View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
      </View>
      <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
        <View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
        <View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
      </View>
    </View>
Captura de Tela 2021-08-28 às 00 46 34
  • With flexWrap (unexpected behavior)
    <View style={{ backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}>
      <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
        <View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
        <View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
      </View>
      <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
        <View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
        <View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
      </View>
    </View>
Captura de Tela 2021-08-28 às 00 46 00

Is that expected? Looks like a bug too right?

Taking the chance to report something else that I noticed when using flexWrap, since it could have the same root cause as the original issue: I have a horizontal container that uses flexWrap with two vertical child containers that will have two rectangles each. The rectangles have different heights. If I use space-between in the vertical child containers with flexWrap in the horizontal container, there will be a very weird overflow of the children. * Without `flexWrap` (expected behavior, works correctly) ``` <View style={{ backgroundColor: 'purple', flexDirection: 'row' }}> <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}> <View style={{ backgroundColor: 'red', height: 100, width: 100 }} /> <View style={{ backgroundColor: 'green', height: 100, width: 100 }} /> </View> <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}> <View style={{ backgroundColor: 'blue', height: 150, width: 100 }} /> <View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} /> </View> </View> ``` <img width="485" alt="Captura de Tela 2021-08-28 às 00 46 34" src="https://user-images.githubusercontent.com/10624503/131205265-604b712c-2d92-4cec-b198-58bf3a89feb7.png"> * With `flexWrap` (unexpected behavior) ``` <View style={{ backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}> <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}> <View style={{ backgroundColor: 'red', height: 100, width: 100 }} /> <View style={{ backgroundColor: 'green', height: 100, width: 100 }} /> </View> <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}> <View style={{ backgroundColor: 'blue', height: 150, width: 100 }} /> <View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} /> </View> </View> ``` <img width="476" alt="Captura de Tela 2021-08-28 às 00 46 00" src="https://user-images.githubusercontent.com/10624503/131205257-aef1adf6-b7d6-4966-b5f0-c03ce898c18a.png"> Is that expected? Looks like a bug too right?
nicoburns commented 2023-03-30 13:50:28 -07:00 (Migrated from github.com)
Copy Link

Gentest snippets for both of these:

<div id="yoga_issue_1067" style="flex: 1;justify-content: center;align-items: center">
  <div style="flex-direction: column;background-color: blue;height: 100px;width: 100px;opacity: 0.5;">
    <div style="flex-direction: row;align-items: center;flex-wrap: wrap;margin-left: -100px;margin-top: -100px;">
      <div style="flex-direction: column;margin-left: 100px;margin-top: 100px;height: 100px;width: 100px;background-color: red;opacity: 0.5;"
      />
    </div>
  </div>
</div>

and

<div id="yoga_issue_1067_2" style="background-color: purple; flex-direction: row; flex-wrap: wrap">
  <div style="border-width: 1; border-color: white; flex-direction: column; justify-content: space-between">
    <div style="background-color: red; height: 100px; width: 100px"></div>
    <div style="background-color: green; height: 100px; width: 100px"></div>
  </div>
  <div style="border-width: 1; border-color: white; flex-direction: column; justify-content: space-between">
    <div style="background-color: blue; height: 150px; width: 100px" /></div>
    <div style="background-color: yellow; height: 150px; width: 100px" /></div>
  </div>
</div>
Gentest snippets for both of these: ```html <div id="yoga_issue_1067" style="flex: 1;justify-content: center;align-items: center"> <div style="flex-direction: column;background-color: blue;height: 100px;width: 100px;opacity: 0.5;"> <div style="flex-direction: row;align-items: center;flex-wrap: wrap;margin-left: -100px;margin-top: -100px;"> <div style="flex-direction: column;margin-left: 100px;margin-top: 100px;height: 100px;width: 100px;background-color: red;opacity: 0.5;" /> </div> </div> </div> ``` and ```html <div id="yoga_issue_1067_2" style="background-color: purple; flex-direction: row; flex-wrap: wrap"> <div style="border-width: 1; border-color: white; flex-direction: column; justify-content: space-between"> <div style="background-color: red; height: 100px; width: 100px"></div> <div style="background-color: green; height: 100px; width: 100px"></div> </div> <div style="border-width: 1; border-color: white; flex-direction: column; justify-content: space-between"> <div style="background-color: blue; height: 150px; width: 100px" /></div> <div style="background-color: yellow; height: 150px; width: 100px" /></div> </div> </div> ```
NickGerleman commented 2023-12-09 07:12:43 -08:00 (Migrated from github.com)
Copy Link

Needs to be checked for repro. When I ran under the current iteration of Yoga playground, it looked like the expected output.

// https://github.com/facebook/yoga/issues/1067

<YogaRoot useWebDefaults={false}>
  <Node style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
    <Node style={{ borderWidth: 1, justifyContent: 'space-between' }}>
      <Node style={{ height: 100, width: 100 }} />
      <Node style={{ height: 100, width: 100 }} />
    </Node>
    <Node style={{ borderWidth: 1, justifyContent: 'space-between' }}>
      <Node style={{ height: 150, width: 100 }} />
      <Node style={{ height: 150, width: 100 }} />
    </Node>
  </Node>
</YogaRoot>
image
Needs to be checked for repro. When I ran under the current iteration of Yoga playground, it looked like the expected output. ```jsx // https://github.com/facebook/yoga/issues/1067 <YogaRoot useWebDefaults={false}> <Node style={{ flexDirection: 'row', flexWrap: 'wrap' }}> <Node style={{ borderWidth: 1, justifyContent: 'space-between' }}> <Node style={{ height: 100, width: 100 }} /> <Node style={{ height: 100, width: 100 }} /> </Node> <Node style={{ borderWidth: 1, justifyContent: 'space-between' }}> <Node style={{ height: 150, width: 100 }} /> <Node style={{ height: 150, width: 100 }} /> </Node> </Node> </YogaRoot> ``` <img width="1464" alt="image" src="https://github.com/facebook/yoga/assets/835219/9f8e5477-900b-41fd-b1ed-e8f8057af85b">
👍 1
Titozzz commented 2025-04-15 06:22:03 -07:00 (Migrated from github.com)
Copy Link

Still reproduces on react native 0.79. (I've tried using experimental_LayoutConformance)

Still reproduces on react native 0.79. (I've tried using experimental_LayoutConformance)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Algorithm
Build and Infrastructure
C#
C++ Enhancement
CLA Signed
Discussion
Documentation
Feature Request
Java
JavaScript
Merged
Question
Reverted
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
YogaKit
YogaLayout ViewGroup
bug
dependencies
Pull requests that update a dependency file
duplicate
enhancement
fb-exported
fh:direct-merge-enabled
invalid
ruby
Pull requests that update Ruby code
wontfix
No Label
Algorithm
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
DaddyFrosty
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1067
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?