react-native-reanimated 2.13.0 → 2.14.1

package/lib/reanimated2/layoutReanimation/defaultAnimations/Zoom.js

@@ -1,6 +1,4 @@
-import { Dimensions } from 'react-native';
 import { ComplexAnimationBuilder } from '../animationBuilder';
-const { width, height } = Dimensions.get('window');
 export class ZoomIn extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
@@ -64,7 +62,7 @@ export class ZoomInLeft extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const callback = this.callbackV;
             const initialValues = this.initialValues;
-            return () => {
+            return (values) => {
                 'worklet';
                 return {
                     animations: {
@@ -73,7 +71,7 @@ export class ZoomInLeft extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: Object.assign({ transform: [{ translateX: -width }, { scale: 0 }] }, initialValues),
+                    initialValues: Object.assign({ transform: [{ translateX: -values.windowWidth }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -92,7 +90,7 @@ export class ZoomInRight extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const callback = this.callbackV;
             const initialValues = this.initialValues;
-            return () => {
+            return (values) => {
                 'worklet';
                 return {
                     animations: {
@@ -101,7 +99,7 @@ export class ZoomInRight extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: Object.assign({ transform: [{ translateX: width }, { scale: 0 }] }, initialValues),
+                    initialValues: Object.assign({ transform: [{ translateX: values.windowWidth }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -120,7 +118,7 @@ export class ZoomInUp extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const callback = this.callbackV;
             const initialValues = this.initialValues;
-            return () => {
+            return (values) => {
                 'worklet';
                 return {
                     animations: {
@@ -129,7 +127,7 @@ export class ZoomInUp extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: Object.assign({ transform: [{ translateY: -height }, { scale: 0 }] }, initialValues),
+                    initialValues: Object.assign({ transform: [{ translateY: -values.windowHeight }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -148,7 +146,7 @@ export class ZoomInDown extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const callback = this.callbackV;
             const initialValues = this.initialValues;
-            return () => {
+            return (values) => {
                 'worklet';
                 return {
                     animations: {
@@ -157,7 +155,7 @@ export class ZoomInDown extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: Object.assign({ transform: [{ translateY: height }, { scale: 0 }] }, initialValues),
+                    initialValues: Object.assign({ transform: [{ translateY: values.windowHeight }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -286,12 +284,14 @@ export class ZoomOutLeft extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const callback = this.callbackV;
             const initialValues = this.initialValues;
-            return () => {
+            return (values) => {
                 'worklet';
                 return {
                     animations: {
                         transform: [
-                            { translateX: delayFunction(delay, animation(-width, config)) },
+                            {
+                                translateX: delayFunction(delay, animation(-values.windowWidth, config)),
+                            },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },
@@ -314,12 +314,14 @@ export class ZoomOutRight extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const callback = this.callbackV;
             const initialValues = this.initialValues;
-            return () => {
+            return (values) => {
                 'worklet';
                 return {
                     animations: {
                         transform: [
-                            { translateX: delayFunction(delay, animation(width, config)) },
+                            {
+                                translateX: delayFunction(delay, animation(values.windowWidth, config)),
+                            },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },
@@ -342,12 +344,14 @@ export class ZoomOutUp extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const callback = this.callbackV;
             const initialValues = this.initialValues;
-            return () => {
+            return (values) => {
                 'worklet';
                 return {
                     animations: {
                         transform: [
-                            { translateY: delayFunction(delay, animation(-height, config)) },
+                            {
+                                translateY: delayFunction(delay, animation(-values.windowHeight, config)),
+                            },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },
@@ -370,12 +374,14 @@ export class ZoomOutDown extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const callback = this.callbackV;
             const initialValues = this.initialValues;
-            return () => {
+            return (values) => {
                 'worklet';
                 return {
                     animations: {
                         transform: [
-                            { translateY: delayFunction(delay, animation(height, config)) },
+                            {
+                                translateY: delayFunction(delay, animation(values.windowHeight, config)),
+                            },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },

package/lib/reanimated2/platform-specific/checkVersion.js

@@ -0,0 +1,24 @@
+import { version as jsVersion } from '../../../package.json';
+/**
+ * Checks that native and js versions of reanimated match.
+ */
+export function checkVersion() {
+    const cppVersion = global._REANIMATED_VERSION_CPP;
+    const ok = (() => {
+        if (jsVersion.match(/^\d+\.\d+\.\d+$/) &&
+            cppVersion.match(/^\d+\.\d+\.\d+$/)) {
+            // x.y.z, compare only major and minor, skip patch
+            const [jsMajor, jsMinor] = jsVersion.split('.');
+            const [cppMajor, cppMinor] = cppVersion.split('.');
+            return jsMajor === cppMajor && jsMinor === cppMinor;
+        }
+        else {
+            // alpha, beta or rc, compare everything
+            return jsVersion === cppVersion;
+        }
+    })();
+    if (!ok) {
+        console.error(`[Reanimated] Mismatch between JavaScript part and native part of Reanimated (${jsVersion} vs. ${cppVersion}). Did you forget to re-build the app after upgrading react-native-reanimated? If you use Expo Go, you must downgrade to ${cppVersion} which is bundled into Expo SDK.`);
+        // TODO: detect Expo managed workflow
+    }
+}

package/lib/reanimated2/platform-specific/checkVersion.web.js

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/**
+ * Checks that native and js versions of reanimated match.
+ * Stubbed for web, where this check is unnecessary.
+ */
+export function checkVersion() { }

package/lib/types/{reanimated2 → lib/reanimated2}/Colors.d.ts

@@ -21,11 +21,13 @@ export declare const blue: (c: number) => number;
 export declare const rgbaColor: (r: number, g: number, b: number, alpha?: number) => number | string;
 export declare function RGBtoHSV(rgb: RGB): HSV;
 export declare function RGBtoHSV(r: number, g: number, b: number): HSV;
-export declare const hsvToColor: (h: number, s: number, v: number) => number | string;
+export declare const hsvToColor: (h: number, s: number, v: number, a: number) => number | string;
 export declare function processColorInitially(color: unknown): number | null | undefined;
 export declare function isColor(value: unknown): boolean;
 export declare function processColor(color: unknown): number | null | undefined;
 export declare type ParsedColorArray = [number, number, number, number];
-export declare function convertToHSVA(color: unknown): ParsedColorArray;
-export declare function toRGBA(HSVA: ParsedColorArray): string;
+export declare function convertToRGBA(color: unknown): ParsedColorArray;
+export declare function rgbaArrayToRGBAColor(RGBA: ParsedColorArray): string;
+export declare function toLinearSpace(RGBA: ParsedColorArray, gamma?: number): ParsedColorArray;
+export declare function toGammaSpace(RGBA: ParsedColorArray, gamma?: number): ParsedColorArray;
 export {};

package/lib/types/{reanimated2 → lib/reanimated2}/interpolateColor.d.ts

@@ -1,4 +1,8 @@
 import { SharedValue } from './commonTypes';
+export declare type InterpolationOptions = {
+    gamma?: number;
+    useCorrectedHSVInterpolation?: boolean;
+};
 interface InterpolateRGB {
     r: number[];
     g: number[];
@@ -9,8 +13,9 @@ interface InterpolateHSV {
     h: number[];
     s: number[];
     v: number[];
+    a: number[];
 }
-export declare const interpolateColor: (value: number, inputRange: readonly number[], outputRange: readonly (string | number)[], colorSpace?: 'RGB' | 'HSV') => string | number;
+export declare const interpolateColor: (value: number, inputRange: readonly number[], outputRange: readonly (string | number)[], colorSpace?: 'RGB' | 'HSV', options?: InterpolationOptions) => string | number;
 export declare enum ColorSpace {
     RGB = 0,
     HSV = 1
@@ -20,7 +25,8 @@ export interface InterpolateConfig {
     outputRange: readonly (string | number)[];
     colorSpace: ColorSpace;
     cache: SharedValue<InterpolateRGB | InterpolateHSV | null>;
+    options: InterpolationOptions;
 }
-export declare function useInterpolateConfig(inputRange: readonly number[], outputRange: readonly (string | number)[], colorSpace?: ColorSpace): SharedValue<InterpolateConfig>;
+export declare function useInterpolateConfig(inputRange: readonly number[], outputRange: readonly (string | number)[], colorSpace?: ColorSpace, options?: InterpolationOptions): SharedValue<InterpolateConfig>;
 export declare const interpolateSharableColor: (value: number, interpolateConfig: SharedValue<InterpolateConfig>) => string | number;
 export {};

package/lib/types/{reanimated2 → lib/reanimated2}/layoutReanimation/animationBuilder/commonTypes.d.ts

@@ -17,6 +17,8 @@ export interface EntryAnimationsValues {
     targetHeight: number;
     targetGlobalOriginX: number;
     targetGlobalOriginY: number;
+    windowWidth: number;
+    windowHeight: number;
 }
 export interface ExitAnimationsValues {
     currentOriginX: number;
@@ -25,6 +27,8 @@ export interface ExitAnimationsValues {
     currentHeight: number;
     currentGlobalOriginX: number;
     currentGlobalOriginY: number;
+    windowWidth: number;
+    windowHeight: number;
 }
 export declare type EntryExitAnimationFunction = (targetValues: EntryAnimationsValues | ExitAnimationsValues) => LayoutAnimation;
 export declare type AnimationConfigFunction<T> = (targetValues: T) => LayoutAnimation;

package/lib/types/lib/reanimated2/platform-specific/checkVersion.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Checks that native and js versions of reanimated match.
+ */
+export declare function checkVersion(): void;

package/lib/types/lib/reanimated2/platform-specific/checkVersion.web.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Checks that native and js versions of reanimated match.
+ * Stubbed for web, where this check is unnecessary.
+ */
+export declare function checkVersion(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.13.0",
+  "version": "2.14.1",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "test": "yarn run format:js && yarn run lint:js && yarn run test:unit",
@@ -77,7 +77,7 @@
   "dependencies": {
     "@babel/plugin-transform-object-assign": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@types/invariant": "^2.2.35",
+    "convert-source-map": "^1.7.0",
     "invariant": "^2.2.4",
     "lodash.isequal": "^4.5.0",
     "setimmediate": "^1.0.5",
@@ -101,8 +101,9 @@
     "@types/babel__core": "^7.1.18",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.14.2",
+    "@types/invariant": "^2.2.35",
     "@types/jest": "^27.4.0",
-    "@types/react-native": "^0.69.5",
+    "@types/react": "^18.0.26",
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "babel-eslint": "^10.1.0",
@@ -123,10 +124,9 @@
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
     "react": "17.0.2",
-    "react-native": "0.70",
+    "react-native": "0.71.0-rc.5",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-codegen": "^0.0.7",
-    "react-native-gesture-handler": "^1.6.1",
+    "react-native-gesture-handler": "^2.4.2",
     "react-test-renderer": "17.0.2",
     "release-it": "^13.7.2",
     "typescript": "^4.1.3"

package/plugin.js

@@ -705,10 +705,14 @@ function isGestureObject(t, node) {
 }
 
 function processWorklets(t, path, state) {
+  const callee =
+    path.node.callee.type === 'SequenceExpression'
+      ? path.node.callee.expressions[path.node.callee.expressions.length - 1]
+      : path.node.callee;
+
   const name =
-    path.node.callee.type === 'MemberExpression'
-      ? path.node.callee.property.name
-      : path.node.callee.name;
+    callee.type === 'MemberExpression' ? callee.property.name : callee.name;
+
   if (
     objectHooks.has(name) &&
     path.get('arguments.0').type === 'ObjectExpression'

package/react-native-reanimated.d.ts

@@ -713,11 +713,19 @@ declare module 'react-native-reanimated' {
 
   export function processColor(color: number | string): number;
 
+  export type InterpolationOptions = {
+    gamma?: number;
+    useCorrectedHSVInterpolation?: boolean;
+  };
+
+  export function isColor(value: unknown): boolean;
+
   export function interpolateColor<T extends string | number>(
     value: number,
     inputRange: readonly number[],
     outputRange: readonly T[],
-    colorSpace?: 'RGB' | 'HSV'
+    colorSpace?: 'RGB' | 'HSV',
+    options?: InterpolationOptions
   ): T;
 
   export enum ColorSpace {
@@ -748,7 +756,8 @@ declare module 'react-native-reanimated' {
   export function useInterpolateConfig(
     inputRange: readonly number[],
     outputRange: readonly (string | number)[],
-    colorSpace?: ColorSpace
+    colorSpace?: ColorSpace,
+    options?: InterpolationOptions
   ): SharedValue<InterpolateConfig>;
 
   export function interpolateSharableColor(