react-native-reanimated 2.9.1 → 3.0.0-rc.2

package/lib/module/ConfigHelper.js

@@ -0,0 +1,161 @@
+import { configureProps as jsiConfigureProps } from './reanimated2/core';
+/**
+ * Styles allowed to be direcly updated in UI thread
+ */
+
+let UI_THREAD_PROPS_WHITELIST = {
+  opacity: true,
+  transform: true,
+
+  /* colors */
+  backgroundColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderColor: true,
+  borderEndColor: true,
+  borderLeftColor: true,
+  borderStartColor: true,
+  borderTopColor: true,
+
+  /* ios styles */
+  shadowOpacity: true,
+  shadowRadius: true,
+
+  /* legacy android transform properties */
+  scaleX: true,
+  scaleY: true,
+  translateX: true,
+  translateY: true
+};
+/**
+ * Whitelist of view props that can be updated in native thread via UIManagerModule
+ */
+
+let NATIVE_THREAD_PROPS_WHITELIST = {
+  borderBottomWidth: true,
+  borderEndWidth: true,
+  borderLeftWidth: true,
+  borderRightWidth: true,
+  borderStartWidth: true,
+  borderTopWidth: true,
+  borderWidth: true,
+  bottom: true,
+  flex: true,
+  flexGrow: true,
+  flexShrink: true,
+  height: true,
+  left: true,
+  margin: true,
+  marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginLeft: true,
+  marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
+  maxHeight: true,
+  maxWidth: true,
+  minHeight: true,
+  minWidth: true,
+  padding: true,
+  paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingLeft: true,
+  paddingRight: true,
+  paddingStart: true,
+  paddingTop: true,
+  paddingVertical: true,
+  right: true,
+  start: true,
+  top: true,
+  width: true,
+  zIndex: true,
+  borderBottomEndRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomStartRadius: true,
+  borderRadius: true,
+  borderTopEndRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderTopStartRadius: true,
+  elevation: true,
+  fontSize: true,
+  lineHeight: true,
+  textShadowRadius: true,
+  letterSpacing: true,
+
+  /* strings */
+  display: true,
+  backfaceVisibility: true,
+  overflow: true,
+  resizeMode: true,
+  fontStyle: true,
+  fontWeight: true,
+  textAlign: true,
+  textDecorationLine: true,
+  fontFamily: true,
+  textAlignVertical: true,
+  fontVariant: true,
+  textDecorationStyle: true,
+  textTransform: true,
+  writingDirection: true,
+
+  /* text color */
+  color: true,
+  tintColor: true,
+  shadowColor: true,
+  placeholderTextColor: true
+};
+
+function configureProps() {
+  jsiConfigureProps(Object.keys(UI_THREAD_PROPS_WHITELIST), Object.keys(NATIVE_THREAD_PROPS_WHITELIST));
+}
+
+export function addWhitelistedNativeProps(props) {
+  const oldSize = Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length;
+  NATIVE_THREAD_PROPS_WHITELIST = { ...NATIVE_THREAD_PROPS_WHITELIST,
+    ...props
+  };
+
+  if (oldSize !== Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length) {
+    configureProps();
+  }
+}
+export function addWhitelistedUIProps(props) {
+  const oldSize = Object.keys(UI_THREAD_PROPS_WHITELIST).length;
+  UI_THREAD_PROPS_WHITELIST = { ...UI_THREAD_PROPS_WHITELIST,
+    ...props
+  };
+
+  if (oldSize !== Object.keys(UI_THREAD_PROPS_WHITELIST).length) {
+    configureProps();
+  }
+}
+const PROCESSED_VIEW_NAMES = new Set();
+
+/**
+ * updates UI props whitelist for given view host instance
+ * this will work just once for every view name
+ */
+export function adaptViewConfig(viewConfig) {
+  const viewName = viewConfig.uiViewClassName;
+  const props = viewConfig.validAttributes; // update whitelist of UI props for this view name only once
+
+  if (!PROCESSED_VIEW_NAMES.has(viewName)) {
+    const propsToAdd = {};
+    Object.keys(props).forEach(key => {
+      // we don't want to add native props as they affect layout
+      // we also skip props which repeat here
+      if (!(key in NATIVE_THREAD_PROPS_WHITELIST) && !(key in UI_THREAD_PROPS_WHITELIST)) {
+        propsToAdd[key] = true;
+      }
+    });
+    addWhitelistedUIProps(propsToAdd);
+    PROCESSED_VIEW_NAMES.add(viewName);
+  }
+}
+configureProps();
+//# sourceMappingURL=ConfigHelper.js.map

