feat: Add Android Paper implementation of inset logical properties #36242

gabrieldonadel · 2023-02-22T04:32:10Z

Summary:

This PR adds Paper support to inset logical properties on Android as requested on #34425. This implementation includes the addition of the following style properties

inset, equivalent to top, bottom, right and left.
insetBlock, equivalent to top and bottom.
insetBlockEnd, equivalent to bottom.
insetBlockStart, equivalent to top.
insetInline, equivalent to right and left.
insetInlineEnd, equivalent to right or left.
insetInlineStart, equivalent to right or left.

One thing that still needs to be figured out is how to respect the same precedence as here when using Paper (cc @NickGerleman)

iOS changes are in a separate PR to facilitate code review #36241

Changelog:

[ANDROID] [ADDED] - Add Paper implementation of inset logical properties

Test Plan:

Open the RNTester app and navigate to the View page
Test the new style properties through the Insets section

analysis-bot · 2023-02-22T04:53:44Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,605,045	+432
android	hermes	armeabi-v7a	7,918,955	+432
android	hermes	x86	9,090,917	+436
android	hermes	x86_64	8,946,005	+440
android	jsc	arm64-v8a	9,174,237	+404
android	jsc	armeabi-v7a	8,365,906	+413
android	jsc	x86	9,231,895	+407
android	jsc	x86_64	9,490,592	+411

Base commit: a6690bf
Branch: main

NickGerleman · 2023-02-22T19:41:14Z

Left a comment on the iOS PR around the precedence, but yeah, I think that is the main thing left here. Thank you for splitting these as well!

gabrieldonadel · 2023-02-24T04:22:02Z

Hey @NickGerleman, I'm glad to share that I managed to fix the precedence problem on Android as well. Fix this by using a very similar approach to #36241, adding a mPosition param to the LayoutShadowNode. Please let me know if this approach looks good to you.

Summary: This PR adds Paper support to `inset` logical properties on iOS as requested on #34425. This implementation includes the addition of the following style properties - `inset`, equivalent to `top`, `bottom`, `right` and `left`. - `insetBlock`, equivalent to `top` and `bottom`. - `insetBlockEnd`, equivalent to `bottom`. - `insetBlockStart`, equivalent to `top`. - `insetInline`, equivalent to `right` and `left`. - `insetInlineEnd`, equivalent to `right` or `left`. - `insetInlineStart`, equivalent to `right` or `left`. Android changes are in a separate PR to facilitate code review #36242 ## Changelog [IOS] [ADDED] - Add Paper implementation of inset logical properties Pull Request resolved: #36241 Test Plan: 1. Open the RNTester app and navigate to the `View` page 2. Test the new style properties through the `Insets` section ![image](https://user-images.githubusercontent.com/11707729/220512607-a1d89dbe-64db-4140-9fdb-f9d7897fe3bd.png) Reviewed By: lunaleaps Differential Revision: D43525110 Pulled By: NickGerleman fbshipit-source-id: b70b0ef183dcf192b2c3547422bbe161b7bdba50

NickGerleman

It looks like there is already a pattern for this in ReactShadowNodeImpl, e.g:

  private final float[] mPadding = new float[Spacing.ALL + 1];
  private final boolean[] mPaddingIsPercent = new boolean[Spacing.ALL + 1];

Could we put these in the same place, with the same implementation?

We should also change up Spacing.ALL. E.g. rename that to Spacing.ALL_EDGES, then make Spacing.ALL include everything (and use it where we support the extra values).

ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java

NickGerleman · 2023-02-28T21:20:27Z

ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java

