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

package/lib/index.js

@@ -1,4 +1,4 @@
-import { Image, ScrollView, Text, View } from 'react-native';
+import { Image, ScrollView, Text, View, LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
@@ -23,3 +23,11 @@ const Animated = {
 export * from './reanimated2';
 export * from './reanimated1';
 export default Animated;
+
+// I think we can ignore this message as long as Gesture Handler doesn't
+// try to load the Reanimated module. I figured it should be here instead of
+// RNGH because this prevents the message from being displayed for all
+// versions of RNGH.
+LogBox.ignoreLogs([
+  'RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks',
+]);

package/lib/reanimated2/NativeMethods.js

@@ -1,20 +1,8 @@
-/* global _WORKLET _measure _scrollTo */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { findNodeHandle } from 'react-native';
 import { isChromeDebugger } from './PlatformChecker';
 export function getTag(view) {
     return findNodeHandle(view);
 }
-/**
- * fields that can be accessed:
- *  x
- *  y
- *  width
- *  height
- *  pageX
- *  pageY
- */
 export function measure(animatedRef) {
     'worklet';
     if (!_WORKLET && !isChromeDebugger()) {
@@ -35,3 +23,10 @@ export function scrollTo(animatedRef, x, y, animated) {
     const viewTag = animatedRef();
     _scrollTo(viewTag, x, y, animated);
 }
+export function setGestureState(handlerTag, newState) {
+    'worklet';
+    if (!_WORKLET && !isChromeDebugger()) {
+        console.warn('[Reanimated] You can not use setGestureState in non-worklet function.');
+    }
+    _setGestureState(handlerTag, newState);
+}

package/lib/reanimated2/NativeReanimated/NativeReanimated.js

@@ -0,0 +1,37 @@
+const InnerNativeModule = global.__reanimatedModuleProxy;
+export class NativeReanimated {
+    constructor(native = true) {
+        this.native = native;
+        this.useOnlyV1 = InnerNativeModule === null;
+    }
+    installCoreFunctions(valueSetter) {
+        return InnerNativeModule.installCoreFunctions(valueSetter);
+    }
+    makeShareable(value) {
+        return InnerNativeModule.makeShareable(value);
+    }
+    makeMutable(value) {
+        return InnerNativeModule.makeMutable(value);
+    }
+    makeRemote(object = {}) {
+        return InnerNativeModule.makeRemote(object);
+    }
+    startMapper(mapper, inputs = [], outputs = [], updater, viewDescriptors) {
+        return InnerNativeModule.startMapper(mapper, inputs, outputs, updater, viewDescriptors);
+    }
+    stopMapper(mapperId) {
+        return InnerNativeModule.stopMapper(mapperId);
+    }
+    registerEventHandler(eventHash, eventHandler) {
+        return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+    }
+    unregisterEventHandler(id) {
+        return InnerNativeModule.unregisterEventHandler(id);
+    }
+    getViewProp(viewTag, propName, callback) {
+        return InnerNativeModule.getViewProp(viewTag, propName, callback);
+    }
+    enableLayoutAnimations(flag) {
+        InnerNativeModule.enableLayoutAnimations(flag);
+    }
+}

package/lib/reanimated2/NativeReanimated/index.js

@@ -0,0 +1,15 @@
+import reanimatedJS from '../js-reanimated';
+import { nativeShouldBeMock } from '../PlatformChecker';
+import { Platform } from 'react-native';
+import { NativeReanimated } from './NativeReanimated';
+let exportedModule;
+if (nativeShouldBeMock()) {
+    exportedModule = reanimatedJS;
+}
+else {
+    exportedModule = new NativeReanimated();
+    if (exportedModule.useOnlyV1 && Platform.OS === 'android') {
+        console.warn(`If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`);
+    }
+}
+export default exportedModule;

package/lib/reanimated2/PropAdapters.js

@@ -1,4 +1,3 @@
-// @ts-ignore JS file
 import { addWhitelistedNativeProps } from '../ConfigHelper';
 export function createAnimatedPropAdapter(adapter, nativeProps) {
     const nativePropsToAdd = {};

package/lib/reanimated2/UpdateProps.js

@@ -1,6 +1,3 @@
-/* global _updateProps */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { processColor } from './Colors';
 import { makeShareable, isConfigured } from './core';
 import { _updatePropsJS } from './js-reanimated';
@@ -22,14 +19,16 @@ export const colorProps = [
     'textShadowColor',
     'overlayColor',
 ];
-const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
+export const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
 let updatePropsByPlatform;
 if (shouldBeUseWeb()) {
     updatePropsByPlatform = (_, updates, maybeViewRef) => {
         'worklet';
-        maybeViewRef.items.forEach((item, _) => {
-            _updatePropsJS(updates, item);
-        });
+        if (maybeViewRef) {
+            maybeViewRef.items.forEach((item, _) => {
+                _updatePropsJS(updates, item);
+            });
+        }
     };
 }
 else {

package/lib/reanimated2/ViewDescriptorsSet.js

@@ -1,7 +1,7 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { useRef } from 'react';
 import { makeMutable } from './core';
+import { Platform } from 'react-native';
+const scheduleUpdates = Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
 export function makeViewDescriptorsSet() {
     const ref = useRef(null);
     if (ref.current === null) {
@@ -20,7 +20,7 @@ export function makeViewDescriptorsSet() {
                 data.items.push(item);
                 if (!data.waitForInsertSync) {
                     data.waitForInsertSync = true;
-                    setImmediate(() => {
+                    scheduleUpdates(() => {
                         data.sharableViewDescriptors.value = data.items;
                         data.waitForInsertSync = false;
                     });
@@ -30,7 +30,7 @@ export function makeViewDescriptorsSet() {
                 data.batchToRemove.add(viewTag);
                 if (!data.waitForRemoveSync) {
                     data.waitForRemoveSync = true;
-                    setImmediate(() => {
+                    scheduleUpdates(() => {
                         const items = [];
                         for (const item of data.items) {
                             if (data.batchToRemove.has(item.tag)) {

package/lib/reanimated2/WorkletEventHandler.js

@@ -1,15 +1,18 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import NativeModule from './NativeReanimated';
-const jsListener = (eventName, handler) => (evt) => {
-    handler(Object.assign(Object.assign({}, evt.nativeEvent), { eventName }));
-};
+import NativeReanimatedModule from './NativeReanimated';
+function jsListener(eventName, handler) {
+    return (evt) => {
+        handler(Object.assign(Object.assign({}, evt.nativeEvent), { eventName }));
+    };
+}
 export default class WorkletEventHandler {
     constructor(worklet, eventNames = []) {
         this.worklet = worklet;
         this.eventNames = eventNames;
         this.reattachNeeded = false;
-        if (!NativeModule.native) {
+        this.listeners = {};
+        this.viewTag = undefined;
+        this.registrations = [];
+        if (!NativeReanimatedModule.native) {
             this.listeners = eventNames.reduce((acc, eventName) => {
                 acc[eventName] = jsListener(eventName, worklet);
                 return acc;
@@ -20,16 +23,15 @@ export default class WorkletEventHandler {
         this.worklet = newWorklet;
         this.reattachNeeded = true;
     }
-    registerForEvents(viewTag, fallbackEventName = undefined) {
+    registerForEvents(viewTag, fallbackEventName) {
         this.viewTag = viewTag;
-        this.registrations = this.eventNames.map((eventName) => NativeModule.registerEventHandler(viewTag + eventName, this.worklet));
+        this.registrations = this.eventNames.map((eventName) => NativeReanimatedModule.registerEventHandler(viewTag + eventName, this.worklet));
         if (this.registrations.length === 0 && fallbackEventName) {
-            this.registrations.push(NativeModule.registerEventHandler(viewTag + fallbackEventName, this.worklet));
+            this.registrations.push(NativeReanimatedModule.registerEventHandler(viewTag + fallbackEventName, this.worklet));
         }
     }
     unregisterFromEvents() {
-        this.registrations &&
-            this.registrations.forEach((id) => NativeModule.unregisterEventHandler(id));
-        this.registrations = undefined;
+        this.registrations.forEach((id) => NativeReanimatedModule.unregisterEventHandler(id));
+        this.registrations = [];
     }
 }

package/lib/reanimated2/animation/delay.js

@@ -17,7 +17,8 @@ export function withDelay(delayMs, _nextAnimation) {
                 return finished;
             }
             else if (previousAnimation) {
-                const finished = previousAnimation.onFrame(previousAnimation, now);
+                const finished = previousAnimation.finished ||
+                    previousAnimation.onFrame(previousAnimation, now);
                 animation.current = previousAnimation.current;
                 if (finished) {
                     animation.previousAnimation = null;
@@ -29,7 +30,12 @@ export function withDelay(delayMs, _nextAnimation) {
             animation.startTime = now;
             animation.started = false;
             animation.current = value;
-            animation.previousAnimation = previousAnimation;
+            if (previousAnimation === animation) {
+                animation.previousAnimation = previousAnimation.previousAnimation;
+            }
+            else {
+                animation.previousAnimation = previousAnimation;
+            }
         }
         const callback = (finished) => {
             if (nextAnimation.callback) {

package/lib/reanimated2/animation/spring.js

@@ -73,6 +73,8 @@ export function withSpring(toValue, userConfig, callback) {
                     animation.velocity = 0;
                     animation.current = toValue;
                 }
+                // clear lastTimestamp to avoid using stale value by the next spring animation that starts after this one
+                animation.lastTimestamp = 0;
                 return true;
             }
             return false;

package/lib/reanimated2/animation/styleAnimation.js

@@ -1,8 +1,10 @@
 import { defineAnimation } from './util';
 import { withTiming } from './timing';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 // resolves path to value for nested objects
 // if path cannot be resolved returns undefined
-function resolvePath(obj, path) {
+export function resolvePath(obj, path) {
     'worklet';
     const keys = Array.isArray(path) ? path : [path];
     return keys.reduce((acc, current) => {
@@ -15,8 +17,7 @@ function resolvePath(obj, path) {
         return undefined;
     }, obj);
 }
-// set value at given path
-function setPath(obj, path, value) {
+export function setPath(obj, path, value) {
     'worklet';
     const keys = Array.isArray(path) ? path : [path];
     let currObj = obj;
@@ -80,6 +81,9 @@ export function withStyleAnimation(styleAnimations) {
                     else {
                         stillGoing = true;
                     }
+                    if (ColorProperties.includes(currentEntry.path[0])) {
+                        currentStyleAnimation.current = processColor(currentStyleAnimation.current);
+                    }
                     setPath(animation.current, currentEntry.path, currentStyleAnimation.current);
                 }
             }

package/lib/reanimated2/animation/util.js

@@ -1,6 +1,6 @@
 /* global _WORKLET */
 import { convertToHSVA, isColor, toRGBA } from '../Colors';
-import NativeReanimated from '../NativeReanimated';
+import NativeReanimatedModule from '../NativeReanimated';
 let IN_STYLE_UPDATER = false;
 export function initialUpdaterRun(updater) {
     IN_STYLE_UPDATER = true;
@@ -107,12 +107,35 @@ function decorateAnimation(animation) {
         animation.current = toRGBA(res);
         return finished;
     };
+    const arrayOnStart = (animation, value, timestamp, previousAnimation) => {
+        value.forEach((v, i) => {
+            animation[i] = Object.assign({}, animationCopy);
+            animation[i].current = v;
+            animation[i].toValue = animation.toValue[i];
+            animation[i].onStart(animation[i], v, timestamp, previousAnimation ? previousAnimation[i] : undefined);
+        });
+        animation.current = value;
+    };
+    const arrayOnFrame = (animation, timestamp) => {
+        let finished = true;
+        animation.current.forEach((v, i) => {
+            // @ts-ignore: disable-next-line
+            finished &= animation[i].onFrame(animation[i], timestamp);
+            animation.current[i] = animation[i].current;
+        });
+        return finished;
+    };
     animation.onStart = (animation, value, timestamp, previousAnimation) => {
         if (isColor(value)) {
             colorOnStart(animation, value, timestamp, previousAnimation);
             animation.onFrame = colorOnFrame;
             return;
         }
+        else if (Array.isArray(value)) {
+            arrayOnStart(animation, value, timestamp, previousAnimation);
+            animation.onFrame = arrayOnFrame;
+            return;
+        }
         else if (typeof value === 'string') {
             prefNumberSuffOnStart(animation, value, timestamp, previousAnimation);
             animation.onFrame = prefNumberSuffOnFrame;
@@ -132,7 +155,7 @@ export function defineAnimation(starting, factory) {
         decorateAnimation(animation);
         return animation;
     };
-    if (_WORKLET || !NativeReanimated.native) {
+    if (_WORKLET || !NativeReanimatedModule.native) {
         return create();
     }
     // @ts-ignore: eslint-disable-line

package/lib/reanimated2/core.js

@@ -1,5 +1,5 @@
 /* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
-import NativeReanimated from './NativeReanimated';
+import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
 import { nativeShouldBeMock, shouldBeUseWeb } from './PlatformChecker';
 global.__reanimatedWorkletInit = function (worklet) {
@@ -24,11 +24,11 @@ export const checkPluginState = (throwError = true) => {
     return true;
 };
 export const isConfigured = (throwError = false) => {
-    return checkPluginState(throwError) && !NativeReanimated.useOnlyV1;
+    return checkPluginState(throwError) && !NativeReanimatedModule.useOnlyV1;
 };
 export const isConfiguredCheck = () => {
     if (!isConfigured(true)) {
-        throw new Error('If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation');
+        throw new Error('If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation');
     }
 };
 function _toArrayReanimated(object) {
@@ -65,11 +65,11 @@ global.__reanimatedWorkletInit = function (worklet) {
     }
 };
 function pushFrame(frame) {
-    NativeReanimated.pushFrame(frame);
+    NativeReanimatedModule.pushFrame(frame);
 }
 export function requestFrame(frame) {
     'worklet';
-    if (NativeReanimated.native) {
+    if (NativeReanimatedModule.native) {
         requestAnimationFrame(frame);
     }
     else {
@@ -85,11 +85,11 @@ export function runOnUI(worklet) {
 }
 export function makeShareable(value) {
     isConfiguredCheck();
-    return NativeReanimated.makeShareable(value);
+    return NativeReanimatedModule.makeShareable(value);
 }
 export function getViewProp(viewTag, propName) {
     return new Promise((resolve, reject) => {
-        return NativeReanimated.getViewProp(viewTag, propName, (result) => {
+        return NativeReanimatedModule.getViewProp(viewTag, propName, (result) => {
             if (typeof result === 'string' && result.substr(0, 6) === 'error:') {
                 reject(result);
             }
@@ -102,7 +102,7 @@ export function getViewProp(viewTag, propName) {
 let _getTimestamp;
 if (nativeShouldBeMock()) {
     _getTimestamp = () => {
-        return NativeReanimated.getTimestamp();
+        return NativeReanimatedModule.getTimestamp();
     };
 }
 else {
@@ -120,7 +120,7 @@ else {
 export function getTimestamp() {
     'worklet';
     if (Platform.OS === 'web') {
-        return NativeReanimated.getTimestamp();
+        return NativeReanimatedModule.getTimestamp();
     }
     return _getTimestamp();
 }
@@ -135,7 +135,9 @@ function workletValueSetter(value) {
         (value !== null &&
             typeof value === 'object' &&
             value.onFrame !== undefined)) {
-        const animation = typeof value === 'function' ? value() : value;
+        const animation = typeof value === 'function'
+            ? value()
+            : value;
         // prevent setting again to the same value
         // and triggering the mappers that treat this value as an input
         // this happens when the animation's target value(stored in animation.current until animation.onStart is called) is set to the same value as a current one(this._value)
@@ -196,7 +198,9 @@ function workletValueSetterJS(value) {
             typeof value === 'object' &&
             value.onFrame)) {
         // animated set
-        const animation = typeof value === 'function' ? value() : value;
+        const animation = typeof value === 'function'
+            ? value()
+            : value;
         let initializeAnimation = (timestamp) => {
             animation.onStart(animation, this.value, timestamp, previousAnimation);
         };
@@ -228,20 +232,20 @@ function workletValueSetterJS(value) {
 }
 export function makeMutable(value) {
     isConfiguredCheck();
-    return NativeReanimated.makeMutable(value);
+    return NativeReanimatedModule.makeMutable(value);
 }
 export function makeRemote(object = {}) {
     isConfiguredCheck();
-    return NativeReanimated.makeRemote(object);
+    return NativeReanimatedModule.makeRemote(object);
 }
 export function startMapper(mapper, inputs = [], outputs = [], updater = () => {
     // noop
 }, viewDescriptors = []) {
     isConfiguredCheck();
-    return NativeReanimated.startMapper(mapper, inputs, outputs, updater, viewDescriptors);
+    return NativeReanimatedModule.startMapper(mapper, inputs, outputs, updater, viewDescriptors);
 }
 export function stopMapper(mapperId) {
-    NativeReanimated.stopMapper(mapperId);
+    NativeReanimatedModule.stopMapper(mapperId);
 }
 export function runOnJS(fun) {
     'worklet';
@@ -255,8 +259,10 @@ export function runOnJS(fun) {
         return fun.__callAsync;
     }
 }
-if (!NativeReanimated.useOnlyV1) {
-    NativeReanimated.installCoreFunctions(NativeReanimated.native ? workletValueSetter : workletValueSetterJS);
+if (!NativeReanimatedModule.useOnlyV1) {
+    NativeReanimatedModule.installCoreFunctions(NativeReanimatedModule.native
+        ? workletValueSetter
+        : workletValueSetterJS);
     const capturableConsole = console;
     isConfigured() &&
         runOnUI(() => {
@@ -271,3 +277,21 @@ if (!NativeReanimated.useOnlyV1) {
             _setGlobalConsole(console);
         })();
 }
+let featuresConfig = {
+    enableLayoutAnimations: false,
+    setByUser: false,
+};
+export function enableLayoutAnimations(flag, isCallByUser = true) {
+    if (isCallByUser) {
+        featuresConfig = {
+            enableLayoutAnimations: flag,
+            setByUser: true,
+        };
+        NativeReanimatedModule.enableLayoutAnimations(flag);
+    }
+    else if (!featuresConfig.setByUser &&
+        featuresConfig.enableLayoutAnimations !== flag) {
+        featuresConfig.enableLayoutAnimations = flag;
+        NativeReanimatedModule.enableLayoutAnimations(flag);
+    }
+}

package/lib/reanimated2/globals.d.ts

@@ -1,5 +1,7 @@
-import { WorkletFunction } from './commonTypes';
+import { AnimatedStyle, StyleProps, WorkletFunction } from './commonTypes';
 import { ReanimatedConsole } from './core';
+import { MeasuredDimensions } from './NativeMethods';
+import { NativeReanimated } from './NativeReanimated/NativeReanimated';
 declare global {
   const _WORKLET: boolean;
   const _frameTimestamp: number;
@@ -11,12 +13,30 @@ declare global {
     tag: number,
     flag: { value: boolean; _value: boolean }
   ) => void;
+  const _setGestureState: (handlerTag: number, newState: number) => void;
+  const _updateProps: (
+    tag: number,
+    name: string,
+    updates: StyleProps | AnimatedStyle
+  ) => void;
+  const _measure: (viewTag: number) => MeasuredDimensions;
+  const _scrollTo: (
+    viewTag: number,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => void;
   namespace NodeJS {
     interface Global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
       _setGlobalConsole: (console?: ReanimatedConsole) => void;
       _log: (s: string) => void;
+      _setGestureState: () => void;
       _WORKLET: boolean;
+      __reanimatedModuleProxy: NativeReanimated;
+      _frameTimestamp: number | null;
+      _measure: () => MeasuredDimensions;
+      _scrollTo: () => void;
       LayoutAnimationRepository: {
         configs: Record<string, unknown>;
         registerConfig(tag: number, config: Record<string, unknown>): void;

package/lib/reanimated2/hook/useAnimatedRef.js

@@ -5,7 +5,7 @@ export function useAnimatedRef() {
     const tag = useSharedValue(-1);
     const ref = useRef();
     if (!ref.current) {
-        const fun = (function (component) {
+        const fun = ((component) => {
             'worklet';
             // enters when ref is set by attaching to a component
             if (component) {

package/lib/reanimated2/hook/useAnimatedStyle.js

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import { startMapper, stopMapper, makeRemote, requestFrame, getTimestamp, makeMutable, } from '../core';
 import updateProps, { updatePropsJestWrapper } from '../UpdateProps';
 import { initialUpdaterRun } from '../animation';
-import NativeReanimated from '../NativeReanimated';
+import NativeReanimatedModule from '../NativeReanimated';
 import { useSharedValue } from './useSharedValue';
 import { buildWorkletsHash, canApplyOptimalisation, getStyleWithoutAnimations, hasColorProps, isAnimated, parseColors, styleDiff, validateAnimatedStyles, } from './utils';
 import { makeViewDescriptorsSet, makeViewsRefSet, } from '../ViewDescriptorsSet';
@@ -290,6 +290,7 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
         initRef.current = {
             initial: {
                 value: initialStyle,
+                updater: updater,
             },
             remoteState: makeRemote({ last: initialStyle }),
             sharableViewDescriptors: makeMutable([]),
@@ -301,8 +302,7 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
     dependencies.push((_b = initRef.current) === null || _b === void 0 ? void 0 : _b.sharableViewDescriptors.value);
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const { initial, remoteState, sharableViewDescriptors } = initRef.current;
-    const maybeViewRef = NativeReanimated.native ? undefined : viewsRef;
-    initial.value = initialUpdaterRun(updater);
+    const maybeViewRef = NativeReanimatedModule.native ? undefined : viewsRef;
     useEffect(() => {
         let fun;
         let upadterFn = updater;

package/lib/reanimated2/index.js

@@ -7,3 +7,4 @@ export * from './NativeMethods';
 export * from './Colors';
 export * from './PropAdapters';
 export * from './layoutReanimation';
+export * from './utils';