react-native-windows 0.71.8 → 0.72.0-preview.1

package/.flowconfig

@@ -13,6 +13,7 @@
 <PROJECT_ROOT>/Libraries/Components/Picker/RCTPickerNativeComponent.js
 <PROJECT_ROOT>/Libraries/Components/RefreshControl/RefreshControl.js
 <PROJECT_ROOT>/Libraries/Components/SafeAreaView/SafeAreaView.js
+<PROJECT_ROOT>/Libraries/Components/ScrollView/ScrollView.js
 <PROJECT_ROOT>/Libraries/Components/TextInput/TextInput.js
 <PROJECT_ROOT>/Libraries/Components/TextInput/TextInputState.js
 <PROJECT_ROOT>/Libraries/Components/Touchable/Touchable.js
@@ -31,6 +32,10 @@
 <PROJECT_ROOT>/Libraries/NewAppScreen/components/ReloadInstructions.js
 <PROJECT_ROOT>/Libraries/Pressability/Pressability.js
 <PROJECT_ROOT>/Libraries/Types/CoreEventTypes.js
+<PROJECT_ROOT>/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js
+<PROJECT_ROOT>/Libraries/LogBox/UI/LogBoxInspectorHeader.js
+<PROJECT_ROOT>/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js
+<PROJECT_ROOT>/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js
 
 ; Ignore react-native files in node_modules since they are copied into project root
 .*/node_modules/react-native/.*
@@ -48,7 +53,7 @@
 .*/node_modules/playground/.*
 
 ; Ignore templates for 'react-native init'
-<PROJECT_ROOT>/template/.*
+<PROJECT_ROOT>/packages/react-native/template/.*
 
 ; Ignore the Dangerfile
 <PROJECT_ROOT>/packages/react-native-bots/dangerfile.js
@@ -56,6 +61,9 @@
 ; Ignore "BUCK" generated dirs
 <PROJECT_ROOT>/\.buckd/
 
+; Flow doesn't support platforms
+.*/packages/react-native/Libraries/Utilities/LoadingView.js
+
 ; Ignore the src folder - flow files are combined with ones from react-native into the root Libraries folder
 .*/vnext/src/.*
 
@@ -71,8 +79,11 @@
 [libs]
 interface.js
 flow/
+flow-typed/
 
 [options]
+enums=true
+
 emoji=true
 
 exact_by_default=true
@@ -97,7 +108,6 @@ suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 suppress_type=$FlowFixMeEmpty
 
-inference_mode=constrain_writes
 sharedmemory.hash_table_pow=21
 
 [lints]
@@ -120,4 +130,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.191.0
+^0.202.0

package/Directory.Build.props

@@ -23,25 +23,6 @@
     <FmtCommitHash>9e8b86fd2d9806672cc73133d21780dd182bfd24</FmtCommitHash>
   </PropertyGroup>
 
-  <!--
-    IMPORTANT: Traversals left in a directory will break some tools like midl, but we also cannot call
-    [MSBuild]::NormalizeDirectory on relative paths since cwd is not always correct. This logic should prefer to operate
-    on full paths and avoid extra normalization.
-  -->
-  <PropertyGroup>
-    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$(MSBuildThisFileDirectory)</ReactNativeWindowsDir>
-
-    <ReactNativeDir Condition="'$(ReactNativeDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native\package.json'))\node_modules\react-native\</ReactNativeDir>
-
-    <YogaDir Condition="'$(YogaDir)' == ''">$(ReactNativeDir)ReactCommon\yoga</YogaDir>
-
-    <FollyDir Condition="'$(FollyDir)' == '' AND Exists('$([MSBuild]::NormalizeDirectory($(ReactNativeDir)..\..\node_modules))')">$(ReactNativeDir)..\..\node_modules\.folly\folly-$(FollyVersion)</FollyDir>
-    <FollyDir>$([MSBuild]::NormalizeDirectory($(FollyDir)))</FollyDir>
-
-    <FmtDir Condition="'$(FmtDir)' == '' AND Exists('$([MSBuild]::NormalizeDirectory($(ReactNativeDir)..\..\node_modules))')">$(ReactNativeDir)..\..\node_modules\.fmt\fmt-$(FmtVersion)</FmtDir>
-    <FmtDir>$([MSBuild]::NormalizeDirectory($(FmtDir)))</FmtDir>
-  </PropertyGroup>
-
   <PropertyGroup Label="Configuration">
     <ProjectName Condition="'$(ProjectName)'==''">$(MSBuildProjectName)</ProjectName>
 