+    }
+  }
+
+  private void setYogaPosition(int spacingType, Dynamic position) {


I'm looking closer at the impl of this, and spacingType is translated directly to a Yoga Edge.

We already added some more different values to Spacing, but since these can only accept Yoga Edge parameters, is it possible to use a more constrained type? E.g. changing sinks which expect a valid Yoga enum to instead use YogaEdge?

NickGerleman · 2023-02-28T21:25:46Z

ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java

@@ -74,6 +74,7 @@ void setFromDynamic(Dynamic dynamic) {
  }

  private final MutableYogaValue mTempYogaValue;
+  private final Dynamic[] mPosition = new Dynamic[Spacing.INLINE_START + 1];


Dynamic is probably heavier than we need here. Could keep these as MutableYogaValue?

gabrieldonadel · 2023-03-14T01:24:09Z

Sorry for the delay on this, I'll try to take a look this week*!

…ook#36241) Summary: This PR adds Paper support to `inset` logical properties on iOS as requested on facebook#34425. This implementation includes the addition of the following style properties - `inset`, equivalent to `top`, `bottom`, `right` and `left`. - `insetBlock`, equivalent to `top` and `bottom`. - `insetBlockEnd`, equivalent to `bottom`. - `insetBlockStart`, equivalent to `top`. - `insetInline`, equivalent to `right` and `left`. - `insetInlineEnd`, equivalent to `right` or `left`. - `insetInlineStart`, equivalent to `right` or `left`. Android changes are in a separate PR to facilitate code review facebook#36242 ## Changelog [IOS] [ADDED] - Add Paper implementation of inset logical properties Pull Request resolved: facebook#36241 Test Plan: 1. Open the RNTester app and navigate to the `View` page 2. Test the new style properties through the `Insets` section ![image](https://user-images.githubusercontent.com/11707729/220512607-a1d89dbe-64db-4140-9fdb-f9d7897fe3bd.png) Reviewed By: lunaleaps Differential Revision: D43525110 Pulled By: NickGerleman fbshipit-source-id: b70b0ef183dcf192b2c3547422bbe161b7bdba50

necolas · 2023-06-01T17:23:14Z

What are the next steps to get this PR merged?

NickGerleman · 2023-06-02T00:46:59Z

For 0.72 we took the step of adding Fabric specific typings for this and the others.

necolas · 2023-09-11T17:55:18Z

Do we still need these in Paper? If time is limited, I think we're better off focusing on fleshing out support in Fabric than the legacy renderer.

github-actions · 2024-03-10T05:13:57Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

gabrieldonadel · 2024-03-10T09:08:18Z

Should we still implement these?

NickGerleman · 2024-03-11T04:14:45Z

Should we still implement these?

As of recent we've been wanting to avoid changes to Paper. Since inset properties are layout only, the Fabric impl we have for specifically that should work across platforms.

The gap we have for logical property new arch support is on borders. Solving that in the short term would like adding support in the Android View View Manager, along with the iOS View ComponentView, to the existing structure resolving edge values.

There's a longer term change, I am trying to allocate time to make, which would eventually move built-in view managers and component views to a "computed style", which would mean view managers and component views only have to deal with the four physical edges.

react-native-bot · 2024-09-07T05:01:13Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

react-native-bot · 2024-09-14T05:01:15Z

This PR was closed because it has been stalled for 7 days with no activity.

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Feb 22, 2023

gabrieldonadel mentioned this pull request Feb 22, 2023

feat: Add iOS Paper implementation of inset logical properties #36241

Closed

cortinico requested review from NickGerleman and necolas February 22, 2023 11:37

NickGerleman reviewed Feb 28, 2023

View reviewed changes

gabrieldonadel force-pushed the add-android-paper-inset-logical-properties branch from 2529150 to ce89208 Compare March 29, 2023 15:24

necolas mentioned this pull request Apr 5, 2023

[w3c] ☂️ Web Styles (Part 1) umbrella issue #34425

Open

74 tasks

gabrieldonadel added 3 commits April 9, 2023 20:18

feat: Add Android Paper implementation of inset logical properties

d82be9e

Add meta position to LayoutShadowNode

5b7aeb6

Rename Spacing ALL to ALL_EDGES

6f35c5b

gabrieldonadel force-pushed the add-android-paper-inset-logical-properties branch from ce89208 to 6f35c5b Compare April 9, 2023 23:58

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jul 24, 2023

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Mar 10, 2024

github-actions bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Mar 11, 2024

react-native-bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 7, 2024

react-native-bot closed this Sep 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add Android Paper implementation of inset logical properties #36242

feat: Add Android Paper implementation of inset logical properties #36242

gabrieldonadel commented Feb 22, 2023 •

edited

Loading

analysis-bot commented Feb 22, 2023 •

edited

Loading

NickGerleman commented Feb 22, 2023

gabrieldonadel commented Feb 24, 2023 •

edited

Loading

NickGerleman left a comment

NickGerleman Feb 28, 2023

NickGerleman Feb 28, 2023

gabrieldonadel commented Mar 14, 2023 •

edited

Loading

necolas commented Jun 1, 2023

NickGerleman commented Jun 2, 2023

necolas commented Sep 11, 2023

github-actions bot commented Mar 10, 2024

gabrieldonadel commented Mar 10, 2024

NickGerleman commented Mar 11, 2024

react-native-bot commented Sep 7, 2024

react-native-bot commented Sep 14, 2024

feat: Add Android Paper implementation of inset logical properties #36242

feat: Add Android Paper implementation of inset logical properties #36242

Conversation

gabrieldonadel commented Feb 22, 2023 • edited Loading

Summary:

Changelog:

Test Plan:

analysis-bot commented Feb 22, 2023 • edited Loading

NickGerleman commented Feb 22, 2023

gabrieldonadel commented Feb 24, 2023 • edited Loading

NickGerleman left a comment

Choose a reason for hiding this comment

NickGerleman Feb 28, 2023

Choose a reason for hiding this comment

NickGerleman Feb 28, 2023

Choose a reason for hiding this comment

gabrieldonadel commented Mar 14, 2023 • edited Loading

necolas commented Jun 1, 2023

NickGerleman commented Jun 2, 2023

necolas commented Sep 11, 2023

github-actions bot commented Mar 10, 2024

gabrieldonadel commented Mar 10, 2024

NickGerleman commented Mar 11, 2024

react-native-bot commented Sep 7, 2024

react-native-bot commented Sep 14, 2024

gabrieldonadel commented Feb 22, 2023 •

edited

Loading

analysis-bot commented Feb 22, 2023 •

edited

Loading

gabrieldonadel commented Feb 24, 2023 •

edited

Loading

gabrieldonadel commented Mar 14, 2023 •

edited

Loading