@office-iss/react-native-win32 0.0.0-canary.284 → 0.0.0-canary.286

package/Libraries/Lists/FlatList.js

@@ -11,8 +11,8 @@
 import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
-  RenderItemProps,
-  RenderItemType,
+  ListRenderItem,
+  ListRenderItemInfo,
   ViewabilityConfigCallbackPair,
   ViewToken,
 } from '@react-native/virtualized-lists';
@@ -20,18 +20,18 @@ import type {
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import View from '../Components/View/View';
-import {
-  VirtualizedList,
-  keyExtractor as defaultKeyExtractor,
-} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 import memoizeOne from 'memoize-one';
 import React from 'react';
 
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const deepDiffer = require('../Utilities/differ/deepDiffer');
-const Platform = require('../Utilities/Platform');
+const StyleSheet = require('../StyleSheet/StyleSheet').default;
+const deepDiffer = require('../Utilities/differ/deepDiffer').default;
+const Platform = require('../Utilities/Platform').default;
 const invariant = require('invariant');
 
+const VirtualizedList = VirtualizedLists.VirtualizedList;
+const defaultKeyExtractor = VirtualizedLists.keyExtractor;
+
 type RequiredProps<ItemT> = {
   /**
    * An array (or array-like list) of items to render. Other data types can be
@@ -66,7 +66,7 @@ type OptionalProps<ItemT> = {
    * `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
    * your use-case.
    */
-  renderItem?: ?RenderItemType<ItemT>,
+  renderItem?: ?ListRenderItem<ItemT>,
 
   /**
    * Optional custom style for multi-item rows generated when numColumns > 1.
@@ -618,7 +618,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
 
   _renderer = (
     ListItemComponent: ?(React.ComponentType<any> | React.MixedElement),
-    renderItem: ?RenderItemType<ItemT>,
+    renderItem: ?ListRenderItem<ItemT>,
     columnWrapperStyle: ?ViewStyleProp,
     numColumns: ?number,
     extraData: ?any,
@@ -626,7 +626,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   ) => {
     const cols = numColumnsOrDefault(numColumns);
 
-    const render = (props: RenderItemProps<ItemT>): React.Node => {
+    const render = (props: ListRenderItemInfo<ItemT>): React.Node => {
       if (ListItemComponent) {
         // $FlowFixMe[not-a-component] Component isn't valid
         // $FlowFixMe[incompatible-type-arg] Component isn't valid
@@ -640,7 +640,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       }
     };
 
-    const renderProp = (info: RenderItemProps<ItemT>) => {
+    const renderProp = (info: ListRenderItemInfo<ItemT>) => {
       if (cols > 1) {
         const {item, index} = info;
         invariant(
@@ -713,4 +713,4 @@ const styles = StyleSheet.create({
   row: {flexDirection: 'row'},
 });
 
-module.exports = FlatList;
+export default FlatList;

package/Libraries/Lists/SectionList.js

@@ -18,9 +18,11 @@ import type {
 } from '@react-native/virtualized-lists';
 
 import Platform from '../Utilities/Platform';
-import {VirtualizedSectionList} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 import * as React from 'react';
 
+const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
+
 type Item = any;
 
 export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;

package/Libraries/Lists/SectionListModern.js

@@ -19,9 +19,11 @@ import type {
 import type {ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
-import {VirtualizedSectionList} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 import React, {forwardRef, useImperativeHandle, useRef} from 'react';
 
+const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
+
 type Item = any;
 
 export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;

package/Libraries/Lists/ViewabilityHelper.js

@@ -16,9 +16,10 @@ export type {
   ViewabilityConfigCallbackPair,
 } from '@react-native/virtualized-lists';
 
-import {typeof ViewabilityHelper as ViewabilityHelperType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
+type ViewabilityHelperType = typeof VirtualizedLists.ViewabilityHelper;
 const ViewabilityHelper: ViewabilityHelperType =
-  require('@react-native/virtualized-lists').ViewabilityHelper;
+  VirtualizedLists.ViewabilityHelper;
 
-module.exports = ViewabilityHelper;
+export default ViewabilityHelper;

package/Libraries/Lists/VirtualizeUtils.js

@@ -10,9 +10,7 @@
 
 'use strict';
 
-import {typeof keyExtractor as KeyExtractorType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
-const keyExtractor: KeyExtractorType =
-  require('@react-native/virtualized-lists').keyExtractor;
-
-module.exports = {keyExtractor};
+type KeyExtractorType = typeof VirtualizedLists.keyExtractor;
+export const keyExtractor: KeyExtractorType = VirtualizedLists.keyExtractor;

package/Libraries/Lists/VirtualizedList.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-import {typeof VirtualizedList as VirtualizedListType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
-const VirtualizedList: VirtualizedListType =
-  require('@react-native/virtualized-lists').VirtualizedList;
+type VirtualizedListType = typeof VirtualizedLists.VirtualizedList;
+const VirtualizedList: VirtualizedListType = VirtualizedLists.VirtualizedList;
 
 export type {
-  RenderItemProps,
-  RenderItemType,
+  ListRenderItemInfo,
+  ListRenderItem,
   Separators,
 } from '@react-native/virtualized-lists';
-module.exports = VirtualizedList;
+export default VirtualizedList;

package/Libraries/Lists/VirtualizedListContext.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-import {typeof VirtualizedListContextResetter as VirtualizedListContextResetterType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
-const VirtualizedListContextResetter: VirtualizedListContextResetterType =
-  require('@react-native/virtualized-lists').VirtualizedListContextResetter;
-
-module.exports = {VirtualizedListContextResetter};
+type VirtualizedListContextResetterType =
+  typeof VirtualizedLists.VirtualizedListContextResetter;
+export const VirtualizedListContextResetter: VirtualizedListContextResetterType =
+  VirtualizedLists.VirtualizedListContextResetter;

package/Libraries/Lists/VirtualizedSectionList.js

@@ -10,13 +10,15 @@
 
 'use strict';
 
-import {typeof VirtualizedSectionList as VirtualizedSectionListType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
+type VirtualizedSectionListType =
+  typeof VirtualizedLists.VirtualizedSectionList;
 const VirtualizedSectionList: VirtualizedSectionListType =
-  require('@react-native/virtualized-lists').VirtualizedSectionList;
+  VirtualizedLists.VirtualizedSectionList;
 
 export type {
   SectionBase,
   ScrollToLocationParamsType,
 } from '@react-native/virtualized-lists';
-module.exports = VirtualizedSectionList;
+export default VirtualizedSectionList;

package/Libraries/Lists/__flowtests__/FlatList-flowtest.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const FlatList = require('../FlatList');
+const FlatList = require('../FlatList').default;
 const React = require('react');
 
 function renderMyListItem(info: {

package/Libraries/LogBox/Data/LogBoxData.js

@@ -105,7 +105,7 @@ export function reportLogBoxError(
   error: ExtendedError,
   componentStack?: string,
 ): void {
-  const ExceptionsManager = require('../../Core/ExceptionsManager');
+  const ExceptionsManager = require('../../Core/ExceptionsManager').default;
 
   error.message = `${LOGBOX_ERROR_MESSAGE}\n\n${error.message}`;
   if (componentStack != null) {

package/Libraries/LogBox/LogBox.js

@@ -25,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;
@@ -116,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);
     },

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 TouchableWithoutFeedback from '../../Components/Touchable/TouchableWithoutFeedback';
 import View from '../../Components/View/View';
@@ -19,13 +19,14 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
 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,
 }>;
 
@@ -42,6 +43,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/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/LogBoxInspectorHeader.win32.js

@@ -38,7 +38,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>
@@ -56,15 +58,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={new String('←')}
           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={new String('→')}

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

@@ -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

@@ -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/LogBoxInspectorReactFrames.win32.js

@@ -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/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';
@@ -19,7 +19,7 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
 type Props = $ReadOnly<{
-  onPress?: ?(event: PressEvent) => void,
+  onPress?: ?(event: GestureResponderEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
 }>;
 

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/LogBoxInspectorStackFrame.win32.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/LogBoxNotification.js

@@ -37,8 +37,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={{
@@ -48,7 +49,10 @@ export default function LogBoxNotification(props: Props): React.Node {
         <View style={styles.content}>
           <LogBoxNotificationCountBadge count={totalLogCount} level={level} />
           <LogBoxNotificationMessage message={log.message} />
-          <LogBoxNotificationDismissButton onPress={props.onPressDismiss} />
+          <LogBoxNotificationDismissButton
+            id={`logbox_dismiss_button_${level}`}
+            onPress={props.onPressDismiss}
+          />
         </View>
       </LogBoxButton>
     </View>

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