react-native-reanimated 3.0.2 → 3.1.0

package/lib/commonjs/createAnimatedComponent.js

@@ -4,68 +4,45 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createAnimatedComponent;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactNative = require("react-native");
-
 var _WorkletEventHandler = _interopRequireDefault(require("./reanimated2/WorkletEventHandler"));
-
 var _setAndForwardRef = _interopRequireDefault(require("./setAndForwardRef"));
-
 require("./reanimated2/layoutReanimation/animationsManager");
-
 var _invariant = _interopRequireDefault(require("invariant"));
-
 var _ConfigHelper = require("./ConfigHelper");
-
 var _RNRenderer = require("./reanimated2/platform-specific/RNRenderer");
-
 var _core = require("./reanimated2/core");
-
 var _PlatformChecker = require("./reanimated2/PlatformChecker");
-
 var _animation = require("./reanimated2/animation");
-
 var _layoutReanimation = require("./reanimated2/layoutReanimation");
-
 var _ViewDescriptorsSet = require("./reanimated2/ViewDescriptorsSet");
-
 var _fabricUtils = require("./reanimated2/fabricUtils");
-
 var _UpdateProps = _interopRequireDefault(require("./reanimated2/UpdateProps"));
-
 var _NativeReanimated = _interopRequireDefault(require("./reanimated2/NativeReanimated"));
-
 var _reanimated = require("./reanimated2");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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; }
