react-native-reanimated 2.3.1 → 2.4.0

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 () => {

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

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { processColor } from '../Colors';
 import { makeRemote } from '../core';
-import { isWeb } from '../PlatformChecker';
+import { isWeb, isJest } from '../PlatformChecker';
 import { colorProps } from '../UpdateProps';
 import WorkletEventHandler from '../WorkletEventHandler';
 export function useEvent(handler, eventNames = [], rebuild = false) {
@@ -36,7 +36,7 @@ export function useHandler(handlers, dependencies) {
     dependencies = buildDependencies(dependencies, handlers);
     const doDependenciesDiffer = !areDependenciesEqual(dependencies, savedDependencies);
     initRef.current.savedDependencies = dependencies;
-    const useWeb = isWeb();
+    const useWeb = isWeb() || isJest();
     return { context, doDependenciesDiffer, useWeb };
 }
 // builds one big hash from multiple worklets' hashes
@@ -95,7 +95,12 @@ export function parseColors(updates) {
     'worklet';
     for (const key in updates) {
         if (colorProps.indexOf(key) !== -1) {
-            updates[key] = processColor(updates[key]);
+            // value could be an animation in which case processColor will recognize it and will return undefined
+            // -> in such a case we don't want to override style of that key
+            const processedColor = processColor(updates[key]);
+            if (processedColor !== undefined) {
+                updates[key] = processedColor;
+            }
         }
     }
 }
@@ -132,24 +137,22 @@ export function isAnimated(prop) {
 export function styleDiff(oldStyle, newStyle) {
     'worklet';
     const diff = {};
-    Object.keys(oldStyle).forEach((key) => {
+    for (const key in oldStyle) {
         if (newStyle[key] === undefined) {
             diff[key] = null;
         }
-    });
-    Object.keys(newStyle).forEach((key) => {
+    }
+    for (const key in newStyle) {
         const value = newStyle[key];
         const oldValue = oldStyle[key];
         if (isAnimated(value)) {
             // do nothing
-            return;
+            continue;
         }
-        if (oldValue !== value &&
-            JSON.stringify(oldValue) !== JSON.stringify(value)) {
-            // I'd use deep equal here but that'd take additional work and this was easier
+        if (oldValue !== value) {
             diff[key] = value;
         }
-    });
+    }
     return diff;
 }
 export function getStyleWithoutAnimations(newStyle) {

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

@@ -2,9 +2,11 @@ export * from './core';
 export * from './hook';
 export * from './animation';
 export * from './interpolation';
+export * from './interpolateColor';
 export * from './Easing';
 export * from './NativeMethods';
 export * from './Colors';
 export * from './PropAdapters';
 export * from './layoutReanimation';
 export * from './utils';
+export * from './commonTypes';

package/lib/src/reanimated2/interpolateColor.js

@@ -0,0 +1,98 @@
+import { hsvToColor, RGBtoHSV, rgbaColor, processColor, red, green, blue, opacity, } from './Colors';
+import { makeMutable } from './core';
+import { interpolate } from './interpolation';
+// @ts-ignore JS file
+import { Extrapolate } from '../reanimated1/derived';
+import { useSharedValue } from './hook/useSharedValue';
+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 getInterpolateRGB = (colors) => {
+    'worklet';
+    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));
+        }
+    }
+    return { r, g, b, a };
+};
+const getInterpolateHSV = (colors) => {
+    'worklet';
+    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);
+        }
+    }
+    return { h, s, v };
+};
+export const interpolateColor = (value, inputRange, outputRange, colorSpace = 'RGB') => {
+    'worklet';
+    if (colorSpace === 'HSV') {
+        return interpolateColorsHSV(value, inputRange, getInterpolateHSV(outputRange));
+    }
+    else if (colorSpace === 'RGB') {
+        return interpolateColorsRGB(value, inputRange, getInterpolateRGB(outputRange));
+    }
+    throw new Error(`Invalid color space provided: ${colorSpace}. Supported values are: ['RGB', 'HSV']`);
+};
+export var ColorSpace;
+(function (ColorSpace) {
+    ColorSpace[ColorSpace["RGB"] = 0] = "RGB";
+    ColorSpace[ColorSpace["HSV"] = 1] = "HSV";
+})(ColorSpace || (ColorSpace = {}));
+export function useInterpolateConfig(inputRange, outputRange, colorSpace = ColorSpace.RGB) {
+    return useSharedValue({
+        inputRange,
+        outputRange,
+        colorSpace,
+        cache: makeMutable(null),
+    });
+}
+export const interpolateSharableColor = (value, interpolateConfig) => {
+    'worklet';
+    let colors = interpolateConfig.value.cache.value;
+    if (interpolateConfig.value.colorSpace === ColorSpace.RGB) {
+        if (!colors) {
+            colors = getInterpolateRGB(interpolateConfig.value.outputRange);
+            interpolateConfig.value.cache.value = colors;
+        }
+        return interpolateColorsRGB(value, interpolateConfig.value.inputRange, colors);
+    }
+    else if (interpolateConfig.value.colorSpace === ColorSpace.HSV) {
+        if (!colors) {
+            colors = getInterpolateHSV(interpolateConfig.value.outputRange);
+            interpolateConfig.value.cache.value = colors;
+        }
+        return interpolateColorsHSV(value, interpolateConfig.value.inputRange, colors);
+    }
+    throw new Error(`Invalid color space provided: ${interpolateConfig.value.colorSpace}. Supported values are: ['RGB', 'HSV']`);
+};

