react-native-reanimated 2.3.0-alpha.3 → 2.3.0-beta.4

package/src/{createAnimatedComponent.js → createAnimatedComponent.tsx}

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { Component, ComponentType, MutableRefObject, Ref } from 'react';
 import { findNodeHandle, Platform, StyleSheet } from 'react-native';
 import ReanimatedEventEmitter from './ReanimatedEventEmitter';
 
+// @ts-ignore JS file
 import AnimatedEvent from './reanimated1/core/AnimatedEvent';
+// @ts-ignore JS file
 import AnimatedNode from './reanimated1/core/AnimatedNode';
+// @ts-ignore JS file
 import AnimatedValue from './reanimated1/core/AnimatedValue';
+// @ts-ignore JS file
 import { createOrReusePropsNode } from './reanimated1/core/AnimatedProps';
 import WorkletEventHandler from './reanimated2/WorkletEventHandler';
 import setAndForwardRef from './setAndForwardRef';
@@ -13,17 +17,41 @@ import './reanimated2/layoutReanimation/LayoutAnimationRepository';
 import invariant from 'invariant';
 import { adaptViewConfig } from './ConfigHelper';
 import { RNRenderer } from './reanimated2/platform-specific/RNRenderer';
-import { makeMutable, runOnUI } from './reanimated2/core';
+import {
+  makeMutable,
+  runOnUI,
+  enableLayoutAnimations,
+} from './reanimated2/core';
 import {
   DefaultEntering,
   DefaultExiting,
   DefaultLayout,
 } from './reanimated2/layoutReanimation/defaultAnimations/Default';
-import { isJest, isChromeDebugger } from './reanimated2/PlatformChecker';
+import {
+  isJest,
+  isChromeDebugger,
+  shouldBeUseWeb,
+} from './reanimated2/PlatformChecker';
+import { initialUpdaterRun } from './reanimated2/animation';
+import {
+  BaseAnimationBuilder,
+  EntryExitAnimationFunction,
+  LayoutAnimationFunction,
+} from './reanimated2/layoutReanimation';
+import { SharedValue, StyleProps } from './reanimated2/commonTypes';
+import {
+  ViewDescriptorsSet,
+  ViewRefSet,
+} from './reanimated2/ViewDescriptorsSet';
 
 const NODE_MAPPING = new Map();
 
