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/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..a5b5329d440e 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} 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..626428a99bbe 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,17 @@ 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 +111,7 @@ component LogBoxMessage( const {content, substitutions}: Message = message; if (plaintext === true) { - return {cleanContent(content)}; + return {cleanContent(content)}; } const resolvedMaxLength = maxLength != null ? maxLength : Infinity; 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 && ( 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 , ]