Replace $FlowFixMe in BorderBox (#48593)

Summary: Pull Request resolved: #48593 Changelog: [General][Changed] - Improve types on BorderBox Reviewed By: NickGerleman Differential Revision: D68014754 fbshipit-source-id: ab6af9ffb4a80a4040011c1a27ede95ea2c59171
facebook · Jan 13, 2025 · 48a7840 · 48a7840
1 parent 8369922
commit 48a7840
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git 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
@@ -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;
 "
 `;