Fix scaled and clipped Android safe-area insets (#58997)

Summary:
Pull Request resolved: #58997

Safe-area insets measure how far a view's rendered bounds extend into the unsafe area, in Android dp or iOS points. Views with the same rendered bounds should report the same insets, regardless of scale or content padding. Fix Android's calculation to use the full transformed bounds instead of mixing a clipped origin with untransformed dimensions, and preserve fractional values through the single density conversion. The example compares a 1× root and a 2× observer without applying padding. iOS native behavior is unchanged.

Changelog:
[Android][Fixed] - Correct safe-area inset measurements for scaled views and views clipped by ancestors.

Reviewed By: fkgozali

Differential Revision: D124663000

fbshipit-source-id: 84a9ff162ec428e8e98f12d51f0baa2bfad0f060

Author: Abbondanzo

packages/react-native/Libraries/Components/View/ViewPropTypes.js

@@ -65,20 +65,18 @@ type DirectEventProps = Readonly<{
   onLayout?: ?(event: LayoutChangeEvent) => unknown,
 
   /**
-   * Invoked when the part of this view that is covered by the system UI
-   * (status bar, navigation bar, home indicator, display cutouts, ...)
-   * changes, with:
+   * Invoked when this view's safe-area insets change, with:
    *
    * `{nativeEvent: {insets: {top, right, bottom, left}}}`
    *
-   * `insets` are relative to this view: an inset is only non-zero for the part
-   * of the view that actually overlaps the system UI.
+   * `insets` measure how far the view extends into the unsafe area, in points
+   * on iOS and dp on Android, not display pixels. Content padding does not
+   * affect them.
    *
-   * The event is dispatched synchronously, so the rendering it schedules is
-   * applied in the same frame the insets changed in.
+   * Android accounts for scaling and ignores ancestor clipping. Rotation,
+   * skew, and perspective are unsupported; fully clipped views emit no updates.
    *
-   * Setting this prop makes the view observe safe area changes; views without
-   * it are unaffected.
+   * Dispatched synchronously so rendering updates apply in the same frame.
    *
    * @experimental
    */

packages/react-native/Libraries/Types/CoreEventTypes.js

@@ -86,8 +86,7 @@ export type SafeAreaInsets = Readonly<{
 export type SafeAreaInsetsChangeEvent = NativeSyntheticEvent<
   Readonly<{
     /**
-     * The part of the view that is covered by the system UI, in the view's own
-     * coordinate space.
+     * Inset measurements in points (iOS) or dp (Android), not display pixels.
      */
     insets: SafeAreaInsets,
   }>,

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/events/SafeAreaInsetsChangeEvent.kt

@@ -20,10 +20,10 @@ import com.facebook.react.uimanager.PixelUtil.pxToDp
 internal class SafeAreaInsetsChangeEvent(
     surfaceId: Int,
     viewTag: Int,
-    private val insetTop: Int,
-    private val insetRight: Int,
-    private val insetBottom: Int,
-    private val insetLeft: Int,
+    private val insetTop: Float,
+    private val insetRight: Float,
+    private val insetBottom: Float,
+    private val insetLeft: Float,
 ) : Event<SafeAreaInsetsChangeEvent>(surfaceId, viewTag) {
 
   override fun getEventName(): String = EVENT_NAME
@@ -46,6 +46,6 @@ internal class SafeAreaInsetsChangeEvent(
   internal companion object {
     const val EVENT_NAME: String = "topSafeAreaInsetsChange"
 
-    private fun Int.toDp(): Double = toFloat().pxToDp().toDouble()
+    private fun Float.toDp(): Double = pxToDp().toDouble()
   }
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/internal/SafeAreaInsetsObserver.kt

@@ -7,7 +7,9 @@
 
 package com.facebook.react.uimanager.internal
 
+import android.graphics.Matrix
 import android.graphics.Rect
+import android.graphics.RectF
 import android.view.View
 import android.view.ViewTreeObserver
 import androidx.core.graphics.Insets
@@ -16,19 +18,18 @@ import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.R
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.SafeAreaInsetsChangeEvent
-import kotlin.math.max
-import kotlin.math.min
+import kotlin.math.roundToInt
 
 /**
- * Observes the part of a view that is covered by the system UI, and emits
- * [SafeAreaInsetsChangeEvent] whenever it changes.
+ * Observes the part of a view covered by system UI, and emits [SafeAreaInsetsChangeEvent] whenever
+ * it changes.
  */
 internal class SafeAreaInsetsObserver private constructor(private val view: View) :
     ViewTreeObserver.OnPreDrawListener, View.OnAttachStateChangeListener {
 
-  private val visibleRect = Rect()
-  private val insets = IntArray(4)
-  private val lastInsets = IntArray(4)
+  private val geometry = Geometry()
+  private val insets = FloatArray(4)
+  private val lastInsets = FloatArray(4)
 
   private var hasLastInsets = false
   private var isListening = false
@@ -72,6 +73,7 @@ internal class SafeAreaInsetsObserver private constructor(private val view: View
 
   override fun onViewDetachedFromWindow(v: View) {
     stopListening()
+    hasLastInsets = false
   }
 
   override fun onPreDraw(): Boolean {
@@ -83,7 +85,8 @@ internal class SafeAreaInsetsObserver private constructor(private val view: View
     // Emitting on anything but an inset change would loop: the synchronous
     // render an event causes produces a new frame, which runs this listener
     // again.
-    if (!computeSafeAreaInsets(view, visibleRect, insets)) {
+    if (!computeSafeAreaInsets(view, geometry, insets)) {
+      hasLastInsets = false
       return
     }
     if (hasLastInsets && insets.contentEquals(lastInsets)) {
@@ -107,6 +110,13 @@ internal class SafeAreaInsetsObserver private constructor(private val view: View
     )
   }
 
+  private class Geometry {
+    val visibleRect = Rect()
+    val toRoot = Matrix()
+    val boundsRect = RectF()
+    val matrixValues = FloatArray(9)
+  }
+
   companion object {
     private const val TOP = 0
     private const val RIGHT = 1
@@ -131,46 +141,105 @@ internal class SafeAreaInsetsObserver private constructor(private val view: View
     }
 
     /**
-     * The insets of the window that overlap [view], in the view's own coordinate space. A view that
-     * does not reach under the system UI has no insets.
+     * Insets from [view]'s full transformed bounds to the window safe area, in window physical
+     * pixels, rounded to integers. Ancestor clipping is only a visibility check, not a change to
+     * those bounds. Returns null for empty/fully clipped views, missing window insets, or
+     * unsupported transforms. The event preserves fractional pixels and converts them to dp.
      */
     @JvmStatic
     fun getSafeAreaInsets(view: View): Insets? {
-      val insets = IntArray(4)
-      if (!computeSafeAreaInsets(view, Rect(), insets)) {
+      val insets = FloatArray(4)
+      if (!computeSafeAreaInsets(view, Geometry(), insets)) {
         return null
       }
-      return Insets.of(insets[LEFT], insets[TOP], insets[RIGHT], insets[BOTTOM])
+      return Insets.of(
+          insets[LEFT].roundToInt(),
+          insets[TOP].roundToInt(),
+          insets[RIGHT].roundToInt(),
+          insets[BOTTOM].roundToInt(),
+      )
     }
 
     /**
-     * Writes the insets of [view] into [out], ordered [TOP], [RIGHT], [BOTTOM], [LEFT], using
-     * [visibleRect] as scratch space. Returns false when they cannot be computed, leaving [out]
-     * untouched.
+     * Writes window physical-pixel insets into [out], ordered [TOP], [RIGHT], [BOTTOM], [LEFT].
+     * Returns false when they cannot be computed, leaving [out] untouched.
      */
-    private fun computeSafeAreaInsets(view: View, visibleRect: Rect, out: IntArray): Boolean {
-      if (view.width == 0 || view.height == 0) {
+    private fun computeSafeAreaInsets(view: View, geometry: Geometry, out: FloatArray): Boolean {
+      if (view.width <= 0 || view.height <= 0) {
         return false
       }
       val rootView = view.rootView
+      if (rootView.width <= 0 || rootView.height <= 0) {
+        return false
+      }
       val windowInsets =
           ViewCompat.getRootWindowInsets(rootView)
               ?.getInsets(
                   WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout(),
               ) ?: return false
 
-      if (!view.getGlobalVisibleRect(visibleRect)) {
+      if (!view.getGlobalVisibleRect(geometry.visibleRect)) {
         // The view is fully clipped by an ancestor (e.g. scrolled out of a
         // scroll view); the rect is undefined in that case, and a view that is
         // not visible has no meaningful insets.
         return false
       }
-      out[TOP] = max(windowInsets.top - visibleRect.top, 0)
-      out[RIGHT] =
-          max(min(visibleRect.left + view.width - rootView.width, 0) + windowInsets.right, 0)
-      out[BOTTOM] =
-          max(min(visibleRect.top + view.height - rootView.height, 0) + windowInsets.bottom, 0)
-      out[LEFT] = max(windowInsets.left - visibleRect.left, 0)
+
+      val toRoot = geometry.toRoot
+      toRoot.reset()
+      var current = view
+      while (current !== rootView) {
+        val parent = current.parent as? View ?: return false
+        toRoot.postConcat(current.matrix)
+        toRoot.postTranslate(
+            (current.left - parent.scrollX).toFloat(),
+            (current.top - parent.scrollY).toFloat(),
+        )
+        current = parent
+      }
+      toRoot.getValues(geometry.matrixValues)
+      if (
+          geometry.matrixValues.any { !it.isFinite() } ||
+              geometry.matrixValues[Matrix.MSKEW_X] != 0f ||
+              geometry.matrixValues[Matrix.MSKEW_Y] != 0f ||
+              geometry.matrixValues[Matrix.MPERSP_0] != 0f ||
+              geometry.matrixValues[Matrix.MPERSP_1] != 0f ||
+              geometry.matrixValues[Matrix.MPERSP_2] != 1f ||
+              geometry.matrixValues[Matrix.MSCALE_X] == 0f ||
+              geometry.matrixValues[Matrix.MSCALE_Y] == 0f
+      ) {
+        return false
+      }
+
+      val safeLeft = windowInsets.left.toFloat()
+      val safeTop = windowInsets.top.toFloat()
+      val safeRight = (rootView.width - windowInsets.right).toFloat()
+      val safeBottom = (rootView.height - windowInsets.bottom).toFloat()
+      if (safeRight <= safeLeft || safeBottom <= safeTop) {
+        return false
+      }
+      val bounds = geometry.boundsRect
+      bounds.set(0f, 0f, view.width.toFloat(), view.height.toFloat())
+      // mapRect returns ordered bounding edges, including under reflection.
+      toRoot.mapRect(bounds)
+      val width = bounds.width()
+      val height = bounds.height()
+      if (
+          !bounds.left.isFinite() ||
+              !bounds.top.isFinite() ||
+              !bounds.right.isFinite() ||
+              !bounds.bottom.isFinite() ||
+              !width.isFinite() ||
+              !height.isFinite() ||
+              width <= 0f ||
+              height <= 0f
+      ) {
+        return false
+      }
+      out[TOP] = (safeTop - bounds.top).coerceIn(0f, height)
+      out[RIGHT] = (bounds.right - safeRight).coerceIn(0f, width)
+      out[BOTTOM] = (bounds.bottom - safeBottom).coerceIn(0f, height)
+      out[LEFT] = (safeLeft - bounds.left).coerceIn(0f, width)
       return true
     }
   }