react-native-tvos 0.75.4-0 → 0.76.0-0

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/SimpleSpringInterpolator.kt

@@ -0,0 +1,48 @@
+/*
+ * 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.layoutanimation
+
+import android.view.animation.Interpolator
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
+import com.facebook.react.bridge.ReadableType.Number
+
+/** Simple spring interpolator */
+// TODO(7613736): Improve spring interpolator with friction and damping variable support
+/* package */
+internal class SimpleSpringInterpolator : Interpolator {
+  private val _springDamping: Float
+
+  @JvmOverloads
+  public constructor(springDamping: Float = FACTOR) {
+    _springDamping = springDamping
+  }
+
+  override public fun getInterpolation(input: Float): Float =
+      // Using mSpringDamping in this equation is not really the exact mathematical springDamping,
+      // but a good approximation
+      // We need to replace this equation with the right Factor that accounts for damping and
+      // friction
+      (1 +
+              Math.pow(2.0, (-10 * input).toDouble()) *
+                  Math.sin((input - _springDamping / 4) * Math.PI * 2 / _springDamping))
+          .toFloat()
+
+  public companion object {
+    private const val FACTOR = 0.5f
+    public const val PARAM_SPRING_DAMPING: String = "springDamping"
+
+    @JvmStatic
+    public fun getSpringDamping(params: ReadableMap): Float =
+        if (params.getType(PARAM_SPRING_DAMPING) == ReadableType.Number) {
+          params.getDouble(PARAM_SPRING_DAMPING).toFloat()
+        } else {
+          FACTOR
+        }
+  }
+}

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

@@ -0,0 +1,28 @@
+/*
+ * 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.Rect
+import android.graphics.Shader
+import com.facebook.react.bridge.ReadableMap
+
+public class BackgroundImageLayer(gradientMap: ReadableMap?) {
+  private val gradient: Gradient? =
+      if (gradientMap != null) {
+        try {
+          Gradient(gradientMap)
+        } catch (e: IllegalArgumentException) {
+          // Gracefully reject invalid styles
+          null
+        }
+      } else {
+        null
+      }
+
+  public fun getShader(bounds: Rect): Shader? = gradient?.getShader(bounds)
+}

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

@@ -0,0 +1,105 @@
+/*
+ * 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.RectF
+import android.util.LayoutDirection
+import com.facebook.react.modules.i18nmanager.I18nUtil
+
+/** Represents the insets from border pox to padding box (i.e. border widths) */
+internal class BorderInsets {
+  private val edgeInsets = arrayOfNulls<Float?>(LogicalEdge.values().size)
+
+  public fun setBorderWidth(edge: LogicalEdge, width: Float?) {
+    edgeInsets[edge.ordinal] = width
+  }
+
+  public fun resolve(
+      layoutDirection: Int,
+      context: Context,
+  ): RectF {
+    return when (layoutDirection) {
+      LayoutDirection.LTR ->
+          RectF(
+              edgeInsets[LogicalEdge.START.ordinal]
+                  ?: edgeInsets[LogicalEdge.LEFT.ordinal]
+                  ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal]
+                  ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                  ?: 0f,
+              edgeInsets[LogicalEdge.BLOCK_START.ordinal]
+                  ?: edgeInsets[LogicalEdge.TOP.ordinal]
+                  ?: edgeInsets[LogicalEdge.BLOCK.ordinal]
+                  ?: edgeInsets[LogicalEdge.VERTICAL.ordinal]
+                  ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                  ?: 0f,
+              edgeInsets[LogicalEdge.END.ordinal]
+                  ?: edgeInsets[LogicalEdge.RIGHT.ordinal]
+                  ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal]
+                  ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                  ?: 0f,
+              edgeInsets[LogicalEdge.BLOCK_END.ordinal]
+                  ?: edgeInsets[LogicalEdge.BOTTOM.ordinal]
+                  ?: edgeInsets[LogicalEdge.BLOCK.ordinal]
+                  ?: edgeInsets[LogicalEdge.VERTICAL.ordinal]
+                  ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                  ?: 0f)
+      LayoutDirection.RTL ->
+          if (I18nUtil.instance.doLeftAndRightSwapInRTL(context)) {
+            RectF(
+                edgeInsets[LogicalEdge.END.ordinal]
+                    ?: edgeInsets[LogicalEdge.RIGHT.ordinal]
+                    ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal]
+                    ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                    ?: 0f,
+                edgeInsets[LogicalEdge.BLOCK_START.ordinal]
+                    ?: edgeInsets[LogicalEdge.TOP.ordinal]
+                    ?: edgeInsets[LogicalEdge.BLOCK.ordinal]
+                    ?: edgeInsets[LogicalEdge.VERTICAL.ordinal]
+                    ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                    ?: 0f,
+                edgeInsets[LogicalEdge.START.ordinal]
+                    ?: edgeInsets[LogicalEdge.LEFT.ordinal]
+                    ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal]
+                    ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                    ?: 0f,
+                edgeInsets[LogicalEdge.BLOCK_END.ordinal]
+                    ?: edgeInsets[LogicalEdge.BOTTOM.ordinal]
+                    ?: edgeInsets[LogicalEdge.BLOCK.ordinal]
+                    ?: edgeInsets[LogicalEdge.VERTICAL.ordinal]
+                    ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                    ?: 0f)
+          } else {
+            RectF(
+                edgeInsets[LogicalEdge.END.ordinal]
+                    ?: edgeInsets[LogicalEdge.LEFT.ordinal]
+                    ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal]
+                    ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                    ?: 0f,
+                edgeInsets[LogicalEdge.BLOCK_START.ordinal]
+                    ?: edgeInsets[LogicalEdge.TOP.ordinal]
+                    ?: edgeInsets[LogicalEdge.BLOCK.ordinal]
+                    ?: edgeInsets[LogicalEdge.VERTICAL.ordinal]
+                    ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                    ?: 0f,
+                edgeInsets[LogicalEdge.START.ordinal]
+                    ?: edgeInsets[LogicalEdge.RIGHT.ordinal]
+                    ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal]
+                    ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                    ?: 0f,
+                edgeInsets[LogicalEdge.BLOCK_END.ordinal]
+                    ?: edgeInsets[LogicalEdge.BOTTOM.ordinal]
+                    ?: edgeInsets[LogicalEdge.BLOCK.ordinal]
+                    ?: edgeInsets[LogicalEdge.VERTICAL.ordinal]
+                    ?: edgeInsets[LogicalEdge.ALL.ordinal]
+                    ?: 0f)
+          }
+      else -> throw IllegalArgumentException("Expected resolved layout direction")
+    }
+  }
+}

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

