first commit

node_modules/react-native/Libraries/LogBox/UI/AnsiHighlight.js

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import {ansiToJson} from 'anser';
+import * as React from 'react';
+
+// Afterglow theme from https://iterm2colorschemes.com/
+const COLORS = {
+  'ansi-black': 'rgb(27, 27, 27)',
+  'ansi-red': 'rgb(187, 86, 83)',
+  'ansi-green': 'rgb(144, 157, 98)',
+  'ansi-yellow': 'rgb(234, 193, 121)',
+  'ansi-blue': 'rgb(125, 169, 199)',
+  'ansi-magenta': 'rgb(176, 101, 151)',
+  'ansi-cyan': 'rgb(140, 220, 216)',
+  // Instead of white, use the default color provided to the component
+  // 'ansi-white': 'rgb(216, 216, 216)',
+  'ansi-bright-black': 'rgb(98, 98, 98)',
+  'ansi-bright-red': 'rgb(187, 86, 83)',
+  'ansi-bright-green': 'rgb(144, 157, 98)',
+  'ansi-bright-yellow': 'rgb(234, 193, 121)',
+  'ansi-bright-blue': 'rgb(125, 169, 199)',
+  'ansi-bright-magenta': 'rgb(176, 101, 151)',
+  'ansi-bright-cyan': 'rgb(140, 220, 216)',
+  'ansi-bright-white': 'rgb(247, 247, 247)',
+};
+
+const LRM = '\u200E'; // Left-to-Right Mark
+
+export default function Ansi({
+  text,
+  style,
+}: {
+  text: string,
+  style: TextStyleProp,
+  ...
+}): React.Node {
+  let commonWhitespaceLength = Infinity;
+  const parsedLines = text.split(/\n/).map(line =>
+    ansiToJson(line, {
+      json: true,
+      remove_empty: true,
+      use_classes: true,
+    }),
+  );
+
+  parsedLines.map(lines => {
+    // The third item on each line includes the whitespace of the source code.
+    // We are looking for the least amount of common whitespace to trim all lines.
+    // Example: Array [" ", " 96 |", "     text", ...]
+    const match = lines[2] && lines[2]?.content?.match(/^ +/);
+    const whitespaceLength = (match && match[0]?.length) || 0;
+    if (whitespaceLength < commonWhitespaceLength) {
+      commonWhitespaceLength = whitespaceLength;
+    }
+  });
+
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
+  const getText = (content, key) => {
+    if (key === 0) {
+      return LRM + content;
+    } else if (key === 1) {
+      // Remove the vertical bar after line numbers
+      return content.replace(/\| $/, ' ');
+    } else if (key === 2 && commonWhitespaceLength < Infinity) {
+      // Remove common whitespace at the beginning of the line
+      return content.slice(commonWhitespaceLength);
+    } else {
+      return content;
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {parsedLines.map((items, i) => (
+        <View style={styles.line} key={i}>
+          <Text style={styles.text}>
+            {items.map((bundle, key) => {
+              const textStyle =
+                bundle.fg && COLORS[bundle.fg]
+                  ? {
+                      backgroundColor: bundle.bg && COLORS[bundle.bg],
+                      color: bundle.fg && COLORS[bundle.fg],
+                    }
+                  : {
+                      backgroundColor: bundle.bg && COLORS[bundle.bg],
+                    };
+              return (
+                <Text
+                  id="logbox_codeframe_contents_text"
+                  style={[style, textStyle]}
+                  key={key}>
+                  {getText(bundle.content, key)}
+                </Text>
+              );
+            })}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minWidth: '100%',
+    direction: 'ltr',
+  },
+  line: {
+    flexDirection: 'row',
+  },
+  text: {
+    flexGrow: 1,
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxButton.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+
+import TouchableWithoutFeedback from '../../Components/Touchable/TouchableWithoutFeedback';
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+import {useState} from 'react';
+
+type Props = $ReadOnly<{
+  id?: string,
+  backgroundColor: $ReadOnly<{
+    default: string,
+    pressed: string,
+  }>,
+  children?: React.Node,
+  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 = {
+      default: LogBoxStyle.getBackgroundColor(0.95),
+      pressed: LogBoxStyle.getBackgroundColor(0.6),
+    };
+  }
+
+  const content = (
+    <View
+      id={props.id}
+      style={StyleSheet.compose(
+        {
+          backgroundColor: pressed
+            ? backgroundColor.pressed
+            : backgroundColor.default,
+        },
+        props.style,
+      )}>
+      {props.children}
+    </View>
+  );
+
+  return props.onPress == null ? (
+    content
+  ) : (
+    <TouchableWithoutFeedback
+      hitSlop={props.hitSlop}
+      onPress={props.onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}>
+      {content}
+    </TouchableWithoutFeedback>
+  );
+}
+
+export default LogBoxButton;

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspector.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import Keyboard from '../../Components/Keyboard/Keyboard';
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import * as LogBoxData from '../Data/LogBoxData';
+import LogBoxLog, {type LogLevel} from '../Data/LogBoxLog';
+import LogBoxInspectorBody from './LogBoxInspectorBody';
+import LogBoxInspectorFooter from './LogBoxInspectorFooter';
+import LogBoxInspectorHeader from './LogBoxInspectorHeader';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+import {useEffect} from 'react';
+
+type Props = $ReadOnly<{
+  onDismiss: () => void,
+  onChangeSelectedIndex: (index: number) => void,
+  onMinimize: () => void,
+  logs: $ReadOnlyArray<LogBoxLog>,
+  selectedIndex: number,
+  fatalType?: ?LogLevel,
+}>;
+
+export default function LogBoxInspector(props: Props): React.Node {
+  const {logs, selectedIndex} = props;
+  let log = logs[selectedIndex];
+
+  useEffect(() => {
+    if (log) {
+      LogBoxData.symbolicateLogNow(log);
+    }
+  }, [log]);
+
+  useEffect(() => {
+    // Optimistically symbolicate the last and next logs.
+    if (logs.length > 1) {
+      const selected = selectedIndex;
+      const lastIndex = logs.length - 1;
+      const prevIndex = selected - 1 < 0 ? lastIndex : selected - 1;
+      const nextIndex = selected + 1 > lastIndex ? 0 : selected + 1;
+      LogBoxData.symbolicateLogLazy(logs[prevIndex]);
+      LogBoxData.symbolicateLogLazy(logs[nextIndex]);
+    }
+  }, [logs, selectedIndex]);
+
+  useEffect(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  function _handleRetry() {
+    LogBoxData.retrySymbolicateLogNow(log);
+  }
+
+  if (log == null) {
+    return null;
+  }
+
+  return (
+    <View id="logbox_inspector" style={styles.root}>
+      <LogBoxInspectorHeader
+        onSelectIndex={props.onChangeSelectedIndex}
+        selectedIndex={selectedIndex}
+        total={logs.length}
+        level={log.level}
+      />
+      <LogBoxInspectorBody log={log} onRetry={_handleRetry} />
+      <LogBoxInspectorFooter
+        onDismiss={props.onDismiss}
+        onMinimize={props.onMinimize}
+        level={log.level}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: LogBoxStyle.getTextColor(),
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorBody.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import ScrollView from '../../Components/ScrollView/ScrollView';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxLog from '../Data/LogBoxLog';
+import LogBoxInspectorCodeFrame from './LogBoxInspectorCodeFrame';
+import LogBoxInspectorMessageHeader from './LogBoxInspectorMessageHeader';
+import LogBoxInspectorReactFrames from './LogBoxInspectorReactFrames';
+import LogBoxInspectorStackFrames from './LogBoxInspectorStackFrames';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+
+const headerTitleMap = {
+  warn: 'Console Warning',
+  error: 'Console Error',
+  fatal: 'Uncaught Error',
+  syntax: 'Syntax Error',
+  component: 'Render Error',
+};
+
+export default function LogBoxInspectorBody(props: {
+  log: LogBoxLog,
+  onRetry: () => void,
+}): React.Node {
+  const [collapsed, setCollapsed] = useState(true);
+
+  useEffect(() => {
+    setCollapsed(true);
+  }, [props.log]);
+
+  const headerTitle =
+    props.log.type ??
+    headerTitleMap[props.log.isComponentError ? 'component' : props.log.level];
+
+  if (collapsed) {
+    return (
+      <>
+        <LogBoxInspectorMessageHeader
+          collapsed={collapsed}
+          onPress={() => setCollapsed(!collapsed)}
+          message={props.log.message}
+          level={props.log.level}
+          title={headerTitle}
+        />
+        <ScrollView style={styles.scrollBody}>
+          <LogBoxInspectorCodeFrame
+            codeFrame={props.log.codeFrame}
+            componentCodeFrame={props.log.componentCodeFrame}
+          />
+          <LogBoxInspectorReactFrames log={props.log} />
+          <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
+        </ScrollView>
+      </>
+    );
+  }
+  return (
+    <ScrollView style={styles.scrollBody}>
+      <LogBoxInspectorMessageHeader
+        collapsed={collapsed}
+        onPress={() => setCollapsed(!collapsed)}
+        message={props.log.message}
+        level={props.log.level}
+        title={headerTitle}
+      />
+      <LogBoxInspectorCodeFrame
+        codeFrame={props.log.codeFrame}
+        componentCodeFrame={props.log.componentCodeFrame}
+      />
+      <LogBoxInspectorReactFrames log={props.log} />
+      <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: LogBoxStyle.getTextColor(),
+  },
+  scrollBody: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(0.9),
+    flex: 1,
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js

@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {CodeFrame} from '../Data/parseLogBoxLog';
+
+import ScrollView from '../../Components/ScrollView/ScrollView';
+import View from '../../Components/View/View';
+import openFileInEditor from '../../Core/Devtools/openFileInEditor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import * as LogBoxData from '../Data/LogBoxData';
+import AnsiHighlight from './AnsiHighlight';
+import LogBoxButton from './LogBoxButton';
+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 {
+  function getFileName() {
+    // $FlowFixMe[incompatible-use]
+    const matches = /[^/]*$/.exec(codeFrame.fileName);
+    if (matches && matches.length > 0) {
+      return matches[0];
+    }
+
+    // $FlowFixMe[incompatible-use]
+    return codeFrame.fileName;
+  }
+
+  function getLocation() {
+    // $FlowFixMe[incompatible-use]
+    const location = codeFrame.location;
+    if (location != null) {
+      return ` (${location.row}:${
+        location.column + 1 /* Code frame columns are zero indexed */
+      })`;
+    }
+
+    return null;
+  }
+
+  return (
+    <View style={styles.box}>
+      <View style={styles.frame}>
+        <ScrollView horizontal contentContainerStyle={styles.contentContainer}>
+          <AnsiHighlight style={styles.content} text={codeFrame.content} />
+        </ScrollView>
+      </View>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(1),
+        }}
+        style={styles.button}
+        onPress={() => {
+          openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
+        }}>
+        <Text style={styles.fileText}>
+          {getFileName()}
+          {getLocation()}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function LogBoxInspectorCodeFrame(props: Props): React.Node {
+  const {codeFrame, componentCodeFrame} = props;
+  let sources = [];
+  if (codeFrame != null) {
+    sources.push(codeFrame);
+  }
+  if (
+    componentCodeFrame != null &&
+    componentCodeFrame?.content !== codeFrame?.content
+  ) {
+    sources.push(componentCodeFrame);
+  }
+  if (sources.length === 0) {
+    return null;
+  }
+  return (
+    <LogBoxInspectorSection
+      heading={sources.length > 1 ? 'Sources' : 'Source'}
+      action={<AppInfo />}>
+      {sources.map((frame, index) => (
+        <CodeFrameDisplay key={index} codeFrame={frame} />
+      ))}
+    </LogBoxInspectorSection>
+  );
+}
+
+function AppInfo() {
+  const appInfo = LogBoxData.getAppInfo();
+  if (appInfo == null) {
+    return null;
+  }
+
+  return (
+    <LogBoxButton
+      backgroundColor={{
+        default: 'transparent',
+        pressed: appInfo.onPress
+          ? LogBoxStyle.getBackgroundColor(1)
+          : 'transparent',
+      }}
+      style={appInfoStyles.buildButton}
+      onPress={appInfo.onPress}>
+      <Text style={appInfoStyles.text}>
+        {appInfo.appVersion} ({appInfo.engine})
+      </Text>
+    </LogBoxButton>
+  );
+}
+
+const appInfoStyles = StyleSheet.create({
+  text: {
+    color: LogBoxStyle.getTextColor(0.4),
+    fontSize: 12,
+    lineHeight: 12,
+  },
+  buildButton: {
+    flex: 0,
+    flexGrow: 0,
+    paddingVertical: 4,
+    paddingHorizontal: 5,
+    borderRadius: 5,
+    marginRight: -8,
+  },
+});
+
+const styles = StyleSheet.create({
+  box: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(),
+    marginLeft: 10,
+    marginRight: 10,
+    marginTop: 5,
+    borderRadius: 3,
+  },
+  frame: {
+    padding: 10,
+    borderBottomColor: LogBoxStyle.getTextColor(0.1),
+    borderBottomWidth: 1,
+  },
+  button: {
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  contentContainer: {
+    minWidth: '100%',
+  },
+  content: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 20,
+    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+  },
+  fileText: {
+    color: LogBoxStyle.getTextColor(0.5),
+    textAlign: 'center',
+    flex: 1,
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 16,
+    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+  },
+});
+
+export default LogBoxInspectorCodeFrame;

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {LogLevel} from '../Data/LogBoxLog';
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxInspectorFooterButton from './LogBoxInspectorFooterButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type Props = $ReadOnly<{
+  onDismiss: () => void,
+  onMinimize: () => void,
+  level?: ?LogLevel,
+}>;
+
+export default function LogBoxInspectorFooter(props: Props): React.Node {
+  if (props.level === 'syntax') {
+    return (
+      <View style={styles.root}>
+        <View style={styles.button}>
+          <Text id="logbox_dismissable_text" style={styles.syntaxErrorText}>
+            This error cannot be dismissed.
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.root}>
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_dismiss"
+        text="Dismiss"
+        onPress={props.onDismiss}
+      />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_minimize"
+        text="Minimize"
+        onPress={props.onMinimize}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(1),
+    shadowColor: '#000',
+    shadowOffset: {width: 0, height: -2},
+    shadowRadius: 2,
+    shadowOpacity: 0.5,
+    flexDirection: 'row',
+  },
+  button: {
+    flex: 1,
+  },
+  syntaxErrorText: {
+    textAlign: 'center',
+    width: '100%',
+    height: 48,
+    fontSize: 14,
+    lineHeight: 20,
+    paddingTop: 20,
+    paddingBottom: 50,
+    fontStyle: 'italic',
+    color: LogBoxStyle.getTextColor(0.6),
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type ButtonProps = $ReadOnly<{
+  id: string,
+  onPress: () => void,
+  text: string,
+}>;
+
+export default function LogBoxInspectorFooterButton(
+  props: ButtonProps,
+): React.Node {
+  return (
+    <SafeAreaView style={styles.button}>
+      <LogBoxButton
+        id={props.id}
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(),
+        }}
+        onPress={props.onPress}>
+        <View style={styles.buttonContent}>
+          <Text style={styles.buttonLabel}>{props.text}</Text>
+        </View>
+      </LogBoxButton>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+  },
+  buttonContent: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
+import type {LogLevel} from '../Data/LogBoxLog';
+
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import LogBoxInspectorHeaderButton from './LogBoxInspectorHeaderButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type Props = $ReadOnly<{
+  onSelectIndex: (selectedIndex: number) => void,
+  selectedIndex: number,
+  total: number,
+  level: LogLevel,
+}>;
+
+const LogBoxInspectorHeaderSafeArea: React.ComponentType<ViewProps> =
+  Platform.OS === 'android' ? View : SafeAreaView;
+
+export default function LogBoxInspectorHeader(props: Props): React.Node {
+  if (props.level === 'syntax') {
+    return (
+      <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
+        <View style={styles.header}>
+          <View style={styles.title}>
+            <Text style={styles.titleText} id="logbox_header_title_text">
+              Failed to compile
+            </Text>
+          </View>
+        </View>
+      </LogBoxInspectorHeaderSafeArea>
+    );
+  }
+
+  const prevIndex =
+    props.selectedIndex - 1 < 0 ? props.total - 1 : props.selectedIndex - 1;
+  const nextIndex =
+    props.selectedIndex + 1 > props.total - 1 ? 0 : props.selectedIndex + 1;
+
+  const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
+
+  return (
+    <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
+      <View style={styles.header}>
+        <LogBoxInspectorHeaderButton
+          id="logbox_header_button_prev"
+          disabled={props.total <= 1}
+          level={props.level}
+          image={require('./LogBoxImages/chevron-left.png')}
+          onPress={() => props.onSelectIndex(prevIndex)}
+        />
+        <View style={styles.title}>
+          <Text style={styles.titleText} id="logbox_header_title_text">
+            {titleText}
+          </Text>
+        </View>
+        <LogBoxInspectorHeaderButton
+          id="logbox_header_button_next"
+          disabled={props.total <= 1}
+          level={props.level}
+          image={require('./LogBoxImages/chevron-right.png')}
+          onPress={() => props.onSelectIndex(nextIndex)}
+        />
+      </View>
+    </LogBoxInspectorHeaderSafeArea>
+  );
+}
+
+const styles = StyleSheet.create({
+  syntax: {
+    backgroundColor: LogBoxStyle.getFatalColor(),
+  },
+  fatal: {
+    backgroundColor: LogBoxStyle.getFatalColor(),
+  },
+  warn: {
+    backgroundColor: LogBoxStyle.getWarningColor(),
+  },
+  error: {
+    backgroundColor: LogBoxStyle.getErrorColor(),
+  },
+  header: {
+    flexDirection: 'row',
+    height: Platform.select({
+      android: 48,
+      ios: 44,
+    }),
+  },
+  title: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  titleText: {
+    color: LogBoxStyle.getTextColor(),
+    fontSize: 16,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ImageSource} from '../../Image/ImageSource';
+import type {LogLevel} from '../Data/LogBoxLog';
+
+import Image from '../../Image/Image';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+const backgroundForLevel = (level: LogLevel) =>
+  ({
+    warn: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getWarningDarkColor(),
+    },
+    error: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getErrorDarkColor(),
+    },
+    fatal: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+    syntax: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+  })[level];
+
+export default function LogBoxInspectorHeaderButton(
+  props: $ReadOnly<{
+    id: string,
+    disabled: boolean,
+    image: ImageSource,
+    level: LogLevel,
+    onPress?: ?() => void,
+  }>,
+): React.Node {
+  return (
+    <LogBoxButton
+      id={props.id}
+      backgroundColor={backgroundForLevel(props.level)}
+      onPress={props.disabled ? null : props.onPress}
+      style={styles.button}>
+      {props.disabled ? null : (
+        <Image source={props.image} style={styles.buttonImage} />
+      )}
+    </LogBoxButton>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    aspectRatio: 1,
+    justifyContent: 'center',
+    marginTop: 5,
+    marginRight: 6,
+    marginLeft: 6,
+    marginBottom: -8,
+    borderRadius: 3,
+  },
+  buttonImage: {
+    height: 14,
+    width: 8,
+    tintColor: LogBoxStyle.getTextColor(),
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {LogLevel} from '../Data/LogBoxLog';
+import type {Message} from '../Data/parseLogBoxLog';
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxMessage from './LogBoxMessage';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type Props = $ReadOnly<{
+  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
+    ) {
+      return null;
+    }
+    return (
+      <Text style={messageStyles.collapse} onPress={() => props.onPress()}>
+        ... See More
+      </Text>
+    );
+  }
+
+  return (
+    <View style={messageStyles.body}>
+      <View style={messageStyles.heading}>
+        <Text
+          style={[messageStyles.headingText, messageStyles[props.level]]}
+          id="logbox_message_title_text">
+          {props.title}
+        </Text>
+      </View>
+      <Text style={messageStyles.bodyText} id="logbox_message_contents_text">
+        <LogBoxMessage
+          maxLength={props.collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
+          message={props.message}
+          style={messageStyles.messageText}
+        />
+        {renderShowMore()}
+      </Text>
+    </View>
+  );
+}
+
+const messageStyles = StyleSheet.create({
+  body: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(1),
+    shadowColor: '#000',
+    shadowOffset: {width: 0, height: 2},
+    shadowRadius: 2,
+    shadowOpacity: 0.5,
+    flex: 0,
+  },
+  bodyText: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+    fontWeight: '500',
+    paddingHorizontal: 12,
+    paddingBottom: 10,
+  },
+  heading: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    marginTop: 10,
+    marginBottom: 5,
+  },
+  headingText: {
+    flex: 1,
+    fontSize: 20,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 28,
+  },
+  warn: {
+    color: LogBoxStyle.getWarningColor(1),
+  },
+  error: {
+    color: LogBoxStyle.getErrorColor(1),
+  },
+  fatal: {
+    color: LogBoxStyle.getFatalColor(1),
+  },
+  syntax: {
+    color: LogBoxStyle.getFatalColor(1),
+  },
+  messageText: {
+    color: LogBoxStyle.getTextColor(0.6),
+  },
+  collapse: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 14,
+    fontWeight: '300',
+    lineHeight: 12,
+  },
+  button: {
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderRadius: 3,
+  },
+});
+
+export default LogBoxInspectorMessageHeader;

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type LogBoxLog from '../Data/LogBoxLog';
+
+import View from '../../Components/View/View';
+import openFileInEditor from '../../Core/Devtools/openFileInEditor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorSection from './LogBoxInspectorSection';
+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
+function getPrettyFileName(path: string) {
+  let fileName = path.replace(BEFORE_SLASH_RE, '');
+
+  // In DEV, include code for a common special case:
+  // prefer "folder/index.js" instead of just "index.js".
+  if (/^index\./.test(fileName)) {
+    const match = path.match(BEFORE_SLASH_RE);
+    if (match) {
+      const pathBeforeSlash = match[1];
+      if (pathBeforeSlash) {
+        const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+        // Note the below string contains a zero width space after the "/" character.
+        // This is to prevent browsers like Chrome from formatting the file name as a link.
+        // (Since this is a source link, it would not work to open the source file anyway.)
+        fileName = folderName + '/​' + fileName;
+      }
+    }
+  }
+
+  return fileName;
+}
+function LogBoxInspectorReactFrames(props: Props): React.Node {
+  const [collapsed, setCollapsed] = useState(true);
+  if (
+    props.log.getAvailableComponentStack() == null ||
+    props.log.getAvailableComponentStack().length < 1
+  ) {
+    return null;
+  }
+
+  function getStackList() {
+    if (collapsed) {
+      return props.log.getAvailableComponentStack().slice(0, 3);
+    } else {
+      return props.log.getAvailableComponentStack();
+    }
+  }
+
+  function getCollapseMessage() {
+    if (props.log.getAvailableComponentStack().length <= 3) {
+      return;
+    }
+
+    const count = props.log.getAvailableComponentStack().length - 3;
+    if (collapsed) {
+      return `See ${count} more components`;
+    } else {
+      return `Collapse ${count} components`;
+    }
+  }
+
+  return (
+    <LogBoxInspectorSection heading="Component Stack">
+      {getStackList().map((frame, index) => (
+        <View
+          // Unfortunately we don't have a unique identifier for stack traces.
+          key={index}
+          style={componentStyles.frameContainer}>
+          <LogBoxButton
+            backgroundColor={{
+              default: 'transparent',
+              pressed: LogBoxStyle.getBackgroundColor(1),
+            }}
+            onPress={
+              // Older versions of DevTools do not provide full path.
+              // This will not work on Windows, remove check once the
+              // DevTools return the full file path.
+              frame.fileName.startsWith('/')
+                ? () =>
+                    openFileInEditor(frame.fileName, frame.location?.row ?? 1)
+                : null
+            }
+            style={componentStyles.frame}>
+            <View style={componentStyles.component}>
+              <Text
+                id="logbox_component_stack_frame_text"
+                style={componentStyles.frameName}>
+                <Text style={componentStyles.bracket}>{'<'}</Text>
+                {frame.content}
+                <Text style={componentStyles.bracket}>{' />'}</Text>
+              </Text>
+            </View>
+            <Text style={componentStyles.frameLocation}>
+              {getPrettyFileName(frame.fileName)}
+              {frame.location ? `:${frame.location.row}` : ''}
+            </Text>
+          </LogBoxButton>
+        </View>
+      ))}
+      <View style={componentStyles.collapseContainer}>
+        <LogBoxButton
+          backgroundColor={{
+            default: 'transparent',
+            pressed: LogBoxStyle.getBackgroundColor(1),
+          }}
+          onPress={() => setCollapsed(!collapsed)}
+          style={componentStyles.collapseButton}>
+          <Text style={componentStyles.collapse}>{getCollapseMessage()}</Text>
+        </LogBoxButton>
+      </View>
+    </LogBoxInspectorSection>
+  );
+}
+
+const componentStyles = StyleSheet.create({
+  collapseContainer: {
+    marginLeft: 15,
+    flexDirection: 'row',
+  },
+  collapseButton: {
+    borderRadius: 5,
+  },
+  collapse: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 12,
+    fontWeight: '300',
+    lineHeight: 20,
+    marginTop: 0,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+  frameContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 15,
+  },
+  frame: {
+    flex: 1,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+  },
+  component: {
+    flexDirection: 'row',
+    paddingRight: 10,
+  },
+  frameName: {
+    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 18,
+  },
+  bracket: {
+    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+    color: LogBoxStyle.getTextColor(0.4),
+    fontSize: 14,
+    fontWeight: '500',
+    includeFontPadding: false,
+    lineHeight: 18,
+  },
+  frameLocation: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 12,
+    fontWeight: '300',
+    includeFontPadding: false,
+    lineHeight: 16,
+    paddingLeft: 10,
+  },
+});
+
+export default LogBoxInspectorReactFrames;

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorSection.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type Props = $ReadOnly<{
+  heading: string,
+  children: React.Node,
+  action?: ?React.Node,
+}>;
+
+function LogBoxInspectorSection(props: Props): React.Node {
+  return (
+    <View style={styles.section}>
+      <View style={styles.heading}>
+        <Text style={styles.headingText}>{props.heading}</Text>
+        {props.action}
+      </View>
+      <View style={styles.body}>{props.children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  section: {
+    marginTop: 15,
+  },
+  heading: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    marginBottom: 10,
+  },
+  headingText: {
+    color: LogBoxStyle.getTextColor(1),
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+  body: {
+    paddingBottom: 10,
+  },
+});
+
+export default LogBoxInspectorSection;

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+
+import Animated from '../../Animated/Animated';
+import Easing from '../../Animated/Easing';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+
+type Props = $ReadOnly<{
+  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 (state.animation == null) {
+        const animated = new Animated.Value(0);
+        const animation = Animated.loop(
+          Animated.timing(animated, {
+            duration: 2000,
+            easing: Easing.linear,
+            toValue: 1,
+            useNativeDriver: true,
+          }),
+        );
+        // $FlowFixMe[incompatible-type]
+        setState({
+          animation,
+          rotate: animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0deg', '360deg'],
+          }),
+        });
+        animation.start();
+      }
+    } else {
+      if (state.animation != null) {
+        state.animation.stop();
+        setState({
+          animation: null,
+          rotate: null,
+        });
+      }
+    }
+
+    return () => {
+      if (state.animation != null) {
+        state.animation.stop();
+      }
+    };
+  }, [props.status, state.animation]);
+
+  let image;
+  let color;
+  switch (props.status) {
+    case 'FAILED':
+      image = require('./LogBoxImages/alert-triangle.png');
+      color = LogBoxStyle.getErrorColor(1);
+      break;
+    case 'PENDING':
+      image = require('./LogBoxImages/loader.png');
+      color = LogBoxStyle.getWarningColor(1);
+      break;
+  }
+
+  if (props.status === 'COMPLETE' || image == null) {
+    return null;
+  }
+
+  return (
+    <LogBoxButton
+      backgroundColor={{
+        default: 'transparent',
+        pressed: LogBoxStyle.getBackgroundColor(1),
+      }}
+      hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
+      onPress={props.onPress}
+      style={styles.root}>
+      <Animated.Image
+        source={image}
+        style={[
+          styles.image,
+          {tintColor: color},
+          state.rotate == null || props.status !== 'PENDING'
+            ? null
+            : {transform: [{rotate: state.rotate}]},
+        ]}
+      />
+      <Text style={[styles.text, {color}]}>Source Map</Text>
+    </LogBoxButton>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    height: 24,
+    paddingHorizontal: 8,
+  },
+  image: {
+    height: 14,
+    width: 16,
+    marginEnd: 4,
+    tintColor: LogBoxStyle.getTextColor(0.4),
+  },
+  text: {
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 16,
+  },
+});
+
+export default LogBoxInspectorSourceMapStatus;

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {StackFrame} from '../../Core/NativeExceptionsManager';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type Props = $ReadOnly<{
+  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) +
+    (frame.lineNumber != null
+      ? ':' +
+        frame.lineNumber +
+        (column && !isNaN(column) ? ':' + (column + 1) : '')
+      : '');
+  return (
+    <View style={styles.frameContainer}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: onPress ? LogBoxStyle.getBackgroundColor(1) : 'transparent',
+        }}
+        onPress={onPress}
+        style={styles.frame}>
+        <Text
+          id="logbox_stack_frame_text"
+          style={[styles.name, frame.collapse === true && styles.dim]}>
+          {frame.methodName}
+        </Text>
+        <Text
+          ellipsizeMode="middle"
+          numberOfLines={1}
+          style={[styles.location, frame.collapse === true && styles.dim]}>
+          {location}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function getFileName(file: ?string) {
+  if (file == null) {
+    return '<unknown>';
+  }
+  const queryIndex = file.indexOf('?');
+  return file.substring(
+    file.lastIndexOf('/') + 1,
+    queryIndex === -1 ? file.length : queryIndex,
+  );
+}
+
+const styles = StyleSheet.create({
+  frameContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 15,
+  },
+  frame: {
+    flex: 1,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+  },
+  lineLocation: {
+    flexDirection: 'row',
+  },
+  name: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 18,
+    fontWeight: '400',
+    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+  },
+  location: {
+    color: LogBoxStyle.getTextColor(0.8),
+    fontSize: 12,
+    fontWeight: '300',
+    includeFontPadding: false,
+    lineHeight: 16,
+    paddingLeft: 10,
+  },
+  dim: {
+    color: LogBoxStyle.getTextColor(0.4),
+    fontWeight: '300',
+  },
+  line: {
+    color: LogBoxStyle.getTextColor(0.8),
+    fontSize: 12,
+    fontWeight: '300',
+    includeFontPadding: false,
+    lineHeight: 16,
+  },
+});
+
+export default LogBoxInspectorStackFrame;

