react-native-windows 0.76.2 → 0.77.0-preview.1

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js

@@ -59,7 +59,9 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
     <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
       <View style={styles.box}>
         <View style={styles.frame}>
-          <ScrollView horizontal>
+          <ScrollView
+            horizontal
+            contentContainerStyle={styles.contentContainer}>
             <AnsiHighlight style={styles.content} text={codeFrame.content} />
           </ScrollView>
         </View>
@@ -138,6 +140,9 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
   },
+  contentContainer: {
+    minWidth: '100%',
+  },
   content: {
     color: LogBoxStyle.getTextColor(1),
     fontSize: 12,

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.windows.js

@@ -59,7 +59,9 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
     <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
       <View style={styles.box}>
         <View style={styles.frame}>
-          <ScrollView horizontal>
+          <ScrollView
+            horizontal
+            contentContainerStyle={styles.contentContainer}>
             <AnsiHighlight style={styles.content} text={codeFrame.content} />
           </ScrollView>
         </View>
@@ -138,6 +140,9 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
   },
+  contentContainer: {
+    minWidth: '100%',
+  },
   content: {
     color: LogBoxStyle.getTextColor(1),
     fontSize: 12,

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -27,7 +27,7 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
-const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+const LogBoxInspectorHeaderSafeArea: React.ComponentType<ViewProps> =
   Platform.OS === 'android' ? View : SafeAreaView;
 
 export default function LogBoxInspectorHeader(props: Props): React.Node {

package/Libraries/LogBox/UI/LogBoxInspectorHeader.windows.js

@@ -27,7 +27,7 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
-const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+const LogBoxInspectorHeaderSafeArea: React.ComponentType<ViewProps> =
   Platform.OS === 'android' ? View : SafeAreaView;
 
 export default function LogBoxInspectorHeader(props: Props): React.Node {

package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -138,7 +138,7 @@ function StackFrameList(props: {
 }
 
 function StackFrameFooter(
-  props: $TEMPORARY$object<{message: string, onPress: () => void}>,
+  props: $ReadOnly<{message: string, onPress: () => void}>,
 ) {
   return (
     <View style={stackStyles.collapseContainer}>

package/Libraries/LogBox/UI/LogBoxMessage.js

@@ -59,7 +59,7 @@ function TappableLinks(props: {
 
   // URLs were detected. Construct array of Text nodes.
 
-  let fragments: Array<React.Node> = [];
+  const fragments: Array<React.Node> = [];
   let indexCounter = 0;
   let startIndex = 0;
 
@@ -115,7 +115,7 @@ function LogBoxMessage(props: Props): React.Node {
   const elements = [];
   let length = 0;
   const createUnderLength = (
-    key: string | $TEMPORARY$string<'-1'>,
+    key: string,
     message: string,
     style: void | TextStyleProp,
   ) => {

package/Libraries/Modal/Modal.d.ts

@@ -10,6 +10,7 @@
 import type * as React from 'react';
 import {ViewProps} from '../Components/View/ViewPropTypes';
 import {NativeSyntheticEvent} from '../Types/CoreEventTypes';
+import {ColorValue} from '../StyleSheet/StyleSheet';
 
 export interface ModalBaseProps {
   /**
@@ -43,6 +44,12 @@ export interface ModalBaseProps {
    * The `onShow` prop allows passing a function that will be called once the modal has been shown.
    */
   onShow?: ((event: NativeSyntheticEvent<any>) => void) | undefined;
+
+  /**
+   * 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 | undefined;
 }
 
 export interface ModalPropsIOS {
@@ -94,6 +101,11 @@ export interface ModalPropsAndroid {
    *  Determines whether your modal should go under the system statusbar.
    */
   statusBarTranslucent?: boolean | undefined;
+
+  /**
+   *  Determines whether your modal should go under the system navigationbar.
+   */
+  navigationBarTranslucent?: boolean | undefined;
 }
 
 export type ModalProps = ModalBaseProps &

package/Libraries/Modal/Modal.js

@@ -95,6 +95,14 @@ export type Props = $ReadOnly<{|
    */
   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.
@@ -157,6 +165,12 @@ export type Props = $ReadOnly<{|
    * See https://reactnative.dev/docs/modal#onorientationchange
    */
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+
+  /**
+   * 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?: ?string,
 |}>;
 
 function confirmProps(props: Props) {
@@ -170,6 +184,14 @@ function confirmProps(props: Props) {
         `Modal with '${props.presentationStyle}' presentation style and 'transparent' value is not supported.`,
       );
     }
+    if (
+      props.navigationBarTranslucent === true &&
+      props.statusBarTranslucent !== true
+    ) {
+      console.warn(
+        'Modal with translucent navigation bar and without translucent status bar is not supported.',
+      );
+    }
   }
 }
 
@@ -218,6 +240,9 @@ class Modal extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
+    if (Platform.OS === 'ios') {
+      this.setState({isRendered: false});
+    }
     if (this._eventSubscription) {
       this._eventSubscription.remove();
     }
@@ -249,7 +274,9 @@ class Modal extends React.Component<Props, State> {
 
     const containerStyles = {
       backgroundColor:
-        this.props.transparent === true ? 'transparent' : 'white',
+        this.props.transparent === true
+          ? 'transparent'
+          : this.props.backdropColor ?? 'white',
     };
 
     let animationType = this.props.animationType || 'none';
@@ -290,6 +317,7 @@ class Modal extends React.Component<Props, State> {
         onDismiss={onDismiss}
         visible={this.props.visible}
         statusBarTranslucent={this.props.statusBarTranslucent}
+        navigationBarTranslucent={this.props.navigationBarTranslucent}
         identifier={this._identifier}
         style={styles.modal}
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
@@ -331,8 +359,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const ExportedModal: React.AbstractComponent<
-  React.ElementConfig<typeof Modal>,
-> = ModalInjection.unstable_Modal ?? Modal;
+const ExportedModal: React.ComponentType<React.ElementConfig<typeof Modal>> =
+  ModalInjection.unstable_Modal ?? Modal;
 
 module.exports = ExportedModal;

package/Libraries/Modal/Modal.windows.js

@@ -0,0 +1,370 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import type {ViewProps} from '../Components/View/ViewPropTypes';
+import type {RootTag} from '../ReactNative/RootTag';
+import type {DirectEventHandler} from '../Types/CodegenTypes';
+
+import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
+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';
+
+const ScrollView = require('../Components/ScrollView/ScrollView');
+const View = require('../Components/View/View');
+const AppContainer = require('../ReactNative/AppContainer');
+const I18nManager = require('../ReactNative/I18nManager');
+const {RootTagContext} = require('../ReactNative/RootTag');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Platform = require('../Utilities/Platform');
+const React = require('react');
+
+type ModalEventDefinitions = {
+  modalDismissed: [{modalID: number}],
+};
+
+const ModalEventEmitter =
+  (Platform.OS === 'ios' || Platform.OS === 'windows') && // [Windows]
+  NativeModalManager != null
+    ? new NativeEventEmitter<ModalEventDefinitions>(
+        // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+        // If you want to use the native module on other platforms, please remove this condition and test its behavior
+        Platform.OS !== 'ios' && Platform.OS !== 'windows' // [Windows]
+          ? null
+          : NativeModalManager,
+      )
+    : null;
+
+/**
+ * The Modal component is a simple way to present content above an enclosing view.
+ *
+ * See https://reactnative.dev/docs/modal
+ */
+
+// In order to route onDismiss callbacks, we need to uniquely identifier each
+// <Modal> on screen. There can be different ones, either nested or as siblings.
+// We cannot pass the onDismiss callback to native as the view will be
+// destroyed before the callback is fired.
+let uniqueModalIdentifier = 0;
+
+type OrientationChangeEvent = $ReadOnly<{|
+  orientation: 'portrait' | 'landscape',
+|}>;
+
+export type Props = $ReadOnly<{|
+  ...ViewProps,
+
+  /**
+   * The `animationType` prop controls how the modal animates.
+   *
+   * See https://reactnative.dev/docs/modal#animationtype
+   */
+  animationType?: ?('none' | 'slide' | 'fade'),
+
+  /**
+   * The `presentationStyle` prop controls how the modal appears.
+   *
+   * See https://reactnative.dev/docs/modal#presentationstyle
+   */
+  presentationStyle?: ?(
+    | 'fullScreen'
+    | 'pageSheet'
+    | 'formSheet'
+    | 'overFullScreen'
+  ),
+
+  /**
+   * The `transparent` prop determines whether your modal will fill the
+   * entire view.
+   *
+   * See https://reactnative.dev/docs/modal#transparent
+   */
+  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.
+   *
+   * This is required on Apple TV and Android.
+   *
+   * See https://reactnative.dev/docs/modal#onrequestclose
+   */
+  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
+   */
+  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
+   */
+  onDismiss?: ?() => mixed,
+
+  /**
+   * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations.
+   *
+   * See https://reactnative.dev/docs/modal#supportedorientations
+   */
+  supportedOrientations?: ?$ReadOnlyArray<
+    | 'portrait'
+    | 'portrait-upside-down'
+    | 'landscape'
+    | 'landscape-left'
+    | 'landscape-right',
+  >,
+
+  /**
+   * The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed.
+   *
+   * See https://reactnative.dev/docs/modal#onorientationchange
+   */
+  onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+
+  /**
+   * 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?: ?string,
+|}>;
+
+function confirmProps(props: Props) {
+  if (__DEV__) {
+    if (
+      props.presentationStyle &&
+      props.presentationStyle !== 'overFullScreen' &&
+      props.transparent === true
+    ) {
+      console.warn(
+        `Modal with '${props.presentationStyle}' presentation style and 'transparent' value is not supported.`,
+      );
+    }
+    if (
+      props.navigationBarTranslucent === true &&
+      props.statusBarTranslucent !== true
+    ) {
+      console.warn(
+        'Modal with translucent navigation bar and without translucent status bar is not supported.',
+      );
+    }
+  }
+}
+
+// Create a state to track whether the Modal is rendering or not.
+// This is the only prop that controls whether the modal is rendered or not.
+type State = {
+  isRendered: boolean,
+};
+
+class Modal extends React.Component<Props, State> {
+  static defaultProps: {|hardwareAccelerated: boolean, visible: boolean|} = {
+    visible: true,
+    hardwareAccelerated: false,
+  };
+
+  static contextType: React.Context<RootTag> = RootTagContext;
+
+  _identifier: number;
+  _eventSubscription: ?EventSubscription;
+
+  constructor(props: Props) {
+    super(props);
+    if (__DEV__) {
+      confirmProps(props);
+    }
+    this._identifier = uniqueModalIdentifier++;
+    this.state = {
+      isRendered: props.visible === true,
+    };
+  }
+
+  componentDidMount() {
+    // 'modalDismissed' is for the old renderer in iOS only
+    if (ModalEventEmitter) {
+      this._eventSubscription = ModalEventEmitter.addListener(
+        'modalDismissed',
+        event => {
+          this.setState({isRendered: false}, () => {
+            if (event.modalID === this._identifier && this.props.onDismiss) {
+              this.props.onDismiss();
+            }
+          });
+        },
+      );
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._eventSubscription) {
+      this._eventSubscription.remove();
+    }
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.visible === false && this.props.visible === true) {
+      this.setState({isRendered: true});
+    }
+
+    if (__DEV__) {
+      confirmProps(this.props);
+    }
+  }
+
+  // Helper function to encapsulate platform specific logic to show or not the Modal.
+  _shouldShowModal(): boolean {
+    if (Platform.OS === 'ios' || Platform.OS === 'windows') {
+      // [Windows]
+      return this.props.visible === true || this.state.isRendered === true;
+    }
+
+    return this.props.visible === true;
+  }
+
+  render(): React.Node {
+    if (!this._shouldShowModal()) {
+      return null;
+    }
+
+    const containerStyles = {
+      backgroundColor:
+        this.props.transparent === true
+          ? 'transparent'
+          : this.props.backdropColor ?? 'white',
+    };
+
+    let animationType = this.props.animationType || 'none';
+
+    let presentationStyle = this.props.presentationStyle;
+    if (!presentationStyle) {
+      presentationStyle = 'fullScreen';
+      if (this.props.transparent === true) {
+        presentationStyle = 'overFullScreen';
+      }
+    }
+
+    const innerChildren = __DEV__ ? (
+      <AppContainer rootTag={this.context}>{this.props.children}</AppContainer>
+    ) : (
+      this.props.children
+    );
+
+    const onDismiss = () => {
+      // OnDismiss is implemented on iOS/Windows only. // [Windows]
+      if (Platform.OS === 'ios' || Platform.OS === 'windows') {
+        // [Windows]
+        this.setState({isRendered: false}, () => {
+          if (this.props.onDismiss) {
+            this.props.onDismiss();
+          }
+        });
+      }
+    };
+
+    return (
+      <RCTModalHostView
+        animationType={animationType}
+        presentationStyle={presentationStyle}
+        transparent={this.props.transparent}
+        hardwareAccelerated={this.props.hardwareAccelerated}
+        onRequestClose={this.props.onRequestClose}
+        onShow={this.props.onShow}
+        onDismiss={onDismiss}
+        visible={this.props.visible}
+        statusBarTranslucent={this.props.statusBarTranslucent}
+        navigationBarTranslucent={this.props.navigationBarTranslucent}
+        identifier={this._identifier}
+        style={styles.modal}
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+        onStartShouldSetResponder={this._shouldSetResponder}
+        supportedOrientations={this.props.supportedOrientations}
+        onOrientationChange={this.props.onOrientationChange}
+        testID={this.props.testID}>
+        <VirtualizedListContextResetter>
+          <ScrollView.Context.Provider value={null}>
+            <View
+              style={[styles.container, containerStyles]}
+              collapsable={false}>
+              {innerChildren}
+            </View>
+          </ScrollView.Context.Provider>
+        </VirtualizedListContextResetter>
+      </RCTModalHostView>
+    );
+  }
+
+  // We don't want any responder events bubbling out of the modal.
+  _shouldSetResponder(): boolean {
+    return true;
+  }
+}
+
+const side = I18nManager.getConstants().isRTL ? 'right' : 'left';
+const styles = StyleSheet.create({
+  modal: {
+    position: 'absolute',
+  },
+  container: {
+    /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb) This
+     * comment suppresses an error found when Flow v0.111 was deployed. To see
+     * the error, delete this comment and run Flow. */
+    [side]: 0,
+    top: 0,
+    flex: 1,
+  },
+});
+
+// $FlowFixMe[prop-missing]
+const ExportedModal: React.AbstractComponent<
+  React.ElementConfig<typeof Modal>,
+  // $FlowFixMe[incompatible-type-arg]
+> = ModalInjection.unstable_Modal ?? Modal;
+
+module.exports = ExportedModal;

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -175,7 +175,7 @@ const validAttributesForNonEventProps = {
   filter: {
     process: require('../StyleSheet/processFilter').default,
   },
-  experimental_mixBlendMode: true,
+  mixBlendMode: true,
   isolation: true,
   opacity: true,
   elevation: true,
@@ -227,6 +227,7 @@ const validAttributesForNonEventProps = {
   justifyContent: true,
   overflow: true,
   display: true,
+  boxSizing: true,
 
   margin: true,
   marginBlock: true,
@@ -268,6 +269,11 @@ const validAttributesForNonEventProps = {
   borderLeftWidth: true,
   borderRightWidth: true,
 
+  outlineColor: {process: require('../StyleSheet/processColor').default},
+  outlineOffset: true,
+  outlineStyle: true,
+  outlineWidth: true,
+
   start: true,
   end: true,
   left: true,
@@ -288,6 +294,71 @@ const validAttributesForNonEventProps = {
   style: ReactNativeStyleAttributes,
 
   experimental_layoutConformance: true,
+
+  // ReactClippingViewManager @ReactProps
+  removeClippedSubviews: true,
+
+  // ReactViewManager @ReactProps
+  accessible: true,
+  hasTVPreferredFocus: true,
+  nextFocusDown: true,
+  nextFocusForward: true,
+  nextFocusLeft: true,
+  nextFocusRight: true,
+  nextFocusUp: true,
+
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderTopStartRadius: true,
+  borderTopEndRadius: true,
+  borderBottomStartRadius: true,
+  borderBottomEndRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
+  borderStyle: true,
+  hitSlop: true,
+  pointerEvents: true,
+  nativeBackgroundAndroid: true,
+  nativeForegroundAndroid: true,
+  needsOffscreenAlphaCompositing: true,
+
+  borderColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderLeftColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderRightColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderTopColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBottomColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderEndColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBlockColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBlockEndColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBlockStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  focusable: true,
+  backfaceVisibility: true,
 };
 
 // Props for bubbling and direct events

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -231,7 +231,7 @@ const validAttributesForNonEventProps = {
   boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
-  experimental_mixBlendMode: true,
+  mixBlendMode: true,
   isolation: true,
 
   borderTopWidth: true,
@@ -348,6 +348,7 @@ const validAttributesForNonEventProps = {
   alignContent: true,
   position: true,
   aspectRatio: true,
+  boxSizing: true,
 
   // Also declared as ViewProps
   // overflow: true,