package/lib/module/ConfigHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["configureProps","jsiConfigureProps","UI_THREAD_PROPS_WHITELIST","opacity","transform","backgroundColor","borderRightColor","borderBottomColor","borderColor","borderEndColor","borderLeftColor","borderStartColor","borderTopColor","shadowOpacity","shadowRadius","scaleX","scaleY","translateX","translateY","NATIVE_THREAD_PROPS_WHITELIST","borderBottomWidth","borderEndWidth","borderLeftWidth","borderRightWidth","borderStartWidth","borderTopWidth","borderWidth","bottom","flex","flexGrow","flexShrink","height","left","margin","marginBottom","marginEnd","marginHorizontal","marginLeft","marginRight","marginStart","marginTop","marginVertical","maxHeight","maxWidth","minHeight","minWidth","padding","paddingBottom","paddingEnd","paddingHorizontal","paddingLeft","paddingRight","paddingStart","paddingTop","paddingVertical","right","start","top","width","zIndex","borderBottomEndRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStartRadius","borderRadius","borderTopEndRadius","borderTopLeftRadius","borderTopRightRadius","borderTopStartRadius","elevation","fontSize","lineHeight","textShadowRadius","letterSpacing","display","backfaceVisibility","overflow","resizeMode","fontStyle","fontWeight","textAlign","textDecorationLine","fontFamily","textAlignVertical","fontVariant","textDecorationStyle","textTransform","writingDirection","color","tintColor","shadowColor","placeholderTextColor","Object","keys","addWhitelistedNativeProps","props","oldSize","length","addWhitelistedUIProps","PROCESSED_VIEW_NAMES","Set","adaptViewConfig","viewConfig","viewName","uiViewClassName","validAttributes","has","propsToAdd","forEach","key","add"],"sources":["ConfigHelper.ts"],"sourcesContent":["import { configureProps as jsiConfigureProps } from './reanimated2/core';\n\n/**\n * Styles allowed to be direcly updated in UI thread\n */\nlet UI_THREAD_PROPS_WHITELIST: Record<string, boolean> = {\n  opacity: true,\n  transform: true,\n  /* colors */\n  backgroundColor: true,\n  borderRightColor: true,\n  borderBottomColor: true,\n  borderColor: true,\n  borderEndColor: true,\n  borderLeftColor: true,\n  borderStartColor: true,\n  borderTopColor: true,\n  /* ios styles */\n  shadowOpacity: true,\n  shadowRadius: true,\n  /* legacy android transform properties */\n  scaleX: true,\n  scaleY: true,\n  translateX: true,\n  translateY: true,\n};\n\n/**\n * Whitelist of view props that can be updated in native thread via UIManagerModule\n */\nlet NATIVE_THREAD_PROPS_WHITELIST: Record<string, boolean> = {\n  borderBottomWidth: true,\n  borderEndWidth: true,\n  borderLeftWidth: true,\n  borderRightWidth: true,\n  borderStartWidth: true,\n  borderTopWidth: true,\n  borderWidth: true,\n  bottom: true,\n  flex: true,\n  flexGrow: true,\n  flexShrink: true,\n  height: true,\n  left: true,\n  margin: true,\n  marginBottom: true,\n  marginEnd: true,\n  marginHorizontal: true,\n  marginLeft: true,\n  marginRight: true,\n  marginStart: true,\n  marginTop: true,\n  marginVertical: true,\n  maxHeight: true,\n  maxWidth: true,\n  minHeight: true,\n  minWidth: true,\n  padding: true,\n  paddingBottom: true,\n  paddingEnd: true,\n  paddingHorizontal: true,\n  paddingLeft: true,\n  paddingRight: true,\n  paddingStart: true,\n  paddingTop: true,\n  paddingVertical: true,\n  right: true,\n  start: true,\n  top: true,\n  width: true,\n  zIndex: true,\n  borderBottomEndRadius: true,\n  borderBottomLeftRadius: true,\n  borderBottomRightRadius: true,\n  borderBottomStartRadius: true,\n  borderRadius: true,\n  borderTopEndRadius: true,\n  borderTopLeftRadius: true,\n  borderTopRightRadius: true,\n  borderTopStartRadius: true,\n  elevation: true,\n  fontSize: true,\n  lineHeight: true,\n  textShadowRadius: true,\n  letterSpacing: true,\n  /* strings */\n  display: true,\n  backfaceVisibility: true,\n  overflow: true,\n  resizeMode: true,\n  fontStyle: true,\n  fontWeight: true,\n  textAlign: true,\n  textDecorationLine: true,\n  fontFamily: true,\n  textAlignVertical: true,\n  fontVariant: true,\n  textDecorationStyle: true,\n  textTransform: true,\n  writingDirection: true,\n  /* text color */\n  color: true,\n  tintColor: true,\n  shadowColor: true,\n  placeholderTextColor: true,\n};\n\nfunction configureProps(): void {\n  jsiConfigureProps(\n    Object.keys(UI_THREAD_PROPS_WHITELIST),\n    Object.keys(NATIVE_THREAD_PROPS_WHITELIST)\n  );\n}\n\nexport function addWhitelistedNativeProps(\n  props: Record<string, boolean>\n): void {\n  const oldSize = Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length;\n  NATIVE_THREAD_PROPS_WHITELIST = {\n    ...NATIVE_THREAD_PROPS_WHITELIST,\n    ...props,\n  };\n  if (oldSize !== Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length) {\n    configureProps();\n  }\n}\n\nexport function addWhitelistedUIProps(props: Record<string, boolean>): void {\n  const oldSize = Object.keys(UI_THREAD_PROPS_WHITELIST).length;\n  UI_THREAD_PROPS_WHITELIST = { ...UI_THREAD_PROPS_WHITELIST, ...props };\n  if (oldSize !== Object.keys(UI_THREAD_PROPS_WHITELIST).length) {\n    configureProps();\n  }\n}\n\nconst PROCESSED_VIEW_NAMES = new Set();\n\ninterface ViewConfig {\n  uiViewClassName: string;\n  validAttributes: Record<string, unknown>;\n}\n/**\n * updates UI props whitelist for given view host instance\n * this will work just once for every view name\n */\n\nexport function adaptViewConfig(viewConfig: ViewConfig): void {\n  const viewName = viewConfig.uiViewClassName;\n  const props = viewConfig.validAttributes;\n\n  // update whitelist of UI props for this view name only once\n  if (!PROCESSED_VIEW_NAMES.has(viewName)) {\n    const propsToAdd: Record<string, boolean> = {};\n    Object.keys(props).forEach((key) => {\n      // we don't want to add native props as they affect layout\n      // we also skip props which repeat here\n      if (\n        !(key in NATIVE_THREAD_PROPS_WHITELIST) &&\n        !(key in UI_THREAD_PROPS_WHITELIST)\n      ) {\n        propsToAdd[key] = true;\n      }\n    });\n    addWhitelistedUIProps(propsToAdd);\n\n    PROCESSED_VIEW_NAMES.add(viewName);\n  }\n}\n\nconfigureProps();\n"],"mappings":"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"}

