react-native-windows 0.0.0-canary.992 → 0.0.0-canary.993

package/.flowconfig

@@ -31,6 +31,7 @@
 <PROJECT_ROOT>/Libraries/Image/resolveAssetSource.js
 <PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
 <PROJECT_ROOT>/Libraries/Pressability/Pressability.js
+<PROJECT_ROOT>/Libraries/Renderer/shims/ReactNativeTypes.js
 <PROJECT_ROOT>/Libraries/Text/TextProps.js
 <PROJECT_ROOT>/Libraries/Types/CoreEventTypes.js
 <PROJECT_ROOT>/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js
@@ -95,6 +96,7 @@
 ; Ignore rn-tester Pods
 <PROJECT_ROOT>/packages/rn-tester/Pods/
 
+
 [untyped]
 .*/node_modules/@react-native-community/cli/.*/.*
 
@@ -169,4 +171,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.269.1
+^0.271.0

package/Libraries/Animated/Animated.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 import typeof * as AnimatedExports from './AnimatedExports';

package/Libraries/Animated/Animated.js.flow

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 export * as default from './AnimatedExports';

package/Libraries/Animated/AnimatedExports.js

@@ -6,7 +6,6 @@
  *
  * @flow
  * @format
- * @oncall react_native
  */
 
 import typeof AnimatedFlatList from './components/AnimatedFlatList';

package/Libraries/Animated/AnimatedExports.js.flow

@@ -6,7 +6,6 @@
  *
  * @flow
  * @format
- * @oncall react_native
  */
 
 import AnimatedImplementation from './AnimatedImplementation';
@@ -37,7 +36,7 @@ export type {default as AnimatedDivision} from './nodes/AnimatedDivision';
 export type {default as AnimatedModulo} from './nodes/AnimatedModulo';
 export type {default as AnimatedMultiplication} from './nodes/AnimatedMultiplication';
 export type {default as AnimatedSubtraction} from './nodes/AnimatedSubtraction';
-export type {WithAnimatedValue} from './createAnimatedComponent';
+export type {WithAnimatedValue, AnimatedProps} from './createAnimatedComponent';
 export type {AnimatedComponentType as AnimatedComponent} from './createAnimatedComponent';
 
 /**

package/Libraries/Animated/animations/Animation.js

@@ -13,6 +13,7 @@ import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import AnimatedProps from '../nodes/AnimatedProps';
 
 export type EndResult = {
@@ -149,8 +150,10 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value, offset);
 
-            if (this.__isLooping === true) {
-              return;
+            if (!ReactNativeFeatureFlags.cxxNativeAnimatedEnabled()) {
+              if (this.__isLooping === true) {
+                return;
+              }
             }
 
             // Once the JS side node is synced with the updated values, trigger an

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -9,7 +9,10 @@
  */
 
 import type {____ViewStyle_Internal} from '../../StyleSheet/StyleSheetTypes';
-import type {AnimatedComponentType} from '../createAnimatedComponent';
+import type {
+  AnimatedComponentType,
+  AnimatedProps,
+} from '../createAnimatedComponent';
 
 import RefreshControl from '../../Components/RefreshControl/RefreshControl';
 import ScrollView from '../../Components/ScrollView/ScrollView';
@@ -21,7 +24,7 @@ import useMergeRefs from '../../Utilities/useMergeRefs';
 import createAnimatedComponent from '../createAnimatedComponent';
 import useAnimatedProps from '../useAnimatedProps';
 import * as React from 'react';
-import {useMemo} from 'react';
+import {cloneElement, useMemo} from 'react';
 
 type AnimatedScrollViewProps = React.ElementConfig<typeof ScrollView>;
 type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
@@ -32,55 +35,54 @@ type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
 const AnimatedScrollView: AnimatedComponentType<
   AnimatedScrollViewProps,
   AnimatedScrollViewInstance,