@@ -65,6 +46,25 @@
     <OutputPath Condition="'$(MSBuildProjectExtension)' == '.csproj'">$(OutDir)</OutputPath>
   </PropertyGroup>
 
+  <!--
+    IMPORTANT: Traversals left in a directory will break some tools like midl, but we also cannot call
+    [MSBuild]::NormalizeDirectory on relative paths since cwd is not always correct. This logic should prefer to operate
+    on full paths and avoid extra normalization.
+  -->
+  <PropertyGroup>
+    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$(MSBuildThisFileDirectory)</ReactNativeWindowsDir>
+
+    <ReactNativeDir Condition="'$(ReactNativeDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native\package.json'))\node_modules\react-native\</ReactNativeDir>
+
+    <YogaDir Condition="'$(YogaDir)' == ''">$(ReactNativeDir)ReactCommon\yoga</YogaDir>
+
+    <FollyDir Condition="'$(FollyDir)' == '' AND Exists('$([MSBuild]::NormalizeDirectory($(ReactNativeDir)..\..\node_modules))')">$(ReactNativeDir)..\..\node_modules\.folly\folly-$(FollyVersion)</FollyDir>
+    <FollyDir>$([MSBuild]::NormalizeDirectory($(FollyDir)))</FollyDir>
+
+    <FmtDir Condition="'$(FmtDir)' == '' AND Exists('$([MSBuild]::NormalizeDirectory($(ReactNativeDir)..\..\node_modules))')">$(ReactNativeDir)..\..\node_modules\.fmt\fmt-$(FmtVersion)</FmtDir>
+    <FmtDir>$([MSBuild]::NormalizeDirectory($(FmtDir)))</FmtDir>
+  </PropertyGroup>
+
   <PropertyGroup Label="NuGet" Condition="'$(MSBuildProjectExtension)' == '.vcxproj'">
     <!--See https://docs.microsoft.com/en-us/nuget/reference/msbuild-targets#restore-target-->
     <RestoreUseStaticGraphEvaluation Condition="'$(BuildingInsideVisualStudio)' == 'true' AND '$(DisableRestoreUseStaticGraphEvaluation)' != 'true'">true</RestoreUseStaticGraphEvaluation>

package/Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -13,7 +13,7 @@ import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 import RCTActionSheetManager from './NativeActionSheetManager';
 
-const processColor = require('../StyleSheet/processColor');
+const processColor = require('../StyleSheet/processColor').default;
 const invariant = require('invariant');
 
 /**

package/Libraries/Alert/Alert.d.ts

@@ -13,14 +13,14 @@
 export interface AlertButton {
   text?: string | undefined;
   onPress?: ((value?: string) => void) | undefined;
-  isPreferred?: boolean;
+  isPreferred?: boolean | undefined;
   style?: 'default' | 'cancel' | 'destructive' | undefined;
 }
 
 interface AlertOptions {
   /** @platform android */
   cancelable?: boolean | undefined;
-  userInterfaceStyle?: 'unspecified' | 'light' | 'dark';
+  userInterfaceStyle?: 'unspecified' | 'light' | 'dark' | undefined;
   /** @platform android */
   onDismiss?: (() => void) | undefined;
 }