@@ -107,37 +107,52 @@ public data class BorderRadiusStyle(
       width: Float,
       height: Float,
   ): ComputedBorderRadius {
+    val zeroRadii: CornerRadii = CornerRadii(0f, 0f)
+
     return when (layoutDirection) {
       LayoutDirection.LTR ->
           ComputedBorderRadius(
               topLeft =
-                  (startStart ?: topStart ?: topLeft ?: uniform)?.resolve(width, height) ?: 0f,
-              topRight = (endStart ?: topEnd ?: topRight ?: uniform)?.resolve(width, height) ?: 0f,
+                  (startStart ?: topStart ?: topLeft ?: uniform)?.resolve(width, height)
+                      ?: zeroRadii,
+              topRight =
+                  (endStart ?: topEnd ?: topRight ?: uniform)?.resolve(width, height) ?: zeroRadii,
               bottomLeft =
-                  (startEnd ?: bottomStart ?: bottomLeft ?: uniform)?.resolve(width, height) ?: 0f,
+                  (startEnd ?: bottomStart ?: bottomLeft ?: uniform)?.resolve(width, height)
+                      ?: zeroRadii,
               bottomRight =
-                  (endEnd ?: bottomEnd ?: bottomRight ?: uniform)?.resolve(width, height) ?: 0f,
+                  (endEnd ?: bottomEnd ?: bottomRight ?: uniform)?.resolve(width, height)
+                      ?: zeroRadii,
           )
       LayoutDirection.RTL ->
           if (I18nUtil.instance.doLeftAndRightSwapInRTL(context)) {
             ComputedBorderRadius(
-                topLeft = (endStart ?: topEnd ?: topRight ?: uniform)?.resolve(width, height) ?: 0f,
+                topLeft =
+                    (endStart ?: topEnd ?: topRight ?: uniform)?.resolve(width, height)
+                        ?: zeroRadii,
                 topRight =
-                    (startStart ?: topStart ?: topLeft ?: uniform)?.resolve(width, height) ?: 0f,
+                    (startStart ?: topStart ?: topLeft ?: uniform)?.resolve(width, height)
+                        ?: zeroRadii,
                 bottomLeft =
-                    (endEnd ?: bottomStart ?: bottomRight ?: uniform)?.resolve(width, height) ?: 0f,
+                    (endEnd ?: bottomStart ?: bottomRight ?: uniform)?.resolve(width, height)
+                        ?: zeroRadii,
                 bottomRight =
-                    (startEnd ?: bottomEnd ?: bottomLeft ?: uniform)?.resolve(width, height) ?: 0f,
+                    (startEnd ?: bottomEnd ?: bottomLeft ?: uniform)?.resolve(width, height)
+                        ?: zeroRadii,
             )
           } else {
             ComputedBorderRadius(
-                topLeft = (endStart ?: topEnd ?: topLeft ?: uniform)?.resolve(width, height) ?: 0f,
+                topLeft =
+                    (endStart ?: topEnd ?: topLeft ?: uniform)?.resolve(width, height) ?: zeroRadii,
                 topRight =
-                    (startStart ?: topStart ?: topRight ?: uniform)?.resolve(width, height) ?: 0f,
+                    (startStart ?: topStart ?: topRight ?: uniform)?.resolve(width, height)
+                        ?: zeroRadii,
                 bottomLeft =
-                    (endEnd ?: bottomStart ?: bottomLeft ?: uniform)?.resolve(width, height) ?: 0f,
+                    (endEnd ?: bottomStart ?: bottomLeft ?: uniform)?.resolve(width, height)
+                        ?: zeroRadii,
                 bottomRight =
-                    (startEnd ?: bottomEnd ?: bottomRight ?: uniform)?.resolve(width, height) ?: 0f,
+                    (startEnd ?: bottomEnd ?: bottomRight ?: uniform)?.resolve(width, height)
+                        ?: zeroRadii,
             )
           }
       else -> throw IllegalArgumentException("Expected?.resolved layout direction")

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderStyle.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 BorderStyle {
+  SOLID,
+  DASHED,
+  DOTTED;
+
+  public companion object {
+    @JvmStatic
+    public fun fromString(borderStyle: String): BorderStyle? {
+      return when (borderStyle.lowercase()) {
+        "solid" -> SOLID
+        "dashed" -> DASHED
+        "dotted" -> DOTTED
+        else -> null
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+/*
+ * 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 androidx.annotation.ColorInt
+import com.facebook.react.bridge.ReadableMap
+
+/** Represents all logical properties and shorthands for border radius. */
+public data class BoxShadow(
+    val offsetX: Float,
+    val offsetY: Float,
+    @ColorInt val color: Int? = null,
+    val blurRadius: Float? = null,
+    val spreadDistance: Float? = null,
+    val inset: Boolean? = null,
+) {
+  public companion object {
+    @JvmStatic
+    public fun parse(boxShadow: ReadableMap): BoxShadow? {
+      if (!(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 blurRadius =
+          if (boxShadow.hasKey("blurRadius")) boxShadow.getDouble("blurRadius").toFloat() else null
+      val spreadDistance =
+          if (boxShadow.hasKey("spreadDistance")) boxShadow.getDouble("spreadDistance").toFloat()
+          else null
+      val inset = if (boxShadow.hasKey("inset")) boxShadow.getBoolean("inset") else null
+
+      return BoxShadow(
+          offsetX = offsetX,
+          offsetY = offsetY,
+          color = color,
+          blurRadius = blurRadius,
+          spreadDistance = spreadDistance,
+          inset = inset,
+      )
+    }
+  }
+}

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

@@ -7,16 +7,40 @@
 
 package com.facebook.react.uimanager.style
 
+/** Represents the collection of possible computed border radius style properties. */
+public enum class ComputedBorderRadiusProp {
+  COMPUTED_BORDER_TOP_LEFT_RADIUS,
+  COMPUTED_BORDER_TOP_RIGHT_RADIUS,
+  COMPUTED_BORDER_BOTTOM_RIGHT_RADIUS,
+  COMPUTED_BORDER_BOTTOM_LEFT_RADIUS,
+}
+
 /** Phsysical edge lengths (in DIPs) for a border-radius. */
 public data class ComputedBorderRadius(
-    val topLeft: Float,
-    val topRight: Float,
-    val bottomLeft: Float,
-    val bottomRight: Float,
+    val topLeft: CornerRadii,
+    val topRight: CornerRadii,
+    val bottomLeft: CornerRadii,
+    val bottomRight: CornerRadii,
 ) {
   public fun hasRoundedBorders(): Boolean {
-    return topLeft > 0f || topRight > 0f || bottomLeft > 0f || bottomRight > 0f
+    return topLeft.horizontal > 0f ||
+        topLeft.vertical > 0f ||
+        topRight.horizontal > 0f ||
+        topRight.vertical > 0f ||
+        bottomLeft.horizontal > 0f ||
+        bottomLeft.vertical > 0f ||
+        bottomRight.horizontal > 0f
+  }
+
+  public fun get(property: ComputedBorderRadiusProp): CornerRadii {
+    return when (property) {
+      ComputedBorderRadiusProp.COMPUTED_BORDER_TOP_LEFT_RADIUS -> topLeft
+      ComputedBorderRadiusProp.COMPUTED_BORDER_TOP_RIGHT_RADIUS -> topRight
+      ComputedBorderRadiusProp.COMPUTED_BORDER_BOTTOM_LEFT_RADIUS -> bottomLeft
+      ComputedBorderRadiusProp.COMPUTED_BORDER_BOTTOM_RIGHT_RADIUS -> bottomRight
+    }
   }
 
-  public constructor() : this(0f, 0f, 0f, 0f)
+  public constructor() :
+      this(CornerRadii(0f, 0f), CornerRadii(0f, 0f), CornerRadii(0f, 0f), CornerRadii(0f, 0f))
 }

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

@@ -0,0 +1,19 @@
+/*
+ * 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 com.facebook.react.uimanager.PixelUtil
+
+public data class CornerRadii(
+    val horizontal: Float = 0f,
+    val vertical: Float = 0f,
+) {
+  public fun toPixelFromDIP(): CornerRadii {
+    return CornerRadii(PixelUtil.toPixelFromDIP(horizontal), PixelUtil.toPixelFromDIP(vertical))
+  }
+}

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

@@ -0,0 +1,76 @@
+/*
+ * 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
+import android.graphics.Rect
+import android.graphics.Shader
+import com.facebook.react.bridge.ReadableMap
+
+public class Gradient(gradient: ReadableMap?) {
+  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
+
+  init {
+    gradient ?: throw IllegalArgumentException("Gradient cannot be null")
+
+    val typeString = gradient.getString("type")
+    type =
+        when (typeString) {
+          "linearGradient" -> GradientType.LINEAR_GRADIENT
+          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 colorStops =
+        gradient.getArray("colorStops")
+            ?: throw IllegalArgumentException("Invalid colorStops array")
+
+    val size = colorStops.size()
+    colors = IntArray(size)
+    positions = FloatArray(size)
+
+    for (i in 0 until size) {
+      val colorStop = colorStops.getMap(i)
+      colors[i] = colorStop.getInt("color")
+      positions[i] = colorStop.getDouble("position").toFloat()
+    }
+  }
+
+  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)
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+/*
+ * 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 com.facebook.react.uimanager.Spacing
+import java.lang.IllegalArgumentException
+
+/** Represents the collection of possible box edges and shorthands. */
+public enum class LogicalEdge {
+  ALL {
+    override fun toSpacingType(): Int = Spacing.ALL
+  },
+  LEFT {
+    override fun toSpacingType(): Int = Spacing.LEFT
+  },
+  RIGHT {
+    override fun toSpacingType(): Int = Spacing.RIGHT
+  },
+  TOP {
+    override fun toSpacingType(): Int = Spacing.TOP
+  },
+  BOTTOM {
+    override fun toSpacingType(): Int = Spacing.BOTTOM
+  },
+  START {
+    override fun toSpacingType(): Int = Spacing.START
+  },
+  END {
+    override fun toSpacingType(): Int = Spacing.END
+  },
+  HORIZONTAL {
+    override fun toSpacingType(): Int = Spacing.HORIZONTAL
+  },
+  VERTICAL {
+    override fun toSpacingType(): Int = Spacing.VERTICAL
+  },
+  BLOCK_START {
+    override fun toSpacingType(): Int = Spacing.BLOCK_START
+  },
+  BLOCK_END {
+    override fun toSpacingType(): Int = Spacing.BLOCK_END
+  },
+  BLOCK {
+    override fun toSpacingType(): Int = Spacing.BLOCK
+  };
+
+  // TODO: not supported by Spacing users
+  // INLINE_START,
+  // INLINE_END,
+  // INLINE;
+
+  abstract public fun toSpacingType(): Int
+
+  public companion object {
+    @JvmStatic
+    public fun fromSpacingType(spacingType: Int): LogicalEdge {
+      return when (spacingType) {
+        Spacing.ALL -> ALL
+        Spacing.LEFT -> LEFT
+        Spacing.RIGHT -> RIGHT
+        Spacing.TOP -> TOP
+        Spacing.BOTTOM -> BOTTOM
+        Spacing.START -> START
+        Spacing.END -> END
+        Spacing.HORIZONTAL -> HORIZONTAL
+        Spacing.VERTICAL -> VERTICAL
+        Spacing.BLOCK_START -> BLOCK_START
+        Spacing.BLOCK_END -> BLOCK_END
+        Spacing.BLOCK -> BLOCK
+        else -> throw IllegalArgumentException("Unknown spacing type: $spacingType")
+      }
+    }
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/Overflow.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 Overflow {
+  VISIBLE,
+  HIDDEN,
+  SCROLL;
+
+  public companion object {
+    @JvmStatic
+    public fun fromString(overflow: String): Overflow? {
+      return when (overflow.lowercase()) {
+        "visible" -> VISIBLE
+        "hidden" -> HIDDEN
+        "scroll" -> SCROLL
+        else -> null
+      }
+    }
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.kt

@@ -14,7 +14,7 @@ import com.facebook.react.bridge.ReactSoftExceptionLogger
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.UnexpectedNativeTypeException
 import com.facebook.react.module.annotations.ReactModule
-import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 
@@ -53,12 +53,7 @@ public class DebuggingOverlayManager : SimpleViewManager<DebuggingOverlay>() {
             val right = (left + serializedRectangle.getDouble("width")).toFloat()
             val bottom = (top + serializedRectangle.getDouble("height")).toFloat()
 
-            val rectangle =
-                RectF(
-                    PixelUtil.toPixelFromDIP(left),
-                    PixelUtil.toPixelFromDIP(top),
-                    PixelUtil.toPixelFromDIP(right),
-                    PixelUtil.toPixelFromDIP(bottom))
+            val rectangle = RectF(left.dpToPx(), top.dpToPx(), right.dpToPx(), bottom.dpToPx())
 
             formattedTraceUpdates.add(TraceUpdate(id, rectangle, color))
           } catch (ex: Exception) {
@@ -98,12 +93,7 @@ public class DebuggingOverlayManager : SimpleViewManager<DebuggingOverlay>() {
             val top = element.getDouble("y").toFloat()
             val right = (left + element.getDouble("width")).toFloat()
             val bottom = (top + element.getDouble("height")).toFloat()
-            val rect =
-                RectF(
-                    PixelUtil.toPixelFromDIP(left),
-                    PixelUtil.toPixelFromDIP(top),
-                    PixelUtil.toPixelFromDIP(right),
-                    PixelUtil.toPixelFromDIP(bottom))
+            val rect = RectF(left.dpToPx(), top.dpToPx(), right.dpToPx(), bottom.dpToPx())
 
             elementsRectangles.add(rect)
           } catch (ex: Exception) {