-> = React.forwardRef(
-  function AnimatedScrollViewWithOrWithoutInvertedRefreshControl(
-    props,
-    forwardedRef,
+> = function AnimatedScrollViewWithOrWithoutInvertedRefreshControl({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<AnimatedScrollViewInstance>,
+  ...AnimatedProps<AnimatedScrollViewProps>,
+}) {
+  // (Android only) When a ScrollView has a RefreshControl and
+  // any `style` property set with an Animated.Value, the CSS
+  // gets incorrectly applied twice. This is because ScrollView
+  // swaps the parent/child relationship of itself and the
+  // RefreshControl component (see ScrollView.js for more details).
+  if (
+    Platform.OS === 'android' &&
+    props.refreshControl != null &&
+    props.style != null
   ) {
-    // (Android only) When a ScrollView has a RefreshControl and
-    // any `style` property set with an Animated.Value, the CSS
-    // gets incorrectly applied twice. This is because ScrollView
-    // swaps the parent/child relationship of itself and the
-    // RefreshControl component (see ScrollView.js for more details).
-    if (
-      Platform.OS === 'android' &&
-      props.refreshControl != null &&
-      props.style != null
-    ) {
-      return (
-        // $FlowFixMe - It should return an Animated ScrollView but it returns a ScrollView with Animated props applied.
-        <AnimatedScrollViewWithInvertedRefreshControl
-          scrollEventThrottle={0.0001}
-          {...props}
-          ref={forwardedRef}
-          // $FlowFixMe[incompatible-type]
-          refreshControl={props.refreshControl}
-        />
-      );
-    } else {
-      return (
-        <AnimatedScrollViewWithoutInvertedRefreshControl
-          scrollEventThrottle={0.0001}
-          {...props}
-          ref={forwardedRef}
-        />
-      );
-    }
-  },
-);
+    return (
+      // $FlowFixMe - It should return an Animated ScrollView but it returns a ScrollView with Animated props applied.
+      <AnimatedScrollViewWithInvertedRefreshControl
+        scrollEventThrottle={0.0001}
+        {...props}
+        ref={forwardedRef}
+        // $FlowFixMe[incompatible-type]
+        refreshControl={props.refreshControl}
+      />
+    );
+  } else {
+    return (
+      <AnimatedScrollViewWithoutInvertedRefreshControl
+        scrollEventThrottle={0.0001}
+        {...props}
+        ref={forwardedRef}
+      />
+    );
+  }
+};
 
-const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
-  // $FlowFixMe[incompatible-call]
-  function AnimatedScrollViewWithInvertedRefreshControl(
-    props: {
-      ...React.ElementConfig<typeof ScrollView>,
-      // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
-      refreshControl: ExactReactElement_DEPRECATED<any>,
-    },
-    forwardedRef:
-      | {current: AnimatedScrollViewInstance | null, ...}
-      | ((AnimatedScrollViewInstance | null) => mixed),
-  ) {
+const AnimatedScrollViewWithInvertedRefreshControl =
+  function AnimatedScrollViewWithInvertedRefreshControl({
+    ref: forwardedRef,
+    ...props
+  }: {
+    ref?: React.RefSetter<AnimatedScrollViewInstance>,
+    ...React.ElementConfig<typeof ScrollView>,
+    // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
+    refreshControl: ExactReactElement_DEPRECATED<any>,
+  }) {
     // Split `props` into the animate-able props for the parent (RefreshControl)
     // and child (ScrollView).
     const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} =
@@ -102,7 +104,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
     // safely clobbered.
     const refreshControl: ExactReactElement_DEPRECATED<typeof RefreshControl> =
-      React.cloneElement(props.refreshControl, {
+      cloneElement(props.refreshControl, {
         ...refreshControlAnimatedProps,
         ref: refreshControlRef,
       });
@@ -134,8 +136,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
         )}
       />
     );
-  },
-);
+  };
 
 const AnimatedScrollViewWithoutInvertedRefreshControl =
   createAnimatedComponent(ScrollView);

package/Libraries/Animated/createAnimatedComponent.js

@@ -105,41 +105,45 @@ export function unstable_createAnimatedComponentWithAllowlist<
   const AnimatedComponent: AnimatedComponentType<
     TProps,
     React.ElementRef<TInstance>,
