From 190c1baf83d5029b1e03815efe82b247e31addd7 Mon Sep 17 00:00:00 2001 From: pchalupa Date: Mon, 4 May 2026 16:20:07 +0200 Subject: [PATCH 1/5] Set max font size multiplier on notification content --- .../Libraries/LogBox/UI/LogBoxNotificationCountBadge.js | 5 ++++- .../Libraries/LogBox/UI/LogBoxNotificationMessage.js | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js b/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js index 1777de4d6956..5716be260ace 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js @@ -24,7 +24,10 @@ export default function LogBoxNotificationCountBadge(props: { * when fixing the type of `StyleSheet.create`. Remove this comment to * see the error. */} - + {props.count <= 1 ? '!' : props.count} diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationMessage.js b/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationMessage.js index ae5c182ae838..2243da1fb1bc 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationMessage.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationMessage.js @@ -24,6 +24,7 @@ export default function LogBoxNotificationMessage(props: { {props.message && ( From f4303c63833ea8ac72e19ca1b1efe64a900f44fb Mon Sep 17 00:00:00 2001 From: pchalupa Date: Mon, 4 May 2026 16:23:33 +0200 Subject: [PATCH 2/5] Adjust inspector components --- .../Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js | 4 ++-- .../Libraries/LogBox/UI/LogBoxInspectorFooter.js | 5 ++++- .../Libraries/LogBox/UI/LogBoxInspectorFooterButton.js | 4 +++- .../Libraries/LogBox/UI/LogBoxInspectorHeader.js | 10 ++++++++-- 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js index 8611a6d8d261..07f7ae1f89ea 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js @@ -63,7 +63,7 @@ component CodeFrameDisplay(codeFrame: CodeFrame) { onPress={() => { openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0); }}> - + {getFileName()} {getLocation()} @@ -116,7 +116,7 @@ component AppInfo() { }} style={appInfoStyles.buildButton} onPress={appInfo.onPress}> - + {appInfo.appVersion} ({appInfo.engine}) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js index 5d5092944e05..d8bd0cce650c 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js @@ -29,7 +29,10 @@ export default function LogBoxInspectorFooter(props: Props): React.Node { return ( - + This error cannot be dismissed. diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js index c1ecc8fb6d5c..3db512ed3d43 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js @@ -35,7 +35,9 @@ export default function LogBoxInspectorFooterButton( }} onPress={props.onPress}> - {props.text} + + {props.text} + diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js index 653a67a5a343..829ecc2594b1 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js @@ -36,7 +36,10 @@ export default function LogBoxInspectorHeader(props: Props): React.Node { - + Failed to compile @@ -63,7 +66,10 @@ export default function LogBoxInspectorHeader(props: Props): React.Node { onPress={() => props.onSelectIndex(prevIndex)} /> - + {titleText} From 74ef9b52f5efa5f0fed888bd6dedde926b4d07a7 Mon Sep 17 00:00:00 2001 From: pchalupa Date: Mon, 4 May 2026 16:26:09 +0200 Subject: [PATCH 3/5] Adjust source and stack components --- .../Libraries/LogBox/UI/AnsiHighlight.js | 3 +- .../LogBox/UI/LogBoxInspectorMessageHeader.js | 11 ++++++-- .../LogBox/UI/LogBoxInspectorReactFrames.js | 21 +++++++++++--- .../LogBox/UI/LogBoxInspectorSection.js | 4 ++- .../UI/LogBoxInspectorSourceMapStatus.js | 4 ++- .../LogBox/UI/LogBoxInspectorStackFrame.js | 2 ++ .../LogBox/UI/LogBoxInspectorStackFrames.js | 6 ++-- .../Libraries/LogBox/UI/LogBoxMessage.js | 28 +++++++++++++++---- 8 files changed, 63 insertions(+), 16 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js b/packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js index df3ae6565ae4..8871f67c6bb0 100644 --- a/packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js +++ b/packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js @@ -87,7 +87,7 @@ export default function Ansi({ {parsedLines.map((items, i) => ( - + {items.map((bundle, key) => { const textStyle = bundle.fg && COLORS[bundle.fg] @@ -101,6 +101,7 @@ export default function Ansi({ return ( {getText(bundle.content, key)} diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js index b54820b3be67..9ca2e4856799 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js @@ -32,7 +32,10 @@ component LogBoxInspectorMessageHeader( return null; } return ( - onPress()}> + onPress()}> ... See More ); @@ -42,12 +45,16 @@ component LogBoxInspectorMessageHeader( {title} - + - {'<'} + + {'<'} + {frame.methodName} - {' />'} + + {' />'} + - + {frame.file != null ? getPrettyFileName(frame.file) : ''} {frame.lineNumber != null ? `:${frame.lineNumber}` : ''} @@ -122,7 +133,9 @@ component LogBoxInspectorReactFrames(log: LogBoxLog) { }} onPress={() => setCollapsed(!collapsed)} style={componentStyles.collapseButton}> - {getCollapseMessage()} + + {getCollapseMessage()} + diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSection.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSection.js index 12f3a97af269..f9620ac683fe 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSection.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSection.js @@ -22,7 +22,9 @@ component LogBoxInspectorSection( return ( - {heading} + + {heading} + {action} {children} diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js index 5351316fc12e..4a321a5004c0 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js @@ -103,7 +103,9 @@ component LogBoxInspectorSourceMapStatus( : {transform: [{rotate: state.rotate}]}, ]} /> - Source Map + + Source Map + ); } diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js index d33b7bf8ca5f..e7b75d9b4f1e 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js @@ -44,11 +44,13 @@ component LogBoxInspectorStackFrame( style={styles.frame}> {frame.methodName} {location} diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js index 8487e6fa807d..b7fbc37cfcdb 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js @@ -89,7 +89,7 @@ component LogBoxInspectorStackFrames(log: LogBoxLog, onRetry: () => void) { }> {log.symbolicated.status !== 'COMPLETE' && ( - + This call stack is not symbolicated. Some features are unavailable such as viewing the function name or tapping to open files. @@ -138,7 +138,9 @@ component StackFrameFooter(message: string, onPress: () => void) { }} onPress={onPress} style={stackStyles.collapseButton}> - {message} + + {message} + ); diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js b/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js index 73fd359cc088..b2f33cc3b602 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js @@ -43,7 +43,11 @@ component TappableLinks(content: string, style: void | TextStyleProp) { if (matches.length === 0) { // No URLs detected. Just return the content. - return {content}; + return ( + + {content} + + ); } // URLs were detected. Construct array of Text nodes. @@ -55,7 +59,11 @@ component TappableLinks(content: string, style: void | TextStyleProp) { for (const linkRange of matches) { if (startIndex < linkRange.lowerBound) { const text = content.substring(startIndex, linkRange.lowerBound); - fragments.push({text}); + fragments.push( + + {text} + , + ); } const link = content.substring(linkRange.lowerBound, linkRange.upperBound); @@ -66,6 +74,7 @@ component TappableLinks(content: string, style: void | TextStyleProp) { Linking.openURL(link); }} key={++indexCounter} + maxFontSizeMultiplier={1.5} style={styles.linkText}> {link} , @@ -77,13 +86,20 @@ component TappableLinks(content: string, style: void | TextStyleProp) { if (startIndex < content.length) { const text = content.substring(startIndex); fragments.push( - + {text} , ); } - return {fragments}; + return ( + + {fragments} + + ); } const cleanContent = (content: string) => @@ -98,7 +114,9 @@ component LogBoxMessage( const {content, substitutions}: Message = message; if (plaintext === true) { - return {cleanContent(content)}; + return ( + {cleanContent(content)} + ); } const resolvedMaxLength = maxLength != null ? maxLength : Infinity; From fdd8123ce311df9d86eecabbe1d076967c1a5d0c Mon Sep 17 00:00:00 2001 From: pchalupa Date: Mon, 4 May 2026 17:23:10 +0200 Subject: [PATCH 4/5] Fix format --- .../Libraries/LogBox/UI/LogBoxInspectorHeader.js | 6 +++--- .../react-native/Libraries/LogBox/UI/LogBoxMessage.js | 9 ++------- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js index 829ecc2594b1..a5b5329d440e 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js @@ -37,9 +37,9 @@ export default function LogBoxInspectorHeader(props: Props): React.Node { + id="logbox_header_title_text" + maxFontSizeMultiplier={1.5} + style={styles.titleText}> Failed to compile diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js b/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js index b2f33cc3b602..626428a99bbe 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js @@ -86,10 +86,7 @@ component TappableLinks(content: string, style: void | TextStyleProp) { if (startIndex < content.length) { const text = content.substring(startIndex); fragments.push( - + {text} , ); @@ -114,9 +111,7 @@ component LogBoxMessage( const {content, substitutions}: Message = message; if (plaintext === true) { - return ( - {cleanContent(content)} - ); + return {cleanContent(content)}; } const resolvedMaxLength = maxLength != null ? maxLength : Infinity; From bfd6f109e4f41c91ecbc5bda0ddf6e69de567672 Mon Sep 17 00:00:00 2001 From: pchalupa Date: Mon, 4 May 2026 17:36:04 +0200 Subject: [PATCH 5/5] Update snapshots --- .../LogBoxInspectorCodeFrame-test.js.snap | 5 ++ .../LogBoxInspectorFooter-test.js.snap | 1 + .../LogBoxInspectorHeader-test.js.snap | 4 + .../LogBoxInspectorMessageHeader-test.js.snap | 13 +++ .../LogBoxInspectorReactFrames-test.js.snap | 28 ++++++ .../LogBoxInspectorSection-test.js.snap | 2 + ...ogBoxInspectorSourceMapStatus-test.js.snap | 2 + .../LogBoxInspectorStackFrame-test.js.snap | 6 ++ .../LogBoxInspectorStackFrames-test.js.snap | 5 ++ .../__snapshots__/LogBoxMessage-test.js.snap | 89 ++++++++++++++----- 10 files changed, 135 insertions(+), 20 deletions(-) diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorCodeFrame-test.js.snap b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorCodeFrame-test.js.snap index a1dd32e9e801..79c187987664 100644 --- a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorCodeFrame-test.js.snap +++ b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorCodeFrame-test.js.snap @@ -69,6 +69,7 @@ exports[`LogBoxInspectorCodeFrame should dedupe if code frames are the same 1`] } > MyComponent MyComponent MyComponent2 MyComponent3 MyComponent MyComponent + https://reactnative.dev - + and + https://reactnative.dev - + and https:/ `; exports[`LogBoxMessage Should make links tappable 1`] = ` - + + normal , substitution , - + normal , ] `; exports[`LogBoxMessage should render a plaintext message and clean the content 1`] = ` - + This should not start with Error: `; exports[`LogBoxMessage should render a plaintext message with no substitutions 1`] = ` - + normal substitution normal `; exports[`LogBoxMessage should render message 1`] = ` - + Some kind of message `; exports[`LogBoxMessage should render message truncated to 6 chars 1`] = ` - + Some `; exports[`LogBoxMessage should render message with substitution 1`] = ` Array [ - + normal , substitution , - + normal , ] `; exports[`LogBoxMessage should render message with substitution, truncating the first word 3 letters in 1`] = ` - + nor `; exports[`LogBoxMessage should render message with substitution, truncating the second word 6 letters in 1`] = ` Array [ - + normal , substi @@ -138,37 +175,49 @@ Array [ exports[`LogBoxMessage should render message with substitution, truncating the third word 2 letters in 1`] = ` Array [ - + normal , substitution , - + no , ] `; exports[`LogBoxMessage should render the whole message when maxLength = message length 1`] = ` - + Some kind of message `; exports[`LogBoxMessage should render the whole message with substitutions when maxLength = message length 1`] = ` Array [ - + normal , substitution , - + normal , ]