package/lib/module/createAnimatedComponent.js

@@ -0,0 +1,452 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import { findNodeHandle, Platform, StyleSheet } from 'react-native';
+import WorkletEventHandler from './reanimated2/WorkletEventHandler';
+import setAndForwardRef from './setAndForwardRef';
+import './reanimated2/layoutReanimation/LayoutAnimationRepository';
+import invariant from 'invariant';
+import { adaptViewConfig } from './ConfigHelper';
+import { RNRenderer } from './reanimated2/platform-specific/RNRenderer';
+import { makeMutable, runOnUI, enableLayoutAnimations } from './reanimated2/core';
+import { DefaultEntering, DefaultExiting, DefaultLayout } from './reanimated2/layoutReanimation/defaultAnimations/Default';
+import { isJest, isChromeDebugger, shouldBeUseWeb } from './reanimated2/PlatformChecker';
+import { initialUpdaterRun } from './reanimated2/animation';
+import { getShadowNodeWrapperFromRef } from './reanimated2/fabricUtils';
+
+function dummyListener() {// empty listener we use to assign to listener properties for which animated
+  // event is used.
+}
+
+function flattenArray(array) {
+  if (!Array.isArray(array)) {
+    return [array];
+  }
+
+  const resultArr = [];
+
+  const _flattenArray = arr => {
+    arr.forEach(item => {
+      if (Array.isArray(item)) {
+        _flattenArray(item);
+      } else {
+        resultArr.push(item);
+      }
+    });
+  };
+
+  _flattenArray(array);
+
+  return resultArr;
+}
+
+function onlyAnimatedStyles(styles) {
+  return styles.filter(style => style === null || style === void 0 ? void 0 : style.viewDescriptors);
+}
+
+function isSameAnimatedStyle(style1, style2) {
+  // We cannot use equality check to compare useAnimatedStyle outputs directly.
+  // Instead, we can compare its viewsRefs.
+  return (style1 === null || style1 === void 0 ? void 0 : style1.viewsRef) === (style2 === null || style2 === void 0 ? void 0 : style2.viewsRef);
+}
+
+const isSameAnimatedProps = isSameAnimatedStyle;
+
+const has = (key, x) => {
+  if (typeof x === 'function' || typeof x === 'object') {
+    if (x === null || x === undefined) {
+      return false;
+    } else {
+      return key in x;
+    }
+  }
+
+  return false;
+};
+
+export default function createAnimatedComponent(Component, options) {
+  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 {
+    constructor(props) {
+      super(props);
+
+      _defineProperty(this, "_styles", null);
+
+      _defineProperty(this, "_animatedProps", void 0);
+
+      _defineProperty(this, "_viewTag", -1);
+
+      _defineProperty(this, "_isFirstRender", true);
+
+      _defineProperty(this, "animatedStyle", {
+        value: {}
+      });
+
+      _defineProperty(this, "initialStyle", {});
+
+      _defineProperty(this, "sv", void 0);
+
+      _defineProperty(this, "_component", null);
+
+      _defineProperty(this, "_setComponentRef", setAndForwardRef({
+        getForwardedRef: () => this.props.forwardedRef,
+        setLocalRef: ref => {
+          // TODO update config
+          const tag = findNodeHandle(ref);
+
+          if ((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 : DefaultEntering;
+            let exiting = this.props.exiting ? this.props.exiting : DefaultExiting;
+
+            if (has('build', layout)) {
+              layout = layout.build();
+            }
+
+            if (has('build', entering)) {
+              entering = entering.build();
+            }
+
+            if (has('build', exiting)) {
+              exiting = exiting.build();
+            }
+
+            const config = {
+              layout,
+              entering,
+              exiting,
+              sv: this.sv
+            };
+            runOnUI(() => {
+              'worklet';
+
+              global.LayoutAnimationRepository.registerConfig(tag, config);
+            })();
+          }
+
+          if (ref !== this._component) {
+            this._component = ref;
+          }
+        }
+      }));
+
+      if (isJest()) {
+        this.animatedStyle = {
+          value: {}
+        };
+      }
+
+      this.sv = makeMutable({});
+    }
+
+    componentWillUnmount() {
+      this._detachNativeEvents();
+
+      this._detachStyles();
+
+      this.sv = null;
+    }
+
+    componentDidMount() {
+      this._attachNativeEvents();
+
+      this._attachAnimatedStyles();
+    }
+
+    _attachNativeEvents() {
+      const viewTag = findNodeHandle(this);
+
+      for (const key in this.props) {
+        const prop = this.props[key];
+
+        if (has('current', prop) && prop.current instanceof WorkletEventHandler) {
+          prop.current.registerForEvents(viewTag, key);
+        }
+      }
+    }
+
+    _detachNativeEvents() {
+      for (const key in this.props) {
+        const prop = this.props[key];
+
+        if (has('current', prop) && prop.current instanceof WorkletEventHandler) {
+          prop.current.unregisterFromEvents();
+        }
+      }
+    }
+
+    _detachStyles() {
+      if (Platform.OS === 'web' && this._styles !== null) {
+        for (const style of this._styles) {
+          if (style !== null && style !== void 0 && style.viewsRef) {
+            style.viewsRef.remove(this);
+          }
+        }
+      } else if (this._viewTag !== -1 && this._styles !== null) {
+        var _this$props$animatedP;
+
+        for (const style of this._styles) {
+          style.viewDescriptors.remove(this._viewTag);
+        }
+
+        if ((_this$props$animatedP = this.props.animatedProps) !== null && _this$props$animatedP !== void 0 && _this$props$animatedP.viewDescriptors) {
+          this.props.animatedProps.viewDescriptors.remove(this._viewTag);
+        }
+
+        if (global._IS_FABRIC) {
+          const shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
+          runOnUI(() => {
+            'worklet';
+
+            _removeShadowNodeFromRegistry(shadowNodeWrapper);
+          })();
+        }
+      }
+    }
+
+    _reattachNativeEvents(prevProps) {
+      let viewTag;
+
+      for (const key in this.props) {
+        const prop = this.props[key];
+
+        if (has('current', prop) && prop.current instanceof WorkletEventHandler) {
+          if (viewTag === undefined) {
+            viewTag = prop.current.viewTag;
+          }
+        }
+      }
+
+      for (const key in prevProps) {
+        const prop = this.props[key];
+
+        if (has('current', prop) && prop.current instanceof WorkletEventHandler && prop.current.reattachNeeded) {
+          prop.current.unregisterFromEvents();
+        }
+      }
+
+      for (const key in this.props) {
+        const prop = this.props[key];
+
+        if (has('current', prop) && prop.current instanceof WorkletEventHandler && prop.current.reattachNeeded) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          prop.current.registerForEvents(viewTag, key);
+          prop.current.reattachNeeded = false;
+        }
+      }
+    }
+
+    _updateFromNative(props) {
+      if (options !== null && options !== void 0 && options.setNativeProps) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        options.setNativeProps(this._component, props);
+      } else {
+        var _this$_component, _this$_component$setN;
+
+        // eslint-disable-next-line no-unused-expressions
+        (_this$_component = this._component) === null || _this$_component === void 0 ? void 0 : (_this$_component$setN = _this$_component.setNativeProps) === null || _this$_component$setN === void 0 ? void 0 : _this$_component$setN.call(_this$_component, props);
+      }
+    }
+
+    _attachAnimatedStyles() {
+      var _this$props$animatedP3;
+
+      const styles = this.props.style ? onlyAnimatedStyles(flattenArray(this.props.style)) : [];
+      const prevStyles = this._styles;
+      this._styles = styles;
+      const prevAnimatedProps = this._animatedProps;
+      this._animatedProps = this.props.animatedProps;
+      let viewTag;
+      let viewName;
+      let shadowNodeWrapper = null;
+
+      if (Platform.OS === 'web') {
+        viewTag = findNodeHandle(this);
+        viewName = null;
+        shadowNodeWrapper = null;
+      } else {
+        var _hostInstance$viewCon, _this$props$animatedP2;
+
+        // hostInstance can be null for a component that doesn't render anything (render function returns null). Example: svg Stop: https://github.com/react-native-svg/react-native-svg/blob/develop/src/elements/Stop.tsx
+        const hostInstance = RNRenderer.findHostInstance_DEPRECATED(this);
+
+        if (!hostInstance) {
+          throw new Error('Cannot find host instance for this component. Maybe it renders nothing?');
+        } // we can access view tag in the same way it's accessed here https://github.com/facebook/react/blob/e3f4eb7272d4ca0ee49f27577156b57eeb07cf73/packages/react-native-renderer/src/ReactFabric.js#L146
+
+
+        viewTag = hostInstance === null || hostInstance === void 0 ? void 0 : hostInstance._nativeTag;
+        /**
+         * RN uses viewConfig for components for storing different properties of the component(example: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollViewViewConfig.js#L16).
+         * The name we're looking for is in the field named uiViewClassName.
+         */
+
+        viewName = hostInstance === null || hostInstance === void 0 ? void 0 : (_hostInstance$viewCon = hostInstance.viewConfig) === null || _hostInstance$viewCon === void 0 ? void 0 : _hostInstance$viewCon.uiViewClassName; // update UI props whitelist for this view
+
+        const hasReanimated2Props = ((_this$props$animatedP2 = this.props.animatedProps) === null || _this$props$animatedP2 === void 0 ? void 0 : _this$props$animatedP2.viewDescriptors) || styles.length;
+
+        if (hasReanimated2Props && hostInstance !== null && hostInstance !== void 0 && hostInstance.viewConfig) {
+          adaptViewConfig(hostInstance.viewConfig);
+        }
+
+        if (global._IS_FABRIC) {
+          shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
+        }
+      }
+
+      this._viewTag = viewTag; // 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 => {
+        style.viewDescriptors.add({
+          tag: viewTag,
+          name: viewName,
+          shadowNodeWrapper
+        });
+
+        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 && !isSameAnimatedProps(prevAnimatedProps, this.props.animatedProps)) {
+        prevAnimatedProps.viewDescriptors.remove(viewTag);
+      } // attach animatedProps property
+
+
+      if ((_this$props$animatedP3 = this.props.animatedProps) !== null && _this$props$animatedP3 !== void 0 && _this$props$animatedP3.viewDescriptors) {
+        this.props.animatedProps.viewDescriptors.add({
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          tag: viewTag,
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          name: viewName,
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          shadowNodeWrapper: shadowNodeWrapper
+        });
+      }
+    }
+
+    componentDidUpdate(prevProps) {
+      this._reattachNativeEvents(prevProps);
+
+      this._attachAnimatedStyles();
+    }
+
+    _filterNonAnimatedProps(inputProps) {
+      const props = {};
+
+      for (const key in inputProps) {
+        const value = inputProps[key];
+
+        if (key === 'style') {
+          const styleProp = inputProps.style;
+          const styles = flattenArray(styleProp ?? []);
+          const processedStyle = styles.map(style => {
+            if (style && style.viewDescriptors) {
+              // this is how we recognize styles returned by useAnimatedStyle
+              style.viewsRef.add(this);
+
+              if (this._isFirstRender) {
+                this.initialStyle = { ...style.initial.value,
+                  ...initialUpdaterRun(style.initial.updater)
+                };
+              }
+
+              return this.initialStyle;
+            } else {
+              return style;
+            }
+          });
+          props[key] = StyleSheet.flatten(processedStyle);
+        } else if (key === 'animatedProps') {
+          const animatedProp = inputProps.animatedProps;
+
+          if (animatedProp.initial !== undefined) {
+            Object.keys(animatedProp.initial.value).forEach(key => {
+              var _animatedProp$initial, _animatedProp$viewsRe;
+
+              props[key] = (_animatedProp$initial = animatedProp.initial) === null || _animatedProp$initial === void 0 ? void 0 : _animatedProp$initial.value[key];
+              (_animatedProp$viewsRe = animatedProp.viewsRef) === null || _animatedProp$viewsRe === void 0 ? void 0 : _animatedProp$viewsRe.add(this);
+            });
+          }
+        } else if (has('current', value) && value.current instanceof WorkletEventHandler) {
+          if (value.current.eventNames.length > 0) {
+            value.current.eventNames.forEach(eventName => {
+              props[eventName] = has('listeners', value.current) ? value.current.listeners[eventName] : dummyListener;
+            });
+          } else {
+            props[key] = dummyListener;
+          }
+        } else if (key !== 'onGestureHandlerStateChange' || !isChromeDebugger()) {
+          props[key] = value;
+        }
+      }
+
+      return props;
+    }
+
+    render() {
+      const props = this._filterNonAnimatedProps(this.props);
+
+      if (isJest()) {
+        props.animatedStyle = this.animatedStyle;
+      }
+
+      if (this._isFirstRender) {
+        this._isFirstRender = false;
+      }
+
+      const platformProps = Platform.select({
+        web: {},
+        default: {
+          collapsable: false
+        }
+      });
+      return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+        ref: this._setComponentRef
+      }, platformProps));
+    }
+
+  }
+
+  _defineProperty(AnimatedComponent, "displayName", void 0);
+
+  AnimatedComponent.displayName = `AnimatedComponent(${Component.displayName || Component.name || 'Component'})`;
+  return /*#__PURE__*/React.forwardRef((props, ref) => {
+    return /*#__PURE__*/React.createElement(AnimatedComponent, _extends({}, props, ref === null ? null : {
+      forwardedRef: ref
+    }));
+  });
+}
+//# sourceMappingURL=createAnimatedComponent.js.map