-function listener(data) {
+interface ListenerData {
+  viewTag: number;
+  props: StyleProps;
+}
+
+function listener(data: ListenerData) {
   const component = NODE_MAPPING.get(data.viewTag);
   component && component._updateFromNative(data.props);
 }
@@ -33,7 +61,7 @@ function dummyListener() {
   // event is used.
 }
 
-function hasAnimatedNodes(value) {
+function hasAnimatedNodes(value: unknown): boolean {
   if (value instanceof AnimatedNode) {
     return true;
   }
@@ -41,18 +69,21 @@ function hasAnimatedNodes(value) {
     return value.some((item) => hasAnimatedNodes(item));
   }
   if (value && typeof value === 'object') {
-    return Object.keys(value).some((key) => hasAnimatedNodes(value[key]));
+    return Object.keys(value).some((key) =>
+      hasAnimatedNodes((value as Record<string, unknown>)[key])
+    );
   }
   return false;
 }
 
-function flattenArray(array) {
+type NestedArray<T> = T | NestedArray<T>[];
+function flattenArray<T>(array: NestedArray<T>): T[] {
   if (!Array.isArray(array)) {
     return [array];
   }
-  const resultArr = [];
+  const resultArr: T[] = [];
 
-  const _flattenArray = (arr) => {
+  const _flattenArray = (arr: NestedArray<T>[]): void => {
     arr.forEach((item) => {
       if (Array.isArray(item)) {
         _flattenArray(item);
@@ -65,7 +96,83 @@ function flattenArray(array) {
   return resultArr;
 }
 
-export default function createAnimatedComponent(Component, options = {}) {
+function onlyAnimatedStyles(styles: StyleProps[]) {
+  return styles.filter((style) => style?.viewDescriptors);
+}
+
+function isSameAnimatedStyle(style1: StyleProps, style2: StyleProps): boolean {
+  // We cannot use equality check to compare useAnimatedStyle outputs directly.
+  // Instead, we can compare its viewsRefs.
+  return style1.viewsRef === style2.viewsRef;
+}
+
+const has = <K extends string>(
+  key: K,
+  x: unknown
+): x is { [key in K]: unknown } => {
+  if (typeof x === 'function' || typeof x === 'object') {
+    if (x === null || x === undefined) {
+      return false;
+    } else {
+      return key in x;
+    }
+  }
+  return false;
+};
+
+interface AnimatedProps extends Record<string, unknown> {
+  viewDescriptors?: ViewDescriptorsSet;
+  viewsRef?: ViewRefSet<unknown>;
+  initial?: SharedValue<StyleProps>;
+}
+
+export type AnimatedComponentProps<P extends Record<string, unknown>> = P & {
+  forwardedRef?: Ref<Component>;
+  style?: NestedArray<StyleProps>;
+  animatedProps?: Partial<AnimatedComponentProps<AnimatedProps>>;
+  animatedStyle?: StyleProps;
+  layout?:
+    | BaseAnimationBuilder
+    | LayoutAnimationFunction
+    | typeof BaseAnimationBuilder;
+  entering?:
+    | BaseAnimationBuilder
+    | typeof BaseAnimationBuilder
+    | EntryExitAnimationFunction
+    | Keyframe;
+  exiting?:
+    | BaseAnimationBuilder
+    | typeof BaseAnimationBuilder
+    | EntryExitAnimationFunction
+    | Keyframe;
+};
+
+type Options<P> = {
+  setNativeProps: (ref: ComponentRef, props: P) => void;
+};
+
+interface ComponentRef extends Component {
+  setNativeProps?: (props: Record<string, unknown>) => void;
+  getScrollableNode?: () => ComponentRef;
+}
+
+interface InitialComponentProps extends Record<string, unknown> {
+  ref?: Ref<Component>;
+  collapsable?: boolean;
+}
+
+interface PropsAnimated {
+  __onEvaluate: () => StyleProps;
+  __detach: () => void;
+  __getValue: () => StyleProps;
+  update: () => void;
+  setNativeView: (view: Component) => void;
+}
+
+export default function createAnimatedComponent(
+  Component: ComponentType<InitialComponentProps>,
+  options?: Options<InitialComponentProps>
+): ComponentType<AnimatedComponentProps<InitialComponentProps>> {
   invariant(
     typeof Component !== 'function' ||
       (Component.prototype && Component.prototype.isReactComponent),
@@ -73,12 +180,21 @@ export default function createAnimatedComponent(Component, options = {}) {
       'use a class component instead.'
   );
 
-  class AnimatedComponent extends React.Component {
+  class AnimatedComponent extends React.Component<
+    AnimatedComponentProps<InitialComponentProps>
+  > {
     _invokeAnimatedPropsCallbackOnMount = false;
-    _styles = null;
+    _styles: StyleProps[] | null = null;
+    _animatedProps?: Partial<AnimatedComponentProps<AnimatedProps>>;
     _viewTag = -1;
-
-    constructor(props) {
+    _isFirstRender = true;
+    animatedStyle: { value: StyleProps } = { value: {} };
+    sv: SharedValue<null | Record<string, unknown>> | null;
+    _propsAnimated?: PropsAnimated;
+    _component: ComponentRef | null = null;
+    static displayName: string;
+
+    constructor(props: AnimatedComponentProps<InitialComponentProps>) {
       super(props);
       this._attachProps(this.props);
       if (isJest()) {
@@ -101,7 +217,9 @@ export default function createAnimatedComponent(Component, options = {}) {
         this._animatedPropsCallback();
       }
 
-      this._propsAnimated && this._propsAnimated.setNativeView(this._component);
+      this._propsAnimated &&
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this._propsAnimated.setNativeView(this._component!);
       this._attachNativeEvents();
       this._attachPropUpdater();
       this._attachAnimatedStyles();
@@ -110,23 +228,23 @@ export default function createAnimatedComponent(Component, options = {}) {
     _getEventViewRef() {
       // Make sure to get the scrollable node for components that implement
       // `ScrollResponder.Mixin`.
-      return this._component.getScrollableNode
+      return this._component?.getScrollableNode
         ? this._component.getScrollableNode()
         : this._component;
     }
 
     _attachNativeEvents() {
       const node = this._getEventViewRef();
-      const viewTag = findNodeHandle(options.setNativeProps ? this : node);
+      const viewTag = findNodeHandle(options?.setNativeProps ? this : node);
       for (const key in this.props) {
         const prop = this.props[key];
         if (prop instanceof AnimatedEvent) {
-          prop.attachEvent(node, key);
+          (prop as AnimatedEvent).attachEvent(node, key);
         } else if (
-          prop?.current &&
+          has('current', prop) &&
           prop.current instanceof WorkletEventHandler
         ) {
-          prop.current.registerForEvents(viewTag, key);
+          prop.current.registerForEvents(viewTag as number, key);
         }
       }
     }
@@ -137,9 +255,9 @@ export default function createAnimatedComponent(Component, options = {}) {
       for (const key in this.props) {
         const prop = this.props[key];
         if (prop instanceof AnimatedEvent) {
-          prop.detachEvent(node, key);
+          (prop as AnimatedEvent).detachEvent(node, key);
         } else if (
-          prop?.current &&
+          has('current', prop) &&
           prop.current instanceof WorkletEventHandler
         ) {
           prop.current.unregisterFromEvents();
@@ -148,17 +266,15 @@ export default function createAnimatedComponent(Component, options = {}) {
     }
 
     _detachStyles() {
-      if (Platform.OS === 'web') {
+      if (Platform.OS === 'web' && this._styles !== null) {
         for (const style of this._styles) {
-          if (style.viewsRef) {
+          if (style?.viewsRef) {
             style.viewsRef.remove(this);
           }
         }
-      } else if (this._viewTag !== -1) {
+      } else if (this._viewTag !== -1 && this._styles !== null) {
         for (const style of this._styles) {
-          if (style?.viewDescriptors) {
-            style.viewDescriptors.remove(this._viewTag);
-          }
+          style.viewDescriptors.remove(this._viewTag);
         }
         if (this.props.animatedProps?.viewDescriptors) {
           this.props.animatedProps.viewDescriptors.remove(this._viewTag);
@@ -166,18 +282,20 @@ export default function createAnimatedComponent(Component, options = {}) {
       }
     }
 
-    _reattachNativeEvents(prevProps) {
+    _reattachNativeEvents(
+      prevProps: AnimatedComponentProps<InitialComponentProps>
+    ) {
       const node = this._getEventViewRef();
       const attached = new Set();
       const nextEvts = new Set();
-      let viewTag;
+      let viewTag: number | undefined;
 
       for (const key in this.props) {
         const prop = this.props[key];
         if (prop instanceof AnimatedEvent) {
-          nextEvts.add(prop.__nodeID);
+          nextEvts.add((prop as AnimatedEvent).__nodeID);
         } else if (
-          prop?.current &&
+          has('current', prop) &&
           prop.current instanceof WorkletEventHandler
         ) {
           if (viewTag === undefined) {
@@ -188,15 +306,15 @@ export default function createAnimatedComponent(Component, options = {}) {
       for (const key in prevProps) {
         const prop = this.props[key];
         if (prop instanceof AnimatedEvent) {
-          if (!nextEvts.has(prop.__nodeID)) {
+          if (!nextEvts.has((prop as AnimatedEvent).__nodeID)) {
             // event was in prev props but not in current props, we detach
-            prop.detachEvent(node, key);
+            (prop as AnimatedEvent).detachEvent(node, key);
           } else {
             // event was in prev and is still in current props
-            attached.add(prop.__nodeID);
+            attached.add((prop as AnimatedEvent).__nodeID);
           }
         } else if (
-          prop?.current &&
+          has('current', prop) &&
           prop.current instanceof WorkletEventHandler &&
           prop.current.reattachNeeded
         ) {
@@ -206,15 +324,19 @@ export default function createAnimatedComponent(Component, options = {}) {
 
       for (const key in this.props) {
         const prop = this.props[key];
-        if (prop instanceof AnimatedEvent && !attached.has(prop.__nodeID)) {
+        if (
+          prop instanceof AnimatedEvent &&
+          !attached.has((prop as AnimatedEvent).__nodeID)
+        ) {
           // not yet attached
-          prop.attachEvent(node, key);
+          (prop as AnimatedEvent).attachEvent(node, key);
         } else if (
-          prop?.current &&
+          has('current', prop) &&
           prop.current instanceof WorkletEventHandler &&
           prop.current.reattachNeeded
         ) {
-          prop.current.registerForEvents(viewTag, key);
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          prop.current.registerForEvents(viewTag!, key);
           prop.current.reattachNeeded = false;
         }
       }
@@ -236,11 +358,12 @@ export default function createAnimatedComponent(Component, options = {}) {
       } else if (typeof this._component.setNativeProps !== 'function') {
         this.forceUpdate();
       } else {
-        this._component.setNativeProps(this._propsAnimated.__getValue());
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this._component.setNativeProps(this._propsAnimated!.__getValue());
       }
     };
 
-    _attachProps(nextProps) {
+    _attachProps(nextProps: StyleProps) {
       const oldPropsAnimated = this._propsAnimated;
 
       this._propsAnimated = createOrReusePropsNode(
@@ -262,12 +385,13 @@ export default function createAnimatedComponent(Component, options = {}) {
       }
     }
 
-    _updateFromNative(props) {
-      if (options.setNativeProps) {
-        options.setNativeProps(this._component, props);
+    _updateFromNative(props: StyleProps) {
+      if (options?.setNativeProps) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        options.setNativeProps(this._component!, props);
       } else {
         // eslint-disable-next-line no-unused-expressions
-        this._component.setNativeProps?.(props);
+        this._component?.setNativeProps?.(props);
       }
     }
 
@@ -280,9 +404,17 @@ export default function createAnimatedComponent(Component, options = {}) {
     }
 
     _attachAnimatedStyles() {
-      const styles = flattenArray(this.props.style);
+      const styles = this.props.style
+        ? onlyAnimatedStyles(flattenArray<StyleProps>(this.props.style))
+        : [];
+      const prevStyles = this._styles;
       this._styles = styles;
-      let viewTag, viewName;
+
+      const prevAnimatedProps = this._animatedProps;
+      this._animatedProps = this.props.animatedProps;
+
+      let viewTag: number | null;
+      let viewName: string | null;
       if (Platform.OS === 'web') {
         viewTag = findNodeHandle(this);
         viewName = null;
@@ -302,58 +434,68 @@ export default function createAnimatedComponent(Component, options = {}) {
          */
         viewName = hostInstance?.viewConfig?.uiViewClassName;
         // update UI props whitelist for this view
-        if (
-          hostInstance &&
-          this._hasReanimated2Props(styles) &&
-          hostInstance.viewConfig
-        ) {
+        const hasReanimated2Props =
+          this.props.animatedProps?.viewDescriptors || styles.length;
+        if (hasReanimated2Props && hostInstance?.viewConfig) {
           adaptViewConfig(hostInstance.viewConfig);
         }
       }
-      this._viewTag = viewTag;
+      this._viewTag = viewTag as number;
+
+      // remove old styles
+      if (prevStyles) {
+        // in most of the cases, views have only a single animated style and it remains unchanged
+        const hasOneSameStyle =
+          styles.length === 1 &&
+          prevStyles.length === 1 &&
+          isSameAnimatedStyle(styles[0], prevStyles[0]);
+
+        if (!hasOneSameStyle) {
+          // otherwise, remove each style that is not present in new styles
+          for (const prevStyle of prevStyles) {
+            const isPresent = styles.some((style) =>
+              isSameAnimatedStyle(style, prevStyle)
+            );
+            if (!isPresent) {
+              prevStyle.viewDescriptors.remove(viewTag);
+            }
+          }
+        }
+      }
 
       styles.forEach((style) => {
-        if (style?.viewDescriptors) {
-          style.viewDescriptors.add({ tag: viewTag, name: viewName });
-          if (isJest()) {
-            /**
-             * We need to connect Jest's TestObject instance whose contains just props object
-             * with the updateProps() function where we update the properties of the component.
-             * We can't update props object directly because TestObject contains a copy of props - look at render function:
-             * const props = this._filterNonAnimatedProps(this.props);
-             */
-            this.animatedStyle.value = {
-              ...this.animatedStyle.value,
-              ...style.initial.value,
-            };
-            style.animatedStyle.current = this.animatedStyle;
-          }
+        style.viewDescriptors.add({ tag: viewTag, name: viewName });
+        if (isJest()) {
+          /**
+           * We need to connect Jest's TestObject instance whose contains just props object
+           * with the updateProps() function where we update the properties of the component.
+           * We can't update props object directly because TestObject contains a copy of props - look at render function:
+           * const props = this._filterNonAnimatedProps(this.props);
+           */
+          this.animatedStyle.value = {
+            ...this.animatedStyle.value,
+            ...style.initial.value,
+          };
+          style.animatedStyle.current = this.animatedStyle;
         }
       });
+
+      // detach old animatedProps
+      if (prevAnimatedProps && prevAnimatedProps !== this.props.animatedProps) {
+        prevAnimatedProps.viewDescriptors!.remove(viewTag as number);
+      }
+
       // attach animatedProps property
       if (this.props.animatedProps?.viewDescriptors) {
         this.props.animatedProps.viewDescriptors.add({
-          tag: viewTag,
-          name: viewName,
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          tag: viewTag!,
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          name: viewName!,
         });
       }
     }
 
-    _hasReanimated2Props(flattenStyles) {
-      if (this.props.animatedProps?.viewDescriptors) {
-        return true;
-      }
-      if (this.props.style) {
-        for (const style of flattenStyles) {
-          // eslint-disable-next-line no-prototype-builtins
-          if (style?.hasOwnProperty('viewDescriptors')) {
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-
     _detachPropUpdater() {
       const viewTag = findNodeHandle(this);
       NODE_MAPPING.delete(viewTag);
@@ -362,16 +504,23 @@ export default function createAnimatedComponent(Component, options = {}) {
       }
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidUpdate(
+      prevProps: AnimatedComponentProps<InitialComponentProps>
+    ) {
       this._attachProps(this.props);
       this._reattachNativeEvents(prevProps);
 
-      this._propsAnimated && this._propsAnimated.setNativeView(this._component);
+      this._propsAnimated &&
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this._propsAnimated.setNativeView(this._component!);
       this._attachAnimatedStyles();
     }
 
-    _setComponentRef = setAndForwardRef({
-      getForwardedRef: () => this.props.forwardedRef,
+    _setComponentRef = setAndForwardRef<Component>({
+      getForwardedRef: () =>
+        this.props.forwardedRef as MutableRefObject<
+          Component<Record<string, unknown>, Record<string, unknown>, unknown>
+        >,
       setLocalRef: (ref) => {
         // TODO update config
         const tag = findNodeHandle(ref);
@@ -379,6 +528,9 @@ export default function createAnimatedComponent(Component, options = {}) {
           (this.props.layout || this.props.entering || this.props.exiting) &&
           tag != null
         ) {
+          if (!shouldBeUseWeb()) {
+            enableLayoutAnimations(true, false);
+          }
           let layout = this.props.layout ? this.props.layout : DefaultLayout;
           let entering = this.props.entering
             ? this.props.entering
@@ -387,16 +539,16 @@ export default function createAnimatedComponent(Component, options = {}) {
             ? this.props.exiting
             : DefaultExiting;
 
-          if (layout.build) {
+          if (has('build', layout)) {
             layout = layout.build();
           }
 
-          if (entering.build) {
-            entering = entering.build();
+          if (has('build', entering)) {
+            entering = entering.build() as EntryExitAnimationFunction;
           }
 
-          if (exiting.build) {
-            exiting = exiting.build();
+          if (has('build', exiting)) {
+            exiting = exiting.build() as EntryExitAnimationFunction;
           }
 
           const config = {
@@ -414,25 +566,11 @@ export default function createAnimatedComponent(Component, options = {}) {
         if (ref !== this._component) {
           this._component = ref;
         }
-
-        // TODO: Delete this after React Native also deletes this deprecation helper.
-        if (ref != null && ref.getNode == null) {
-          ref.getNode = () => {
-            console.warn(
-              '%s: Calling %s on the ref of an Animated component ' +
-                'is no longer necessary. You can now directly use the ref ' +
-                'instead. This method will be removed in a future release.',
-              ref.constructor.name ?? '<<anonymous>>',
-              'getNode()'
-            );
-            return ref;
-          };
-        }
       },
     });
 
-    _filterNonAnimatedStyle(inputStyle) {
-      const style = {};
+    _filterNonAnimatedStyle(inputStyle: StyleProps) {
+      const style: StyleProps = {};
       for (const key in inputStyle) {
         const value = inputStyle[key];
         if (!hasAnimatedNodes(value)) {
@@ -446,17 +584,27 @@ export default function createAnimatedComponent(Component, options = {}) {
       return style;
     }
 
-    _filterNonAnimatedProps(inputProps) {
-      const props = {};
+    _filterNonAnimatedProps(
+      inputProps: AnimatedComponentProps<InitialComponentProps>
+    ): Record<string, unknown> {
+      const props: Record<string, unknown> = {};
       for (const key in inputProps) {
         const value = inputProps[key];
         if (key === 'style') {
-          const styles = flattenArray(value);
-          const processedStyle = styles.map((style) => {
+          const styleProp = inputProps.style;
+          const styles = flattenArray<StyleProps>(styleProp ?? []);
+          const processedStyle: StyleProps = styles.map((style) => {
             if (style && style.viewDescriptors) {
               // this is how we recognize styles returned by useAnimatedStyle
               style.viewsRef.add(this);
-              return style.initial.value;
+              if (this._isFirstRender) {
+                return {
+                  ...style.initial.value,
+                  ...initialUpdaterRun<StyleProps>(style.initial.updater),
+                };
+              } else {
+                return style.initial.value;
+              }
             } else {
               return style;
             }
@@ -465,10 +613,15 @@ export default function createAnimatedComponent(Component, options = {}) {
             StyleSheet.flatten(processedStyle)
           );
         } else if (key === 'animatedProps') {
-          Object.keys(value.initial.value).forEach((key) => {
-            props[key] = value.initial.value[key];
-            value.viewsRef.add(this);
-          });
+          const animatedProp = inputProps.animatedProps as Partial<
+            AnimatedComponentProps<AnimatedProps>
+          >;
+          if (animatedProp.initial !== undefined) {
+            Object.keys(animatedProp.initial.value).forEach((key) => {
+              props[key] = animatedProp.initial?.value[key];
+              animatedProp.viewsRef?.add(this);
+            });
+          }
         } else if (value instanceof AnimatedEvent) {
           // we cannot filter out event listeners completely as some components
           // rely on having a callback registered in order to generate events
@@ -476,13 +629,15 @@ export default function createAnimatedComponent(Component, options = {}) {
           // native event dispatcher to hijack events.
           props[key] = dummyListener;
         } else if (
-          value?.current &&
+          has('current', value) &&
           value.current instanceof WorkletEventHandler
         ) {
           if (value.current.eventNames.length > 0) {
             value.current.eventNames.forEach((eventName) => {
-              props[eventName] = value.current.listeners
-                ? value.current.listeners[eventName]
+              props[eventName] = has('listeners', value.current)
+                ? (value.current.listeners as Record<string, unknown>)[
+                    eventName
+                  ]
                 : dummyListener;
             });
           } else {
@@ -495,7 +650,7 @@ export default function createAnimatedComponent(Component, options = {}) {
         } else if (value instanceof AnimatedValue) {
           // if any prop in animated component is set directly to the `Value` we set those props to the first value of `Value` node in order
           // to avoid default values for a short moment when `Value` is being asynchrounously sent via bridge and initialized in the native side.
-          props[key] = value._startingValue;
+          props[key] = (value as AnimatedValue)._startingValue;
         }
       }
       return props;
@@ -507,6 +662,10 @@ export default function createAnimatedComponent(Component, options = {}) {
         props.animatedStyle = this.animatedStyle;
       }
 
+      if (this._isFirstRender) {
+        this._isFirstRender = false;
+      }
+
       const platformProps = Platform.select({
         web: {},
         default: { collapsable: false },
@@ -521,11 +680,11 @@ export default function createAnimatedComponent(Component, options = {}) {
     Component.displayName || Component.name || 'Component'
   })`;
 
-  return React.forwardRef(function AnimatedComponentWrapper(props, ref) {
+  return React.forwardRef<Component>((props, ref) => {
     return (
       <AnimatedComponent
         {...props}
-        {...(ref == null ? null : { forwardedRef: ref })}
+        {...(ref === null ? null : { forwardedRef: ref })}
       />
     );
   });