react-native-windows 0.78.7 → 0.79.0-preview.1

package/Libraries/LogBox/UI/LogBoxInspectorHeader.windows.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/LogBoxInspectorReactFrames.windows.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/LogBoxInspectorStackFrame.windows.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

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

package/Libraries/Modal/Modal.js

@@ -13,20 +13,24 @@ import type {RootTag} from '../ReactNative/RootTag';
 import type {DirectEventHandler} from '../Types/CodegenTypes';
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
+import {type ColorValue} from '../StyleSheet/StyleSheet';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import ModalInjection from './ModalInjection';
 import NativeModalManager from './NativeModalManager';
 import RCTModalHostView from './RCTModalHostViewNativeComponent';
-import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
+import React from 'react';
 
-const ScrollView = require('../Components/ScrollView/ScrollView');
-const View = require('../Components/View/View');
-const AppContainer = require('../ReactNative/AppContainer');
-const I18nManager = require('../ReactNative/I18nManager');
+const ScrollView = require('../Components/ScrollView/ScrollView').default;
+const View = require('../Components/View/View').default;
+const AppContainer = require('../ReactNative/AppContainer').default;
+const I18nManager = require('../ReactNative/I18nManager').default;
 const {RootTagContext} = require('../ReactNative/RootTag');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Platform = require('../Utilities/Platform');
