react-native-tvos 0.78.0-0rc4 → 0.79.0-0

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -107,7 +107,7 @@ export type ExtendedExceptionData = ExceptionData & {
   ...
 };
 export type Category = string;
-export type CodeFrame = $ReadOnly<{|
+export type CodeFrame = $ReadOnly<{
   content: string,
   location: ?{
     row: number,
@@ -120,26 +120,26 @@ export type CodeFrame = $ReadOnly<{|
   // we gained the ability to use the collapse flag, but
   // it is not integrated into the LogBox UI.
   collapse?: boolean,
-|}>;
-export type Message = $ReadOnly<{|
+}>;
+export type Message = $ReadOnly<{
   content: string,
   substitutions: $ReadOnlyArray<
-    $ReadOnly<{|
+    $ReadOnly<{
       length: number,
       offset: number,
-    |}>,
+    }>,
   >,
-|}>;
+}>;
 
 export type ComponentStack = $ReadOnlyArray<CodeFrame>;
 export type ComponentStackType = 'legacy' | 'stack';
 
 const SUBSTITUTION = UTFSequence.BOM + '%s';
 
-export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{|
+export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{
   category: Category,
   message: Message,
-|}> {
+}> {
   const categoryParts = [];
   const contentParts = [];
   const substitutionOffsets = [];
@@ -456,12 +456,12 @@ export function withoutANSIColorStyles(message: mixed): mixed {
   );
 }
 
-export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
+export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {
   componentStack: ComponentStack,
   componentStackType: ComponentStackType,
   category: Category,
   message: Message,
-|} {
+} {
   const message = withoutANSIColorStyles(args[0]);
   let argsWithoutComponentStack: Array<mixed> = [];
   let componentStack: ComponentStack = [];

package/Libraries/LogBox/LogBox.js

@@ -14,6 +14,7 @@ import type {ExtendedExceptionData} from './Data/parseLogBoxLog';
 import Platform from '../Utilities/Platform';
 import RCTLog from '../Utilities/RCTLog';
 import {hasComponentStack} from './Data/parseLogBoxLog';
+import * as React from 'react';
 
 export type {LogData, ExtendedExceptionData, IgnorePattern};
 
@@ -24,7 +25,7 @@ interface ILogBox {
   uninstall(): void;
   isInstalled(): boolean;
   ignoreLogs($ReadOnlyArray<IgnorePattern>): void;
-  ignoreAllLogs(?boolean): void;
+  ignoreAllLogs(value?: boolean): void;
   clearAllLogs(): void;
   addLog(log: LogData): void;
   addException(error: ExtendedExceptionData): void;
@@ -115,10 +116,18 @@ if (__DEV__) {
       return isLogBoxInstalled;
     },
 
+    /**
+     * Silence any logs that match the given strings or regexes.
+     */
     ignoreLogs(patterns: $ReadOnlyArray<IgnorePattern>): void {
       LogBoxData.addIgnorePatterns(patterns);
     },
 
+    /**
+     * Toggle error and warning notifications
+     * Note: this only disables notifications, uncaught errors will still open a full screen LogBox.
+     * @param ignore whether to ignore logs or not
+     */
     ignoreAllLogs(value?: ?boolean): void {
       LogBoxData.setDisabled(value == null ? true : value);
     },
@@ -192,9 +201,20 @@ if (__DEV__) {
     }
 
     try {
+      let stack;
+      // $FlowFixMe[prop-missing] Not added to flow types yet.
+      if (!hasComponentStack(args) && React.captureOwnerStack != null) {
+        stack = React.captureOwnerStack();
+        if (!hasComponentStack(args)) {
+          if (stack != null && stack !== '') {
+            args[0] = args[0] += '%s';
+            args.push(stack);
+          }
+        }
+      }
       if (!isWarningModuleWarning(...args) && !hasComponentStack(args)) {
         // Only show LogBox for the 'warning' module, or React errors with
-        // component stacks, otherwise pass the error through.u
+        // component stacks, otherwise pass the error through.
         //
         // By passing through, this will get picked up by the React console override,
         // potentially adding the component stack. React then passes it back to the

package/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -16,11 +16,11 @@ import * as LogBoxData from './Data/LogBoxData';
 import LogBoxInspector from './UI/LogBoxInspector';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
-|}>;
+}>;
 
 export class _LogBoxInspectorContainer extends React.Component<Props> {
   render(): React.Node {
@@ -65,4 +65,4 @@ export class _LogBoxInspectorContainer extends React.Component<Props> {
 
 export default (LogBoxData.withSubscription(
   _LogBoxInspectorContainer,
-): React.ComponentType<{||}>);
+): React.ComponentType<{}>);

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -17,11 +17,11 @@ import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
-|}>;
+}>;
 
 export function _LogBoxNotificationContainer(props: Props): React.Node {
   const {logs} = props;
@@ -109,4 +109,4 @@ const styles = StyleSheet.create({
 
 export default (LogBoxData.withSubscription(
   _LogBoxNotificationContainer,
-): React.ComponentType<{||}>);
+): React.ComponentType<{}>);

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -70,7 +70,9 @@ export default function Ansi({
   /* $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 === 1) {
+    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) {
@@ -86,7 +88,6 @@ export default function Ansi({
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
           <Text>
-            {LRM}
             {items.map((bundle, key) => {
               const textStyle =
                 bundle.fg && COLORS[bundle.fg]
@@ -98,7 +99,10 @@ export default function Ansi({
                       backgroundColor: bundle.bg && COLORS[bundle.bg],
                     };
               return (
-                <Text style={[style, textStyle]} key={key}>
+                <Text
+                  id="logbox_codeframe_contents_text"
+                  style={[style, textStyle]}
+                  key={key}>
                   {getText(bundle.content, key)}
                 </Text>
               );

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -10,7 +10,7 @@
 
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import TouchableHighlight from '../../Components/Touchable/TouchableHighlight';
 import TouchableWithoutFeedback from '../../Components/Touchable/TouchableWithoutFeedback';
@@ -20,16 +20,17 @@ import Platform from '../../Utilities/Platform';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
-  backgroundColor: $ReadOnly<{|
+type Props = $ReadOnly<{
+  id?: string,
+  backgroundColor: $ReadOnly<{
     default: string,
     pressed: string,
-  |}>,
+  }>,
   children?: React.Node,
   hitSlop?: ?EdgeInsetsProp,
-  onPress?: ?(event: PressEvent) => void,
+  onPress?: ?(event: GestureResponderEvent) => void,
   style?: ViewStyleProp,
-|}>;
+}>;
 
 function LogBoxButton(props: Props): React.Node {
   const [pressed, setPressed] = React.useState(false);
@@ -44,6 +45,7 @@ function LogBoxButton(props: Props): React.Node {
 
   const content = (
     <View
+      id={props.id}
       style={StyleSheet.compose(
         {
           backgroundColor: pressed

package/Libraries/LogBox/UI/LogBoxInspector.js

@@ -64,7 +64,7 @@ export default function LogBoxInspector(props: Props): React.Node {
   }
 
   return (
-    <View style={styles.root}>
+    <View id="logbox_inspector" style={styles.root}>
       <LogBoxInspectorHeader
         onSelectIndex={props.onChangeSelectedIndex}
         selectedIndex={selectedIndex}

package/Libraries/LogBox/UI/LogBoxInspectorBody.js

@@ -52,7 +52,10 @@ export default function LogBoxInspectorBody(props: {
           title={headerTitle}
         />
         <ScrollView style={styles.scrollBody}>
-          <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+          <LogBoxInspectorCodeFrame
+            codeFrame={props.log.codeFrame}
+            componentCodeFrame={props.log.componentCodeFrame}
+          />
           <LogBoxInspectorReactFrames log={props.log} />
           <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
         </ScrollView>
@@ -68,7 +71,10 @@ export default function LogBoxInspectorBody(props: {
         level={props.log.level}
         title={headerTitle}
       />
-      <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+      <LogBoxInspectorCodeFrame
+        codeFrame={props.log.codeFrame}
+        componentCodeFrame={props.log.componentCodeFrame}
+      />
       <LogBoxInspectorReactFrames log={props.log} />
       <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
     </ScrollView>

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js

@@ -22,16 +22,13 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-type Props = $ReadOnly<{|
-  codeFrame: ?CodeFrame,
-|}>;
 
-function LogBoxInspectorCodeFrame(props: Props): React.Node {
-  const codeFrame = props.codeFrame;
-  if (codeFrame == null) {
-    return null;
-  }
+type Props = $ReadOnly<{
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+}>;
 
+function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
   function getFileName() {
     // $FlowFixMe[incompatible-use]
     const matches = /[^/]*$/.exec(codeFrame.fileName);
@@ -56,30 +53,52 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   }
 
   return (
-    <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
-      <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 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>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -28,7 +28,7 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
     return (
       <View style={styles.root}>
         <View style={styles.button}>
-          <Text style={styles.syntaxErrorText}>
+          <Text id="logbox_dismissable_text" style={styles.syntaxErrorText}>
             This error cannot be dismissed.
           </Text>
         </View>
@@ -38,8 +38,16 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
 
   return (
     <View style={styles.root}>
-      <LogBoxInspectorFooterButton text="Dismiss" onPress={props.onDismiss} />
-      <LogBoxInspectorFooterButton text="Minimize" onPress={props.onMinimize} />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_dismiss"
+        text="Dismiss"
+        onPress={props.onDismiss}
+      />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_minimize"
+        text="Minimize"
+        onPress={props.onMinimize}
+      />
     </View>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -17,6 +17,7 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
 type ButtonProps = $ReadOnly<{
+  id: string,
   onPress: () => void,
   text: string,
 }>;
@@ -27,6 +28,7 @@ export default function LogBoxInspectorFooterButton(
   return (
     <SafeAreaView style={styles.button}>
       <LogBoxButton
+        id={props.id}
         backgroundColor={{
           default: 'transparent',
           pressed: LogBoxStyle.getBackgroundDarkColor(),

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -36,7 +36,9 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
       <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
-            <Text style={styles.titleText}>Failed to compile</Text>
+            <Text style={styles.titleText} id="logbox_header_title_text">
+              Failed to compile
+            </Text>
           </View>
         </View>
       </LogBoxInspectorHeaderSafeArea>
@@ -54,15 +56,19 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
     <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}>{titleText}</Text>
+          <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')}

package/Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js

@@ -39,6 +39,7 @@ const backgroundForLevel = (level: LogLevel) =>
 
 export default function LogBoxInspectorHeaderButton(
   props: $ReadOnly<{
+    id: string,
     disabled: boolean,
     image: ImageSource,
     level: LogLevel,
@@ -47,6 +48,7 @@ export default function LogBoxInspectorHeaderButton(
 ): React.Node {
   return (
     <LogBoxButton
+      id={props.id}
       backgroundColor={backgroundForLevel(props.level)}
       onPress={props.disabled ? null : props.onPress}
       style={styles.button}>

package/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -18,13 +18,13 @@ import LogBoxMessage from './LogBoxMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   collapsed: boolean,
   message: Message,
   level: LogLevel,
   title: string,
   onPress: () => void,
-|}>;
+}>;
 
 const SHOW_MORE_MESSAGE_LENGTH = 300;
 
@@ -46,11 +46,13 @@ function LogBoxInspectorMessageHeader(props: Props): React.Node {
   return (
     <View style={messageStyles.body}>
       <View style={messageStyles.heading}>
-        <Text style={[messageStyles.headingText, messageStyles[props.level]]}>
+        <Text
+          style={[messageStyles.headingText, messageStyles[props.level]]}
+          id="logbox_message_title_text">
           {props.title}
         </Text>
       </View>
-      <Text style={messageStyles.bodyText}>
+      <Text style={messageStyles.bodyText} id="logbox_message_contents_text">
         <LogBoxMessage
           maxLength={props.collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
           message={props.message}

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -20,9 +20,9 @@ import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
-|}>;
+}>;
 
 const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 
@@ -101,7 +101,9 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
             }
             style={componentStyles.frame}>
             <View style={componentStyles.component}>
-              <Text style={componentStyles.frameName}>
+              <Text
+                id="logbox_component_stack_frame_text"
+                style={componentStyles.frameName}>
                 <Text style={componentStyles.bracket}>{'<'}</Text>
                 {frame.content}
                 <Text style={componentStyles.bracket}>{' />'}</Text>

package/Libraries/LogBox/UI/LogBoxInspectorSection.js

@@ -14,11 +14,11 @@ import Text from '../../Text/Text';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   heading: string,
   children: React.Node,
   action?: ?React.Node,
-|}>;
+}>;
 
 function LogBoxInspectorSection(props: Props): React.Node {
   return (

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import Animated from '../../Animated/Animated';
 import Easing from '../../Animated/Easing';
@@ -18,10 +18,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
-  onPress?: ?(event: PressEvent) => void,
+type Props = $ReadOnly<{
+  onPress?: ?(event: GestureResponderEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-|}>;
+}>;
 
 function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
   const [state, setState] = React.useState({

package/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -9,7 +9,7 @@
  */
 
 import type {StackFrame} from '../../Core/NativeExceptionsManager';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -21,7 +21,7 @@ import * as React from 'react';
 
 type Props = $ReadOnly<{
   frame: StackFrame,
-  onPress?: ?(event: PressEvent) => void,
+  onPress?: ?(event: GestureResponderEvent) => void,
 }>;
 
 function LogBoxInspectorStackFrame(props: Props): React.Node {
@@ -43,7 +43,9 @@ function LogBoxInspectorStackFrame(props: Props): React.Node {
         }}
         onPress={onPress}
         style={styles.frame}>
-        <Text style={[styles.name, frame.collapse === true && styles.dim]}>
+        <Text
+          id="logbox_stack_frame_text"
+          style={[styles.name, frame.collapse === true && styles.dim]}>
           {frame.methodName}
         </Text>
         <Text

package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -23,10 +23,10 @@ import LogBoxInspectorStackFrame from './LogBoxInspectorStackFrame';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
   onRetry: () => void,
-|}>;
+}>;
 
 export function getCollapseMessage(
   stackFrames: Stack,

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -38,8 +38,9 @@ export default function LogBoxNotification(props: Props): React.Node {
   }, [log]);
 
   return (
-    <View style={styles.container}>
+    <View id="logbox_notification" style={styles.container}>
       <LogBoxButton
+        id={`logbox_open_button_${level}`}
         onPress={props.onPressOpen}
         style={styles.press}
         backgroundColor={{
@@ -50,12 +51,16 @@ export default function LogBoxNotification(props: Props): React.Node {
           <LogBoxNotificationCountBadge count={totalLogCount} level={level} />
           <LogBoxNotificationMessage message={log.message} />
           {Platform.isTV ? null : (
-            <LogBoxNotificationDismissButton onPress={props.onPressDismiss} />
+            <LogBoxNotificationDismissButton
+              id={`logbox_dismiss_button_${level}`}
+              onPress={props.onPressDismiss}
+            />
           )}
         </View>
       </LogBoxButton>
       {Platform.isTV ? (
         <LogBoxButton
+          id={`logbox_dismiss_button_${level}`}
           onPress={props.onPressDismiss}
           style={styles.press}
           backgroundColor={{

package/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js

@@ -24,7 +24,9 @@ export default function LogBoxNotificationCountBadge(props: {
        * when fixing the type of `StyleSheet.create`. Remove this comment to
        * see the error. */}
       <View style={[styles.inside, styles[props.level]]}>
-        <Text style={styles.text}>{props.count <= 1 ? '!' : props.count}</Text>
+        <Text id="logbox_notification_count_text" style={styles.text}>
+          {props.count <= 1 ? '!' : props.count}
+        </Text>
       </View>
     </View>
   );

package/Libraries/LogBox/UI/LogBoxNotificationDismissButton.js

@@ -16,11 +16,13 @@ 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),

package/Libraries/LogBox/UI/LogBoxNotificationMessage.js

@@ -22,7 +22,10 @@ export default function LogBoxNotificationMessage(props: {
 }): React.Node {
   return (
     <View style={styles.container}>
-      <Text numberOfLines={1} style={styles.text}>
+      <Text
+        id="logbox_notification_message_text"
+        numberOfLines={1}
+        style={styles.text}>
         {props.message && (
           <LogBoxMessage
             plaintext