-  > = React.forwardRef<AnimatedProps<TProps>, React.ElementRef<TInstance>>(
-    (props, forwardedRef) => {
-      const [reducedProps, callbackRef] = useAnimatedProps<
-        TProps,
-        React.ElementRef<TInstance>,
-      >(props);
-      const ref = useMergeRefs<React.ElementRef<TInstance>>(
-        callbackRef,
-        forwardedRef,
-      );
+  > = ({
+    ref: forwardedRef,
+    ...props
+  }: {
+    ref?: React.RefSetter<React.ElementRef<TInstance>>,
+    ...AnimatedProps<TProps>,
+  }) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<
+      TProps,
+      React.ElementRef<TInstance>,
+    >(props);
+    const ref = useMergeRefs<React.ElementRef<TInstance>>(
+      callbackRef,
+      forwardedRef,
+    );
 
-      // Some components require explicit passthrough values for animation
-      // to work properly. For example, if an animated component is
-      // transformed and Pressable, onPress will not work after transform
-      // without these passthrough values.
-      // $FlowFixMe[prop-missing]
-      const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
-      const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
-      const mergedStyle = useMemo(
-        () => composeStyles(style, passthroughStyle),
-        [passthroughStyle, style],
-      );
+    // Some components require explicit passthrough values for animation
+    // to work properly. For example, if an animated component is
+    // transformed and Pressable, onPress will not work after transform
+    // without these passthrough values.
+    // $FlowFixMe[prop-missing]
+    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+    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}
-          {...passthroughAnimatedPropExplicitValues}
-          style={mergedStyle}
-          ref={ref}
-        />
-      );
-    },
-  );
+    // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
+    // spread after `reducedProps` but before `style`.
+    return (
+      <Component
+        {...reducedProps}
+        {...passthroughAnimatedPropExplicitValues}
+        style={mergedStyle}
+        ref={ref}
+      />
+    );
+  };
 
   AnimatedComponent.displayName = `Animated(${
     Component.displayName || 'Anonymous'

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -6,7 +6,6 @@
  *
  * @flow
  * @format
- * @oncall react_native
  */
 
 'use strict';
@@ -16,7 +15,7 @@ import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedNode from './AnimatedNode';
 import AnimatedWithChildren from './AnimatedWithChildren';
-import * as React from 'react';
+import {isValidElement} from 'react';
 
 const MAX_DEPTH = 5;
 
@@ -30,7 +29,7 @@ export function isPlainObject(
     value !== null &&
     typeof value === 'object' &&
     Object.getPrototypeOf(value).isPrototypeOf(Object) &&
-    !React.isValidElement(value)
+    !isValidElement(value)
   );
 }
 

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -22,7 +22,7 @@ import invariant from 'invariant';
 
 export type AnimatedPropsAllowlist = $ReadOnly<{
   style?: ?AnimatedStyleAllowlist,
-  [string]: true,
+  [key: string]: true | AnimatedStyleAllowlist,
 }>;
 
 type TargetView = {

package/Libraries/Animated/shouldUseTurboAnimatedModule.js

@@ -8,10 +8,15 @@
  * @format
  */
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import Platform from '../Utilities/Platform';
 
 function shouldUseTurboAnimatedModule(): boolean {
-  return Platform.OS === 'ios' && global.RN$Bridgeless === true;
+  if (ReactNativeFeatureFlags.cxxNativeAnimatedEnabled()) {
+    return false;
+  } else {
+    return Platform.OS === 'ios' && global.RN$Bridgeless === true;
+  }
 }
 
 export default shouldUseTurboAnimatedModule;

package/Libraries/AppState/AppState.js

@@ -22,7 +22,12 @@ import NativeAppState from './NativeAppState';
  *   - @platform android - on another Activity (even if it was launched by your app)
  * @platform ios - inactive - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
  */
-export type AppStateStatus = 'inactive' | 'background' | 'active';
+export type AppStateStatus =
+  | 'inactive'
+  | 'background'
+  | 'active'
+  | 'extension'
+  | 'unknown';
 
 /**
  * change - This even is received when the app state has changed.

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -60,18 +60,22 @@ export type ActivityIndicatorProps = $ReadOnly<{
   size?: ?IndicatorSize,
 }>;
 
-const ActivityIndicator = (
-  {
-    animating = true,
-    color = Platform.OS === 'ios' ? GRAY : null,
-    hidesWhenStopped = true,
-    onLayout,
-    size = 'small',
-    style,
-    ...restProps
-  }: ActivityIndicatorProps,
-  forwardedRef?: any,
-) => {
+const ActivityIndicator: component(
+  ref?: React.RefSetter<HostComponent<empty>>,
+  ...props: ActivityIndicatorProps
+) = ({
+  ref: forwardedRef,
+  animating = true,
+  color = Platform.OS === 'ios' ? GRAY : null,
+  hidesWhenStopped = true,
+  onLayout,
+  size = 'small',
+  style,
+  ...restProps
+}: {
+  ref?: any,
+  ...ActivityIndicatorProps,
+}) => {
   let sizeStyle;
   let sizeProp;
 
@@ -110,6 +114,7 @@ const ActivityIndicator = (
       style={StyleSheet.compose(styles.container, style)}>
       {Platform.OS === 'android' ? (
         // $FlowFixMe[prop-missing] Flow doesn't know when this is the android component
+        // $FlowFixMe[incompatible-type]
         <PlatformActivityIndicator {...nativeProps} {...androidProps} />
       ) : (
         /* $FlowFixMe[incompatible-type] (>=0.106.0 site=react_native_android_fb) This comment
@@ -153,11 +158,7 @@ const ActivityIndicator = (
 ```
 */
 
