question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[0.71.0-rc.3] Redundant margin when using either rowGap or gap

See original GitHub issue

Description

gap/rowGap adds an unwanted gutter (space) to the last layout element.

Version

0.71.0-rc.3

Output of npx react-native info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 159.22 MB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.9.0 - /opt/homebrew/bin/npm
    Watchman: 2022.09.05.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK:
      API Levels: 29, 30, 31, 32
      Build Tools: 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0
      System Images: android-32 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8193401
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.14.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.0-rc.3 => 0.71.0-rc.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

The code example below is self-explanatory.

Snack, code example, screenshot, or link to a repository

<View
  style={{
    gap: 16,
    backgroundColor: 'red',
  }}
>
  <View style={{ backgroundColor: 'yellow' }}>
    <Text>test1</Text>
  </View>
  <View style={{ backgroundColor: 'yellow' }}>
    <Text>test2</Text>
  </View>
  <View style={{ backgroundColor: 'yellow' }}>
    <Text>test3</Text>
  </View>
</View>

CleanShot 2022-12-04 at 14 25 09@2x

Issue Analytics

  • State:closed
  • Created 10 months ago
  • Reactions:3
  • Comments:12 (10 by maintainers)

github_iconTop GitHub Comments

4reactions
NickGerlemancommented, Dec 8, 2022

I can try to reproduce soon. cc @jacobp100 @intergalacticspacehighway in case either of you can get to it first.

This one is kind of surprising to me given the test coverage.

3reactions
intergalacticspacehighwaycommented, Dec 8, 2022
const bool isLastChild = i == collectedFlexItemsValues.endOfLineIndex - 1;
betweenMainDim -= isLastChild ? gap : 0;

This should fix it. I need to do a buck setup to run tests, did it a long ago, will try again 😅

Read more comments on GitHub >

github_iconTop Results From Across the Web

row-gap - CSS: Cascading Style Sheets - MDN Web Docs
The row-gap CSS property sets the size of the gap (gutter) between an element's rows.
Read more >
Minding the "gap" | CSS-Tricks
We set a number of columns and set the size for each column. A three-column layout of plain text with a 1 em...
Read more >
Don't Use Margins For Spacing Between Components, Use ...
Adding Some Gap. Our layout can be magical and powerful with flex and grid . Let's say we have multiple components and want...
Read more >
Mind the Flex-gap - Medium
Some thoughts on bridging the CSS generation gap between the world of Flexbox we have now, with margins on child elements, and Flex...
Read more >
react-native - bytemeta
[0.71.0-rc.3] Redundant margin when using either rowGap or gap. shivani-webmobi. shivani-webmobi OPEN · Updated 19 hours ago ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found