diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxButton.js b/packages/react-native/Libraries/LogBox/UI/LogBoxButton.js
index 6e4da80afbf..e897e13d0b9 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 = (
     <View
-      id={props.id}
+      id={id}
       style={StyleSheet.compose(
         {
           backgroundColor: pressed
-            ? backgroundColor.pressed
-            : backgroundColor.default,
+            ? resolvedBackgroundColor.pressed
+            : resolvedBackgroundColor.default,
         },
-        props.style,
+        style,
       )}>
-      {props.children}
+      {children}
     </View>
   );
 
-  return props.onPress == null ? (
+  return onPress == null ? (
     content
   ) : (
     <TouchableWithoutFeedback
-      hitSlop={props.hitSlop}
-      onPress={props.onPress}
+      hitSlop={hitSlop}
+      onPress={onPress}
       onPressIn={() => setPressed(true)}
       onPressOut={() => setPressed(false)}>
       {content}
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js
index 7703d4483e1..8611a6d8d26 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;
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js
index fd50a1375b6..b54820b3be6 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 (
-      <Text style={messageStyles.collapse} onPress={() => props.onPress()}>
+      <Text style={messageStyles.collapse} onPress={() => onPress()}>
         ... See More
       </Text>
     );
@@ -47,15 +42,15 @@ function LogBoxInspectorMessageHeader(props: Props): React.Node {
     <View style={messageStyles.body}>
       <View style={messageStyles.heading}>
         <Text
-          style={[messageStyles.headingText, messageStyles[props.level]]}
+          style={[messageStyles.headingText, messageStyles[level]]}
           id="logbox_message_title_text">
-          {props.title}
+          {title}
         </Text>
       </View>
       <Text style={messageStyles.bodyText} id="logbox_message_contents_text">
         <LogBoxMessage
-          maxLength={props.collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
-          message={props.message}
+          maxLength={collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
+          message={message}
           style={messageStyles.messageText}
         />
         {renderShowMore()}
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js
index de1c5410ece..d583068b45a 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 {
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js
index 96e93c500e2..5351316fc12 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}>
       <Animated.Image
         source={image}
         style={[
           styles.image,
           {tintColor: color},
-          state.rotate == null || props.status !== 'PENDING'
+          state.rotate == null || status !== 'PENDING'
             ? null
             : {transform: [{rotate: state.rotate}]},
         ]}
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js
index 7573f86fc06..644b28ce371 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) +
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js
index 249658f2468..8487e6fa807 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={
         <LogBoxInspectorSourceMapStatus
-          onPress={
-            props.log.symbolicated.status === 'FAILED' ? props.onRetry : null
-          }
-          status={props.log.symbolicated.status}
+          onPress={log.symbolicated.status === 'FAILED' ? onRetry : null}
+          status={log.symbolicated.status}
         />
       }>
-      {props.log.symbolicated.status !== 'COMPLETE' && (
+      {log.symbolicated.status !== 'COMPLETE' && (
         <View style={stackStyles.hintBox}>
           <Text style={stackStyles.hintText}>
             This call stack is not symbolicated. Some features are unavailable
@@ -102,32 +95,29 @@ function LogBoxInspectorStackFrames(props: Props): React.Node {
           </Text>
         </View>
       )}
-      <StackFrameList
-        list={getStackList()}
-        status={props.log.symbolicated.status}
-      />
+      <StackFrameList list={getStackList()} status={log.symbolicated.status} />
       <StackFrameFooter
         onPress={() => setCollapsed(!collapsed)}
-        message={getCollapseMessage(props.log.getAvailableStack(), collapsed)}
+        message={getCollapseMessage(log.getAvailableStack(), collapsed)}
       />
     </LogBoxInspectorSection>
   );
 }
 
-function StackFrameList(props: {
+component StackFrameList(
   list: Stack | Array<StackFrame>,
   status: string | 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-}) {
+) {
   return (
     <>
-      {props.list.map((frame, index) => {
+      {list.map((frame, index) => {
         const {file, lineNumber} = frame;
         return (
           <LogBoxInspectorStackFrame
             key={index}
             frame={frame}
             onPress={
-              props.status === 'COMPLETE' && file != null && lineNumber != null
+              status === 'COMPLETE' && file != null && lineNumber != null
                 ? () => 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 (
     <View style={stackStyles.collapseContainer}>
       <LogBoxButton
@@ -148,9 +136,9 @@ function StackFrameFooter(
           default: 'transparent',
           pressed: LogBoxStyle.getBackgroundColor(1),
         }}
-        onPress={props.onPress}
+        onPress={onPress}
         style={stackStyles.collapseButton}>
-        <Text style={stackStyles.collapse}>{props.message}</Text>
+        <Text style={stackStyles.collapse}>{message}</Text>
       </LogBoxButton>
     </View>
   );
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js b/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js
index b02fb10de98..73fd359cc08 100644
--- a/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js
+++ b/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js
@@ -16,14 +16,6 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import * as React from 'react';
 
-type Props = {
-  message: Message,
-  style: TextStyleProp,
-  plaintext?: ?boolean,
-  maxLength?: ?number,
-  ...
-};
-
 type Range = {
   lowerBound: number,
   upperBound: number,
@@ -46,15 +38,12 @@ function getLinkRanges(string: string): ReadonlyArray<Range> {
   return matches;
 }
 
-function TappableLinks(props: {
-  content: string,
-  style: void | TextStyleProp,
-}): React.Node {
-  const matches = getLinkRanges(props.content);
+component TappableLinks(content: string, style: void | TextStyleProp) {
+  const matches = getLinkRanges(content);
 
   if (matches.length === 0) {
     // No URLs detected. Just return the content.
-    return <Text style={props.style}>{props.content}</Text>;
+    return <Text style={style}>{content}</Text>;
   }
 
   // URLs were detected. Construct array of Text nodes.
@@ -65,14 +54,11 @@ function TappableLinks(props: {
 
   for (const linkRange of matches) {
     if (startIndex < linkRange.lowerBound) {
-      const text = props.content.substring(startIndex, linkRange.lowerBound);
+      const text = content.substring(startIndex, linkRange.lowerBound);
       fragments.push(<Text key={++indexCounter}>{text}</Text>);
     }
 
-    const link = props.content.substring(
-      linkRange.lowerBound,
-      linkRange.upperBound,
-    );
+    const link = content.substring(linkRange.lowerBound, linkRange.upperBound);
     fragments.push(
       <Text
         onPress={() => {
@@ -88,46 +74,51 @@ function TappableLinks(props: {
     startIndex = linkRange.upperBound;
   }
 
-  if (startIndex < props.content.length) {
-    const text = props.content.substring(startIndex);
+  if (startIndex < content.length) {
+    const text = content.substring(startIndex);
     fragments.push(
-      <Text key={++indexCounter} style={props.style}>
+      <Text key={++indexCounter} style={style}>
         {text}
       </Text>,
     );
   }
 
-  return <Text style={props.style}>{fragments}</Text>;
+  return <Text style={style}>{fragments}</Text>;
 }
 
 const cleanContent = (content: string) =>
   content.replace(/^(TransformError |Error: )/g, '');
 
-function LogBoxMessage(props: Props): React.Node {
-  const {content, substitutions}: Message = props.message;
+component LogBoxMessage(
+  message: Message,
+  style: TextStyleProp,
+  plaintext?: ?boolean,
+  maxLength?: ?number,
+) {
+  const {content, substitutions}: Message = message;
 
-  if (props.plaintext === true) {
+  if (plaintext === true) {
     return <Text>{cleanContent(content)}</Text>;
   }
 
-  const maxLength = props.maxLength != null ? props.maxLength : Infinity;
-  const substitutionStyle: TextStyleProp = props.style;
+  const resolvedMaxLength = maxLength != null ? maxLength : Infinity;
+  const substitutionStyle: TextStyleProp = style;
   const elements = [];
   let length = 0;
   const createUnderLength = (
     key: string,
-    message: string,
-    style: void | TextStyleProp,
+    messageText: string,
+    textStyle: void | TextStyleProp,
   ) => {
-    let cleanMessage = cleanContent(message);
+    let cleanMessage = cleanContent(messageText);
 
-    if (props.maxLength != null) {
-      cleanMessage = cleanMessage.slice(0, props.maxLength - length);
+    if (maxLength != null) {
+      cleanMessage = cleanMessage.slice(0, maxLength - length);
     }
 
-    if (length < maxLength) {
+    if (length < resolvedMaxLength) {
       elements.push(
-        <TappableLinks content={cleanMessage} key={key} style={style} />,
+        <TappableLinks content={cleanMessage} key={key} style={textStyle} />,
       );
     }