react-native-reanimated 2.13.0 → 2.14.1

package/scripts/reanimated_utils.rb

@@ -1,6 +1,6 @@
 def try_to_parse_react_native_package_json(node_modules_dir)
   react_native_package_json_path = File.join(node_modules_dir, 'react-native/package.json')
-  if !File.exists?(react_native_package_json_path)
+  if !File.exist?(react_native_package_json_path)
     return nil
   end
   return JSON.parse(File.read(react_native_package_json_path))
@@ -17,7 +17,7 @@ def find_config()
     :react_native_common_dir => nil,
   }
 
-  react_native_node_modules_dir = File.join(File.dirname(`cd #{Pod::Config.instance.installation_root.to_s} && node --print "require.resolve('react-native/package.json')"`), '..')
+  react_native_node_modules_dir = File.join(File.dirname(`cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('react-native/package.json')"`), '..')
   react_native_json = try_to_parse_react_native_package_json(react_native_node_modules_dir)
 
   if react_native_json == nil
@@ -34,6 +34,9 @@ def find_config()
   result[:is_tvos_target] = react_native_json['name'] == 'react-native-tvos'
   result[:react_native_version] = react_native_json['version']
   result[:react_native_minor_version] = react_native_json['version'].split('.')[1].to_i
+  if result[:react_native_minor_version] == 0 # nightly
+    result[:react_native_minor_version] = 1000
+  end
   result[:react_native_node_modules_dir] = File.expand_path(react_native_node_modules_dir)
   result[:reanimated_node_modules_dir] = File.expand_path(File.join(__dir__, '..', '..'))
 
