[0.71.0-rc.3] Redundant margin when using either rowGap or gap
See original GitHub issueDescription
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>
Issue Analytics
- State:
- Created 10 months ago
- Reactions:3
- Comments:12 (10 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
This should fix it. I need to do a buck setup to run tests, did it a long ago, will try again 😅