react-native-reanimated 3.0.0-rc.9 → 3.0.0

package/src/reanimated2/interpolateColor.ts

@@ -19,29 +19,96 @@ export const Extrapolate = {
   IDENTITY: 'identity',
 };
 
+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 {
@@ -78,6 +145,7 @@ interface InterpolateHSV {
   h: number[];
   s: number[];
   v: number[];
+  a: number[];
 }
 
 const getInterpolateHSV = (
@@ -87,36 +155,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(
@@ -134,18 +213,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<InterpolateConfig>({
     inputRange,
     outputRange,
     colorSpace,
     cache: makeMutable<InterpolateRGB | InterpolateHSV | null>(null),
+    options,
   });
 }
 
@@ -163,7 +245,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) {
@@ -173,7 +256,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/jestUtils.ts

@@ -149,7 +149,7 @@ const afterTest = () => {
 
 export const withReanimatedTimer = (animationTest) => {
   console.warn(
-    'This method is deprecated, you shoulddefine your own before and after test hooks to enable jest.useFakeTimers(). Check out the documentation for details on testing'
+    'This method is deprecated, you should define your own before and after test hooks to enable jest.useFakeTimers(). Check out the documentation for details on testing'
   );
   beforeTest();
   animationTest();

package/src/reanimated2/js-reanimated/JSReanimated.ts

@@ -1,18 +1,18 @@
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
-import { ShareableRef } from '../commonTypes';
-import { isJest } from '../PlatformChecker';
+import {
+  SensorType,
+  ShareableRef,
+  Value3D,
+  ValueRotation,
+} from '../commonTypes';
+import { WebSensor } from './WebSensor';
 
 export default class JSReanimated extends NativeReanimated {
+  nextSensorId = 0;
+  sensors = new Map<number, WebSensor>();
+
   constructor() {
     super(false);
-    if (isJest()) {
-      // on node < 16 jest have problems mocking performance.now method which
-      // results in the tests failing, since date precision isn't that important
-      // for tests, we use Date.now instead
-      this.getTimestamp = () => Date.now();
-    } else {
-      this.getTimestamp = () => window.performance.now();
-    }
   }
 
   makeShareableClone<T>(value: T): ShareableRef<T> {
@@ -52,13 +52,62 @@ export default class JSReanimated extends NativeReanimated {
     );
   }
 
-  registerSensor(): number {
-    console.warn('[Reanimated] useAnimatedSensor is not available on web yet.');
-    return -1;
+  registerSensor(
+    sensorType: SensorType,
+    interval: number,
+    iosReferenceFrame: number,
+    eventHandler: (data: Value3D | ValueRotation) => void
+  ): number {
+    if (!(this.getSensorName(sensorType) in window)) {
+      return -1;
+    }
+
+    const sensor: WebSensor = this.initializeSensor(sensorType, interval);
+    let callback;
+    if (sensorType === SensorType.ROTATION) {
+      callback = () => {
+        const [qw, qx, qy, qz] = sensor.quaternion;
+
+        // reference: https://stackoverflow.com/questions/5782658/extracting-yaw-from-a-quaternion
+        const yaw = Math.atan2(
+          2.0 * (qy * qz + qw * qx),
+          qw * qw - qx * qx - qy * qy + qz * qz
+        );
+        const pitch = Math.sin(-2.0 * (qx * qz - qw * qy));
+        const roll = Math.atan2(
+          2.0 * (qx * qy + qw * qz),
+          qw * qw + qx * qx - qy * qy - qz * qz
+        );
+        eventHandler({
+          qw,
+          qx,
+          qy,
+          qz,
+          yaw,
+          pitch,
+          roll,
+          interfaceOrientation: 0,
+        });
+      };
+    } else {
+      callback = () => {
+        const { x, y, z } = sensor;
+        eventHandler({ x, y, z, interfaceOrientation: 0 });
+      };
+    }
+    sensor.addEventListener('reading', callback);
+    sensor.start();
+
+    this.sensors.set(this.nextSensorId, sensor);
+    return this.nextSensorId++;
   }
 
-  unregisterSensor(): void {
-    // noop
+  unregisterSensor(id: number): void {
+    const sensor: WebSensor | undefined = this.sensors.get(id);
+    if (sensor !== undefined) {
+      sensor.stop();
+      this.sensors.delete(id);
+    }
   }
 
   subscribeForKeyboardEvents(_: ShareableRef<number>): number {
@@ -71,4 +120,38 @@ export default class JSReanimated extends NativeReanimated {
   unsubscribeFromKeyboardEvents(_: number): void {
     // noop
   }
+
+  initializeSensor(sensorType: SensorType, interval: number): WebSensor {
+    const config =
+      interval <= 0
+        ? { referenceFrame: 'device' }
+        : { frequency: 1000 / interval };
+    switch (sensorType) {
+      case SensorType.ACCELEROMETER:
+        return new window.Accelerometer(config);
+      case SensorType.GYROSCOPE:
+        return new window.Gyroscope(config);
+      case SensorType.GRAVITY:
+        return new window.GravitySensor(config);
+      case SensorType.MAGNETIC_FIELD:
+        return new window.Magnetometer(config);
+      case SensorType.ROTATION:
+        return new window.AbsoluteOrientationSensor(config);
+    }
+  }
+
+  getSensorName(sensorType: SensorType): string {
+    switch (sensorType) {
+      case SensorType.ACCELEROMETER:
+        return 'Accelerometer';
+      case SensorType.GRAVITY:
+        return 'GravitySensor';
+      case SensorType.GYROSCOPE:
+        return 'Gyroscope';
+      case SensorType.MAGNETIC_FIELD:
+        return 'Magnetometer';
+      case SensorType.ROTATION:
+        return 'AbsoluteOrientationSensor';
+    }
+  }
 }

package/src/reanimated2/js-reanimated/Mapper.ts

@@ -1,4 +1,5 @@
 import { NestedObjectValues } from '../commonTypes';
+import { shouldBeUseWeb } from '../PlatformChecker';
 import { JSReanimated } from './commonTypes';
 import MutableValue from './MutableValue';
 
@@ -49,6 +50,9 @@ export default class Mapper<T> {
         res.push(value);
       } else if (Array.isArray(value)) {
         value.forEach((v) => extractMutables(v));
+      } else if (isWebDomElement(value)) {
+        // do nothing on dom elements
+        // without this check, we get a "Maximum call size exceeded error"
       } else if (typeof value === 'object') {
         Object.keys(value).forEach((key) => {
           extractMutables(value[key]);
@@ -60,3 +64,31 @@ export default class Mapper<T> {
     return res;
   }
 }
+
+function isWebDomElement(value: any) {
+  if (!shouldBeUseWeb()) {
+    return false;
+  }
+
+  // https://stackoverflow.com/a/384380/7869175
+  function isWebNode(o: any) {
+    return typeof Node === 'object'
+      ? o instanceof Node
+      : o &&
+          typeof o === 'object' &&
+          typeof o.nodeType === 'number' &&
+          typeof o.nodeName === 'string';
+  }
+
+  function isWebElement(o: any) {
+    return typeof HTMLElement === 'object'
+      ? o instanceof HTMLElement // DOM2
+      : o &&
+          typeof o === 'object' &&
+          o !== null &&
+          o.nodeType === 1 &&
+          typeof o.nodeName === 'string';
+  }
+
+  return isWebNode(value) || isWebElement(value);
+}

package/src/reanimated2/js-reanimated/WebSensor.ts

@@ -0,0 +1,34 @@
+export declare class WebSensor {
+  start: () => void;
+  stop: () => void;
+  addEventListener: (eventType: string, eventHandler: () => void) => void;
+  quaternion: [number, number, number, number];
+  x: number;
+  y: number;
+  z: number;
+}
+
+type configOptions =
+  | {
+      referenceFrame: string;
+      frequency?: undefined;
+    }
+  | {
+      frequency: number;
+      referenceFrame?: undefined;
+    };
+
+interface Constructable<T> {
+  new (config: configOptions): T;
+}
+
+declare global {
+  interface Window {
+    Accelerometer: Constructable<WebSensor>;
+    GravitySensor: Constructable<WebSensor>;
+    Gyroscope: Constructable<WebSensor>;
+    Magnetometer: Constructable<WebSensor>;
+    AbsoluteOrientationSensor: Constructable<WebSensor>;
+    Sensor: Constructable<WebSensor>;
+  }
+}

package/src/reanimated2/js-reanimated/commonTypes.ts

@@ -32,7 +32,6 @@ export interface JSReanimated {
   _frames: ((timestamp: Timestamp) => void)[];
   timeProvider: { now: () => number };
   pushFrame(frame: (timestamp: Timestamp) => void): void;
-  getTimestamp(): number;
   maybeRequestRender(): void;
   _onRender(timestampMs: number): void;
   installCoreFunctions(valueSetter: <T>(value: T) => void): void;

package/src/reanimated2/js-reanimated/global.ts

@@ -3,7 +3,6 @@
 import { shouldBeUseWeb } from '../PlatformChecker';
 const initializeGlobalsForWeb = () => {
   if (shouldBeUseWeb()) {
-    global._frameTimestamp = null;
     global._measure = () => {
       console.warn(
         "[Reanimated] You can't use `measure` with Chrome Debugger or with web version"

package/src/reanimated2/js-reanimated/index.ts

@@ -5,7 +5,6 @@ const reanimatedJS = new JSReanimated();
 
 global._makeShareableClone = (c) => c;
 global._scheduleOnJS = setImmediate;
-global._getTimestamp = reanimatedJS.getTimestamp.bind(reanimatedJS);
 
 interface JSReanimatedComponent {
   previousStyle: StyleProps;

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 = (
@@ -39,6 +43,7 @@ export type EntryExitAnimationFunction = (
 export type AnimationConfigFunction<T> = (targetValues: T) => LayoutAnimation;
 
 export interface LayoutAnimationsValues {
+  [key: string]: number;
   currentOriginX: number;
   currentOriginY: number;
   currentWidth: number;
@@ -55,13 +60,20 @@ export interface LayoutAnimationsValues {
   windowHeight: number;
 }
 
+export enum LayoutAnimationType {
+  ENTERING = 1,
+  EXITING = 2,
+  LAYOUT = 3,
+  SHARED_ELEMENT_TRANSITION = 4,
+}
+
 export type LayoutAnimationFunction = (
   targetValues: LayoutAnimationsValues
 ) => LayoutAnimation;
 
 export type LayoutAnimationStartFunction = (
   tag: number,
-  type: string,
+  type: LayoutAnimationType,
   yogaValues: LayoutAnimationsValues,
   config: LayoutAnimationFunction
 ) => void;

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

@@ -1,6 +1,7 @@
 export { BaseAnimationBuilder } from './BaseAnimationBuilder';
 export { ComplexAnimationBuilder } from './ComplexAnimationBuilder';
 export { Keyframe } from './Keyframe';
+export { LayoutAnimationType } from './commonTypes';
 export type {
   LayoutAnimation,
   AnimationFunction,

package/src/reanimated2/layoutReanimation/animationsManager.ts

@@ -1,21 +1,25 @@
-import { runOnUI } from '../core';
 import { withStyleAnimation } from '../animation/styleAnimation';
 import { SharedValue } from '../commonTypes';
 import { makeUIMutable } from '../mutables';
 import {
   LayoutAnimationFunction,
+  LayoutAnimationType,
   LayoutAnimationsValues,
 } from './animationBuilder';
+import { runOnUIImmediately } from '../threads';
 
 const TAG_OFFSET = 1e9;
 
 function startObservingProgress(
   tag: number,
-  sharedValue: SharedValue<number>
+  sharedValue: SharedValue<number>,
+  animationType: LayoutAnimationType
 ): void {
   'worklet';
+  const isSharedTransition =
+    animationType === LayoutAnimationType.SHARED_ELEMENT_TRANSITION;
   sharedValue.addListener(tag + TAG_OFFSET, () => {
-    _notifyAboutProgress(tag, sharedValue.value);
+    _notifyAboutProgress(tag, sharedValue.value, isSharedTransition);
   });
 }
 
@@ -38,16 +42,16 @@ function createLayoutAnimationManager() {
   return {
     start(
       tag: number,
-      type: string,
+      type: LayoutAnimationType,
       yogaValues: LayoutAnimationsValues,
       config: LayoutAnimationFunction
     ) {
       const style = config(yogaValues);
       let currentAnimation = style.animations;
 
-      if (type === 'entering') {
+      if (type === LayoutAnimationType.ENTERING) {
         enteringAnimationForTag.set(tag, currentAnimation);
-      } else if (type === 'layout') {
+      } else if (type === LayoutAnimationType.LAYOUT) {
         // When layout animation is requested, but entering is still running, we merge
         // new layout animation targets into the ongoing animation
         const enteringAnimation = enteringAnimationForTag.get(tag);
@@ -72,20 +76,24 @@ function createLayoutAnimationManager() {
         if (finished) {
           enteringAnimationForTag.delete(tag);
           mutableValuesForTag.delete(tag);
-          const shouldRemoveView = type === 'exiting';
+          const shouldRemoveView = type === LayoutAnimationType.EXITING;
           stopObservingProgress(tag, value, finished, shouldRemoveView);
         }
         style.callback &&
           style.callback(finished === undefined ? false : finished);
       };
 
-      startObservingProgress(tag, value);
+      startObservingProgress(tag, value, type);
       value.value = animation;
     },
+    stop(tag: number) {
+      const value = mutableValuesForTag.get(tag);
+      stopObservingProgress(tag, value, true, true);
+    },
   };
 }
 
-runOnUI(() => {
+runOnUIImmediately(() => {
   'worklet';
   global.LayoutAnimationsManager = createLayoutAnimationManager();
 })();