Propagate layout direction to Android Views and Drawables

Summary:
Right now we use layout direction determined by I18NManager to influence the root Yoga layout direction.

Individual views may have a different resolved layout direction (e.g. due to `direction` style prop), and even though we don't rely on Android layout props, Android components still need to inherit or know the right layout direction to still do correct drawing. Example of this was scrollbar showing up on the left, instead of right in RTL, as soon as ScrollView knew it was in RTL.

This has potential to change a good amount of behavior, so this is under QE.

Changelog:
[Android][Fixed] - Propagate layout direction to Android Views and Drawables

Reviewed By: joevilches

Differential Revision: D57248417

fbshipit-source-id: 4bcdf2b23277ff926a796b8377df08d49c7b914c

Author: NickGerleman

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

@@ -2790,7 +2790,7 @@ public class com/facebook/react/fabric/mounting/SurfaceMountingManager {
 	public fun setJSResponder (IIZ)V
 	public fun stopSurface ()V
 	public fun updateEventEmitter (ILcom/facebook/react/fabric/events/EventEmitterWrapper;)V
-	public fun updateLayout (IIIIIII)V
+	public fun updateLayout (IIIIIIII)V
 	public fun updateOverflowInset (IIIII)V
 	public fun updatePadding (IIIII)V
 	public fun updateProps (ILcom/facebook/react/bridge/ReadableMap;)V
@@ -5527,12 +5527,11 @@ public class com/facebook/react/uimanager/drawable/CSSBackgroundDrawable : andro
 	public fun getComputedBorderRadius ()Lcom/facebook/react/uimanager/style/ComputedBorderRadius;
 	public fun getDirectionAwareBorderInsets ()Landroid/graphics/RectF;
 	public fun getFullBorderWidth ()F
+	public fun getLayoutDirection ()I
 	public fun getOpacity ()I
 	public fun getOutline (Landroid/graphics/Outline;)V
-	public fun getResolvedLayoutDirection ()I
 	public fun hasRoundedBorders ()Z
 	protected fun onBoundsChange (Landroid/graphics/Rect;)V
-	public fun onResolvedLayoutDirectionChanged (I)Z
 	public fun paddingBoxPath ()Landroid/graphics/Path;
 	public fun setAlpha (I)V
 	public fun setBorderColor (IFF)V
@@ -5542,9 +5541,9 @@ public class com/facebook/react/uimanager/drawable/CSSBackgroundDrawable : andro
 	public fun setBorderWidth (IF)V
 	public fun setColor (I)V
 	public fun setColorFilter (Landroid/graphics/ColorFilter;)V
+	public fun setLayoutDirectionOverride (I)V
 	public fun setRadius (F)V
 	public fun setRadius (FI)V
-	public fun setResolvedLayoutDirection (I)Z
 }
 
 public abstract interface class com/facebook/react/uimanager/events/BatchEventDispatchedListener {
@@ -6633,6 +6632,7 @@ public class com/facebook/react/views/scroll/OnScrollDispatchHelper {
 
 public class com/facebook/react/views/scroll/ReactHorizontalScrollContainerView : com/facebook/react/views/view/ReactViewGroup {
 	public fun <init> (Landroid/content/Context;)V
+	public fun getLayoutDirection ()I
 	protected fun onLayout (ZIIII)V
 	public fun setRemoveClippedSubviews (Z)V
 }
@@ -7927,7 +7927,6 @@ public class com/facebook/react/views/view/ReactViewGroup : android/view/ViewGro
 	public fun onInterceptTouchEvent (Landroid/view/MotionEvent;)Z
 	protected fun onLayout (ZIIII)V
 	protected fun onMeasure (II)V
-	public fun onRtlPropertiesChanged (I)V
 	protected fun onSizeChanged (IIII)V
 	public fun onTouchEvent (Landroid/view/MotionEvent;)Z
 	public fun removeView (Landroid/view/View;)V

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/mounting/SurfaceMountingManager.java

@@ -938,7 +938,14 @@ public void sendAccessibilityEvent(int reactTag, int eventType) {
 
   @UiThread
   public void updateLayout(
-      int reactTag, int parentTag, int x, int y, int width, int height, int displayType) {
+      int reactTag,
+      int parentTag,
+      int x,
+      int y,
+      int width,
+      int height,
+      int displayType,
+      int layoutDirection) {
     if (isStopped()) {
       return;
     }
@@ -954,6 +961,13 @@ public void updateLayout(
       throw new IllegalStateException("Unable to find View for tag: " + reactTag);
     }
 
+    if (ReactNativeFeatureFlags.setAndroidLayoutDirection()) {
+      viewToUpdate.setLayoutDirection(
+          layoutDirection == 1
+              ? View.LAYOUT_DIRECTION_LTR
+              : layoutDirection == 2 ? View.LAYOUT_DIRECTION_RTL : View.LAYOUT_DIRECTION_INHERIT);
+    }
+
     viewToUpdate.measure(
         View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
         View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/mounting/mountitems/IntBufferBatchMountItem.java

@@ -20,6 +20,7 @@
 import com.facebook.react.fabric.events.EventEmitterWrapper;
 import com.facebook.react.fabric.mounting.MountingManager;
 import com.facebook.react.fabric.mounting.SurfaceMountingManager;
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
 import com.facebook.react.uimanager.StateWrapper;
 import com.facebook.systrace.Systrace;
 
@@ -150,9 +151,14 @@ public void execute(MountingManager mountingManager) {
           int height = mIntBuffer[i++];
           int displayType = mIntBuffer[i++];
 
-          surfaceMountingManager.updateLayout(
-              reactTag, parentTag, x, y, width, height, displayType);
-
+          if (ReactNativeFeatureFlags.setAndroidLayoutDirection()) {
+            int layoutDirection = mIntBuffer[i++];
+            surfaceMountingManager.updateLayout(
+                reactTag, parentTag, x, y, width, height, displayType, layoutDirection);
+          } else {
+            surfaceMountingManager.updateLayout(
+                reactTag, parentTag, x, y, width, height, displayType, 0);
+          }
         } else if (type == INSTRUCTION_UPDATE_PADDING) {
           surfaceMountingManager.updatePadding(
               mIntBuffer[i++], mIntBuffer[i++], mIntBuffer[i++], mIntBuffer[i++], mIntBuffer[i++]);

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<fbc717f14e387b92aea7cb71202cce95>>
+ * @generated SignedSource<<0ae7be647ca12c3efcc34f6098155550>>
  */
 
 /**
@@ -130,6 +130,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun preventDoubleTextMeasure(): Boolean = accessor.preventDoubleTextMeasure()
 
+  /**
+   * Propagate layout direction to Android views.
+   */
+  @JvmStatic
+  public fun setAndroidLayoutDirection(): Boolean = accessor.setAndroidLayoutDirection()
+
   /**
    * When enabled, it uses the modern fork of RuntimeScheduler that allows scheduling tasks with priorities from any thread.
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<cfbb7879b105079fe76e37b0683f7083>>
+ * @generated SignedSource<<5323fb8be9ec7ee6ac43d7f01bca020e>>
  */
 
 /**
@@ -37,6 +37,7 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
   private var inspectorEnableModernCDPRegistryCache: Boolean? = null
   private var lazyAnimationCallbacksCache: Boolean? = null
   private var preventDoubleTextMeasureCache: Boolean? = null
+  private var setAndroidLayoutDirectionCache: Boolean? = null
   private var useModernRuntimeSchedulerCache: Boolean? = null
   private var useNativeViewConfigsInBridgelessModeCache: Boolean? = null
   private var useStateAlignmentMechanismCache: Boolean? = null
@@ -194,6 +195,15 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
     return cached
   }
 
+  override fun setAndroidLayoutDirection(): Boolean {
+    var cached = setAndroidLayoutDirectionCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.setAndroidLayoutDirection()
+      setAndroidLayoutDirectionCache = cached
+    }
+    return cached
+  }
+
   override fun useModernRuntimeScheduler(): Boolean {
     var cached = useModernRuntimeSchedulerCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<77b8e93114ed0cc2b6bdd9ee46e162c7>>
+ * @generated SignedSource<<e68ae1e7b4f0d7714722fb7b442c66c9>>
  */
 
 /**
@@ -62,6 +62,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun preventDoubleTextMeasure(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun setAndroidLayoutDirection(): Boolean
+
   @DoNotStrip @JvmStatic public external fun useModernRuntimeScheduler(): Boolean
 
   @DoNotStrip @JvmStatic public external fun useNativeViewConfigsInBridgelessMode(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<13a5d73dea53b8d4f16946cebc49e684>>
+ * @generated SignedSource<<4f50dab251c41380a14506975355e49d>>
  */
 
 /**
@@ -57,6 +57,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun preventDoubleTextMeasure(): Boolean = false
 
+  override fun setAndroidLayoutDirection(): Boolean = false
+
   override fun useModernRuntimeScheduler(): Boolean = false
 
   override fun useNativeViewConfigsInBridgelessMode(): Boolean = false

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<67f1828f6a4cf9b2cf808be12d3fb06b>>
+ * @generated SignedSource<<00a695402781a9f3c45ba0594a785b57>>
  */
 
 /**
@@ -41,6 +41,7 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
   private var inspectorEnableModernCDPRegistryCache: Boolean? = null
   private var lazyAnimationCallbacksCache: Boolean? = null
   private var preventDoubleTextMeasureCache: Boolean? = null
+  private var setAndroidLayoutDirectionCache: Boolean? = null
   private var useModernRuntimeSchedulerCache: Boolean? = null
   private var useNativeViewConfigsInBridgelessModeCache: Boolean? = null
   private var useStateAlignmentMechanismCache: Boolean? = null
@@ -215,6 +216,16 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun setAndroidLayoutDirection(): Boolean {
+    var cached = setAndroidLayoutDirectionCache
+    if (cached == null) {
+      cached = currentProvider.setAndroidLayoutDirection()
+      accessedFeatureFlags.add("setAndroidLayoutDirection")
+      setAndroidLayoutDirectionCache = cached
+    }
+    return cached
+  }
+
   override fun useModernRuntimeScheduler(): Boolean {
     var cached = useModernRuntimeSchedulerCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<a6a65fe7d9b04671de407a03e1feb161>>
+ * @generated SignedSource<<e63ccfcb6e8d1db840cefb3d0a6df6cd>>
  */
 
 /**
@@ -57,6 +57,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun preventDoubleTextMeasure(): Boolean
 
+  @DoNotStrip public fun setAndroidLayoutDirection(): Boolean
+
   @DoNotStrip public fun useModernRuntimeScheduler(): Boolean
 
   @DoNotStrip public fun useNativeViewConfigsInBridgelessMode(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java

@@ -7,6 +7,7 @@
 
 package com.facebook.react.uimanager.drawable;
 
+import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.Color;
@@ -119,7 +120,9 @@ private enum BorderStyle {
   private BorderRadiusStyle mBorderRadius = new BorderRadiusStyle();
   private ComputedBorderRadius mComputedBorderRadius = new ComputedBorderRadius();
   private final Context mContext;
-  private int mLayoutDirection;
+
+  // Should be removed after migrating to Android layout direction.
+  private int mLayoutDirectionOverride = -1;
 
   public CSSBackgroundDrawable(Context context) {
     mContext = context;
@@ -163,6 +166,19 @@ public void setColorFilter(ColorFilter cf) {
     // do nothing
   }
 
+  @Deprecated
+  public void setLayoutDirectionOverride(int layoutDirection) {
+    if (mLayoutDirectionOverride != layoutDirection) {
+      mLayoutDirectionOverride = layoutDirection;
+    }
+  }
+
+  @Override
+  @SuppressLint("WrongConstant")
+  public int getLayoutDirection() {
+    return mLayoutDirectionOverride == -1 ? super.getLayoutDirection() : mLayoutDirectionOverride;
+  }
+
   @Override
   public int getOpacity() {
     return (Color.alpha(mColor) * mAlpha) >> 8;
@@ -292,25 +308,6 @@ public void setColor(int color) {
     invalidateSelf();
   }
 
-  /** Similar to Drawable.getLayoutDirection, but available in APIs < 23. */
-  public int getResolvedLayoutDirection() {
-    return mLayoutDirection;
-  }
-
-  /** Similar to Drawable.setLayoutDirection, but available in APIs < 23. */
-  public boolean setResolvedLayoutDirection(int layoutDirection) {
-    if (mLayoutDirection != layoutDirection) {
-      mLayoutDirection = layoutDirection;
-      return onResolvedLayoutDirectionChanged(layoutDirection);
-    }
-    return false;
-  }
-
-  /** Similar to Drawable.onLayoutDirectionChanged, but available in APIs < 23. */
-  public boolean onResolvedLayoutDirectionChanged(int layoutDirection) {
-    return false;
-  }
-
   @VisibleForTesting
   public int getColor() {
     return mColor;
@@ -392,7 +389,7 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
         // Clip inner border
         canvas.clipPath(mInnerClipPathForBorderRadius, Region.Op.DIFFERENCE);
 
-        final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
+        final boolean isRTL = getLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
         int colorStart = getBorderColor(Spacing.START);
         int colorEnd = getBorderColor(Spacing.END);
 
@@ -591,7 +588,7 @@ private void updatePath() {
 
     mComputedBorderRadius =
         mBorderRadius.resolve(
-            mLayoutDirection,
+            getLayoutDirection(),
             mContext,
             mOuterClipTempRectForBorderRadius.width(),
             mOuterClipTempRectForBorderRadius.height());
@@ -1080,7 +1077,7 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
         colorTop = colorBlockStart;
       }
 
-      final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
+      final boolean isRTL = getLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
       int colorStart = getBorderColor(Spacing.START);
       int colorEnd = getBorderColor(Spacing.END);
 
@@ -1305,7 +1302,7 @@ public RectF getDirectionAwareBorderInsets() {
     float borderRightWidth = getBorderWidthOrDefaultTo(borderWidth, Spacing.RIGHT);
 
     if (mBorderWidth != null) {
-      final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
+      final boolean isRTL = getLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
       float borderStartWidth = mBorderWidth.getRaw(Spacing.START);
       float borderEndWidth = mBorderWidth.getRaw(Spacing.END);