From 547b861dfdd1d52aa4979a1a18895521ece2d7e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dawid=20Ma=C5=82ecki?= <maleckidawid@meta.com>
Date: Fri, 10 Jan 2025 05:17:11 -0800
Subject: [PATCH] Replace $FlowFixMe in BorderBox (#48593)

Summary:

Changelog: [General][Changed] - Improve types on BorderBox

Differential Revision: D68014754
---
 .../Libraries/Inspector/BorderBox.js          | 40 ++++++++++++-------
 .../__snapshots__/public-api-test.js.snap     | 16 ++++++--
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/packages/react-native/Libraries/Inspector/BorderBox.js b/packages/react-native/Libraries/Inspector/BorderBox.js
index ede1bc58f3478d..600db4f1b7af68 100644
--- a/packages/react-native/Libraries/Inspector/BorderBox.js
+++ b/packages/react-native/Libraries/Inspector/BorderBox.js
@@ -10,23 +10,35 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
-const React = require('react');
 
-class BorderBox extends React.Component<$FlowFixMeProps> {
-  render(): $FlowFixMe | React.Node {
-    const box = this.props.box;
-    if (!box) {
-      return this.props.children;
-    }
-    const style = {
-      borderTopWidth: box.top,
-      borderBottomWidth: box.bottom,
-      borderLeftWidth: box.left,
-      borderRightWidth: box.right,
-    };
-    return <View style={[style, this.props.style]}>{this.props.children}</View>;
+type Props = $ReadOnly<{
+  children: React.Node,
+  box?: ?$ReadOnly<{
+    top: number,
+    right: number,
+    bottom: number,
+    left: number,
+    ...
+  }>,
+  style?: ViewStyleProp,
+}>;
+
+function BorderBox({children, box, style}: Props): React.Node {
+  if (!box) {
+    return children;
   }
+  const borderStyle = {
+    borderTopWidth: box.top,
+    borderBottomWidth: box.bottom,
+    borderLeftWidth: box.left,
+    borderRightWidth: box.right,
+  };
+  return <View style={[borderStyle, style]}>{children}</View>;
 }
 
 module.exports = BorderBox;
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
index ee3d98fe77041d..d62a6994157566 100644
--- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -5150,10 +5150,18 @@ declare module.exports: resolveAssetSource;
 `;
 
 exports[`public API should not change unintentionally Libraries/Inspector/BorderBox.js 1`] = `
-"declare const React: $FlowFixMe;
-declare class BorderBox extends React.Component<$FlowFixMeProps> {
-  render(): $FlowFixMe | React.Node;
-}
+"type Props = $ReadOnly<{
+  children: React.Node,
+  box?: ?$ReadOnly<{
+    top: number,
+    right: number,
+    bottom: number,
+    left: number,
+    ...
+  }>,
+  style?: ViewStyleProp,
+}>;
+declare function BorderBox(Props): React.Node;
 declare module.exports: BorderBox;
 "
 `;