react-native-windows 0.74.11 → 0.75.0-preview.1

package/Folly/TEMP_UntilFollyUpdate/lang/ToAscii.cpp

@@ -26,7 +26,8 @@ struct to_ascii_array {
   static constexpr data_type_ data_() {
     data_type_ result{};
     Alphabet alpha;
-    for (size_t i = 0; i < Base; ++i) {
+    // [Windows #12703 - CodeQL patch]
+    for (uint64_t i = 0; i < Base; ++i) {
       result.data[i] = alpha(static_cast<uint8_t>(i));
     }
     return result;
@@ -63,7 +64,8 @@ struct to_ascii_table {
   static constexpr data_type_ data_() {
     data_type_ result{};
     Alphabet alpha;
-    for (size_t i = 0; i < Base * Base; ++i) {
+    // [Windows #12703 - CodeQL patch]
+    for (uint64_t i = 0; i < Base * Base; ++i) {
       result.data[i] = //
           (alpha(uint8_t(i / Base)) << (kIsLittleEndian ? 0 : 8)) |
           (alpha(uint8_t(i % Base)) << (kIsLittleEndian ? 8 : 0));

package/Libraries/Animated/AnimatedImplementation.js

@@ -315,6 +315,8 @@ const sequence = function (
         current++;
 
         if (current === animations.length) {
+          // if the start is called, even without a reset, it should start from the beginning
+          current = 0;
           callback && callback(result);
           return;
         }

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -455,18 +455,22 @@ function addWhitelistedInterpolationParam(param: string): void {
 }
 
 function isSupportedColorStyleProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_COLOR_STYLES[prop] === true;
 }
 
 function isSupportedStyleProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_STYLES[prop] === true;
 }
 
 function isSupportedTransformProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_TRANSFORMS[prop] === true;
 }
 
 function isSupportedInterpolationParam(param: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
 }
 

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,10 +8,12 @@
  * @format
  */
 
+import composeStyles from '../../src/private/core/composeStyles';
 import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import useAnimatedProps from './useAnimatedProps';
 import * as React from 'react';
+import {useMemo} from 'react';
 
 // $FlowFixMe[deprecated-type]
 export type AnimatedProps<Props: {...}> = $ObjMap<
@@ -44,14 +46,18 @@ export default function createAnimatedComponent<TProps: {...}, TInstance>(
       // without these passthrough values.
       // $FlowFixMe[prop-missing]
       const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
-      const {style: passthroughStyle, ...passthroughProps} =
-        passthroughAnimatedPropExplicitValues ?? {};
-      const mergedStyle = {...style, ...passthroughStyle};
+      const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
+      const mergedStyle = useMemo(
+        () => composeStyles(style, passthroughStyle),
+        [passthroughStyle, style],
+      );
 
+      // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
+      // spread after `reducedProps` but before `style`.
       return (
         <Component
           {...reducedProps}
-          {...passthroughProps}
+          {...passthroughAnimatedPropExplicitValues}
           style={mergedStyle}
           ref={ref}
         />

package/Libraries/Animated/useAnimatedProps.js

@@ -74,46 +74,74 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
       // every animation frame. When using the native driver, this callback is
       // called when the animation completes.
       onUpdateRef.current = () => {
+        if (process.env.NODE_ENV === 'test') {
+          // Check 1: this is a test.
+          // call `scheduleUpdate` to bypass use of setNativeProps.
+          return scheduleUpdate();
+        }
+
+        const isFabricNode = isFabricInstance(instance);
+        if (node.__isNative) {
+          // Check 2: this is an animation driven by native.
+          // In native driven animations, this callback is only called once the animation completes.
+          if (isFabricNode) {
+            // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
+            // Must not be called in Paper.
+            scheduleUpdate();
+          }
+          return;
+        }
+
         if (
-          process.env.NODE_ENV === 'test' ||
           typeof instance !== 'object' ||
-          typeof instance?.setNativeProps !== 'function' ||
-          (isFabricInstance(instance) && !useNativePropsInFabric)
+          typeof instance?.setNativeProps !== 'function'
         ) {
-          // Schedule an update for this component to update `reducedProps`,
-          // but do not compute it immediately. If a parent also updated, we
-          // need to merge those new props in before updating.
-          scheduleUpdate();
-        } else if (!node.__isNative) {
+          // Check 3: the instance does not support setNativeProps. Call `scheduleUpdate`.
+          return scheduleUpdate();
+        }
+
+        if (!isFabricNode) {
+          // Check 4: this is a paper instance, call setNativeProps.
           // $FlowIgnore[not-a-function] - Assume it's still a function.
           // $FlowFixMe[incompatible-use]
-          instance.setNativeProps(node.__getAnimatedValue());
-          if (isFabricInstance(instance)) {
-            // Keeping state of Fiber tree and Shadow tree in sync.
-            //
-            // This is done by calling `scheduleUpdate` which will trigger a commit.
-            // However, React commit is not fast enough to drive animations.
-            // This is where setNativeProps comes in handy but the state between
-            // Fiber tree and Shadow tree needs to be kept in sync.
-            // The goal is to call `scheduleUpdate` as little as possible to maintain
-            // performance but frequently enough to keep state in sync.
-            // Debounce is set to 48ms, which is 3 * the duration of a frame.
-            // 3 frames was the highest value where flickering state was not observed.
-            if (timerRef.current != null) {
-              clearTimeout(timerRef.current);
-            }
-            timerRef.current = setTimeout(() => {
-              timerRef.current = null;
-              scheduleUpdate();
-            }, 48);
-          }
+          return instance.setNativeProps(node.__getAnimatedValue());
+        }
+
+        if (!useNativePropsInFabric) {
+          // Check 5: setNativeProps are disabled.
+          return scheduleUpdate();
         }
+
+        // This is a Fabric instance and setNativeProps is supported.
+
+        // $FlowIgnore[not-a-function] - Assume it's still a function.
+        // $FlowFixMe[incompatible-use]
+        instance.setNativeProps(node.__getAnimatedValue());
+
+        // Keeping state of Fiber tree and Shadow tree in sync.
+        //
+        // This is done by calling `scheduleUpdate` which will trigger a commit.
+        // However, React commit is not fast enough to drive animations.
+        // This is where setNativeProps comes in handy but the state between
+        // Fiber tree and Shadow tree needs to be kept in sync.
+        // The goal is to call `scheduleUpdate` as little as possible to maintain
+        // performance but frequently enough to keep state in sync.
+        // Debounce is set to 48ms, which is 3 * the duration of a frame.
+        // 3 frames was the highest value where flickering state was not observed.
+        if (timerRef.current != null) {
+          clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(() => {
+          timerRef.current = null;
+          scheduleUpdate();
+        }, 48);
       };
 
       const target = getEventTarget(instance);
       const events = [];
 
       for (const propName in props) {
+        // $FlowFixMe[invalid-computed-prop]
         const propValue = props[propName];
         if (propValue instanceof AnimatedEvent && propValue.__isNative) {
           propValue.__attach(target, propName);

package/Libraries/BatchedBridge/MessageQueue.js

@@ -424,6 +424,7 @@ class MessageQueue {
           A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
         );
       }
+      // $FlowFixMe[invalid-computed-prop]
       if (!moduleMethods[method]) {
         invariant(
           false,

package/Libraries/Components/Button.js

@@ -280,7 +280,13 @@ type ButtonProps = $ReadOnly<{|
   ```
  */
 
-const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
+const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity =
+  Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
+const Button: React.AbstractComponent<
+  ButtonProps,
+  React.ElementRef<typeof Touchable>,
+> = React.forwardRef((props: ButtonProps, ref) => {
   const {
     accessibilityLabel,
     accessibilityState,
@@ -345,8 +351,6 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
   );
   const formattedTitle =
     Platform.OS === 'android' ? title.toUpperCase() : title;
-  const Touchable =
-    Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
   // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
   const _importantForAccessibility =
@@ -374,7 +378,8 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       testID={testID}
       disabled={disabled}
       onPress={onPress}
-      touchSoundDisabled={touchSoundDisabled}>
+      touchSoundDisabled={touchSoundDisabled}
+      ref={ref}>
       <View style={buttonStyles}>
         <Text style={textStyles} disabled={disabled}>
           {formattedTitle}
@@ -382,7 +387,7 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       </View>
     </Touchable>
   );
-};
+});
 
 Button.displayName = 'Button';
 

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -119,7 +119,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 type State = {|
-  statusBarBackgroundColor: ColorValue,
+  drawerOpened: boolean,
 |};
 
 /**
@@ -168,7 +168,9 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
     >();
 
-  state: State = {statusBarBackgroundColor: null};
+  state: State = {
+    drawerOpened: false,
+  };
 
   render(): React.Node {
     const {
@@ -189,6 +191,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
             backgroundColor: drawerBackgroundColor,
           },
         ]}
+        pointerEvents={this.state.drawerOpened ? 'auto' : 'none'}
         collapsable={false}>
         {renderNavigationView()}
         {drawStatusBar && <View style={styles.drawerStatusBar} />}
@@ -245,12 +248,18 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
   };
 
   _onDrawerOpen = () => {
+    this.setState({
+      drawerOpened: true,
+    });
     if (this.props.onDrawerOpen) {
       this.props.onDrawerOpen();
     }
   };
 
   _onDrawerClose = () => {
+    this.setState({
+      drawerOpened: false,
+    });
     if (this.props.onDrawerClose) {
       this.props.onDrawerClose();
     }

package/Libraries/Components/Flyout/Flyout.js

@@ -3,14 +3,13 @@
  * Licensed under the MIT License.
  * @format
  */
-'use strict';
 
-import * as React from 'react';
+import type {ViewProps} from 'react-native';
 
 import FlyoutNativeComponent from './FlyoutNativeComponent';
-import type {ViewProps} from '../View/ViewPropTypes';
-import {findNodeHandle} from '../../ReactNative/RendererProxy';
-import StyleSheet from '../../StyleSheet/StyleSheet';
+import * as React from 'react';
+import StyleSheet from 'react-native';
+import {findNodeHandle} from 'react-native';
 
 type Placement =
   | 'top'
@@ -33,7 +32,7 @@ type ShowMode =
   | 'transient'
   | 'transient-with-dismiss-on-pointer-move-away';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   ...ViewProps,
 
   // Props
@@ -55,7 +54,7 @@ type Props = $ReadOnly<{|
   verticalOffset?: number,
 
   // Events
-|}>;
+}>;
 
 const styles = StyleSheet.create({
   rctFlyout: {
@@ -63,10 +62,10 @@ const styles = StyleSheet.create({
   },
 });
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   target?: number | null,
   targetRef?: React.ReactNode,
-|}>;
+}>;
 
 /**
  * Renders a flyout component.
@@ -91,9 +90,10 @@ export class Flyout extends React.Component<Props, State> {
     return prevState;
   }
 
+  state = {target: undefined, targetRef: null};
+
   constructor(props: Props) {
     super(props);
-    this.state = {target: undefined, targetRef: null};
   }
 
   render(): React.Node {

package/Libraries/Components/Flyout/FlyoutNativeComponent.js

@@ -5,16 +5,17 @@
  * @format
  */
 
-import type {Double, DirectEventHandler, Int32} from '../../Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
+import type {DirectEventHandler, Double, Int32} from 'react-native/Libraries/Types/CodegenTypes';
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
-type DismissEvent = $ReadOnly<{|
+type DismissEvent = $ReadOnly<{
   isOpen?: boolean,
-|}>;
+}>;
 
-type NativeProps = $ReadOnly<{|
+type NativeProps = $ReadOnly<{
   ...ViewProps,
 
   // Props
@@ -36,7 +37,7 @@ type NativeProps = $ReadOnly<{|
   verticalOffset?: Double,
 
   // Events
-|}>;
+}>;
 
 type NativeType = HostComponent<NativeProps>;
 

package/Libraries/Components/Pressable/Pressable.js

@@ -195,13 +195,16 @@ type Props = $ReadOnly<{|
   'aria-label'?: ?string,
 |}>;
 
+type Instance = React.ElementRef<typeof View>;
+
 /**
  * Component used to build display components that should respond to whether the
  * component is currently pressed or not.
  */
-/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
- * LTI update could not be added via codemod */
-function Pressable(props: Props, forwardedRef): React.Node {
+function Pressable(
+  props: Props,
+  forwardedRef: React.RefSetter<Instance>,
+): React.Node {
   const {
     accessible,
     accessibilityState,
@@ -235,13 +238,16 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...restProps
   } = props;
 
-  const viewRef = useRef<React.ElementRef<typeof View> | null>(null);
+  const viewRef = useRef<Instance | null>(null);
   const mergedRef = useMergeRefs(forwardedRef, viewRef);
 
   const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
 
+  const shouldUpdatePressed =
+    typeof children === 'function' || typeof style === 'function';
+
   let _accessibilityState = {
     busy: ariaBusy ?? accessibilityState?.busy,
     checked: ariaChecked ?? accessibilityState?.checked,
@@ -297,7 +303,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
         if (android_rippleConfig != null) {
           android_rippleConfig.onPressIn(event);
         }
-        setPressed(true);
+        shouldUpdatePressed && setPressed(true);
         if (onPressIn != null) {
           onPressIn(event);
         }
@@ -307,7 +313,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
         if (android_rippleConfig != null) {
           android_rippleConfig.onPressOut(event);
         }
-        setPressed(false);
+        shouldUpdatePressed && setPressed(false);
         if (onPressOut != null) {
           onPressOut(event);
         }
@@ -330,6 +336,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
       onPressOut,
       pressRetentionOffset,
       setPressed,
+      shouldUpdatePressed,
       unstable_pressDelay,
     ],
   );

package/Libraries/Components/Pressable/Pressable.windows.js

@@ -240,13 +240,16 @@ type Props = $ReadOnly<{|
   'aria-label'?: ?string,
 |}>;
 
+type Instance = React.ElementRef<typeof View>;
+
 /**
  * Component used to build display components that should respond to whether the
  * component is currently pressed or not.
  */
-/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
- * LTI update could not be added via codemod */
-function Pressable(props: Props, forwardedRef): React.Node {
+function Pressable(
+  props: Props,
+  forwardedRef: React.RefSetter<Instance>,
+): React.Node {
   const {
     accessible,
     accessibilityState,
@@ -286,13 +289,16 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...restProps
   } = props;
 
-  const viewRef = useRef<React.ElementRef<typeof View> | null>(null);
+  const viewRef = useRef<Instance | null>(null);
   const mergedRef = useMergeRefs(forwardedRef, viewRef);
 
   const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
 
+  const shouldUpdatePressed =
+    typeof children === 'function' || typeof style === 'function';
+
   let _accessibilityState = {
     busy: ariaBusy ?? accessibilityState?.busy,
     checked: ariaChecked ?? accessibilityState?.checked,
@@ -349,7 +355,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
         if (android_rippleConfig != null) {
           android_rippleConfig.onPressIn(event);
         }
-        setPressed(true);
+        shouldUpdatePressed && setPressed(true);
         if (onPressIn != null) {
           onPressIn(event);
         }
@@ -359,7 +365,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
         if (android_rippleConfig != null) {
           android_rippleConfig.onPressOut(event);
         }
-        setPressed(false);
+        shouldUpdatePressed && setPressed(false);
         if (onPressOut != null) {
           onPressOut(event);
         }
@@ -394,6 +400,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
       // Windows]
       pressRetentionOffset,
       setPressed,
+      shouldUpdatePressed,
       unstable_pressDelay,
     ],
   );

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -23,13 +23,17 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   validAttributes: {
     decelerationRate: true,
     disableIntervalMomentum: true,
+    maintainVisibleContentPosition: true,
     endFillColor: {process: require('../../StyleSheet/processColor').default},
     fadingEdgeLength: true,
     nestedScrollEnabled: true,
     overScrollMode: true,
     pagingEnabled: true,
     persistentScrollbar: true,
+    horizontal: true,
+    enableSyncOnScroll: true,
     scrollEnabled: true,
+    scrollEventThrottle: true,
     scrollPerfTag: true,
     sendMomentumEvents: true,
     showsHorizontalScrollIndicator: true,