node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -0,0 +1,222 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {StackFrame} from '../../Core/NativeExceptionsManager';
+import type LogBoxLog from '../Data/LogBoxLog';
+import type {Stack} from '../Data/LogBoxSymbolication';
+
+import View from '../../Components/View/View';
+import openFileInEditor from '../../Core/Devtools/openFileInEditor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorSection from './LogBoxInspectorSection';
+import LogBoxInspectorSourceMapStatus from './LogBoxInspectorSourceMapStatus';
+import LogBoxInspectorStackFrame from './LogBoxInspectorStackFrame';
+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,
+): string {
+  if (stackFrames.length === 0) {
+    return 'No frames to show';
+  }
+
+  const collapsedCount = stackFrames.reduce((count, {collapse}) => {
+    if (collapse === true) {
+      return count + 1;
+    }
+
+    return count;
+  }, 0);
+
+  if (collapsedCount === 0) {
+    return 'Showing all frames';
+  }
+
+  const framePlural = `frame${collapsedCount > 1 ? 's' : ''}`;
+  if (collapsedCount === stackFrames.length) {
+    return collapsed
+      ? `See${
+          collapsedCount > 1 ? ' all ' : ' '
+        }${collapsedCount} collapsed ${framePlural}`
+      : `Collapse${
+          collapsedCount > 1 ? ' all ' : ' '
+        }${collapsedCount} ${framePlural}`;
+  } else {
+    return collapsed
+      ? `See ${collapsedCount} more ${framePlural}`
+      : `Collapse ${collapsedCount} ${framePlural}`;
+  }
+}
+
+function LogBoxInspectorStackFrames(props: Props): React.Node {
+  const [collapsed, setCollapsed] = useState(() => {
+    // Only collapse frames initially if some frames are not collapsed.
+    return props.log.getAvailableStack().some(({collapse}) => !collapse);
+  });
+
+  function getStackList() {
+    if (collapsed === true) {
+      return props.log.getAvailableStack().filter(({collapse}) => !collapse);
+    } else {
+      return props.log.getAvailableStack();
+    }
+  }
+
+  if (props.log.getAvailableStack().length === 0) {
+    return null;
+  }
+
+  return (
+    <LogBoxInspectorSection
+      heading="Call Stack"
+      action={
+        <LogBoxInspectorSourceMapStatus
+          onPress={
+            props.log.symbolicated.status === 'FAILED' ? props.onRetry : null
+          }
+          status={props.log.symbolicated.status}
+        />
+      }>
+      {props.log.symbolicated.status !== 'COMPLETE' && (
+        <View style={stackStyles.hintBox}>
+          <Text style={stackStyles.hintText}>
+            This call stack is not symbolicated. Some features are unavailable
+            such as viewing the function name or tapping to open files.
+          </Text>
+        </View>
+      )}
+      <StackFrameList
+        list={getStackList()}
+        status={props.log.symbolicated.status}
+      />
+      <StackFrameFooter
+        onPress={() => setCollapsed(!collapsed)}
+        message={getCollapseMessage(props.log.getAvailableStack(), collapsed)}
+      />
+    </LogBoxInspectorSection>
+  );
+}
+
+function StackFrameList(props: {
+  list: Stack | Array<StackFrame>,
+  status: string | 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
+}) {
+  return (
+    <>
+      {props.list.map((frame, index) => {
+        const {file, lineNumber} = frame;
+        return (
+          <LogBoxInspectorStackFrame
+            key={index}
+            frame={frame}
+            onPress={
+              props.status === 'COMPLETE' && file != null && lineNumber != null
+                ? () => openFileInEditor(file, lineNumber)
+                : null
+            }
+          />
+        );
+      })}
+    </>
+  );
+}
+
+function StackFrameFooter(
+  props: $ReadOnly<{message: string, onPress: () => void}>,
+) {
+  return (
+    <View style={stackStyles.collapseContainer}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundColor(1),
+        }}
+        onPress={props.onPress}
+        style={stackStyles.collapseButton}>
+        <Text style={stackStyles.collapse}>{props.message}</Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+const stackStyles = StyleSheet.create({
+  section: {
+    marginTop: 15,
+  },
+  heading: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    marginBottom: 10,
+  },
+  headingText: {
+    color: LogBoxStyle.getTextColor(1),
+    flex: 1,
+    fontSize: 20,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+  body: {
+    paddingBottom: 10,
+  },
+  bodyText: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 18,
+    fontWeight: '500',
+    paddingHorizontal: 27,
+  },
+  hintText: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 13,
+    includeFontPadding: false,
+    lineHeight: 18,
+    fontWeight: '400',
+    marginHorizontal: 10,
+  },
+  hintBox: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(),
+    marginHorizontal: 10,
+    paddingHorizontal: 5,
+    paddingVertical: 10,
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  collapseContainer: {
+    marginLeft: 15,
+    flexDirection: 'row',
+  },
+  collapseButton: {
+    borderRadius: 5,
+  },
+  collapse: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 12,
+    fontWeight: '300',
+    lineHeight: 20,
+    marginTop: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+});
+
+export default LogBoxInspectorStackFrames;