@@ -52,6 +55,7 @@ def assert_no_multiple_instances(react_native_info)
 
   lib_instances_in_react_native_node_modules = %x[find #{react_native_info[:react_native_node_modules_dir]} -name "package.json" | grep "/react-native-reanimated/package.json"]
   lib_instances_in_react_native_node_modules_array = lib_instances_in_react_native_node_modules.split("\n")
+  lib_instances_in_reanimated_node_modules_array = Array.new
   reanimated_instances = lib_instances_in_react_native_node_modules_array.length()
   if react_native_info[:react_native_node_modules_dir] != react_native_info[:reanimated_node_modules_dir]
     lib_instances_in_reanimated_node_modules = %x[find #{react_native_info[:reanimated_node_modules_dir]} -name "package.json" | grep "/react-native-reanimated/package.json"]
@@ -64,7 +68,7 @@ def assert_no_multiple_instances(react_native_info)
       location['/package.json'] = ''
       parsed_location += "- " + location + "\n"
     end
-    raise "[react-native-reanimated] Multiple versions of Reanimated were detected. Only one instance of react-native-reanimated can be installed in a project. You need to resolve the conflict manually. Check out the documentation: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/troubleshooting#multiple-versions-of-reanimated-were-detected \n\nConflict between: \n" + parsed_location
+    raise "[react-native-reanimated] Multiple versions of Reanimated were detected. Only one instance of react-native-reanimated can be installed in a project. You need to resolve the conflict manually. Check out the documentation: https://docs.swmansion.com/react-native-reanimated/docs/next/fundamentals/troubleshooting#multiple-versions-of-reanimated-were-detected \n\nConflict between: \n" + parsed_location
   end
 end
 

package/src/createAnimatedComponent.tsx

@@ -241,7 +241,14 @@ export default function createAnimatedComponent(
 
     _attachNativeEvents() {
       const node = this._getEventViewRef();
-      const viewTag = findNodeHandle(options?.setNativeProps ? this : node);
+      let viewTag = findNodeHandle(options?.setNativeProps ? this : node);
+      const componentName = Component.displayName || Component.name;
+
+      if (componentName?.endsWith('FlashList') && this._component) {
+        // @ts-ignore it's FlashList specific: https://github.com/Shopify/flash-list/blob/218f314e63806b4fe926741ef73f8b9cd6ebc7eb/src/FlashList.tsx#L824
+        viewTag = findNodeHandle(this._component.recyclerlistview_unsafe);
+      }
+
       for (const key in this.props) {
         const prop = this.props[key];
         if (prop instanceof AnimatedEvent) {

package/src/reanimated2/Colors.ts

@@ -573,11 +573,12 @@ function HSVtoRGB(h: any, s?: any, v?: any) {
 export const hsvToColor = (
   h: number,
   s: number,
-  v: number
+  v: number,
+  a: number
 ): number | string => {
   'worklet';
   const { r, g, b } = HSVtoRGB(h, s, v);
-  return rgbaColor(r, g, b);
+  return rgbaColor(r, g, b, a);
 };
 
 export function processColorInitially(
@@ -634,19 +635,45 @@ export function processColor(color: unknown): number | null | undefined {
 
 export type ParsedColorArray = [number, number, number, number];
 
-export function convertToHSVA(color: unknown): ParsedColorArray {
+export function convertToRGBA(color: unknown): ParsedColorArray {
   'worklet';
   const processedColor = processColorInitially(color)!; // argb;
   const a = (processedColor >>> 24) / 255;
-  const r = (processedColor << 8) >>> 24;
-  const g = (processedColor << 16) >>> 24;
-  const b = (processedColor << 24) >>> 24;
-  const { h, s, v } = RGBtoHSV(r, g, b);
-  return [h, s, v, a];
+  const r = ((processedColor << 8) >>> 24) / 255;
+  const g = ((processedColor << 16) >>> 24) / 255;
+  const b = ((processedColor << 24) >>> 24) / 255;
+  return [r, g, b, a];
 }
 
-export function toRGBA(HSVA: ParsedColorArray): string {
+export function rgbaArrayToRGBAColor(RGBA: ParsedColorArray): string {
   'worklet';
-  const { r, g, b } = HSVtoRGB(HSVA[0], HSVA[1], HSVA[2]);
-  return `rgba(${r}, ${g}, ${b}, ${HSVA[3]})`;
+  return `rgba(${Math.round(RGBA[0] * 255)}, ${Math.round(
+    RGBA[1] * 255
+  )}, ${Math.round(RGBA[2] * 255)}, ${RGBA[3]})`;
+}
+
+export function toLinearSpace(
+  RGBA: ParsedColorArray,
+  gamma = 2.2
+): ParsedColorArray {
+  'worklet';
+  const res = [];
+  for (let i = 0; i < 3; ++i) {
+    res.push(Math.pow(RGBA[i], gamma));
+  }
+  res.push(RGBA[3]);
+  return res as ParsedColorArray;
+}
+
+export function toGammaSpace(
+  RGBA: ParsedColorArray,
+  gamma = 2.2
+): ParsedColorArray {
+  'worklet';
+  const res = [];
+  for (let i = 0; i < 3; ++i) {
+    res.push(Math.pow(RGBA[i], 1 / gamma));
+  }
+  res.push(RGBA[3]);
+  return res as ParsedColorArray;
 }

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -6,6 +6,7 @@ import {
   AnimatedKeyboardInfo,
 } from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
+import { checkVersion } from '../platform-specific/checkVersion';
 
 export class NativeReanimated {
   native: boolean;
@@ -18,6 +19,9 @@ export class NativeReanimated {
     }
     this.InnerNativeModule = global.__reanimatedModuleProxy;
     this.native = native;
+    if (native) {
+      checkVersion();
+    }
   }
 
   installCoreFunctions(valueSetter: <T>(value: T) => void): void {

package/src/reanimated2/animation/util.ts

@@ -7,7 +7,14 @@ import {
   StyleLayoutAnimation,
 } from './commonTypes';
 /* global _WORKLET */
-import { ParsedColorArray, convertToHSVA, isColor, toRGBA } from '../Colors';
+import {
+  ParsedColorArray,
+  isColor,
+  convertToRGBA,
+  rgbaArrayToRGBAColor,
+  toGammaSpace,
+  toLinearSpace,
+} from '../Colors';
 
 import {
   AnimatedStyle,
@@ -125,55 +132,59 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     return res;
   };
 
-  const tab = ['H', 'S', 'V', 'A'];
+  const tab = ['R', 'G', 'B', 'A'];
   const colorOnStart = (
     animation: Animation<AnimationObject>,
     value: string | number,
     timestamp: Timestamp,
     previousAnimation: Animation<AnimationObject>
   ): void => {
-    let HSVAValue: ParsedColorArray;
-    let HSVACurrent: ParsedColorArray;
-    let HSVAToValue: ParsedColorArray;
+    let RGBAValue: ParsedColorArray;
+    let RGBACurrent: ParsedColorArray;
+    let RGBAToValue: ParsedColorArray;
     const res: Array<number> = [];
     if (isColor(value)) {
-      HSVACurrent = convertToHSVA(animation.current);
-      HSVAValue = convertToHSVA(value);
+      RGBACurrent = toLinearSpace(convertToRGBA(animation.current));
+      RGBAValue = toLinearSpace(convertToRGBA(value));
       if (animation.toValue) {
-        HSVAToValue = convertToHSVA(animation.toValue);
+        RGBAToValue = toLinearSpace(convertToRGBA(animation.toValue));
       }
     }
     tab.forEach((i, index) => {
       animation[i] = Object.assign({}, animationCopy);
-      animation[i].current = HSVACurrent[index];
-      animation[i].toValue = HSVAToValue ? HSVAToValue[index] : undefined;
+      animation[i].current = RGBACurrent[index];
+      animation[i].toValue = RGBAToValue ? RGBAToValue[index] : undefined;
       animation[i].onStart(
         animation[i],
-        HSVAValue[index],
+        RGBAValue[index],
         timestamp,
         previousAnimation ? previousAnimation[i] : undefined
       );
       res.push(animation[i].current);
     });
 
-    animation.current = toRGBA(res as ParsedColorArray);
+    animation.current = rgbaArrayToRGBAColor(
+      toGammaSpace(res as ParsedColorArray)
+    );
   };
 
   const colorOnFrame = (
     animation: Animation<AnimationObject>,
     timestamp: Timestamp
   ): boolean => {
-    const HSVACurrent = convertToHSVA(animation.current);
+    const RGBACurrent = toLinearSpace(convertToRGBA(animation.current));
     const res: Array<number> = [];
     let finished = true;
     tab.forEach((i, index) => {
-      animation[i].current = HSVACurrent[index];
+      animation[i].current = RGBACurrent[index];
       // @ts-ignore: disable-next-line
       finished &= animation[i].onFrame(animation[i], timestamp);
       res.push(animation[i].current);
     });
 
-    animation.current = toRGBA(res as ParsedColorArray);
+    animation.current = rgbaArrayToRGBAColor(
+      toGammaSpace(res as ParsedColorArray)
+    );
     return finished;
   };
 

package/src/reanimated2/globals.d.ts

@@ -9,6 +9,7 @@ import type { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegis
 
 declare global {
   const _WORKLET: boolean;
+  const _REANIMATED_VERSION_CPP: string;
   const _frameTimestamp: number | null;
   const _eventTimestamp: number;
   const __reanimatedModuleProxy: NativeReanimated;
@@ -49,6 +50,7 @@ declare global {
     interface Global {
       _WORKLET: boolean;
       _IS_FABRIC: boolean;
+      _REANIMATED_VERSION_CPP: string;
       _frameTimestamp: number | null;
       _eventTimestamp: number;
       __reanimatedModuleProxy: NativeReanimated;

package/src/reanimated2/interpolateColor.ts

@@ -15,29 +15,96 @@ import { Extrapolate } from '../reanimated1/derived';
 import { SharedValue } from './commonTypes';
 import { useSharedValue } from './hook/useSharedValue';
 
+export type InterpolationOptions = {
+  gamma?: number;
+  useCorrectedHSVInterpolation?: boolean;
+};
+
 const interpolateColorsHSV = (
   value: number,
   inputRange: readonly number[],
-  colors: InterpolateHSV
+  colors: InterpolateHSV,
+  options: InterpolationOptions
 ) => {
   'worklet';
-  const h = interpolate(value, inputRange, colors.h, Extrapolate.CLAMP);
+  let h = 0;
+  const { useCorrectedHSVInterpolation = true } = options;
+  if (useCorrectedHSVInterpolation) {
+    // if the difference between hues in a range is > 180 deg
+    // then move the hue at the right end of the range +/- 360 deg
+    // and add the next point in the original place + 0.00001 with original hue
+    // to not break the next range
+    const correctedInputRange = [inputRange[0]];
+    const originalH = colors.h;
+    const correctedH = [originalH[0]];
+
+    for (let i = 1; i < originalH.length; ++i) {
+      const d = originalH[i] - originalH[i - 1];
+      if (originalH[i] > originalH[i - 1] && d > 0.5) {
+        correctedInputRange.push(inputRange[i]);
+        correctedInputRange.push(inputRange[i] + 0.00001);
+        correctedH.push(originalH[i] - 1);
+        correctedH.push(originalH[i]);
+      } else if (originalH[i] < originalH[i - 1] && d < -0.5) {
+        correctedInputRange.push(inputRange[i]);
+        correctedInputRange.push(inputRange[i] + 0.00001);
+        correctedH.push(originalH[i] + 1);
+        correctedH.push(originalH[i]);
+      } else {
+        correctedInputRange.push(inputRange[i]);
+        correctedH.push(originalH[i]);
+      }
+    }
+    h =
+      (interpolate(value, correctedInputRange, correctedH, Extrapolate.CLAMP) +
+        1) %
+      1;
+  } else {
+    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 a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP);
+  return hsvToColor(h, s, v, a);
+};
+
+const toLinearSpace = (x: number[], gamma: number): number[] => {
+  'worklet';
+  return x.map((v) => Math.pow(v / 255, gamma));
+};
+
+const toGammaSpace = (x: number, gamma: number): number => {
+  'worklet';
+  return Math.round(Math.pow(x, 1 / gamma) * 255);
 };
 
 const interpolateColorsRGB = (
   value: number,
   inputRange: readonly number[],
-  colors: InterpolateRGB
+  colors: InterpolateRGB,
+  options: InterpolationOptions
 ) => {
   '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 { gamma = 2.2 } = options;
+  let { r: outputR, g: outputG, b: outputB } = colors;
+  if (gamma !== 1) {
+    outputR = toLinearSpace(outputR, gamma);
+    outputG = toLinearSpace(outputG, gamma);
+    outputB = toLinearSpace(outputB, gamma);
+  }
+  const r = interpolate(value, inputRange, outputR, Extrapolate.CLAMP);
+  const g = interpolate(value, inputRange, outputG, Extrapolate.CLAMP);
+  const b = interpolate(value, inputRange, outputB, Extrapolate.CLAMP);
   const a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP);
-  return rgbaColor(r, g, b, a);
+  if (gamma === 1) {
+    return rgbaColor(r, g, b, a);
+  }
+  return rgbaColor(
+    toGammaSpace(r, gamma),
+    toGammaSpace(g, gamma),
+    toGammaSpace(b, gamma),
+    a
+  );
 };
 
 interface InterpolateRGB {
@@ -74,6 +141,7 @@ interface InterpolateHSV {
   h: number[];
   s: number[];
   v: number[];
+  a: number[];
 }
 
 const getInterpolateHSV = (
@@ -83,36 +151,47 @@ const getInterpolateHSV = (
   const h = [];
   const s = [];
   const v = [];
+  const a = [];
   for (let i = 0; i < colors.length; ++i) {
     const color = colors[i];
-    const processedColor = RGBtoHSV(processColor(color) as any);
-    if (processedColor) {
-      h.push(processedColor.h);
-      s.push(processedColor.s);
-      v.push(processedColor.v);
+    const processedColor = processColor(color) as any;
+    if (typeof processedColor === 'number') {
+      const processedHSVColor = RGBtoHSV(
+        red(processedColor),
+        green(processedColor),
+        blue(processedColor)
+      );
+
+      h.push(processedHSVColor.h);
+      s.push(processedHSVColor.s);
+      v.push(processedHSVColor.v);
+      a.push(opacity(processedColor));
     }
   }
-  return { h, s, v };
+  return { h, s, v, a };
 };
 
 export const interpolateColor = (
   value: number,
   inputRange: readonly number[],
   outputRange: readonly (string | number)[],
-  colorSpace: 'RGB' | 'HSV' = 'RGB'
+  colorSpace: 'RGB' | 'HSV' = 'RGB',
+  options: InterpolationOptions = {}
 ): string | number => {
   'worklet';
   if (colorSpace === 'HSV') {
     return interpolateColorsHSV(
       value,
       inputRange,
-      getInterpolateHSV(outputRange)
+      getInterpolateHSV(outputRange),
+      options
     );
   } else if (colorSpace === 'RGB') {
     return interpolateColorsRGB(
       value,
       inputRange,
-      getInterpolateRGB(outputRange)
+      getInterpolateRGB(outputRange),
+      options
     );
   }
   throw new Error(
@@ -130,18 +209,21 @@ export interface InterpolateConfig {
   outputRange: readonly (string | number)[];
   colorSpace: ColorSpace;
   cache: SharedValue<InterpolateRGB | InterpolateHSV | null>;
+  options: InterpolationOptions;
 }
 
 export function useInterpolateConfig(
   inputRange: readonly number[],
   outputRange: readonly (string | number)[],
-  colorSpace = ColorSpace.RGB
+  colorSpace = ColorSpace.RGB,
+  options: InterpolationOptions = {}
 ): SharedValue<InterpolateConfig> {
   return useSharedValue({
     inputRange,
     outputRange,
     colorSpace,
-    cache: makeMutable(null),
+    cache: makeMutable<InterpolateRGB | InterpolateHSV | null>(null),
+    options,
   });
 }
 
@@ -159,7 +241,8 @@ export const interpolateSharableColor = (
     return interpolateColorsRGB(
       value,
       interpolateConfig.value.inputRange,
-      colors as InterpolateRGB
+      colors as InterpolateRGB,
+      interpolateConfig.value.options
     );
   } else if (interpolateConfig.value.colorSpace === ColorSpace.HSV) {
     if (!colors) {
@@ -169,7 +252,8 @@ export const interpolateSharableColor = (
     return interpolateColorsHSV(
       value,
       interpolateConfig.value.inputRange,
-      colors as InterpolateHSV
+      colors as InterpolateHSV,
+      interpolateConfig.value.options
     );
   }
   throw new Error(

package/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts

@@ -21,6 +21,8 @@ export interface EntryAnimationsValues {
   targetHeight: number;
   targetGlobalOriginX: number;
   targetGlobalOriginY: number;
+  windowWidth: number;
+  windowHeight: number;
 }
 
 export interface ExitAnimationsValues {
@@ -30,6 +32,8 @@ export interface ExitAnimationsValues {
   currentHeight: number;
   currentGlobalOriginX: number;
   currentGlobalOriginY: number;
+  windowWidth: number;
+  windowHeight: number;
 }
 
 export type EntryExitAnimationFunction = (

package/src/reanimated2/layoutReanimation/defaultAnimations/Bounce.ts

@@ -3,11 +3,8 @@ import {
   IEntryExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 import { withSequence, withTiming } from '../../animation';
-import { Dimensions } from 'react-native';
 import { ComplexAnimationBuilder } from '../animationBuilder/ComplexAnimationBuilder';
 
-const { width, height } = Dimensions.get('window');
-
 export class BounceIn
   extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder
@@ -82,7 +79,7 @@ export class BounceInDown
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -103,7 +100,7 @@ export class BounceInDown
         initialValues: {
           transform: [
             {
-              translateY: height,
+              translateY: values.windowHeight,
             },
           ],
           ...initialValues,
@@ -137,7 +134,7 @@ export class BounceInUp
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -156,7 +153,7 @@ export class BounceInUp
           ],
         },
         initialValues: {
-          transform: [{ translateY: -height }],
+          transform: [{ translateY: -values.windowHeight }],
           ...initialValues,
         },
         callback: callback,
@@ -188,7 +185,7 @@ export class BounceInLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -207,7 +204,7 @@ export class BounceInLeft
           ],
         },
         initialValues: {
-          transform: [{ translateX: -width }],
+          transform: [{ translateX: -values.windowWidth }],
           ...initialValues,
         },
         callback: callback,
@@ -239,7 +236,7 @@ export class BounceInRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -258,7 +255,7 @@ export class BounceInRight
           ],
         },
         initialValues: {
-          transform: [{ translateX: width }],
+          transform: [{ translateX: values.windowWidth }],
           ...initialValues,
         },
         callback: callback,
@@ -341,7 +338,7 @@ export class BounceOutDown
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -353,7 +350,7 @@ export class BounceOutDown
                   withTiming(-10, { duration: duration * 0.15 }),
                   withTiming(10, { duration: duration * 0.15 }),
                   withTiming(-20, { duration: duration * 0.15 }),
-                  withTiming(height, {
+                  withTiming(values.windowHeight, {
                     duration: duration * 0.55,
                   })
                 )
@@ -394,7 +391,7 @@ export class BounceOutUp
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -406,7 +403,7 @@ export class BounceOutUp
                   withTiming(10, { duration: duration * 0.15 }),
                   withTiming(-10, { duration: duration * 0.15 }),
                   withTiming(20, { duration: duration * 0.15 }),
-                  withTiming(-height, {
+                  withTiming(-values.windowHeight, {
                     duration: duration * 0.55,
                   })
                 )
@@ -447,7 +444,7 @@ export class BounceOutLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -459,7 +456,7 @@ export class BounceOutLeft
                   withTiming(10, { duration: duration * 0.15 }),
                   withTiming(-10, { duration: duration * 0.15 }),
                   withTiming(20, { duration: duration * 0.15 }),
-                  withTiming(-width, {
+                  withTiming(-values.windowWidth, {
                     duration: duration * 0.55,
                   })
                 )
@@ -500,7 +497,7 @@ export class BounceOutRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -512,7 +509,7 @@ export class BounceOutRight
                   withTiming(-10, { duration: duration * 0.15 }),
                   withTiming(10, { duration: duration * 0.15 }),
                   withTiming(-20, { duration: duration * 0.15 }),
-                  withTiming(width, {
+                  withTiming(values.windowWidth, {
                     duration: duration * 0.55,
                   })
                 )