-const ActivityIndicatorWithRef: component(
-  ref?: React.RefSetter<HostComponent<empty>>,
-  ...props: ActivityIndicatorProps
-) = React.forwardRef(ActivityIndicator);
-ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
+ActivityIndicator.displayName = 'ActivityIndicator';
 
 const styles = StyleSheet.create({
   container: {
@@ -174,4 +175,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ActivityIndicatorWithRef;
+export default ActivityIndicator;

package/Libraries/Components/Button.js

@@ -288,7 +288,7 @@ type ButtonRef = React.ElementRef<typeof Touchable>;
 const Button: component(
   ref?: React.RefSetter<ButtonRef>,
   ...props: ButtonProps
-) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
+) = ({ref, ...props}: {ref?: React.RefSetter<ButtonRef>, ...ButtonProps}) => {
   const {
     accessibilityLabel,
     accessibilityState,
@@ -392,7 +392,7 @@ const Button: component(
       </View>
     </Touchable>
   );
-});
+};
 
 Button.displayName = 'Button';
 

package/Libraries/Components/Button.windows.js

@@ -310,8 +310,7 @@ type ButtonRef = React.ElementRef<typeof TouchableHighlight>;
 const Button: component(
   ref?: React.RefSetter<ButtonRef>,
   ...props: ButtonProps
-) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
-  // Windows
+) = ({ref, ...props}: {ref?: React.RefSetter<ButtonRef>, ...ButtonProps}) => {
   // [Windows
   const [hover, setHover] = React.useState(false);
   const [pressed, setPressed] = React.useState(false);
@@ -545,7 +544,7 @@ const Button: component(
     );
   }
   // Windows]
-});
+};
 
 Button.displayName = 'Button';
 

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

@@ -28,6 +28,7 @@ import AndroidDrawerLayoutNativeComponent, {
 } from './AndroidDrawerLayoutNativeComponent';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
+import {createRef} from 'react';
 
 const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
 
@@ -76,9 +77,7 @@ class DrawerLayoutAndroid
 
   // $FlowFixMe[missing-local-annot]
   _nativeRef =
