react-native-tvos 0.76.6-0 → 0.77.0-0

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BackgroundImageLayer.kt

@@ -7,15 +7,16 @@
 
 package com.facebook.react.uimanager.style
 
+import android.content.Context
 import android.graphics.Rect
 import android.graphics.Shader
 import com.facebook.react.bridge.ReadableMap
 
-public class BackgroundImageLayer(gradientMap: ReadableMap?) {
+public class BackgroundImageLayer(gradientMap: ReadableMap?, context: Context) {
   private val gradient: Gradient? =
       if (gradientMap != null) {
         try {
-          Gradient(gradientMap)
+          Gradient(gradientMap, context)
         } catch (e: IllegalArgumentException) {
           // Gracefully reject invalid styles
           null

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderColors.kt

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager.style
+
+import android.content.Context
+import android.graphics.Color
+import android.util.LayoutDirection
+import androidx.annotation.ColorInt
+import com.facebook.react.modules.i18nmanager.I18nUtil
+
+internal data class ColorEdges(
+    @ColorInt val left: Int = Color.BLACK,
+    @ColorInt val top: Int = Color.BLACK,
+    @ColorInt val right: Int = Color.BLACK,
+    @ColorInt val bottom: Int = Color.BLACK,
+)
+
+@JvmInline
+internal value class BorderColors(
+    @ColorInt val edgeColors: Array<Int?> = arrayOfNulls<Int?>(LogicalEdge.values().size)
+) {
+
+  public fun resolve(layoutDirection: Int, context: Context): ColorEdges {
+    return when (layoutDirection) {
+      LayoutDirection.LTR ->
+          ColorEdges(
+              edgeColors[LogicalEdge.START.ordinal]
+                  ?: edgeColors[LogicalEdge.LEFT.ordinal]
+                  ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal]
+                  ?: edgeColors[LogicalEdge.ALL.ordinal]
+                  ?: Color.BLACK,
+              edgeColors[LogicalEdge.BLOCK_START.ordinal]
+                  ?: edgeColors[LogicalEdge.TOP.ordinal]
+                  ?: edgeColors[LogicalEdge.BLOCK.ordinal]
+                  ?: edgeColors[LogicalEdge.VERTICAL.ordinal]
+                  ?: edgeColors[LogicalEdge.ALL.ordinal]
+                  ?: Color.BLACK,
+              edgeColors[LogicalEdge.END.ordinal]
+                  ?: edgeColors[LogicalEdge.RIGHT.ordinal]
+                  ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal]
+                  ?: edgeColors[LogicalEdge.ALL.ordinal]
+                  ?: Color.BLACK,
+              edgeColors[LogicalEdge.BLOCK_END.ordinal]
+                  ?: edgeColors[LogicalEdge.BOTTOM.ordinal]
+                  ?: edgeColors[LogicalEdge.BLOCK.ordinal]
+                  ?: edgeColors[LogicalEdge.VERTICAL.ordinal]
+                  ?: edgeColors[LogicalEdge.ALL.ordinal]
+                  ?: Color.BLACK)
+      LayoutDirection.RTL ->
+          if (I18nUtil.instance.doLeftAndRightSwapInRTL(context)) {
+            ColorEdges(
+                edgeColors[LogicalEdge.END.ordinal]
+                    ?: edgeColors[LogicalEdge.RIGHT.ordinal]
+                    ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal]
+                    ?: edgeColors[LogicalEdge.ALL.ordinal]
+                    ?: Color.BLACK,
+                edgeColors[LogicalEdge.BLOCK_START.ordinal]
+                    ?: edgeColors[LogicalEdge.TOP.ordinal]
+                    ?: edgeColors[LogicalEdge.BLOCK.ordinal]
+                    ?: edgeColors[LogicalEdge.VERTICAL.ordinal]
+                    ?: edgeColors[LogicalEdge.ALL.ordinal]
+                    ?: Color.BLACK,
+                edgeColors[LogicalEdge.START.ordinal]
+                    ?: edgeColors[LogicalEdge.LEFT.ordinal]
+                    ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal]
+                    ?: edgeColors[LogicalEdge.ALL.ordinal]
+                    ?: Color.BLACK,
+                edgeColors[LogicalEdge.BLOCK_END.ordinal]
+                    ?: edgeColors[LogicalEdge.BOTTOM.ordinal]
+                    ?: edgeColors[LogicalEdge.BLOCK.ordinal]
+                    ?: edgeColors[LogicalEdge.VERTICAL.ordinal]
+                    ?: edgeColors[LogicalEdge.ALL.ordinal]
+                    ?: Color.BLACK)
+          } else {
+            ColorEdges(
+                edgeColors[LogicalEdge.END.ordinal]
+                    ?: edgeColors[LogicalEdge.LEFT.ordinal]
+                    ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal]
+                    ?: edgeColors[LogicalEdge.ALL.ordinal]
+                    ?: Color.BLACK,
+                edgeColors[LogicalEdge.BLOCK_START.ordinal]
+                    ?: edgeColors[LogicalEdge.TOP.ordinal]
+                    ?: edgeColors[LogicalEdge.BLOCK.ordinal]
+                    ?: edgeColors[LogicalEdge.VERTICAL.ordinal]
+                    ?: edgeColors[LogicalEdge.ALL.ordinal]
+                    ?: Color.BLACK,
+                edgeColors[LogicalEdge.START.ordinal]
+                    ?: edgeColors[LogicalEdge.RIGHT.ordinal]
+                    ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal]
+                    ?: edgeColors[LogicalEdge.ALL.ordinal]
+                    ?: Color.BLACK,
+                edgeColors[LogicalEdge.BLOCK_END.ordinal]
+                    ?: edgeColors[LogicalEdge.BOTTOM.ordinal]
+                    ?: edgeColors[LogicalEdge.BLOCK.ordinal]
+                    ?: edgeColors[LogicalEdge.VERTICAL.ordinal]
+                    ?: edgeColors[LogicalEdge.ALL.ordinal]
+                    ?: Color.BLACK)
+          }
+      else -> throw IllegalArgumentException("Expected resolved layout direction")
+    }
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderRadiusStyle.kt