node_modules/react-native/Libraries/LogBox/UI/LogBoxMessage.js

@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
+import type {Message} from '../Data/parseLogBoxLog';
+
+import Linking from '../../Linking/Linking';
+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,
+};
+
+function getLinkRanges(string: string): $ReadOnlyArray<Range> {
+  const regex = /https?:\/\/[^\s$.?#].[^\s]*/gi;
+  const matches = [];
+
+  let regexResult: RegExp$matchResult | null;
+  while ((regexResult = regex.exec(string)) !== null) {
+    if (regexResult != null) {
+      matches.push({
+        lowerBound: regexResult.index,
+        upperBound: regex.lastIndex,
+      });
+    }
+  }
+
+  return matches;
+}
+
+function TappableLinks(props: {
+  content: string,
+  style: void | TextStyleProp,
+}): React.Node {
+  const matches = getLinkRanges(props.content);
+
+  if (matches.length === 0) {
+    // No URLs detected. Just return the content.
+    return <Text style={props.style}>{props.content}</Text>;
+  }
+
+  // URLs were detected. Construct array of Text nodes.
+
+  const fragments: Array<React.Node> = [];
+  let indexCounter = 0;
+  let startIndex = 0;
+
+  for (const linkRange of matches) {
+    if (startIndex < linkRange.lowerBound) {
+      const text = props.content.substring(startIndex, linkRange.lowerBound);
+      fragments.push(<Text key={++indexCounter}>{text}</Text>);
+    }
+
+    const link = props.content.substring(
+      linkRange.lowerBound,
+      linkRange.upperBound,
+    );
+    fragments.push(
+      <Text
+        onPress={() => {
+          // $FlowFixMe[unused-promise]
+          Linking.openURL(link);
+        }}
+        key={++indexCounter}
+        style={styles.linkText}>
+        {link}
+      </Text>,
+    );
+
+    startIndex = linkRange.upperBound;
+  }
+
+  if (startIndex < props.content.length) {
+    const text = props.content.substring(startIndex);
+    fragments.push(
+      <Text key={++indexCounter} style={props.style}>
+        {text}
+      </Text>,
+    );
+  }
+
+  return <Text style={props.style}>{fragments}</Text>;
+}
+
+const cleanContent = (content: string) =>
+  content.replace(/^(TransformError |Warning: (Warning: )?|Error: )/g, '');
+
+function LogBoxMessage(props: Props): React.Node {
+  const {content, substitutions}: Message = props.message;
+
+  if (props.plaintext === true) {
+    return <Text>{cleanContent(content)}</Text>;
+  }
+
+  const maxLength = props.maxLength != null ? props.maxLength : Infinity;
+  const substitutionStyle: TextStyleProp = props.style;
+  const elements = [];
+  let length = 0;
+  const createUnderLength = (
+    key: string,
+    message: string,
+    style: void | TextStyleProp,
+  ) => {
+    let cleanMessage = cleanContent(message);
+
+    if (props.maxLength != null) {
+      cleanMessage = cleanMessage.slice(0, props.maxLength - length);
+    }
+
+    if (length < maxLength) {
+      elements.push(
+        <TappableLinks content={cleanMessage} key={key} style={style} />,
+      );
+    }
+
+    length += cleanMessage.length;
+  };
+
+  const lastOffset = substitutions.reduce((prevOffset, substitution, index) => {
+    const key = String(index);
+
+    if (substitution.offset > prevOffset) {
+      const prevPart = content.slice(prevOffset, substitution.offset);
+
+      createUnderLength(key, prevPart);
+    }
+
+    const substitutionPart = content.slice(
+      substitution.offset,
+      substitution.offset + substitution.length,
+    );
+
+    createUnderLength(key + '.5', substitutionPart, substitutionStyle);
+    return substitution.offset + substitution.length;
+  }, 0);
+
+  if (lastOffset < content.length) {
+    const lastPart = content.slice(lastOffset);
+    createUnderLength('-1', lastPart);
+  }
+
+  return <>{elements}</>;
+}
+
+const styles = StyleSheet.create({
+  linkText: {
+    textDecorationLine: 'underline',
+  },
+});
+
+export default LogBoxMessage;

node_modules/react-native/Libraries/LogBox/UI/LogBoxNotification.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import * as LogBoxData from '../Data/LogBoxData';
+import LogBoxLog from '../Data/LogBoxLog';
+import LogBoxButton from './LogBoxButton';
+import LogBoxNotificationCountBadge from './LogBoxNotificationCountBadge';
+import LogBoxNotificationDismissButton from './LogBoxNotificationDismissButton';
+import LogBoxNotificationMessage from './LogBoxNotificationMessage';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+import {useEffect} from 'react';
+
+type Props = $ReadOnly<{
+  log: LogBoxLog,
+  totalLogCount: number,
+  level: 'warn' | 'error',
+  onPressOpen: () => void,
+  onPressDismiss: () => void,
+}>;
+
+export default function LogBoxNotification(props: Props): React.Node {
+  const {totalLogCount, level, log} = props;
+
+  // Eagerly symbolicate so the stack is available when pressing to inspect.
+  useEffect(() => {
+    LogBoxData.symbolicateLogLazy(log);
+  }, [log]);
+
+  return (
+    <View id="logbox_notification" style={styles.container}>
+      <LogBoxButton
+        id={`logbox_open_button_${level}`}
+        onPress={props.onPressOpen}
+        style={styles.press}
+        backgroundColor={{
+          default: LogBoxStyle.getBackgroundColor(1),
+          pressed: LogBoxStyle.getBackgroundColor(0.9),
+        }}>
+        <View style={styles.content}>
+          <LogBoxNotificationCountBadge count={totalLogCount} level={level} />
+          <LogBoxNotificationMessage message={log.message} />
+          <LogBoxNotificationDismissButton
+            id={`logbox_dismiss_button_${level}`}
+            onPress={props.onPressDismiss}
+          />
+        </View>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 48,
+    position: 'relative',
+    width: '100%',
+    justifyContent: 'center',
+    marginTop: 0.5,
+    backgroundColor: LogBoxStyle.getTextColor(1),
+  },
+  press: {
+    height: 48,
+    position: 'relative',
+    width: '100%',
+    justifyContent: 'center',
+    marginTop: 0.5,
+    paddingHorizontal: 12,
+  },
+  content: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    borderRadius: 8,
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+export default function LogBoxNotificationCountBadge(props: {
+  count: number,
+  level: 'error' | 'warn',
+}): React.Node {
+  return (
+    <View style={styles.outside}>
+      {/* $FlowFixMe[incompatible-type] (>=0.114.0) This suppression was added
+       * when fixing the type of `StyleSheet.create`. Remove this comment to
+       * see the error. */}
+      <View style={[styles.inside, styles[props.level]]}>
+        <Text id="logbox_notification_count_text" style={styles.text}>
+          {props.count <= 1 ? '!' : props.count}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  warn: {
+    backgroundColor: LogBoxStyle.getWarningColor(1),
+  },
+  error: {
+    backgroundColor: LogBoxStyle.getErrorColor(1),
+  },
+  outside: {
+    padding: 2,
+    borderRadius: 25,
+    backgroundColor: '#fff',
+    marginRight: 8,
+  },
+  inside: {
+    minWidth: 18,
+    paddingLeft: 4,
+    paddingRight: 4,
+    borderRadius: 25,
+    fontWeight: '600',
+  },
+  text: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    lineHeight: 18,
+    textAlign: 'center',
+    fontWeight: '600',
+    textShadowColor: LogBoxStyle.getBackgroundColor(0.4),
+    textShadowOffset: {width: 0, height: 0},
+    textShadowRadius: 3,
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxNotificationDismissButton.js

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import View from '../../Components/View/View';
+import Image from '../../Image/Image';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+export default function LogBoxNotificationDismissButton(props: {
+  id: string,
+  onPress: () => void,
+}): React.Node {
+  return (
+    <View style={styles.container}>
+      <LogBoxButton
+        id={props.id}
+        backgroundColor={{
+          default: LogBoxStyle.getTextColor(0.3),
+          pressed: LogBoxStyle.getTextColor(0.5),
+        }}
+        hitSlop={{
+          top: 12,
+          right: 10,
+          bottom: 12,
+          left: 10,
+        }}
+        onPress={props.onPress}
+        style={styles.press}>
+        <Image
+          source={require('./LogBoxImages/close.png')}
+          style={styles.image}
+        />
+      </LogBoxButton>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    marginLeft: 5,
+  },
+  press: {
+    height: 20,
+    width: 20,
+    borderRadius: 25,
+    alignSelf: 'flex-end',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    height: 8,
+    width: 8,
+    tintColor: LogBoxStyle.getBackgroundColor(1),
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxNotificationMessage.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {Message as MessageType} from '../Data/parseLogBoxLog';
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxMessage from './LogBoxMessage';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+export default function LogBoxNotificationMessage(props: {
+  message: MessageType,
+}): React.Node {
+  return (
+    <View style={styles.container}>
+      <Text
+        id="logbox_notification_message_text"
+        numberOfLines={1}
+        style={styles.text}>
+        {props.message && (
+          <LogBoxMessage
+            plaintext
+            message={props.message}
+            style={styles.substitutionText}
+          />
+        )}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'stretch',
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
+    borderLeftColor: LogBoxStyle.getTextColor(0.2),
+    borderLeftWidth: 1,
+    paddingLeft: 8,
+  },
+  text: {
+    color: LogBoxStyle.getTextColor(1),
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  substitutionText: {
+    color: LogBoxStyle.getTextColor(0.6),
+  },
+});

node_modules/react-native/Libraries/LogBox/UI/LogBoxStyle.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+export function getBackgroundColor(opacity?: number): string {
+  return `rgba(51, 51, 51, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getBackgroundLightColor(opacity?: number): string {
+  return `rgba(69, 69, 69, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getBackgroundDarkColor(opacity?: number): string {
+  return `rgba(34, 34, 34, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getWarningColor(opacity?: number): string {
+  return `rgba(250, 186, 48, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getWarningDarkColor(opacity?: number): string {
+  return `rgba(224, 167, 8, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getFatalColor(opacity?: number): string {
+  return `rgba(243, 83, 105, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getFatalDarkColor(opacity?: number): string {
+  return `rgba(208, 75, 95, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getErrorColor(opacity?: number): string {
+  return `rgba(243, 83, 105, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getErrorDarkColor(opacity?: number): string {
+  return `rgba(208, 75, 95, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getLogColor(opacity?: number): string {
+  return `rgba(119, 119, 119, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getWarningHighlightColor(opacity?: number): string {
+  return `rgba(252, 176, 29, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getDividerColor(opacity?: number): string {
+  return `rgba(255, 255, 255, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getHighlightColor(opacity?: number): string {
+  return `rgba(252, 176, 29, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getTextColor(opacity?: number): string {
+  return `rgba(255, 255, 255, ${opacity == null ? 1 : opacity})`;
+}