package/lib/{reanimated2 → src/reanimated2}/js-reanimated/JSReanimated.js

@@ -1,6 +1,6 @@
 import MapperRegistry from './MapperRegistry';
-import MutableValue from './MutableValue';
 import Mapper from './Mapper';
+import MutableValue from './MutableValue';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
 export default class JSReanimated extends NativeReanimated {
     constructor() {

package/lib/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.js

@@ -0,0 +1 @@
+export {};

package/mock.js

@@ -209,6 +209,7 @@ const Reanimated = {
   },
   diff: NOOP,
   diffClamp: NOOP,
+  interpolate: NOOP,
   interpolateNode: NOOP,
   interpolateColors: NOOP,
   max: (a, b) => Math.max(getValue(a), getValue(b)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -24,7 +24,8 @@
     "type:generate:tsc": "yarn tsc",
     "type:generate:remove.ts": "find ./lib -type f -name \"*.ts\" -and -not -name \"*.d.ts\" -delete",
     "type:generate:remove.tsx": "find ./lib -type f -name \"*.tsx\" -and -not -name \"*.d.ts\" -delete",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular ./src"
   },
   "main": "lib/Animated.js",
   "module": "lib/Animated",
@@ -114,9 +115,10 @@
     "husky": "^7.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^11.2.0",
+    "madge": "^5.0.1",
     "prettier": "^2.2.1",
     "react": "17.0.2",
-    "react-native": "0.67.0-rc.4",
+    "react-native": "0.67.2",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "17.0.2",

package/plugin.js

@@ -158,6 +158,7 @@ const gestureHandlerBuilderMethods = new Set([
   'onEnd',
   'onFinalize',
   'onUpdate',
+  'onChange',
   'onTouchesDown',
   'onTouchesMove',
   'onTouchesUp',

package/react-native-reanimated.d.ts

@@ -16,6 +16,7 @@ declare module 'react-native-reanimated' {
     TextProps,
     ImageProps,
     ScrollViewProps,
+    FlatListProps,
     StyleProp,
     RegisteredStyle,
     ViewStyle,
@@ -247,20 +248,31 @@ declare module 'react-native-reanimated' {
     export class View extends Component<AnimateProps<ViewProps>> {
       getNode(): ReactNativeView;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface View extends ReactNativeView {}
     export class Text extends Component<AnimateProps<TextProps>> {
       getNode(): ReactNativeText;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface Text extends ReactNativeText {}
     export class Image extends Component<AnimateProps<ImageProps>> {
       getNode(): ReactNativeImage;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface Image extends ReactNativeImage {}
     export class ScrollView extends Component<AnimateProps<ScrollViewProps>> {
       getNode(): ReactNativeScrollView;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface ScrollView extends ReactNativeScrollView {}
+
     export class Code extends Component<CodeProps> {}
-    export class FlatList extends Component<AnimateProps<FlatList>> {
+    export class FlatList<T> extends Component<AnimateProps<FlatListProps<T>>> {
       itemLayoutAnimation: ILayoutAnimationBuilder;
       getNode(): ReactNativeFlatList;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface FlatList<T> extends ReactNativeView<T> {}
 
     type Options<P> = {
       setNativeProps: (ref: any, props: P) => void;
@@ -610,6 +622,42 @@ declare module 'react-native-reanimated' {
     colorSpace?: 'RGB' | 'HSV'
   ): string | number;
 
+  export enum ColorSpace {
+    RGB = 0,
+    HSV = 1,
+  }
+
+  export interface InterpolateRGB {
+    r: number[];
+    g: number[];
+    b: number[];
+    a: number[];
+  }
+
+  export interface InterpolateHSV {
+    h: number[];
+    s: number[];
+    v: number[];
+  }
+
+  export interface InterpolateConfig {
+    inputRange: readonly number[];
+    outputRange: readonly (string | number)[];
+    colorSpace: ColorSpace;
+    cache: SharedValue<InterpolateRGB | InterpolateHSV | null>;
+  }
+
+  export function useInterpolateConfig(
+    inputRange: readonly number[],
+    outputRange: readonly (string | number)[],
+    colorSpace?: ColorSpace
+  ): SharedValue<InterpolateConfig>;
+
+  export function interpolateSharableColor(
+    value: number,
+    interpolateConfig: SharedValue<InterpolateConfig>
+  ): string | number;
+
   export function makeMutable<T>(initialValue: T): SharedValue<T>;
 
   type DependencyList = ReadonlyArray<any>;
@@ -981,6 +1029,12 @@ declare module 'react-native-reanimated' {
       y1: number,
       x2: number,
       y2: number
+    ): { factory: () => Animated.EasingFunction };
+    bezierFn(
+      x1: number,
+      y1: number,
+      x2: number,
+      y2: number
     ): Animated.EasingFunction;
     in(easing: Animated.EasingFunction): Animated.EasingFunction;
     out(easing: Animated.EasingFunction): Animated.EasingFunction;