Flex gap

[intergalacticspacehighway]

Implements rowGap and columnGap. Creating a draft PR for testing. Will update this section soon! Feedbacks are welcome.

Approach

• This PR adds React native binding for this Yoga PR

To test the example

• Run rn-tester as per the instructions in readme.md. I've modified RNTesterAppShared.js with flex gap example.

Screen.Recording.2021-12-15.at.4.17.38.PM.mov

[pull-bot]

	Messages
📖	📋 Missing Changelog - Can you add a Changelog? To do so, add a "## Changelog" section to your PR description. A changelog entry has the following format: [CATEGORY] [TYPE] - Message. CATEGORY may be: General iOS Android JavaScript Internal (for changes that do not need to be called out in the release notes) TYPE may be: Added, for new features. Changed, for changes in existing functionality. Deprecated, for soon-to-be removed features. Removed, for now removed features. Fixed, for any bug fixes. Security, in case of vulnerabilities. MESSAGE may answer "what and why" on a feature level. Use this to briefly tell React Native users about notable changes.
📖	📋 Missing Test Plan - Can you add a Test Plan? To do so, add a "## Test Plan" section to your PR description. A Test Plan lets us know how these changes were tested.
📖	📋 Missing Summary - Can you add a Summary? To do so, add a "## Summary" section to your PR description. This is a good place to explain the motivation for making this change.

Generated by 🚫 dangerJS against 1712bdc

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 23717c6
Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,287,837	-9,310
android	hermes	armeabi-v7a	7,620,043	-14,006
android	hermes	x86	8,758,348	-12,149
android	hermes	x86_64	8,696,707	-10,986
android	jsc	arm64-v8a	9,676,577	-106,488
android	jsc	armeabi-v7a	8,665,464	-102,697
android	jsc	x86	9,632,578	-116,433
android	jsc	x86_64	10,228,551	-116,544

Base commit: 23717c6
Branch: main

[satya164]

Would also be cool to support gap property which is a shorthand for both row-gap and column-gap

[intergalacticspacehighway]

Added gap property 🎉

[necolas]

@TheSavior this is a patch that implements one of the layout tasks on the convergence roadmap 🥳

[axeldelafosse]

Hey Eli and Nicolas! Can you tell us more about the convergence roadmap please? Thanks 🙏

[necolas]

yoga and browser flexbox layout are slightly different and we'd like yoga to better match the flexbox spec

[axeldelafosse]

OK cool! Feel free to share your plans with the community, I'm sure we can help

[intergalacticspacehighway]

Updated gap approach with @jacobp100's implementation. Margin based implementation felt hacky and it also used owner_ property directly as discussed here. Thanks to @jacobp100 for pointing it out. Once the Yoga PR gets merged, we can move this to ready for review. 🥳

[SpeedyCraftah]

Any updates? This is a highly demanded and killer feature in my opinion which should be expedited

[nandorojo]

Does anyone have a patch for react-native + yoga for using flex gap? Perhaps combining the two PRs? I can put together my own, but figured I'd ask first.

[intergalacticspacehighway]

@nandorojo this is the new PR. will close this one.