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 {this.props.children};
+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 {children};
}
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;
"
`;