@@ -107,11 +107,11 @@ public data class BorderRadiusStyle(
       width: Float,
       height: Float,
   ): ComputedBorderRadius {
-    val zeroRadii: CornerRadii = CornerRadii(0f, 0f)
+    val zeroRadii = CornerRadii(0f, 0f)
 
     return when (layoutDirection) {
       LayoutDirection.LTR ->
-          ComputedBorderRadius(
+          ensureNoOverlap(
               topLeft =
                   (startStart ?: topStart ?: topLeft ?: uniform)?.resolve(width, height)
                       ?: zeroRadii,
@@ -123,10 +123,12 @@ public data class BorderRadiusStyle(
               bottomRight =
                   (endEnd ?: bottomEnd ?: bottomRight ?: uniform)?.resolve(width, height)
                       ?: zeroRadii,
+              width = width,
+              height = height,
           )
       LayoutDirection.RTL ->
           if (I18nUtil.instance.doLeftAndRightSwapInRTL(context)) {
-            ComputedBorderRadius(
+            ensureNoOverlap(
                 topLeft =
                     (endStart ?: topEnd ?: topRight ?: uniform)?.resolve(width, height)
                         ?: zeroRadii,
@@ -139,9 +141,11 @@ public data class BorderRadiusStyle(
                 bottomRight =
                     (startEnd ?: bottomEnd ?: bottomLeft ?: uniform)?.resolve(width, height)
                         ?: zeroRadii,
+                width = width,
+                height = height,
             )
           } else {
-            ComputedBorderRadius(
+            ensureNoOverlap(
                 topLeft =
                     (endStart ?: topEnd ?: topLeft ?: uniform)?.resolve(width, height) ?: zeroRadii,
                 topRight =
@@ -153,9 +157,54 @@ public data class BorderRadiusStyle(
                 bottomRight =
                     (startEnd ?: bottomEnd ?: bottomRight ?: uniform)?.resolve(width, height)
                         ?: zeroRadii,
+                width = width,
+                height = height,
             )
           }
       else -> throw IllegalArgumentException("Expected?.resolved layout direction")
     }
   }
+
+  /**
+   * "Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size
+   * of the border box, UAs must proportionally reduce the used values of all border radii until
+   * none of them overlap." Source: https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
+   */
+  private fun ensureNoOverlap(
+      topLeft: CornerRadii,
+      topRight: CornerRadii,
+      bottomLeft: CornerRadii,
+      bottomRight: CornerRadii,
+      width: Float,
+      height: Float
+  ): ComputedBorderRadius {
+    val leftInset = topLeft.horizontal + bottomLeft.horizontal
+    val topInset = topLeft.vertical + topRight.vertical
+    val rightInset = topRight.horizontal + bottomRight.horizontal
+    val bottomInset = bottomLeft.vertical + bottomRight.vertical
+
+    val leftInsetScale = if (leftInset > 0) minOf(1.0f, height / leftInset) else 0f
+    val topInsetScale = if (topInset > 0) minOf(1.0f, width / topInset) else 0f
+    val rightInsetScale = if (rightInset > 0) minOf(1.0f, height / rightInset) else 0f
+    val bottomInsetScale = if (bottomInset > 0) minOf(1.0f, width / bottomInset) else 0f
+
+    return ComputedBorderRadius(
+        topLeft =
+            CornerRadii(
+                topLeft.horizontal * minOf(topInsetScale, leftInsetScale),
+                topLeft.vertical * minOf(topInsetScale, leftInsetScale)),
+        topRight =
+            CornerRadii(
+                topRight.horizontal * minOf(topInsetScale, rightInsetScale),
+                topRight.vertical * minOf(topInsetScale, rightInsetScale)),
+        bottomLeft =
+            CornerRadii(
+                bottomLeft.horizontal * minOf(bottomInsetScale, leftInsetScale),
+                bottomLeft.vertical * minOf(bottomInsetScale, leftInsetScale)),
+        bottomRight =
+            CornerRadii(
+                bottomRight.horizontal * minOf(bottomInsetScale, rightInsetScale),
+                bottomRight.vertical * minOf(bottomInsetScale, rightInsetScale)),
+    )
+  }
 }

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BoxShadow.kt

@@ -7,8 +7,12 @@
 
 package com.facebook.react.uimanager.style
 
+import android.content.Context
 import androidx.annotation.ColorInt
+import com.facebook.react.bridge.ColorPropConverter
+import com.facebook.react.bridge.JSApplicationCausedNativeException
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
 
 /** Represents all logical properties and shorthands for border radius. */
 public data class BoxShadow(
@@ -21,15 +25,22 @@ public data class BoxShadow(
 ) {
   public companion object {
     @JvmStatic
-    public fun parse(boxShadow: ReadableMap): BoxShadow? {
-      if (!(boxShadow.hasKey("offsetX") && boxShadow.hasKey("offsetY"))) {
+    public fun parse(boxShadow: ReadableMap?, context: Context): BoxShadow? {
+      if (boxShadow == null || !(boxShadow.hasKey("offsetX") && boxShadow.hasKey("offsetY"))) {
         return null
       }
 
       val offsetX = boxShadow.getDouble("offsetX").toFloat()
       val offsetY = boxShadow.getDouble("offsetY").toFloat()
 
-      val color = if (boxShadow.hasKey("color")) boxShadow.getInt("color") else null
+      val color =
+          if (boxShadow.hasKey("color")) {
+            when (val type = boxShadow.getType("color")) {
+              ReadableType.Number -> boxShadow.getInt("color")
+              ReadableType.Map -> ColorPropConverter.getColor(boxShadow.getMap("color"), context)
+              else -> throw JSApplicationCausedNativeException("Unsupported color type ${type}")
+            }
+          } else null
       val blurRadius =
           if (boxShadow.hasKey("blurRadius")) boxShadow.getDouble("blurRadius").toFloat() else null
       val spreadDistance =

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/ComputedBorderRadius.kt

@@ -15,7 +15,7 @@ public enum class ComputedBorderRadiusProp {
   COMPUTED_BORDER_BOTTOM_LEFT_RADIUS,
 }
 
-/** Phsysical edge lengths (in DIPs) for a border-radius. */
+/** Physical edge lengths (in DIPs) for a border-radius. */
 public data class ComputedBorderRadius(
     val topLeft: CornerRadii,
     val topRight: CornerRadii,
@@ -32,6 +32,10 @@ public data class ComputedBorderRadius(
         bottomRight.horizontal > 0f
   }
 
+  public fun isUniform(): Boolean {
+    return topLeft == topRight && topLeft == bottomLeft && topLeft == bottomRight
+  }
+
   public fun get(property: ComputedBorderRadiusProp): CornerRadii {
     return when (property) {
       ComputedBorderRadiusProp.COMPUTED_BORDER_TOP_LEFT_RADIUS -> topLeft

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/Gradient.kt

@@ -7,23 +7,20 @@
 
 package com.facebook.react.uimanager.style
 
-import android.graphics.LinearGradient
+import android.content.Context
 import android.graphics.Rect
 import android.graphics.Shader
+import com.facebook.react.bridge.ColorPropConverter
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
 
-public class Gradient(gradient: ReadableMap?) {
+internal class Gradient(gradient: ReadableMap?, context: Context) {
   private enum class GradientType {
     LINEAR_GRADIENT
   }
 
   private val type: GradientType
-  private var startX: Float = 0f
-  private var startY: Float = 0f
-  private var endX: Float = 0f
-  private var endY: Float = 0f
-  private val colors: IntArray
-  private val positions: FloatArray
+  private val linearGradient: LinearGradient
 
   init {
     gradient ?: throw IllegalArgumentException("Gradient cannot be null")
@@ -35,42 +32,36 @@ public class Gradient(gradient: ReadableMap?) {
           else -> throw IllegalArgumentException("Unsupported gradient type: $typeString")
         }
 
-    gradient.getMap("start")?.let { start ->
-      startX = start.getDouble("x").toFloat()
-      startY = start.getDouble("y").toFloat()
-    }
-
-    gradient.getMap("end")?.let { end ->
-      endX = end.getDouble("x").toFloat()
-      endY = end.getDouble("y").toFloat()
-    }
+    val directionMap =
+        gradient.getMap("direction")
+            ?: throw IllegalArgumentException("Gradient must have direction")
 
     val colorStops =
         gradient.getArray("colorStops")
             ?: throw IllegalArgumentException("Invalid colorStops array")
 
     val size = colorStops.size()
-    colors = IntArray(size)
-    positions = FloatArray(size)
+    val colors = IntArray(size)
+    val positions = FloatArray(size)
 
     for (i in 0 until size) {
-      val colorStop = colorStops.getMap(i)
-      colors[i] = colorStop.getInt("color")
+      val colorStop = colorStops.getMap(i) ?: continue
+      colors[i] =
+          if (colorStop.getType("color") == ReadableType.Map) {
+            ColorPropConverter.getColor(colorStop.getMap("color"), context)
+          } else {
+            colorStop.getInt("color")
+          }
       positions[i] = colorStop.getDouble("position").toFloat()
     }
+
+    linearGradient = LinearGradient(directionMap, colors, positions)
   }
 
   public fun getShader(bounds: Rect): Shader? {
     return when (type) {
       GradientType.LINEAR_GRADIENT ->
-          LinearGradient(
-              startX * bounds.width(),
-              startY * bounds.height(),
-              endX * bounds.width(),
-              endY * bounds.height(),
-              colors,
-              positions,
-              Shader.TileMode.CLAMP)
+          linearGradient.getShader(bounds.width().toFloat(), bounds.height().toFloat())
     }
   }
 }

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/LinearGradient.kt

@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager.style
+
+import android.graphics.LinearGradient as AndroidLinearGradient
+import android.graphics.Shader
+import com.facebook.react.bridge.ReadableMap
+import kotlin.math.atan
+import kotlin.math.tan
+
+internal class LinearGradient(
+    directionMap: ReadableMap,
+    private val colors: IntArray,
+    private val positions: FloatArray
+) {
+  private sealed class Direction {
+    public data class Angle(val value: Double) : Direction()
+
+    enum class Keywords {
+      TO_TOP_RIGHT,
+      TO_BOTTOM_RIGHT,
+      TO_TOP_LEFT,
+      TO_BOTTOM_LEFT
+    }
+
+    public data class Keyword(val value: Keywords) : Direction()
+  }
+
+  private val direction: Direction =
+      when (val type = directionMap.getString("type")) {
+        "angle" -> {
+          val angle = directionMap.getDouble("value")
+          Direction.Angle(angle)
+        }
+
+        "keyword" -> {
+          val keyword =
+              when (directionMap.getString("value")) {
+                "to top right" -> Direction.Keywords.TO_TOP_RIGHT
+                "to bottom right" -> Direction.Keywords.TO_BOTTOM_RIGHT
+                "to top left" -> Direction.Keywords.TO_TOP_LEFT
+                "to bottom left" -> Direction.Keywords.TO_BOTTOM_LEFT
+                else ->
+                    throw IllegalArgumentException(
+                        "Invalid linear gradient direction keyword: ${directionMap.getString("value")}")
+              }
+          Direction.Keyword(keyword)
+        }
+
+        else -> throw IllegalArgumentException("Invalid direction type: $type")
+      }
+
+  public fun getShader(width: Float, height: Float): Shader {
+    val angle =
+        when (direction) {
+          is Direction.Angle -> direction.value
+          is Direction.Keyword ->
+              getAngleForKeyword(direction.value, width.toDouble(), height.toDouble())
+        }
+    val (startPoint, endPoint) = endPointsFromAngle(angle, height, width)
+    return AndroidLinearGradient(
+        startPoint[0],
+        startPoint[1],
+        endPoint[0],
+        endPoint[1],
+        colors,
+        positions,
+        Shader.TileMode.CLAMP)
+  }
+
+  // Spec: https://www.w3.org/TR/css-images-3/#linear-gradient-syntax
+  // Refer `using keywords` section
+  private fun getAngleForKeyword(
+      keyword: Direction.Keywords,
+      width: Double,
+      height: Double
+  ): Double {
+    return when (keyword) {
+      Direction.Keywords.TO_TOP_RIGHT -> {
+        val angleDeg = Math.toDegrees(atan(width / height))
+        90 - angleDeg
+      }
+      Direction.Keywords.TO_BOTTOM_RIGHT -> Math.toDegrees(atan(width / height)) + 90
+      Direction.Keywords.TO_TOP_LEFT -> Math.toDegrees(atan(width / height)) + 270
+      Direction.Keywords.TO_BOTTOM_LEFT -> Math.toDegrees(atan(height / width)) + 180
+    }
+  }
+
+  // Spec: https://www.w3.org/TR/css-images-3/#linear-gradient-syntax
+  // Reference:
+  // https://github.com/chromium/chromium/blob/d32abbe13f5d52be7127fe25d5b778498165fab8/third_party/blink/renderer/core/css/css_gradient_value.cc#L1057
+  private fun endPointsFromAngle(
+      angle: Double,
+      height: Float,
+      width: Float
+  ): Pair<FloatArray, FloatArray> {
+    var adjustedAngle = angle % 360
+    if (adjustedAngle < 0) {
+      adjustedAngle += 360
+    }
+
+    when (adjustedAngle) {
+      0.0 -> return Pair(floatArrayOf(0f, height), floatArrayOf(0f, 0f))
+      90.0 -> return Pair(floatArrayOf(0f, 0f), floatArrayOf(width, 0f))
+      180.0 -> return Pair(floatArrayOf(0f, 0f), floatArrayOf(0f, height))
+      270.0 -> return Pair(floatArrayOf(width, 0f), floatArrayOf(0f, 0f))
+    }
+
+    val slope = tan(Math.toRadians((90 - adjustedAngle))).toFloat()
+    val perpendicularSlope = -1 / slope
+
+    val halfHeight = height / 2
+    val halfWidth = width / 2
+
+    val endCorner =
+        when {
+          adjustedAngle < 90 -> floatArrayOf(halfWidth, halfHeight)
+          adjustedAngle < 180 -> floatArrayOf(halfWidth, -halfHeight)
+          adjustedAngle < 270 -> floatArrayOf(-halfWidth, -halfHeight)
+          else -> floatArrayOf(-halfWidth, halfHeight)
+        }
+
+    val c = endCorner[1] - perpendicularSlope * endCorner[0]
+    val endX = c / (slope - perpendicularSlope)
+    val endY = perpendicularSlope * endX + c
+
+    val secondPoint = floatArrayOf(halfWidth + endX, halfHeight - endY)
+    val firstPoint = floatArrayOf(halfWidth - endX, halfHeight + endY)
+
+    return Pair(firstPoint, secondPoint)
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/OutlineStyle.kt

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager.style
+
+public enum class OutlineStyle {
+  SOLID,
+  DASHED,
+  DOTTED;
+
+  public companion object {
+    @JvmStatic
+    public fun fromString(outlineStyle: String): OutlineStyle? {
+      return when (outlineStyle.lowercase()) {
+        "solid" -> SOLID
+        "dashed" -> DASHED
+        "dotted" -> DOTTED
+        else -> null
+      }
+    }
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/util/ReactFindViewUtil.kt

@@ -0,0 +1,129 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager.util
+
+import android.view.View
+import android.view.ViewGroup
+import com.facebook.react.R
+import java.util.ArrayList
+import java.util.HashMap
+
+/** Finds views in React Native view hierarchies */
+public object ReactFindViewUtil {
+
+  private val onViewFoundListeners: MutableList<OnViewFoundListener> = ArrayList()
+  private val onMultipleViewsFoundListener: MutableMap<OnMultipleViewsFoundListener, Set<String>> =
+      HashMap()
+
+  /** Callback to be invoked when a react native view has been found */
+  public interface OnViewFoundListener {
+    /** Returns the native id of the view of interest */
+    public fun getNativeId(): String
+
+    /**
+     * Called when the view has been found
+     *
+     * @param view
+     */
+    public fun onViewFound(view: View)
+  }
+
+  /** Callback to be invoked when all react native views with geiven NativeIds have been found */
+  public fun interface OnMultipleViewsFoundListener {
+    public fun onViewFound(view: View, nativeId: String)
+  }
+
+  /**
+   * Finds a view that is tagged with {@param nativeId} as its nativeID prop under the {@param root}
+   * view hierarchy. Returns the view if found, null otherwise.
+   *
+   * @param root root of the view hierarchy from which to find the view
+   */
+  @JvmStatic
+  public fun findView(root: View, nativeId: String): View? {
+    if (getNativeId(root) == nativeId) {
+      return root
+    }
+
+    if (root is ViewGroup) {
+      for (i in 0..<root.childCount) {
+        val view = findView(root.getChildAt(i), nativeId)
+        if (view != null) {
+          return view
+        }
+      }
+    }
+
+    return null
+  }
+
+  /**
+   * Finds a view tagged with {@param onViewFoundListener}'s nativeID in the given {@param root}
+   * view hierarchy. If the view does not exist yet due to React Native's async layout, a listener
+   * will be added. When the view is found, the {@param onViewFoundListener} will be invoked.
+   *
+   * @param root root of the view hierarchy from which to find the view
+   */
+  @JvmStatic
+  public fun findView(root: View, onViewFoundListener: OnViewFoundListener): Unit {
+    val view = findView(root, onViewFoundListener.getNativeId())
+    if (view != null) {
+      onViewFoundListener.onViewFound(view)
+    }
+    addViewListener(onViewFoundListener)
+  }
+
+  /**
+   * Registers an OnViewFoundListener to be invoked when a view with a matching nativeID is found.
+   * Remove this listener using removeViewListener() if it's no longer needed.
+   */
+  @JvmStatic
+  public fun addViewListener(onViewFoundListener: OnViewFoundListener): Unit {
+    onViewFoundListeners.add(onViewFoundListener)
+  }
+
+  /** Removes an OnViewFoundListener previously registered with addViewListener(). */
+  @JvmStatic
+  public fun removeViewListener(onViewFoundListener: OnViewFoundListener): Unit {
+    onViewFoundListeners.remove(onViewFoundListener)
+  }
+
+  @JvmStatic
+  public fun addViewsListener(listener: OnMultipleViewsFoundListener, ids: Set<String>): Unit {
+    onMultipleViewsFoundListener[listener] = ids
+  }
+
+  @JvmStatic
+  public fun removeViewsListener(listener: OnMultipleViewsFoundListener): Unit {
+    onMultipleViewsFoundListener.remove(listener)
+  }
+
+  /** Invokes any listeners that are listening on this {@param view}'s native id */
+  @JvmStatic
+  public fun notifyViewRendered(view: View): Unit {
+    val nativeId = getNativeId(view) ?: return
+    val iterator = onViewFoundListeners.iterator()
+    while (iterator.hasNext()) {
+      val listener = iterator.next()
+      if (nativeId == listener.getNativeId()) {
+        listener.onViewFound(view)
+        iterator.remove()
+      }
+    }
+    onMultipleViewsFoundListener.forEach { (listener, nativeIds) ->
+      if (nativeId in nativeIds) {
+        listener.onViewFound(view, nativeId)
+      }
+    }
+  }
+
+  private fun getNativeId(view: View): String? {
+    val tag = view.getTag(R.id.view_tag_native_id)
+    return tag as? String
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/util/JSStackTrace.kt

@@ -24,7 +24,7 @@ public object JSStackTrace {
   public fun format(message: String, stack: ReadableArray): String {
     val stringBuilder = StringBuilder(message).append(", stack:\n")
     for (i in 0 until stack.size()) {
-      val frame = stack.getMap(i)
+      val frame = stack.getMap(i) ?: continue
       stringBuilder.append(frame.getString(METHOD_NAME_KEY)).append("@").append(parseFileId(frame))
       if (frame.hasKey(LINE_NUMBER_KEY) &&
           !frame.isNull(LINE_NUMBER_KEY) &&

package/ReactAndroid/src/main/java/com/facebook/react/views/common/ContextUtils.kt

@@ -38,6 +38,7 @@ public object ContextUtils {
         return null
       }
     }
-    @Suppress("UNCHECKED_CAST") return currentContext as T?
+    @Suppress("UNCHECKED_CAST")
+    return currentContext as T?
   }
 }