From dba6d61f52f28fdccfe34ac3fb61db99346efa99 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 20 Feb 2026 02:18:58 -0800 Subject: [PATCH 1/7] Migrate LogBoxButton to Flow component syntax (#55620) Summary: Migrate LogBoxButton from function component to Flow component syntax. Changelog: [Internal] Reviewed By: cortinico Differential Revision: D93743230 --- .../Libraries/LogBox/UI/LogBoxButton.js | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxButton.js b/packages/react-native/Libraries/LogBox/UI/LogBoxButton.js index 6e4da80afbf7..e897e13d0b93 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxButton.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxButton.js @@ -19,7 +19,7 @@ import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; import {useState} from 'react'; -type Props = Readonly<{ +component LogBoxButton( id?: string, backgroundColor: Readonly<{ default: string, @@ -29,14 +29,12 @@ type Props = Readonly<{ hitSlop?: ?EdgeInsetsProp, onPress?: ?(event: GestureResponderEvent) => void, style?: ViewStyleProp, -}>; - -function LogBoxButton(props: Props): React.Node { +) { const [pressed, setPressed] = useState(false); - let backgroundColor = props.backgroundColor; - if (!backgroundColor) { - backgroundColor = { + let resolvedBackgroundColor = backgroundColor; + if (!resolvedBackgroundColor) { + resolvedBackgroundColor = { default: LogBoxStyle.getBackgroundColor(0.95), pressed: LogBoxStyle.getBackgroundColor(0.6), }; @@ -44,25 +42,25 @@ function LogBoxButton(props: Props): React.Node { const content = ( - {props.children} + {children} ); - return props.onPress == null ? ( + return onPress == null ? ( content ) : ( setPressed(true)} onPressOut={() => setPressed(false)}> {content} From 7158d53708f6a4ca69038a6889e8c5d5752041c9 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 20 Feb 2026 02:18:58 -0800 Subject: [PATCH 2/7] Migrate LogBoxInspectorStackFrame to Flow component syntax (#55621) Summary: Migrate LogBoxInspectorStackFrame from function component to Flow component syntax. Changelog: [Internal] Reviewed By: cortinico Differential Revision: D93743228 --- .../Libraries/LogBox/UI/LogBoxInspectorStackFrame.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js index 7573f86fc06b..644b28ce3714 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js @@ -19,13 +19,10 @@ import LogBoxButton from './LogBoxButton'; import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; -type Props = Readonly<{ +component LogBoxInspectorStackFrame( frame: StackFrame, onPress?: ?(event: GestureResponderEvent) => void, -}>; - -function LogBoxInspectorStackFrame(props: Props): React.Node { - const {frame, onPress} = props; +) { const column = frame.column != null && parseInt(frame.column, 10); const location = getFileName(frame.file) + From 4132a6e0f83b16df863bcc9375b0bd0f5a9fdcf8 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 20 Feb 2026 02:18:58 -0800 Subject: [PATCH 3/7] Migrate LogBoxInspectorSourceMapStatus to Flow component syntax (#55622) Summary: Migrate LogBoxInspectorSourceMapStatus from function component to Flow component syntax. Changelog: [Internal] Reviewed By: cortinico Differential Revision: D93743232 --- .../UI/LogBoxInspectorSourceMapStatus.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js index 96e93c500e22..5351316fc12e 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js @@ -19,19 +19,17 @@ import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; import {useEffect, useState} from 'react'; -type Props = Readonly<{ +component LogBoxInspectorSourceMapStatus( onPress?: ?(event: GestureResponderEvent) => void, status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING', -}>; - -function LogBoxInspectorSourceMapStatus(props: Props): React.Node { +) { const [state, setState] = useState({ animation: null, rotate: null, }); useEffect(() => { - if (props.status === 'PENDING') { + if (status === 'PENDING') { if (state.animation == null) { const animated = new Animated.Value(0); const animation = Animated.loop( @@ -67,11 +65,11 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node { state.animation.stop(); } }; - }, [props.status, state.animation]); + }, [status, state.animation]); let image; let color; - switch (props.status) { + switch (status) { case 'FAILED': image = require('./LogBoxImages/alert-triangle.png'); color = LogBoxStyle.getErrorColor(1); @@ -82,7 +80,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node { break; } - if (props.status === 'COMPLETE' || image == null) { + if (status === 'COMPLETE' || image == null) { return null; } @@ -93,14 +91,14 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node { pressed: LogBoxStyle.getBackgroundColor(1), }} hitSlop={{bottom: 8, left: 8, right: 8, top: 8}} - onPress={props.onPress} + onPress={onPress} style={styles.root}> Date: Fri, 20 Feb 2026 02:18:58 -0800 Subject: [PATCH 4/7] Migrate LogBoxInspectorMessageHeader to Flow component syntax (#55623) Summary: Migrate LogBoxInspectorMessageHeader from function component to Flow component syntax. Changelog: [Internal] Reviewed By: cortinico Differential Revision: D93743229 --- .../LogBox/UI/LogBoxInspectorMessageHeader.js | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js index fd50a1375b65..b54820b3be67 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js @@ -18,26 +18,21 @@ import LogBoxMessage from './LogBoxMessage'; import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; -type Props = Readonly<{ +const SHOW_MORE_MESSAGE_LENGTH = 300; + +component LogBoxInspectorMessageHeader( collapsed: boolean, message: Message, level: LogLevel, title: string, onPress: () => void, -}>; - -const SHOW_MORE_MESSAGE_LENGTH = 300; - -function LogBoxInspectorMessageHeader(props: Props): React.Node { +) { function renderShowMore() { - if ( - props.message.content.length < SHOW_MORE_MESSAGE_LENGTH || - !props.collapsed - ) { + if (message.content.length < SHOW_MORE_MESSAGE_LENGTH || !collapsed) { return null; } return ( - props.onPress()}> + onPress()}> ... See More ); @@ -47,15 +42,15 @@ function LogBoxInspectorMessageHeader(props: Props): React.Node { - {props.title} + {title} {renderShowMore()} From 573cb668dc0df13b6f0107626041d26f9c236990 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 20 Feb 2026 02:18:58 -0800 Subject: [PATCH 5/7] Migrate LogBoxInspectorReactFrames to Flow component syntax (#55624) Summary: Migrate LogBoxInspectorReactFrames from function component to Flow component syntax. Changelog: [Internal] Differential Revision: D93743233 --- .../LogBox/UI/LogBoxInspectorReactFrames.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js index de1c5410ece0..d583068b45ad 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js @@ -21,10 +21,6 @@ import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; import {useState} from 'react'; -type Props = Readonly<{ - log: LogBoxLog, -}>; - const BEFORE_SLASH_RE = /^(.*)[\\/]/; // Taken from React https://github.com/facebook/react/blob/206d61f72214e8ae5b935f0bf8628491cb7f0797/packages/react-devtools-shared/src/backend/describeComponentFrame.js#L27-L41 @@ -49,29 +45,30 @@ function getPrettyFileName(path: string) { return fileName; } -function LogBoxInspectorReactFrames(props: Props): React.Node { + +component LogBoxInspectorReactFrames(log: LogBoxLog) { const [collapsed, setCollapsed] = useState(true); if ( - props.log.getAvailableComponentStack() == null || - props.log.getAvailableComponentStack().length < 1 + log.getAvailableComponentStack() == null || + log.getAvailableComponentStack().length < 1 ) { return null; } function getStackList() { if (collapsed) { - return props.log.getAvailableComponentStack().slice(0, 3); + return log.getAvailableComponentStack().slice(0, 3); } else { - return props.log.getAvailableComponentStack(); + return log.getAvailableComponentStack(); } } function getCollapseMessage() { - if (props.log.getAvailableComponentStack().length <= 3) { + if (log.getAvailableComponentStack().length <= 3) { return; } - const count = props.log.getAvailableComponentStack().length - 3; + const count = log.getAvailableComponentStack().length - 3; if (collapsed) { return `See ${count} more components`; } else { From 0613f5c61d8517e3181b47b0acb3816ec6589575 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 20 Feb 2026 02:18:58 -0800 Subject: [PATCH 6/7] Migrate LogBoxInspectorCodeFrame to Flow component syntax (#55625) Summary: Migrate CodeFrameDisplay, LogBoxInspectorCodeFrame, and AppInfo from function components to Flow component syntax. Changelog: [Internal] Reviewed By: christophpurrer Differential Revision: D93743227 --- .../LogBox/UI/LogBoxInspectorCodeFrame.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js index 7703d4483e1f..8611a6d8d261 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js @@ -23,12 +23,7 @@ import LogBoxInspectorSection from './LogBoxInspectorSection'; import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; -type Props = Readonly<{ - componentCodeFrame: ?CodeFrame, - codeFrame: ?CodeFrame, -}>; - -function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node { +component CodeFrameDisplay(codeFrame: CodeFrame) { function getFileName() { // $FlowFixMe[incompatible-use] const matches = /[^/]*$/.exec(codeFrame.fileName); @@ -77,8 +72,10 @@ function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node { ); } -function LogBoxInspectorCodeFrame(props: Props): React.Node { - const {codeFrame, componentCodeFrame} = props; +component LogBoxInspectorCodeFrame( + componentCodeFrame: ?CodeFrame, + codeFrame: ?CodeFrame, +) { let sources = []; if (codeFrame != null) { sources.push(codeFrame); @@ -103,7 +100,7 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node { ); } -function AppInfo() { +component AppInfo() { const appInfo = LogBoxData.getAppInfo(); if (appInfo == null) { return null; From 94d4258bf72b10b96f9fb3cf1359b68674a843ba Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 20 Feb 2026 02:18:58 -0800 Subject: [PATCH 7/7] Migrate LogBoxInspectorStackFrames to Flow component syntax (#55626) Summary: Migrate LogBoxInspectorStackFrames, StackFrameList, and StackFrameFooter from function components to Flow component syntax. Changelog: [Internal] Reviewed By: christophpurrer Differential Revision: D93743234 --- .../LogBox/UI/LogBoxInspectorStackFrames.js | 46 +++++++------------ 1 file changed, 17 insertions(+), 29 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js index 249658f24683..8487e6fa807d 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js @@ -24,11 +24,6 @@ import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; import {useState} from 'react'; -type Props = Readonly<{ - log: LogBoxLog, - onRetry: () => void, -}>; - export function getCollapseMessage( stackFrames: Stack, collapsed: boolean, @@ -65,21 +60,21 @@ export function getCollapseMessage( } } -function LogBoxInspectorStackFrames(props: Props): React.Node { +component LogBoxInspectorStackFrames(log: LogBoxLog, onRetry: () => void) { const [collapsed, setCollapsed] = useState(() => { // Only collapse frames initially if some frames are not collapsed. - return props.log.getAvailableStack().some(({collapse}) => !collapse); + return log.getAvailableStack().some(({collapse}) => !collapse); }); function getStackList() { if (collapsed === true) { - return props.log.getAvailableStack().filter(({collapse}) => !collapse); + return log.getAvailableStack().filter(({collapse}) => !collapse); } else { - return props.log.getAvailableStack(); + return log.getAvailableStack(); } } - if (props.log.getAvailableStack().length === 0) { + if (log.getAvailableStack().length === 0) { return null; } @@ -88,13 +83,11 @@ function LogBoxInspectorStackFrames(props: Props): React.Node { heading="Call Stack" action={ }> - {props.log.symbolicated.status !== 'COMPLETE' && ( + {log.symbolicated.status !== 'COMPLETE' && ( This call stack is not symbolicated. Some features are unavailable @@ -102,32 +95,29 @@ function LogBoxInspectorStackFrames(props: Props): React.Node { )} - + setCollapsed(!collapsed)} - message={getCollapseMessage(props.log.getAvailableStack(), collapsed)} + message={getCollapseMessage(log.getAvailableStack(), collapsed)} /> ); } -function StackFrameList(props: { +component StackFrameList( list: Stack | Array, status: string | 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING', -}) { +) { return ( <> - {props.list.map((frame, index) => { + {list.map((frame, index) => { const {file, lineNumber} = frame; return ( openFileInEditor(file, lineNumber) : null } @@ -138,9 +128,7 @@ function StackFrameList(props: { ); } -function StackFrameFooter( - props: Readonly<{message: string, onPress: () => void}>, -) { +component StackFrameFooter(message: string, onPress: () => void) { return ( - {props.message} + {message} );