-const React = require('react');
+const StyleSheet = require('../StyleSheet/StyleSheet').default;
+const Platform = require('../Utilities/Platform').default;
+
+const VirtualizedListContextResetter =
+  VirtualizedLists.VirtualizedListContextResetter;
 
 type ModalEventDefinitions = {
   modalDismissed: [{modalID: number}],
@@ -53,103 +57,66 @@ const ModalEventEmitter =
 // destroyed before the callback is fired.
 let uniqueModalIdentifier = 0;
 
-type OrientationChangeEvent = $ReadOnly<{|
+type OrientationChangeEvent = $ReadOnly<{
   orientation: 'portrait' | 'landscape',
-|}>;
-
-export type Props = $ReadOnly<{|
-  ...ViewProps,
+}>;
 
+export type ModalBaseProps = {
   /**
-   * The `animationType` prop controls how the modal animates.
-   *
-   * See https://reactnative.dev/docs/modal#animationtype
+   * @deprecated Use animationType instead
    */
-  animationType?: ?('none' | 'slide' | 'fade'),
-
+  animated?: boolean,
   /**
-   * The `presentationStyle` prop controls how the modal appears.
+   * The `animationType` prop controls how the modal animates.
    *
-   * See https://reactnative.dev/docs/modal#presentationstyle
+   * - `slide` slides in from the bottom
+   * - `fade` fades into view
+   * - `none` appears without an animation
    */
-  presentationStyle?: ?(
-    | 'fullScreen'
-    | 'pageSheet'
-    | 'formSheet'
-    | 'overFullScreen'
-  ),
-
+  animationType?: ?('none' | 'slide' | 'fade'),
   /**
-   * The `transparent` prop determines whether your modal will fill the
-   * entire view.
-   *
-   * See https://reactnative.dev/docs/modal#transparent
+   * The `transparent` prop determines whether your modal will fill the entire view.
+   * Setting this to `true` will render the modal over a transparent background.
    */
   transparent?: ?boolean,
-
-  /**
-   * The `statusBarTranslucent` prop determines whether your modal should go under
-   * the system statusbar.
-   *
-   * See https://reactnative.dev/docs/modal.html#statusbartranslucent-android
-   */
-  statusBarTranslucent?: ?boolean,
-
-  /**
-   * The `navigationBarTranslucent` prop determines whether your modal should go under
-   * the system navigationbar.
-   *
-   * See https://reactnative.dev/docs/modal.html#navigationbartranslucent-android
-   */
-  navigationBarTranslucent?: ?boolean,
-
-  /**
-   * The `hardwareAccelerated` prop controls whether to force hardware
-   * acceleration for the underlying window.
-   *
-   * This prop works only on Android.
-   *
-   * See https://reactnative.dev/docs/modal#hardwareaccelerated
-   */
-  hardwareAccelerated?: ?boolean,
-
   /**
    * The `visible` prop determines whether your modal is visible.
-   *
-   * See https://reactnative.dev/docs/modal#visible
    */
   visible?: ?boolean,
-
   /**
-   * The `onRequestClose` callback is called when the user taps the hardware
-   * back button on Android or the menu button on Apple TV.
+   * The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.
    *
    * This is required on Apple TV and Android.
-   *
-   * See https://reactnative.dev/docs/modal#onrequestclose
    */
+  // onRequestClose?: (event: NativeSyntheticEvent<any>) => void;
   onRequestClose?: ?DirectEventHandler<null>,
-
   /**
-   * The `onShow` prop allows passing a function that will be called once the
-   * modal has been shown.
-   *
-   * See https://reactnative.dev/docs/modal#onshow
+   * The `onShow` prop allows passing a function that will be called once the modal has been shown.
    */
+  // onShow?: (event: NativeSyntheticEvent<any>) => void;
   onShow?: ?DirectEventHandler<null>,
 
   /**
-   * The `onDismiss` prop allows passing a function that will be called once
-   * the modal has been dismissed.
-   *
-   * See https://reactnative.dev/docs/modal#ondismiss
+   * The `backdropColor` props sets the background color of the modal's container.
+   * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+   */
+  backdropColor?: ColorValue,
+};
+
+export type ModalPropsIOS = {
+  /**
+   * The `presentationStyle` determines the style of modal to show
    */
-  onDismiss?: ?() => mixed,
+  presentationStyle?: ?(
+    | 'fullScreen'
+    | 'pageSheet'
+    | 'formSheet'
+    | 'overFullScreen'
+  ),
 
   /**
    * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations.
-   *
-   * See https://reactnative.dev/docs/modal#supportedorientations
+   * On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
    */
   supportedOrientations?: ?$ReadOnlyArray<
     | 'portrait'
@@ -159,21 +126,47 @@ export type Props = $ReadOnly<{|
     | 'landscape-right',
   >,
 
+  /**
+   * The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
+   */
+  // onDismiss?: (() => void) | undefined;
+  onDismiss?: ?() => void,
+
   /**
    * The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed.
-   *
-   * See https://reactnative.dev/docs/modal#onorientationchange
+   * The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
    */
+  // onOrientationChange?:
+  //   | ((event: NativeSyntheticEvent<any>) => void)
+  //   | undefined;
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+};
 
+export type ModalPropsAndroid = {
   /**
-   * The `backdropColor` props sets the background color of the modal's container.
-   * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+   *  Controls whether to force hardware acceleration for the underlying window.
+   */
+  hardwareAccelerated?: ?boolean,
+
+  /**
+   *  Determines whether your modal should go under the system statusbar.
    */
-  backdropColor?: ?string,
-|}>;
+  statusBarTranslucent?: ?boolean,
+
+  /**
+   *  Determines whether your modal should go under the system navigationbar.
+   */
+  navigationBarTranslucent?: ?boolean,
+};
+
+export type ModalProps = {
+  ...ModalBaseProps,
+  ...ModalPropsIOS,
+  ...ModalPropsAndroid,
+  ...ViewProps,
+};
 
-function confirmProps(props: Props) {
+function confirmProps(props: ModalProps) {
   if (__DEV__) {
     if (
       props.presentationStyle &&
@@ -201,8 +194,8 @@ type State = {
   isRendered: boolean,
 };
 
-class Modal extends React.Component<Props, State> {
-  static defaultProps: {|hardwareAccelerated: boolean, visible: boolean|} = {
+class Modal extends React.Component<ModalProps, State> {
+  static defaultProps: {hardwareAccelerated: boolean, visible: boolean} = {
     visible: true,
     hardwareAccelerated: false,
   };
@@ -212,7 +205,7 @@ class Modal extends React.Component<Props, State> {
   _identifier: number;
   _eventSubscription: ?EventSubscription;
 
-  constructor(props: Props) {
+  constructor(props: ModalProps) {
     super(props);
     if (__DEV__) {
       confirmProps(props);
@@ -248,7 +241,7 @@ class Modal extends React.Component<Props, State> {
     }
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: ModalProps) {
     if (prevProps.visible === false && this.props.visible === true) {
       this.setState({isRendered: true});
     }
@@ -364,4 +357,4 @@ const styles = StyleSheet.create({
 const ExportedModal: React.ComponentType<React.ElementConfig<typeof Modal>> =
   ModalInjection.unstable_Modal ?? Modal;
 
-module.exports = ExportedModal;
+export default ExportedModal;