react-native-reanimated 2.3.0-beta.3 → 2.4.0

package/lib/{reanimated1 → src/reanimated1}/core/Core.test.js

@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 jest.mock('../../ReanimatedEventEmitter');
 jest.mock('../../ReanimatedModule');
-jest.mock('../../reanimated2/NativeReanimated');
+jest.mock('../../reanimated2/NativeReanimated/NativeReanimated');
 
 describe('Core Animated components', () => {
   xit('fails if something other then a node or function that returns a node is passed to Animated.Code exec prop', () => {

package/lib/{reanimated2 → src/reanimated2}/Colors.js

@@ -8,9 +8,6 @@
 /* eslint no-bitwise: 0 */
 import { Platform } from 'react-native';
 import { makeRemote, makeShareable, isConfigured } from './core';
-import { interpolate } from './interpolation';
-// @ts-ignore JS file
-import { Extrapolate } from '../reanimated1/derived';
 // var INTEGER = '[-+]?\\d+';
 const NUMBER = '[-+]?\\d*\\.?\\d+';
 const PERCENTAGE = NUMBER + '%';
@@ -381,7 +378,7 @@ export const rgbaColor = (r, g, b, alpha = 1) => {
     }
     return c;
 };
-function RGBtoHSV(r, g, b) {
+export function RGBtoHSV(r, g, b) {
     'worklet';
     /* eslint-disable */
     if (arguments.length === 1) {
@@ -522,96 +519,3 @@ export function toRGBA(HSVA) {
     const { r, g, b } = HSVtoRGB(HSVA[0], HSVA[1], HSVA[2]);
     return `rgba(${r}, ${g}, ${b}, ${HSVA[3]})`;
 }
-const interpolateColorsHSV = (value, inputRange, colors) => {
-    'worklet';
-    const h = interpolate(value, inputRange, colors.h, Extrapolate.CLAMP);
-    const s = interpolate(value, inputRange, colors.s, Extrapolate.CLAMP);
-    const v = interpolate(value, inputRange, colors.v, Extrapolate.CLAMP);
-    return hsvToColor(h, s, v);
-};
-const interpolateColorsRGB = (value, inputRange, colors) => {
-    'worklet';
-    const r = interpolate(value, inputRange, colors.r, Extrapolate.CLAMP);
-    const g = interpolate(value, inputRange, colors.g, Extrapolate.CLAMP);
-    const b = interpolate(value, inputRange, colors.b, Extrapolate.CLAMP);
-    const a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP);
-    return rgbaColor(r, g, b, a);
-};
-const BUFFER_SIZE = 200;
-const hashOrderRGBA = new ArrayBuffer(BUFFER_SIZE);
-let curentHashIndexRGBA = 0;
-const interpolateCacheRGBA = {};
-const getInterpolateCacheRGBA = (colors) => {
-    'worklet';
-    const hash = colors.join('');
-    const cache = interpolateCacheRGBA[hash];
-    if (cache !== undefined) {
-        return cache;
-    }
-    const r = [];
-    const g = [];
-    const b = [];
-    const a = [];
-    for (let i = 0; i < colors.length; ++i) {
-        const color = colors[i];
-        const proocessedColor = processColor(color);
-        // explicit check in case if processedColor is 0
-        if (proocessedColor !== null && proocessedColor !== undefined) {
-            r.push(red(proocessedColor));
-            g.push(green(proocessedColor));
-            b.push(blue(proocessedColor));
-            a.push(opacity(proocessedColor));
-        }
-    }
-    const newCache = { r, g, b, a };
-    const overrideHash = hashOrderRGBA[curentHashIndexRGBA];
-    if (overrideHash) {
-        delete interpolateCacheRGBA[overrideHash];
-    }
-    interpolateCacheRGBA[hash] = newCache;
-    hashOrderRGBA[curentHashIndexRGBA] = hash;
-    curentHashIndexRGBA = (curentHashIndexRGBA + 1) % BUFFER_SIZE;
-    return newCache;
-};
-const hashOrderHSV = new ArrayBuffer(BUFFER_SIZE);
-let curentHashIndexHSV = 0;
-const interpolateCacheHSV = {};
-const getInterpolateCacheHSV = (colors) => {
-    'worklet';
-    const hash = colors.join('');
-    const cache = interpolateCacheHSV[hash];
-    if (cache !== undefined) {
-        return cache;
-    }
-    const h = [];
-    const s = [];
-    const v = [];
-    for (let i = 0; i < colors.length; ++i) {
-        const color = colors[i];
-        const proocessedColor = RGBtoHSV(processColor(color));
-        if (proocessedColor) {
-            h.push(proocessedColor.h);
-            s.push(proocessedColor.s);
-            v.push(proocessedColor.v);
-        }
-    }
-    const newCache = { h, s, v };
-    const overrideHash = hashOrderHSV[curentHashIndexHSV];
-    if (overrideHash) {
-        delete interpolateCacheHSV[overrideHash];
-    }
-    interpolateCacheHSV[hash] = newCache;
-    hashOrderHSV[curentHashIndexHSV] = hash;
-    curentHashIndexHSV = (curentHashIndexHSV + 1) % BUFFER_SIZE;
-    return newCache;
-};
-export const interpolateColor = (value, inputRange, outputRange, colorSpace = 'RGB') => {
-    'worklet';
-    if (colorSpace === 'HSV') {
-        return interpolateColorsHSV(value, inputRange, getInterpolateCacheHSV(outputRange));
-    }
-    else if (colorSpace === 'RGB') {
-        return interpolateColorsRGB(value, inputRange, getInterpolateCacheRGBA(outputRange));
-    }
-    throw new Error(`invalid color space provided: ${colorSpace}. Supported values are: ['RGB', 'HSV']`);
-};

package/lib/{reanimated2 → src/reanimated2}/Easing.js

@@ -149,6 +149,10 @@ function bezier(x1, y1, x2, y2) {
         },
     };
 }
+function bezierFn(x1, y1, x2, y2) {
+    'worklet';
+    return Bezier(x1, y1, x2, y2);
+}
 /**
  * Runs an easing function forwards.
  */
@@ -194,6 +198,7 @@ const EasingObject = {
     back,
     bounce,
     bezier,
+    bezierFn,
     in: in_,
     out,
     inOut,

package/lib/src/reanimated2/NativeMethods.js

@@ -0,0 +1,42 @@
+import { findNodeHandle } from 'react-native';
+import { shouldBeUseWeb } from './PlatformChecker';
+export function getTag(view) {
+    return findNodeHandle(view);
+}
+const isNativeIndefined = shouldBeUseWeb();
+export function measure(animatedRef) {
+    'worklet';
+    if (!_WORKLET || isNativeIndefined) {
+        console.warn('[reanimated.measure] method cannot be used for web or Chrome Debugger');
+        return {
+            x: NaN,
+            y: NaN,
+            width: NaN,
+            height: NaN,
+            pageX: NaN,
+            pageY: NaN,
+        };
+    }
+    const viewTag = animatedRef();
+    const result = _measure(viewTag);
+    if (result.x === -1234567) {
+        throw new Error(`The view with tag ${viewTag} could not be measured`);
+    }
+    return result;
+}
+export function scrollTo(animatedRef, x, y, animated) {
+    'worklet';
+    if (!_WORKLET || isNativeIndefined) {
+        return;
+    }
+    const viewTag = animatedRef();
+    _scrollTo(viewTag, x, y, animated);
+}
+export function setGestureState(handlerTag, newState) {
+    'worklet';
+    if (!_WORKLET || isNativeIndefined) {
+        console.warn('[Reanimated] You can not use setGestureState in non-worklet function.');
+        return;
+    }
+    _setGestureState(handlerTag, newState);
+}

package/lib/{reanimated2 → src/reanimated2}/NativeReanimated/NativeReanimated.js

@@ -31,4 +31,7 @@ export class NativeReanimated {
     getViewProp(viewTag, propName, callback) {
         return InnerNativeModule.getViewProp(viewTag, propName, callback);
     }
+    enableLayoutAnimations(flag) {
+        InnerNativeModule.enableLayoutAnimations(flag);
+    }
 }

package/lib/{reanimated2 → src/reanimated2}/NativeReanimated/index.js

@@ -1,9 +1,9 @@
 import reanimatedJS from '../js-reanimated';
-import { nativeShouldBeMock } from '../PlatformChecker';
+import { shouldBeUseWeb } from '../PlatformChecker';
 import { Platform } from 'react-native';
 import { NativeReanimated } from './NativeReanimated';
 let exportedModule;
-if (nativeShouldBeMock()) {
+if (shouldBeUseWeb()) {
     exportedModule = reanimatedJS;
 }
 else {

package/lib/{reanimated2 → src/reanimated2}/UpdateProps.js

@@ -19,7 +19,7 @@ export const colorProps = [
     'textShadowColor',
     'overlayColor',
 ];
-const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
+export const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
 let updatePropsByPlatform;
 if (shouldBeUseWeb()) {
     updatePropsByPlatform = (_, updates, maybeViewRef) => {

package/lib/{reanimated2 → src/reanimated2}/ViewDescriptorsSet.js

@@ -1,5 +1,7 @@
 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) {
@@ -18,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;
                     });
@@ -28,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 → src/reanimated2}/animation/styleAnimation.js

@@ -1,5 +1,7 @@
 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
 export function resolvePath(obj, path) {
@@ -79,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/src/reanimated2/component/FlatList.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { FlatList } from 'react-native';
+import WrappedComponents from './WrappedComponents';
+import createAnimatedComponent from '../../createAnimatedComponent';
+const AnimatedFlatList = createAnimatedComponent(FlatList);
+const createCellRenderer = (itemLayoutAnimation) => {
+    const cellRenderer = (props) => {
+        return (<WrappedComponents.View layout={itemLayoutAnimation} onLayout={props.onLayout}>
+        {props.children}
+      </WrappedComponents.View>);
+    };
+    return cellRenderer;
+};
+const ReanimatedFlatlist = (_a) => {
+    var { itemLayoutAnimation } = _a, restProps = __rest(_a, ["itemLayoutAnimation"]);
+    const cellRenderer = React.useMemo(() => createCellRenderer(itemLayoutAnimation), []);
+    return (<AnimatedFlatList {...restProps} CellRendererComponent={cellRenderer}/>);
+};
+export default ReanimatedFlatlist;

package/lib/src/reanimated2/component/WrappedComponents.js

@@ -0,0 +1,9 @@
+import { Image, ScrollView, Text, View } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+const WrappedComponents = {
+    View: createAnimatedComponent(View),
+    Text: createAnimatedComponent(Text),
+    Image: createAnimatedComponent(Image),
+    ScrollView: createAnimatedComponent(ScrollView),
+};
+export default WrappedComponents;

package/lib/src/reanimated2/component/index.js

@@ -0,0 +1,4 @@
+import ReanimatedFlatlist from './FlatList';
+import WrappedComponents from './WrappedComponents';
+const ReanimatedComponents = Object.assign(Object.assign({}, WrappedComponents), { FlatList: ReanimatedFlatlist });
+export default ReanimatedComponents;

package/lib/{reanimated2 → src/reanimated2}/core.js

@@ -1,7 +1,7 @@
 /* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
 import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
-import { nativeShouldBeMock, shouldBeUseWeb } from './PlatformChecker';
+import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
 global.__reanimatedWorkletInit = function (worklet) {
     worklet.__worklet = true;
 };
@@ -263,8 +263,8 @@ if (!NativeReanimatedModule.useOnlyV1) {
     NativeReanimatedModule.installCoreFunctions(NativeReanimatedModule.native
         ? workletValueSetter
         : workletValueSetterJS);
-    const capturableConsole = console;
-    isConfigured() &&
+    if (!isWeb() && isConfigured()) {
+        const capturableConsole = console;
         runOnUI(() => {
             'worklet';
             const console = {
@@ -275,5 +275,29 @@ if (!NativeReanimatedModule.useOnlyV1) {
                 info: runOnJS(capturableConsole.info),
             };
             _setGlobalConsole(console);
+            if (global.performance == null) {
+                global.performance = {
+                    now: global._chronoNow,
+                };
+            }
         })();
+    }
+}
+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 → src/reanimated2}/globals.d.ts

@@ -13,6 +13,7 @@ declare global {
     tag: number,
     flag: { value: boolean; _value: boolean }
   ) => void;
+  const _setGestureState: (handlerTag: number, newState: number) => void;
   const _updateProps: (
     tag: number,
     name: string,
@@ -25,16 +26,20 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _chronoNow: () => number;
   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;
+      _chronoNow: () => number;
+      performance: { now: () => number };
       LayoutAnimationRepository: {
         configs: Record<string, unknown>;
         registerConfig(tag: number, config: Record<string, unknown>): void;

package/lib/{reanimated2 → src/reanimated2}/hook/useAnimatedGestureHandler.js

@@ -1,4 +1,3 @@
-import { isWeb } from '../PlatformChecker';
 import { useEvent, useHandler } from './Hooks';
 export var EventType;
 (function (EventType) {
@@ -43,7 +42,7 @@ export function useAnimatedGestureHandler(handlers, dependencies) {
             handlers.onFinish(event, context, event.state === EventType.CANCELLED || event.state === EventType.FAILED);
         }
     };
-    if (isWeb()) {
+    if (useWeb) {
         return handler;
     }
     return useEvent(handler, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], doDependenciesDiffer);

package/lib/{reanimated2 → src/reanimated2}/hook/useAnimatedStyle.js

@@ -164,7 +164,11 @@ function styleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsA
     else {
         state.isAnimationCancelled = true;
         state.animations = [];
-        updateProps(viewDescriptors, newValues, maybeViewRef);
+        const diff = styleDiff(oldValues, newValues);
+        state.last = Object.assign({}, oldValues, newValues);
+        if (diff) {
+            updateProps(viewDescriptors, newValues, maybeViewRef);
+        }
     }
 }
 function jestStyleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsActive, animatedStyle, adapters = []) {
@@ -305,10 +309,10 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
     const maybeViewRef = NativeReanimatedModule.native ? undefined : viewsRef;
     useEffect(() => {
         let fun;
-        let upadterFn = updater;
+        let updaterFn = updater;
         let optimalization = updater.__optimalization;
         if (adapters) {
-            upadterFn = () => {
+            updaterFn = () => {
                 'worklet';
                 const newValues = updater();
                 adaptersArray.forEach((adapter) => {
@@ -317,27 +321,40 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
                 return newValues;
             };
         }
-        if (canApplyOptimalisation(upadterFn) && !shouldBeUseWeb()) {
-            if (hasColorProps(upadterFn())) {
-                upadterFn = () => {
+        if (canApplyOptimalisation(updaterFn) && !shouldBeUseWeb()) {
+            if (hasColorProps(updaterFn())) {
+                updaterFn = () => {
+                    'worklet';
+                    const newValues = updaterFn();
+                    const oldValues = remoteState.last;
+                    const diff = styleDiff(oldValues, newValues);
+                    remoteState.last = Object.assign({}, oldValues, newValues);
+                    parseColors(diff);
+                    return diff;
+                };
+            }
+            else {
+                updaterFn = () => {
                     'worklet';
-                    const style = upadterFn();
-                    parseColors(style);
-                    return style;
+                    const newValues = updaterFn();
+                    const oldValues = remoteState.last;
+                    const diff = styleDiff(oldValues, newValues);
+                    remoteState.last = Object.assign({}, oldValues, newValues);
+                    return diff;
                 };
             }
         }
         else if (!shouldBeUseWeb()) {
             optimalization = 0;
-            upadterFn = () => {
+            updaterFn = () => {
                 'worklet';
-                const style = upadterFn();
+                const style = updaterFn();
                 parseColors(style);
                 return style;
             };
         }
         if (typeof updater.__optimalization !== undefined) {
-            upadterFn.__optimalization = optimalization;
+            updaterFn.__optimalization = optimalization;
         }
         if (isJest()) {
             fun = () => {
@@ -348,10 +365,10 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
         else {
             fun = () => {
                 'worklet';
-                styleUpdater(sharableViewDescriptors, upadterFn, remoteState, maybeViewRef, animationsActive);
+                styleUpdater(sharableViewDescriptors, updaterFn, remoteState, maybeViewRef, animationsActive);
             };
         }
-        const mapperId = startMapper(fun, inputs, [], upadterFn, 
+        const mapperId = startMapper(fun, inputs, [], updaterFn, 
         // TODO fix this
         sharableViewDescriptors);
         return () => {