-
-function dummyListener() {// empty listener we use to assign to listener properties for which animated
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function dummyListener() {
+  // empty listener we use to assign to listener properties for which animated
   // event is used.
 }
-
 function maybeBuild(layoutAnimationOrBuilder) {
   const isAnimationBuilder = value => 'build' in layoutAnimationOrBuilder && typeof layoutAnimationOrBuilder.build === 'function';
-
   if (isAnimationBuilder(layoutAnimationOrBuilder)) {
     return layoutAnimationOrBuilder.build();
   } else {
     return layoutAnimationOrBuilder;
   }
 }
-
 function flattenArray(array) {
   if (!Array.isArray(array)) {
     return [array];
   }
-
   const resultArr = [];
-
   const _flattenArray = arr => {
     arr.forEach(item => {
       if (Array.isArray(item)) {
@@ -75,24 +52,18 @@ function flattenArray(array) {
       }
     });
   };
-
   _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) {
@@ -101,42 +72,33 @@ const has = (key, x) => {
       return key in x;
     }
   }
-
   return false;
 };
-
 function isInlineStyleTransform(transform) {
   if (!transform) {
     return false;
   }
-
   return transform.some(t => hasInlineStyles(t));
 }
-
 function hasInlineStyles(style) {
   if (!style) {
     return false;
   }
-
   return Object.keys(style).some(key => {
     const styleValue = style[key];
     return (0, _reanimated.isSharedValue)(styleValue) || key === 'transform' && isInlineStyleTransform(styleValue);
   });
 }
-
 function extractSharedValuesMapFromProps(props) {
   const inlineProps = {};
-
   for (const key in props) {
     const value = props[key];
-
     if (key === 'style') {
       const styles = flattenArray(props.style ?? []);
       styles.forEach(style => {
         if (!style) {
           return;
         }
-
         for (const [key, styleValue] of Object.entries(style)) {
           if ((0, _reanimated.isSharedValue)(styleValue)) {
             inlineProps[key] = styleValue;
@@ -149,27 +111,21 @@ function extractSharedValuesMapFromProps(props) {
       inlineProps[key] = value;
     }
   }
-
   return inlineProps;
 }
-
 function inlinePropsHasChanged(styles1, styles2) {
   if (Object.keys(styles1).length !== Object.keys(styles2).length) {
     return true;
   }
-
   for (const key of Object.keys(styles1)) {
     if (styles1[key] !== styles2[key]) return true;
   }
-
   return false;
 }
-
 function getInlinePropsUpdate(inlineProps) {
   'worklet';
 
   const update = {};
-
   for (const [key, styleValue] of Object.entries(inlineProps)) {
     if (key === 'transform') {
       update[key] = styleValue.map(transform => {
@@ -181,39 +137,25 @@ function getInlinePropsUpdate(inlineProps) {
       update[key] = styleValue;
     }
   }
-
   return update;
 }
-
 function createAnimatedComponent(Component, options) {
-  (0, _invariant.default)(typeof Component !== 'function' || Component.prototype && Component.prototype.isReactComponent, '`createAnimatedComponent` does not support stateless functional components; ' + 'use a class component instead.');
-
+  (0, _invariant.default)(typeof Component !== 'function' || Component.prototype && Component.prototype.isReactComponent, `Looks like you're passing a function component \`${Component.name}\` to \`createAnimatedComponent\` function which supports only class components. Please wrap your function component with \`React.forwardRef()\` or use a class component instead.`);
   class AnimatedComponent extends _react.default.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, "_component", null);
-
       _defineProperty(this, "_inlinePropsViewDescriptors", null);
-
       _defineProperty(this, "_inlinePropsMapperId", null);
-
       _defineProperty(this, "_inlineProps", {});
-
       _defineProperty(this, "_setComponentRef", (0, _setAndForwardRef.default)({
         getForwardedRef: () => this.props.forwardedRef,
         setLocalRef: ref => {
@@ -225,91 +167,69 @@ function createAnimatedComponent(Component, options) {
             exiting,
             sharedTransitionTag
           } = this.props;
-
           if ((layout || entering || exiting || sharedTransitionTag) && tag != null) {
             if (!(0, _PlatformChecker.shouldBeUseWeb)()) {
               (0, _core.enableLayoutAnimations)(true, false);
             }
-
             if (layout) {
               (0, _core.configureLayoutAnimations)(tag, _layoutReanimation.LayoutAnimationType.LAYOUT, maybeBuild(layout));
             }
-
             if (entering) {
               (0, _core.configureLayoutAnimations)(tag, _layoutReanimation.LayoutAnimationType.ENTERING, maybeBuild(entering));
             }
-
             if (exiting) {
               (0, _core.configureLayoutAnimations)(tag, _layoutReanimation.LayoutAnimationType.EXITING, maybeBuild(exiting));
             }
-
             if (sharedTransitionTag) {
               const sharedElementTransition = this.props.sharedTransitionStyle ?? _layoutReanimation.DefaultSharedTransition;
               (0, _core.configureLayoutAnimations)(tag, _layoutReanimation.LayoutAnimationType.SHARED_ELEMENT_TRANSITION, maybeBuild(sharedElementTransition), sharedTransitionTag);
             }
           }
-
           if (ref !== this._component) {
             this._component = ref;
           }
         }
       }));
-
       if ((0, _PlatformChecker.isJest)()) {
         this.animatedStyle = {
           value: {}
         };
       }
     }
-
     componentWillUnmount() {
       this._detachNativeEvents();
-
       this._detachStyles();
-
       this._detachInlineProps();
     }
-
     componentDidMount() {
       this._attachNativeEvents();
-
       this._attachAnimatedStyles();
-
       this._attachInlineProps();
     }
-
     _getEventViewRef() {
       var _this$_component;
-
       // Make sure to get the scrollable node for components that implement
       // `ScrollResponder.Mixin`.
       return (_this$_component = this._component) !== null && _this$_component !== void 0 && _this$_component.getScrollableNode ? this._component.getScrollableNode() : this._component;
     }
-
     _attachNativeEvents() {
       const node = this._getEventViewRef();
-
       const viewTag = (0, _reactNative.findNodeHandle)(options !== null && options !== void 0 && options.setNativeProps ? this : node);
-
       for (const key in this.props) {
         const prop = this.props[key];
-
         if (has('current', prop) && prop.current instanceof _WorkletEventHandler.default) {
           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.default) {
           prop.current.unregisterFromEvents();
         }
       }
     }
-
     _detachStyles() {
       if (_reactNative.Platform.OS === 'web' && this._styles !== null) {
         for (const style of this._styles) {
@@ -319,15 +239,12 @@ function createAnimatedComponent(Component, options) {
         }
       } 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 viewTag = this._viewTag;
           (0, _core.runOnUI)(() => {
@@ -338,31 +255,24 @@ function createAnimatedComponent(Component, options) {
         }
       }
     }
-
     _reattachNativeEvents(prevProps) {
       let viewTag;
-
       for (const key in this.props) {
         const prop = this.props[key];
-
         if (has('current', prop) && prop.current instanceof _WorkletEventHandler.default) {
           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.default && 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.default && prop.current.reattachNeeded) {
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           prop.current.registerForEvents(viewTag, key);
@@ -370,25 +280,21 @@ function createAnimatedComponent(Component, options) {
         }
       }
     }
-
     _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$_component2, _this$_component2$set;
-
         // eslint-disable-next-line no-unused-expressions
         (_this$_component2 = this._component) === null || _this$_component2 === void 0 ? void 0 : (_this$_component2$set = _this$_component2.setNativeProps) === null || _this$_component2$set === void 0 ? void 0 : _this$_component2$set.call(_this$_component2, props);
       }
     }
-
     _getViewInfo() {
       let viewTag;
       let viewName;
       let shadowNodeWrapper = null;
       let viewConfig;
-
       if (_reactNative.Platform.OS === 'web') {
         viewTag = (0, _reactNative.findNodeHandle)(this);
         viewName = null;
@@ -396,29 +302,23 @@ function createAnimatedComponent(Component, options) {
         viewConfig = null;
       } else {
         var _hostInstance$viewCon;
-
         // 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.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
-
-
+        }
+        // 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;
         viewConfig = hostInstance === null || hostInstance === void 0 ? void 0 : hostInstance.viewConfig;
-
         if (global._IS_FABRIC) {
           shadowNodeWrapper = (0, _fabricUtils.getShadowNodeWrapperFromRef)(this);
         }
       }
-
       return {
         viewTag,
         viewName,
@@ -426,55 +326,47 @@ function createAnimatedComponent(Component, options) {
         viewConfig
       };
     }
-
     _attachAnimatedStyles() {
       var _this$props$animatedP2, _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;
-
       const {
         viewTag,
         viewName,
         shadowNodeWrapper,
         viewConfig
-      } = this._getViewInfo(); // update UI props whitelist for this view
-
+      } = this._getViewInfo();
 
+      // 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 && viewConfig) {
         (0, _ConfigHelper.adaptViewConfig)(viewConfig);
       }
+      this._viewTag = viewTag;
 
-      this._viewTag = viewTag; // remove old styles
-
+      // 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 ((0, _PlatformChecker.isJest)()) {
           /**
            * We need to connect Jest's TestObject instance whose contains just props object
@@ -482,18 +374,20 @@ function createAnimatedComponent(Component, options) {
            * 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,
+          this.animatedStyle.value = {
+            ...this.animatedStyle.value,
             ...style.initial.value
           };
           style.animatedStyle.current = this.animatedStyle;
         }
-      }); // detach old animatedProps
+      });
 
+      // detach old animatedProps
       if (prevAnimatedProps && !isSameAnimatedProps(prevAnimatedProps, this.props.animatedProps)) {
         prevAnimatedProps.viewDescriptors.remove(viewTag);
-      } // attach animatedProps property
-
+      }
 
+      // 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
@@ -505,26 +399,21 @@ function createAnimatedComponent(Component, options) {
         });
       }
     }
-
     _attachInlineProps() {
       const newInlineProps = extractSharedValuesMapFromProps(this.props);
       const hasChanged = inlinePropsHasChanged(newInlineProps, this._inlineProps);
-
       if (hasChanged) {
         if (!this._inlinePropsViewDescriptors) {
           this._inlinePropsViewDescriptors = (0, _ViewDescriptorsSet.makeViewDescriptorsSet)();
-
           const {
             viewTag,
             viewName,
             shadowNodeWrapper,
             viewConfig
           } = this._getViewInfo();
-
           if (Object.keys(newInlineProps).length && viewConfig) {
             (0, _ConfigHelper.adaptViewConfig)(viewConfig);
           }
-
           this._inlinePropsViewDescriptors.add({
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             tag: viewTag,
@@ -534,7 +423,6 @@ function createAnimatedComponent(Component, options) {
             shadowNodeWrapper: shadowNodeWrapper
           });
         }
-
         const sharableViewDescriptors = this._inlinePropsViewDescriptors.sharableViewDescriptors;
         const maybeViewRef = _NativeReanimated.default.native ? undefined : {
           items: new Set([this])
@@ -546,41 +434,30 @@ function createAnimatedComponent(Component, options) {
           const update = getInlinePropsUpdate(newInlineProps);
           (0, _UpdateProps.default)(sharableViewDescriptors, update, maybeViewRef);
         };
-
         this._inlineProps = newInlineProps;
-
         if (this._inlinePropsMapperId) {
           (0, _core.stopMapper)(this._inlinePropsMapperId);
         }
-
         this._inlinePropsMapperId = null;
-
         if (Object.keys(newInlineProps).length) {
           this._inlinePropsMapperId = (0, _core.startMapper)(updaterFunction, Object.values(newInlineProps));
         }
       }
     }
-
     _detachInlineProps() {
       if (this._inlinePropsMapperId) {
         (0, _core.stopMapper)(this._inlinePropsMapperId);
       }
     }
-
     componentDidUpdate(prevProps) {
       this._reattachNativeEvents(prevProps);
-
       this._attachAnimatedStyles();
-
       this._attachInlineProps();
     }
-
     _filterNonAnimatedProps(inputProps) {
       const props = {};
-
       for (const key in inputProps) {
         const value = inputProps[key];
-
         if (key === 'style') {
           const styleProp = inputProps.style;
           const styles = flattenArray(styleProp ?? []);
@@ -588,27 +465,23 @@ function createAnimatedComponent(Component, options) {
             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,
+                this.initialStyle = {
+                  ...style.initial.value,
                   ...(0, _animation.initialUpdaterRun)(style.initial.updater)
                 };
               }
-
               return this.initialStyle;
             } else if (hasInlineStyles(style)) {
               if (this._isFirstRender) {
                 return getInlinePropsUpdate(style);
               }
-
               const newStyle = {};
-
               for (const [key, styleValue] of Object.entries(style)) {
                 if (!(0, _reanimated.isSharedValue)(styleValue) && !(key === 'transform' && isInlineStyleTransform(styleValue))) {
                   newStyle[key] = styleValue;
                 }
               }
-
               return newStyle;
             } else {
               return style;
@@ -617,11 +490,9 @@ function createAnimatedComponent(Component, options) {
           props[key] = _reactNative.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);
             });
@@ -642,37 +513,28 @@ function createAnimatedComponent(Component, options) {
           props[key] = value;
         }
       }
-
       return props;
     }
-
     render() {
       const props = this._filterNonAnimatedProps(this.props);
-
       if ((0, _PlatformChecker.isJest)()) {
         props.animatedStyle = this.animatedStyle;
       }
-
       if (this._isFirstRender) {
         this._isFirstRender = false;
       }
-
       const platformProps = _reactNative.Platform.select({
         web: {},
         default: {
           collapsable: false
         }
       });
-
       return /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
         ref: this._setComponentRef
       }, platformProps));
     }
-
   }
-
   _defineProperty(AnimatedComponent, "displayName", void 0);
-
   AnimatedComponent.displayName = `AnimatedComponent(${Component.displayName || Component.name || 'Component'})`;
   return /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     return /*#__PURE__*/_react.default.createElement(AnimatedComponent, _extends({}, props, ref === null ? null : {