@@ -33,8 +33,8 @@ interface AlertOptions {
  * button will be an 'OK' button.
  *
  * This is an API that works both on iOS and Android and can show static
- * alerts. To show an alert that prompts the user to enter some information,
- * see `AlertIOS`; entering text in an alert is common on iOS only.
+ * alerts. On iOS, you can show an alert that prompts the user to enter
+ * some information.
  *
  * ## iOS
  *

package/Libraries/Alert/Alert.windows.js

@@ -27,6 +27,7 @@ type Options = {
   cancelable?: ?boolean,
   userInterfaceStyle?: 'unspecified' | 'light' | 'dark',
   onDismiss?: ?() => void,
+  rootTag?: number,
   ...
 };
 
@@ -51,6 +52,7 @@ class Alert {
       title: title || '',
       message: message || '',
       cancelable: false,
+      rootTag: options && options.rootTag,
     };
 
     if (options && options.cancelable) {

package/Libraries/Alert/NativeDialogManagerWindows.js

@@ -29,6 +29,7 @@ export type DialogOptions = {|
   items?: Array<string>,
   cancelable?: boolean,
   defaultButton?: Int32,
+  rootTag?: Int32,
 |};
 
 export interface Spec extends TurboModule {

package/Libraries/Animated/Animated.d.ts

@@ -11,8 +11,12 @@ import type * as React from 'react';
 import {ScrollView} from '../Components/ScrollView/ScrollView';
 import {View} from '../Components/View/View';
 import {Image} from '../Image/Image';
-import {FlatListProps} from '../Lists/FlatList';
-import {DefaultSectionT, SectionListProps} from '../Lists/SectionList';
+import {FlatListComponent, FlatListProps} from '../Lists/FlatList';
+import {
+  DefaultSectionT,
+  SectionListComponent,
+  SectionListProps,
+} from '../Lists/SectionList';
 import {ColorValue} from '../StyleSheet/StyleSheet';
 import {Text} from '../Text/Text';
 import {NativeSyntheticEvent} from '../Types/CoreEventTypes';
@@ -560,7 +564,9 @@ export namespace Animated {
   type NonAnimatedProps = 'key' | 'ref';
 
   type TAugmentRef<T> = T extends React.Ref<infer R>
-    ? React.Ref<R | LegacyRef<R>>
+    ? unknown extends R
+      ? never
+      : React.Ref<R | LegacyRef<R>>
     : never;
 
   export type AnimatedProps<T> = {
@@ -575,7 +581,7 @@ export namespace Animated {
     extends React.FC<AnimatedProps<React.ComponentPropsWithRef<T>>> {}
 
   export type AnimatedComponentOptions = {
-    collapsable?: boolean;
+    collapsable?: boolean | undefined;
   };
 
   /**
@@ -598,13 +604,18 @@ export namespace Animated {
   /**
    * FlatList and SectionList infer generic Type defined under their `data` and `section` props.
    */
-  export class FlatList<ItemT = any> extends React.Component<
+
+  export class FlatList<ItemT = any> extends FlatListComponent<
+    ItemT,
     AnimatedProps<FlatListProps<ItemT>>
   > {}
+
   export class SectionList<
     ItemT = any,
     SectionT = DefaultSectionT,
-  > extends React.Component<AnimatedProps<SectionListProps<ItemT, SectionT>>> {}
+  > extends SectionListComponent<
+    AnimatedProps<SectionListProps<ItemT, SectionT>>
+  > {}
 }
 
 // We need to alias these views so we can reference them in the Animated

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -142,7 +142,11 @@ const API = {
     }
   },
   flushQueue: function (): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
+    // TODO: (T136971132)
+    invariant(
+      NativeAnimatedModule || process.env.NODE_ENV === 'test',
+      'Native animated module is not available',
+    );
     flushQueueTimeout = null;
 
     // Early returns before calling any APIs
@@ -165,16 +169,18 @@ const API = {
       // use RCTDeviceEventEmitter. This reduces overhead of sending lots of
       // JSI functions across to native code; but also, TM infrastructure currently
       // does not support packing a function into native arrays.
-      NativeAnimatedModule.queueAndExecuteBatchedOperations?.(singleOpQueue);
+      NativeAnimatedModule?.queueAndExecuteBatchedOperations?.(singleOpQueue);
       singleOpQueue.length = 0;
     } else {
-      Platform.OS === 'android' && NativeAnimatedModule.startOperationBatch?.();
+      Platform.OS === 'android' &&
+        NativeAnimatedModule?.startOperationBatch?.();
+
       for (let q = 0, l = queue.length; q < l; q++) {
         queue[q]();
       }
       queue.length = 0;
       Platform.OS === 'android' &&
-        NativeAnimatedModule.finishOperationBatch?.();
+        NativeAnimatedModule?.finishOperationBatch?.();
     }
   },
   queueOperation: <Args: $ReadOnlyArray<mixed>, Fn: (...Args) => void>(
@@ -242,6 +248,7 @@ const API = {
       }
       // $FlowFixMe
       API.queueOperation(
+        // $FlowFixMe[incompatible-call]
         nativeOps.startAnimatingNode,
         animationId,
         nodeTag,
@@ -384,11 +391,15 @@ const SUPPORTED_STYLES = {
   borderBottomLeftRadius: true,
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
   borderRadius: true,
   borderTopEndRadius: true,
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
   borderTopStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
   elevation: true,
   opacity: true,
   transform: true,
@@ -577,10 +588,11 @@ export default {
   assertNativeAnimatedModule,
   shouldUseNativeDriver,
   transformDataType,
-  // $FlowExpectedError[unsafe-getters-setters] - unsafe getter lint suppresion
-  // $FlowExpectedError[missing-type-arg] - unsafe getter lint suppresion
+  // $FlowExpectedError[unsafe-getters-setters] - unsafe getter lint suppression
+  // $FlowExpectedError[missing-type-arg] - unsafe getter lint suppression
   get nativeEventEmitter(): NativeEventEmitter {
     if (!nativeEventEmitter) {
+      // $FlowFixMe[underconstrained-implicit-instantiation]
       nativeEventEmitter = new NativeEventEmitter(
         // 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

package/Libraries/Animated/bezier.js

@@ -105,7 +105,7 @@ export default function bezier(
   // Precompute samples table
   const sampleValues = float32ArraySupported
     ? new Float32Array(kSplineTableSize)
-    : new Array(kSplineTableSize);
+    : new Array<number>(kSplineTableSize);
   if (mX1 !== mY1 || mX2 !== mY2) {
     for (let i = 0; i < kSplineTableSize; ++i) {
       sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);

package/Libraries/Animated/components/AnimatedFlatList.js

@@ -17,9 +17,14 @@ import * as React from 'react';
 /**
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
-const FlatListWithEventThrottle = React.forwardRef((props, ref) => (
-  <FlatList scrollEventThrottle={0.0001} {...props} ref={ref} />
-));
+const FlatListWithEventThrottle = React.forwardRef(
+  (
+    props: React.ElementConfig<typeof FlatList>,
+    ref:
+      | ((null | FlatList<mixed>) => mixed)
+      | {current: null | FlatList<mixed>, ...},
+  ) => <FlatList scrollEventThrottle={0.0001} {...props} ref={ref} />,
+);
 
 export default (createAnimatedComponent(
   FlatListWithEventThrottle,

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -67,12 +67,15 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
       // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
       refreshControl: React.Element<any>,
     },
-    forwardedRef,
+    forwardedRef:
+      | {current: Instance | null, ...}
+      | ((Instance | null) => mixed),
   ) => {
     // Split `props` into the animate-able props for the parent (RefreshControl)
     // and child (ScrollView).
     const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} =
       useMemo(() => {
+        // $FlowFixMe[underconstrained-implicit-instantiation]
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
         return {
           intermediatePropsForRefreshControl: {style: outer},

package/Libraries/Animated/components/AnimatedSectionList.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {SectionBase} from '../../Lists/SectionList';
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
 import SectionList from '../../Lists/SectionList';
@@ -17,9 +18,17 @@ import * as React from 'react';
 /**
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
-const SectionListWithEventThrottle = React.forwardRef((props, ref) => (
-  <SectionList scrollEventThrottle={0.0001} {...props} ref={ref} />
-));
+const SectionListWithEventThrottle = React.forwardRef(
+  (
+    props: React.ElementConfig<typeof SectionList>,
+    ref:
+      | ((null | SectionList<SectionBase<$FlowFixMe>>) => mixed)
+      | {
+          current: null | SectionList<SectionBase<$FlowFixMe>>,
+          ...
+        },
+  ) => <SectionList scrollEventThrottle={0.0001} {...props} ref={ref} />,
+);
 
 export default (createAnimatedComponent(
   SectionListWithEventThrottle,

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,19 +8,11 @@
  * @format
  */
 
-'use strict';
-
 import View from '../Components/View/View';
-import setAndForwardRef from '../Utilities/setAndForwardRef';
-import {AnimatedEvent} from './AnimatedEvent';
-import * as createAnimatedComponentInjection from './createAnimatedComponentInjection';
-import NativeAnimatedHelper from './NativeAnimatedHelper';
-import AnimatedProps from './nodes/AnimatedProps';
-import invariant from 'invariant';
+import useMergeRefs from '../Utilities/useMergeRefs';
+import useAnimatedProps from './useAnimatedProps';
 import * as React from 'react';
 
-let animatedComponentNextId = 1;
-
 export type AnimatedComponentType<
   -Props: {+[string]: mixed, ...},
   +Instance = mixed,
@@ -37,238 +29,33 @@ export type AnimatedComponentType<
   Instance,
 >;
 
-function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
-  Component: React.AbstractComponent<Props, Instance>,
-): AnimatedComponentType<Props, Instance> {
-  invariant(
-    typeof Component !== 'function' ||
-      (Component.prototype && Component.prototype.isReactComponent),
-    '`createAnimatedComponent` does not support stateless functional components; ' +
-      'use a class component instead.',
-  );
-
-  class AnimatedComponent extends React.Component<Object> {
-    _component: any; // TODO T53738161: flow type this, and the whole file
-    _invokeAnimatedPropsCallbackOnMount: boolean = false;
-    _prevComponent: any;
-    _propsAnimated: AnimatedProps;
-    _eventDetachers: Array<Function> = [];
-
-    // Only to be used in this file, and only in Fabric.
-    _animatedComponentId: string = `${animatedComponentNextId++}:animatedComponent`;
-
-    _attachNativeEvents() {
-      // Make sure to get the scrollable node for components that implement
-      // `ScrollResponder.Mixin`.
-      const scrollableNode = this._component?.getScrollableNode
-        ? this._component.getScrollableNode()
-        : this._component;
-
-      for (const key in this.props) {
-        const prop = this.props[key];
-        if (prop instanceof AnimatedEvent && prop.__isNative) {
-          prop.__attach(scrollableNode, key);
-          this._eventDetachers.push(() => prop.__detach(scrollableNode, key));
-        }
-      }
-    }
-
-    _detachNativeEvents() {
-      this._eventDetachers.forEach(remove => remove());
-      this._eventDetachers = [];
-    }
-
-    _isFabric = (): boolean => {
-      // When called during the first render, `_component` is always null.
-      // Therefore, even if a component is rendered in Fabric, we can't detect
-      // that until ref is set, which happens sometime after the first render.
-      // In cases where this value switching between "false" and "true" on Fabric
-      // causes issues, add an additional check for _component nullity.
-      if (this._component == null) {
-        return false;
-      }
-      return (
-        // eslint-disable-next-line dot-notation
-        this._component['_internalInstanceHandle']?.stateNode?.canonical !=
-          null ||
-        // Some components have a setNativeProps function but aren't a host component
-        // such as lists like FlatList and SectionList. These should also use
-        // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
-        // host component. This crazy hack is essentially special casing those lists and
-        // ScrollView itself to use forceUpdate in Fabric.
-        // If these components end up using forwardRef then these hacks can go away
-        // as this._component would actually be the underlying host component and the above check
-        // would be sufficient.
-        (this._component.getNativeScrollRef != null &&
-          this._component.getNativeScrollRef() != null &&
-          // eslint-disable-next-line dot-notation
-          this._component.getNativeScrollRef()['_internalInstanceHandle']
-            ?.stateNode?.canonical != null) ||
-        (this._component.getScrollResponder != null &&
-          this._component.getScrollResponder() != null &&
-          this._component.getScrollResponder().getNativeScrollRef != null &&
-          this._component.getScrollResponder().getNativeScrollRef() != null &&
-          this._component.getScrollResponder().getNativeScrollRef()[
-            // eslint-disable-next-line dot-notation
-            '_internalInstanceHandle'
-          ]?.stateNode?.canonical != null)
-      );
-    };
-
-    _waitForUpdate = (): void => {
-      if (this._isFabric()) {
-        NativeAnimatedHelper.API.setWaitingForIdentifier(
-          this._animatedComponentId,
-        );
-      }
-    };
-
-    _markUpdateComplete = (): void => {
-      if (this._isFabric()) {
-        NativeAnimatedHelper.API.unsetWaitingForIdentifier(
-          this._animatedComponentId,
-        );
-      }
-    };
-
-    // The system is best designed when setNativeProps is implemented. It is
-    // able to avoid re-rendering and directly set the attributes that changed.
-    // However, setNativeProps can only be implemented on leaf native
-    // components. If you want to animate a composite component, you need to
-    // re-render it. In this case, we have a fallback that uses forceUpdate.
-    // This fallback is also called in Fabric.
-    _animatedPropsCallback = (): void => {
-      if (this._component == null) {
-        // AnimatedProps is created in will-mount because it's used in render.
-        // But this callback may be invoked before mount in async mode,
-        // In which case we should defer the setNativeProps() call.
-        // React may throw away uncommitted work in async mode,
-        // So a deferred call won't always be invoked.
-        this._invokeAnimatedPropsCallbackOnMount = true;
-      } else if (
-        process.env.NODE_ENV === 'test' ||
-        // For animating properties of non-leaf/non-native components
-        typeof this._component.setNativeProps !== 'function' ||
-        // In Fabric, force animations to go through forceUpdate and skip setNativeProps
-        this._isFabric()
-      ) {
-        this.forceUpdate();
-      } else if (!this._propsAnimated.__isNative) {
-        this._component.setNativeProps(
-          this._propsAnimated.__getAnimatedValue(),
-        );
-      } else {
-        throw new Error(
-          'Attempting to run JS driven animation on animated ' +
-            'node that has been moved to "native" earlier by starting an ' +
-            'animation with `useNativeDriver: true`',
-        );
-      }
-    };
-
-    _attachProps(nextProps: any) {
-      const oldPropsAnimated = this._propsAnimated;
-
-      this._propsAnimated = new AnimatedProps(
-        nextProps,
-        this._animatedPropsCallback,
-      );
-      this._propsAnimated.__attach();
-
-      // When you call detach, it removes the element from the parent list
-      // of children. If it goes to 0, then the parent also detaches itself
-      // and so on.
-      // An optimization is to attach the new elements and THEN detach the old
-      // ones instead of detaching and THEN attaching.
-      // This way the intermediate state isn't to go to 0 and trigger
-      // this expensive recursive detaching to then re-attach everything on
-      // the very next operation.
-      if (oldPropsAnimated) {
-        oldPropsAnimated.__restoreDefaultValues();
-        oldPropsAnimated.__detach();
-      }
-    }
-
-    _setComponentRef: (ref: React.ElementRef<any>) => void = setAndForwardRef({
-      getForwardedRef: () => this.props.forwardedRef,
-      setLocalRef: ref => {
-        this._prevComponent = this._component;
-        this._component = ref;
-      },
-    });
-
-    render(): React.Node {
-      const animatedProps = this._propsAnimated.__getValue() || {};
-
-      const {style = {}, ...props} = animatedProps;
-      const {style: passthruStyle = {}, ...passthruProps} =
-        this.props.passthroughAnimatedPropExplicitValues || {};
-      const mergedStyle = {...style, ...passthruStyle};
-
-      // Force `collapsable` to be false so that native view is not flattened.
-      // Flattened views cannot be accurately referenced by a native driver.
-      return (
-        <Component
-          {...props}
-          {...passthruProps}
-          collapsable={false}
-          style={mergedStyle}
-          ref={this._setComponentRef}
-        />
-      );
-    }
-
-    UNSAFE_componentWillMount() {
-      this._waitForUpdate();
-      this._attachProps(this.props);
-    }
-
-    componentDidMount() {
-      if (this._invokeAnimatedPropsCallbackOnMount) {
-        this._invokeAnimatedPropsCallbackOnMount = false;
-        this._animatedPropsCallback();
-      }
-
-      this._propsAnimated.setNativeView(this._component);
-      this._attachNativeEvents();
-      this._markUpdateComplete();
-    }
-
-    UNSAFE_componentWillReceiveProps(newProps: any) {
-      this._waitForUpdate();
-      this._attachProps(newProps);
-    }
-
-    componentDidUpdate(prevProps: any) {
-      if (this._component !== this._prevComponent) {
-        this._propsAnimated.setNativeView(this._component);
-      }
-      if (this._component !== this._prevComponent || prevProps !== this.props) {
-        this._detachNativeEvents();
-        this._attachNativeEvents();
-      }
-      this._markUpdateComplete();
-    }
-
-    componentWillUnmount() {
-      this._propsAnimated && this._propsAnimated.__detach();
-      this._detachNativeEvents();
-      this._markUpdateComplete();
-      this._component = null;
-      this._prevComponent = null;
-    }
-  }
+export default function createAnimatedComponent<TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+): AnimatedComponentType<TProps, TInstance> {
+  return React.forwardRef((props, forwardedRef) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
+      // $FlowFixMe[incompatible-call]
+      props,
+    );
+    const ref = useMergeRefs<TInstance | null>(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 {style: passthroughStyle, ...passthroughProps} =
+      passthroughAnimatedPropExplicitValues ?? {};
+    const mergedStyle = {...style, ...passthroughStyle};
 
-  return React.forwardRef(function AnimatedComponentWrapper(props, ref) {
     return (
-      <AnimatedComponent
-        {...props}
-        {...(ref == null ? null : {forwardedRef: ref})}
+      <Component
+        {...reducedProps}
+        {...passthroughProps}
+        style={mergedStyle}
+        ref={ref}
       />
     );
   });
 }
-
-// $FlowIgnore[incompatible-cast] - Will be compatible after refactors.
-export default (createAnimatedComponentInjection.recordAndRetrieve() ??
-  createAnimatedComponent: typeof createAnimatedComponent);