-    React.createRef<
-      React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
-    >();
+    createRef<React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>>();
 
   state: DrawerLayoutAndroidState = {
     drawerOpened: false,

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -24,6 +24,7 @@ import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo';
 import View from '../View/View';
 import Keyboard from './Keyboard';
 import * as React from 'react';
+import {createRef} from 'react';
 
 export type KeyboardAvoidingViewProps = $ReadOnly<{
   ...ViewProps,
@@ -73,7 +74,7 @@ class KeyboardAvoidingView extends React.Component<
   constructor(props: KeyboardAvoidingViewProps) {
     super(props);
     this.state = {bottom: 0};
-    this.viewRef = React.createRef();
+    this.viewRef = createRef();
   }
 
   async _relativeKeyboardHeight(

package/Libraries/Components/LayoutConformance/LayoutConformance.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 import StyleSheet from '../../StyleSheet/StyleSheet';

package/Libraries/Components/Pressable/Pressable.js

@@ -24,7 +24,7 @@ import useAndroidRippleForView, {
   type PressableAndroidRippleConfig,
 } from './useAndroidRippleForView';
 import * as React from 'react';
-import {useMemo, useRef, useState} from 'react';
+import {memo, useMemo, useRef, useState} from 'react';
 
 type ViewStyleProp = React.ElementConfig<typeof View>['style'];
 
@@ -165,10 +165,13 @@ type Instance = React.ElementRef<typeof View>;
  * Component used to build display components that should respond to whether the
  * component is currently pressed or not.
  */
-function Pressable(
-  props: PressableProps,
-  forwardedRef: React.RefSetter<Instance>,
-): React.Node {
+function Pressable({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<Instance>,
+  ...PressableProps,
+}): React.Node {
   const {
     accessible,
     accessibilityState,
@@ -331,7 +334,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
   return [pressed || forcePressed, setPressed];
 }
 
-const MemoedPressable = React.memo(React.forwardRef(Pressable));
+const MemoedPressable = memo(Pressable);
 MemoedPressable.displayName = 'Pressable';
 
 export default (MemoedPressable: component(

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

@@ -28,7 +28,7 @@ import useAndroidRippleForView, {
   type PressableAndroidRippleConfig,
 } from './useAndroidRippleForView';
 import * as React from 'react';
-import {useMemo, useRef, useState} from 'react';
+import {memo, useMemo, useRef, useState} from 'react';
 import type {HandledKeyboardEvent} from '../../Components/View/ViewPropTypes';
 
 type ViewStyleProp = React.ElementConfig<typeof View>['style'];
@@ -210,10 +210,13 @@ type Instance = React.ElementRef<typeof View>;
  * Component used to build display components that should respond to whether the
  * component is currently pressed or not.
  */
-function Pressable(
-  props: PressableProps,
-  forwardedRef: React.RefSetter<Instance>,
-): React.Node {
+function Pressable({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<Instance>,
+  ...PressableProps,
+}): React.Node {
   const {
     accessible,
     accessibilityState,
@@ -400,7 +403,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
   return [pressed || forcePressed, setPressed];
 }
 
-const MemoedPressable = React.memo(React.forwardRef(Pressable));
+const MemoedPressable = memo(Pressable);
 MemoedPressable.displayName = 'Pressable';
 
 export default (MemoedPressable: component(

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -39,23 +39,24 @@ export type {ProgressBarAndroidProps};
  * },
  * ```
  */
-const ProgressBarAndroidWithForwardedRef: component(
+const ProgressBarAndroid: component(
   ref?: React.RefSetter<
     React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
   >,
   ...props: ProgressBarAndroidProps
-) = React.forwardRef(function ProgressBarAndroid(
-  {
-    // $FlowFixMe[incompatible-type]
-    styleAttr = 'Normal',
-    indeterminate = true,
-    animating = true,
-    ...restProps
-  }: ProgressBarAndroidProps,
-  forwardedRef: ?React.RefSetter<
+) = function ProgressBarAndroid({
+  ref: forwardedRef,
+  // $FlowFixMe[incompatible-type]
+  styleAttr = 'Normal',
+  indeterminate = true,
+  animating = true,
+  ...restProps
+}: {
+  ref?: React.RefSetter<
     React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
   >,
-) {
+  ...ProgressBarAndroidProps,
+}) {
   return (
     <ProgressBarAndroidNativeComponent
       styleAttr={styleAttr}
@@ -65,6 +66,6 @@ const ProgressBarAndroidWithForwardedRef: component(
       ref={forwardedRef}
     />
   );
-});
+};
 
-export default ProgressBarAndroidWithForwardedRef;
+export default ProgressBarAndroid;