Skip to content

Commit 41a1496

Browse files
realsoelynnfacebook-github-bot
realsoelynn
authored and
facebook-github-bot
committed
Expose Gap Percentage to ReactNative (#44129)
Summary: Pull Request resolved: #44129 X-link: facebook/litho#983 X-link: facebook/yoga#1647 Expose the Gap Percent from Yoga to RN Layer Changelog: [Android][Breaking] Enable flex gap percentage value for RN. Reviewed By: NickGerleman Differential Revision: D56160597 fbshipit-source-id: 34c05d39a03cf013f279a2cf9eb9762772ee11de
1 parent daf3f8a commit 41a1496

8 files changed

Lines changed: 90 additions & 24 deletions

File tree

‎packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ export interface FlexStyle {
6565
| 'row-reverse'
6666
| 'column-reverse'
6767
| undefined;
68-
rowGap?: number | undefined;
69-
gap?: number | undefined;
70-
columnGap?: number | undefined;
68+
rowGap?: number | string | undefined;
69+
gap?: number | string | undefined;
70+
columnGap?: number | string | undefined;
7171
flexGrow?: number | undefined;
7272
flexShrink?: number | undefined;
7373
flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;

‎packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -644,9 +644,9 @@ type ____LayoutStyle_Internal = $ReadOnly<{
644644
* between children may be larger than the gap value.
645645
* See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details.
646646
*/
647-
rowGap?: number,
648-
columnGap?: number,
649-
gap?: number,
647+
rowGap?: number | string,
648+
columnGap?: number | string,
649+
gap?: number | string,
650650
}>;
651651

652652
/**

‎packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7584,9 +7584,9 @@ type ____LayoutStyle_Internal = $ReadOnly<{
75847584
aspectRatio?: number | string,
75857585
zIndex?: number,
75867586
direction?: \\"inherit\\" | \\"ltr\\" | \\"rtl\\",
7587-
rowGap?: number,
7588-
columnGap?: number,
7589-
gap?: number,
7587+
rowGap?: number | string,
7588+
columnGap?: number | string,
7589+
gap?: number | string,
75907590
}>;
75917591
export type ____ShadowStyle_InternalCore = $ReadOnly<{
75927592
shadowColor?: ____ColorValue_Internal,

‎packages/react-native/React/Views/RCTViewManager.m‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -507,9 +507,9 @@ - (void)updateAccessibilityTraitsForRole:(RCTView *)view withDefaultView:(RCTVie
507507
RCT_EXPORT_SHADOW_PROPERTY(alignContent, YGAlign)
508508
RCT_EXPORT_SHADOW_PROPERTY(position, YGPositionType)
509509
RCT_EXPORT_SHADOW_PROPERTY(aspectRatio, float)
510-
RCT_EXPORT_SHADOW_PROPERTY(rowGap, float)
511-
RCT_EXPORT_SHADOW_PROPERTY(columnGap, float)
512-
RCT_EXPORT_SHADOW_PROPERTY(gap, float)
510+
RCT_EXPORT_SHADOW_PROPERTY(rowGap, YGValue)
511+
RCT_EXPORT_SHADOW_PROPERTY(columnGap, YGValue)
512+
RCT_EXPORT_SHADOW_PROPERTY(gap, YGValue)
513513

514514
RCT_EXPORT_SHADOW_PROPERTY(overflow, YGOverflow)
515515
RCT_EXPORT_SHADOW_PROPERTY(display, YGDisplay)

‎packages/react-native/ReactAndroid/api/ReactAndroid.api‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4167,15 +4167,15 @@ public class com/facebook/react/uimanager/LayoutShadowNode : com/facebook/react/
41674167
public fun setAspectRatio (F)V
41684168
public fun setBorderWidths (IF)V
41694169
public fun setCollapsable (Z)V
4170-
public fun setColumnGap (F)V
4170+
public fun setColumnGap (Lcom/facebook/react/bridge/Dynamic;)V
41714171
public fun setDisplay (Ljava/lang/String;)V
41724172
public fun setFlex (F)V
41734173
public fun setFlexBasis (Lcom/facebook/react/bridge/Dynamic;)V
41744174
public fun setFlexDirection (Ljava/lang/String;)V
41754175
public fun setFlexGrow (F)V
41764176
public fun setFlexShrink (F)V
41774177
public fun setFlexWrap (Ljava/lang/String;)V
4178-
public fun setGap (F)V
4178+
public fun setGap (Lcom/facebook/react/bridge/Dynamic;)V
41794179
public fun setHeight (Lcom/facebook/react/bridge/Dynamic;)V
41804180
public fun setJustifyContent (Ljava/lang/String;)V
41814181
public fun setMargins (ILcom/facebook/react/bridge/Dynamic;)V
@@ -4187,7 +4187,7 @@ public class com/facebook/react/uimanager/LayoutShadowNode : com/facebook/react/
41874187
public fun setPaddings (ILcom/facebook/react/bridge/Dynamic;)V
41884188
public fun setPosition (Ljava/lang/String;)V
41894189
public fun setPositionValues (ILcom/facebook/react/bridge/Dynamic;)V
4190-
public fun setRowGap (F)V
4190+
public fun setRowGap (Lcom/facebook/react/bridge/Dynamic;)V
41914191
public fun setShouldNotifyOnLayout (Z)V
41924192
public fun setShouldNotifyPointerEnter (Z)V
41934193
public fun setShouldNotifyPointerLeave (Z)V
@@ -4620,6 +4620,7 @@ public abstract interface class com/facebook/react/uimanager/ReactShadowNode {
46204620
public abstract fun setBaselineFunction (Lcom/facebook/yoga/YogaBaselineFunction;)V
46214621
public abstract fun setBorder (IF)V
46224622
public abstract fun setColumnGap (F)V
4623+
public abstract fun setColumnGapPercent (F)V
46234624
public abstract fun setDefaultPadding (IF)V
46244625
public abstract fun setDisplay (Lcom/facebook/yoga/YogaDisplay;)V
46254626
public abstract fun setFlex (F)V
@@ -4631,6 +4632,7 @@ public abstract interface class com/facebook/react/uimanager/ReactShadowNode {
46314632
public abstract fun setFlexShrink (F)V
46324633
public abstract fun setFlexWrap (Lcom/facebook/yoga/YogaWrap;)V
46334634
public abstract fun setGap (F)V
4635+
public abstract fun setGapPercent (F)V
46344636
public abstract fun setIsLayoutOnly (Z)V
46354637
public abstract fun setJustifyContent (Lcom/facebook/yoga/YogaJustify;)V
46364638
public abstract fun setLayoutDirection (Lcom/facebook/yoga/YogaDirection;)V
@@ -4650,6 +4652,7 @@ public abstract interface class com/facebook/react/uimanager/ReactShadowNode {
46504652
public abstract fun setReactTag (I)V
46514653
public abstract fun setRootTag (I)V
46524654
public abstract fun setRowGap (F)V
4655+
public abstract fun setRowGapPercent (F)V
46534656
public abstract fun setShouldNotifyOnLayout (Z)V
46544657
public abstract fun setStyleAspectRatio (F)V
46554658
public abstract fun setStyleHeight (F)V
@@ -4754,6 +4757,7 @@ public class com/facebook/react/uimanager/ReactShadowNodeImpl : com/facebook/rea
47544757
public fun setBaselineFunction (Lcom/facebook/yoga/YogaBaselineFunction;)V
47554758
public fun setBorder (IF)V
47564759
public fun setColumnGap (F)V
4760+
public fun setColumnGapPercent (F)V
47574761
public fun setDefaultPadding (IF)V
47584762
public fun setDisplay (Lcom/facebook/yoga/YogaDisplay;)V
47594763
public fun setFlex (F)V
@@ -4765,6 +4769,7 @@ public class com/facebook/react/uimanager/ReactShadowNodeImpl : com/facebook/rea
47654769
public fun setFlexShrink (F)V
47664770
public fun setFlexWrap (Lcom/facebook/yoga/YogaWrap;)V
47674771
public fun setGap (F)V
4772+
public fun setGapPercent (F)V
47684773
public final fun setIsLayoutOnly (Z)V
47694774
public fun setJustifyContent (Lcom/facebook/yoga/YogaJustify;)V
47704775
public fun setLayoutDirection (Lcom/facebook/yoga/YogaDirection;)V
@@ -4785,6 +4790,7 @@ public class com/facebook/react/uimanager/ReactShadowNodeImpl : com/facebook/rea
47854790
public fun setReactTag (I)V
47864791
public final fun setRootTag (I)V
47874792
public fun setRowGap (F)V
4793+
public fun setRowGapPercent (F)V
47884794
public fun setShouldNotifyOnLayout (Z)V
47894795
public fun setStyleAspectRatio (F)V
47904796
public fun setStyleHeight (F)V

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java‎

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -230,28 +230,67 @@ public void setFlexGrow(float flexGrow) {
230230
super.setFlexGrow(flexGrow);
231231
}
232232

233-
@ReactProp(name = ViewProps.ROW_GAP, defaultFloat = YogaConstants.UNDEFINED)
234-
public void setRowGap(float rowGap) {
233+
@ReactProp(name = ViewProps.ROW_GAP)
234+
public void setRowGap(Dynamic rowGap) {
235235
if (isVirtual()) {
236236
return;
237237
}
238-
super.setRowGap(PixelUtil.toPixelFromDIP(rowGap));
238+
239+
mTempYogaValue.setFromDynamic(rowGap);
240+
switch (mTempYogaValue.unit) {
241+
case AUTO:
242+
case POINT:
243+
case UNDEFINED:
244+
setRowGap(mTempYogaValue.value);
245+
break;
246+
case PERCENT:
247+
setRowGapPercent(mTempYogaValue.value);
248+
break;
249+
}
250+
251+
rowGap.recycle();
239252
}
240253

241-
@ReactProp(name = ViewProps.COLUMN_GAP, defaultFloat = YogaConstants.UNDEFINED)
242-
public void setColumnGap(float columnGap) {
254+
@ReactProp(name = ViewProps.COLUMN_GAP)
255+
public void setColumnGap(Dynamic columnGap) {
243256
if (isVirtual()) {
244257
return;
245258
}
246-
super.setColumnGap(PixelUtil.toPixelFromDIP(columnGap));
259+
260+
mTempYogaValue.setFromDynamic(columnGap);
261+
switch (mTempYogaValue.unit) {
262+
case AUTO:
263+
case POINT:
264+
case UNDEFINED:
265+
setColumnGap(mTempYogaValue.value);
266+
break;
267+
case PERCENT:
268+
setColumnGapPercent(mTempYogaValue.value);
269+
break;
270+
}
271+
272+
columnGap.recycle();
247273
}
248274

249-
@ReactProp(name = ViewProps.GAP, defaultFloat = YogaConstants.UNDEFINED)
250-
public void setGap(float gap) {
275+
@ReactProp(name = ViewProps.GAP)
276+
public void setGap(Dynamic gap) {
251277
if (isVirtual()) {
252278
return;
253279
}
254-
super.setGap(PixelUtil.toPixelFromDIP(gap));
280+
281+
mTempYogaValue.setFromDynamic(gap);
282+
switch (mTempYogaValue.unit) {
283+
case AUTO:
284+
case POINT:
285+
case UNDEFINED:
286+
setGap(mTempYogaValue.value);
287+
break;
288+
case PERCENT:
289+
setGapPercent(mTempYogaValue.value);
290+
break;
291+
}
292+
293+
gap.recycle();
255294
}
256295

257296
@ReactProp(name = ViewProps.FLEX_SHRINK, defaultFloat = 0f)

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,10 +318,16 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
318318

319319
void setRowGap(float rowGap);
320320

321+
void setRowGapPercent(float percent);
322+
321323
void setColumnGap(float columnGap);
322324

325+
void setColumnGapPercent(float percent);
326+
323327
void setGap(float gap);
324328

329+
void setGapPercent(float percent);
330+
325331
void setFlexShrink(float flexShrink);
326332

327333
void setFlexBasis(float flexBasis);

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNodeImpl.java‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -827,16 +827,31 @@ public void setRowGap(float rowGap) {
827827
mYogaNode.setGap(YogaGutter.ROW, rowGap);
828828
}
829829

830+
@Override
831+
public void setRowGapPercent(float percent) {
832+
mYogaNode.setGapPercent(YogaGutter.ROW, percent);
833+
}
834+
830835
@Override
831836
public void setColumnGap(float columnGap) {
832837
mYogaNode.setGap(YogaGutter.COLUMN, columnGap);
833838
}
834839

840+
@Override
841+
public void setColumnGapPercent(float percent) {
842+
mYogaNode.setGapPercent(YogaGutter.COLUMN, percent);
843+
}
844+
835845
@Override
836846
public void setGap(float gap) {
837847
mYogaNode.setGap(YogaGutter.ALL, gap);
838848
}
839849

850+
@Override
851+
public void setGapPercent(float percent) {
852+
mYogaNode.setGap(YogaGutter.ALL, percent);
853+
}
854+
840855
@Override
841856
public void setFlexShrink(float flexShrink) {
842857
mYogaNode.setFlexShrink(flexShrink);

0 commit comments

Comments
 (0)
⚡