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

package/src/reanimated2/hook/utils.ts

@@ -5,7 +5,6 @@ import {
   Context,
   NativeEvent,
   NestedObjectValues,
-  StyleProps,
   WorkletFunction,
   AnimationObject,
 } from '../commonTypes';
@@ -164,78 +163,33 @@ export function parseColors(updates: AnimatedStyle): void {
   }
 }
 
-export function canApplyOptimalisation(upadterFn: WorkletFunction): number {
-  const FUNCTIONLESS_FLAG = 0b00000001;
-  const STATEMENTLESS_FLAG = 0b00000010;
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const optimalization = upadterFn.__optimalization!;
-  return (
-    optimalization & FUNCTIONLESS_FLAG && optimalization & STATEMENTLESS_FLAG
-  );
-}
-
 export function isAnimated(prop: NestedObjectValues<AnimationObject>): boolean {
   'worklet';
-  const propsToCheck: NestedObjectValues<AnimationObject>[] = [prop];
-  while (propsToCheck.length > 0) {
-    const currentProp: NestedObjectValues<AnimationObject> =
-      propsToCheck.pop() as NestedObjectValues<AnimationObject>;
-    if (Array.isArray(currentProp)) {
-      for (const item of currentProp) {
-        propsToCheck.push(item);
-      }
-    } else if (currentProp?.onFrame !== undefined) {
+  if (Array.isArray(prop)) {
+    return prop.some(isAnimated);
+  } else if (typeof prop === 'object') {
+    if (prop.onFrame !== undefined) {
       return true;
-    } else if (typeof currentProp === 'object') {
-      for (const item of Object.values(currentProp)) {
-        propsToCheck.push(item);
-      }
+    } else {
+      return Object.values(prop).some(isAnimated);
     }
-    // if none of the above, it's not the animated prop, check next one
   }
-
-  // when none of the props were animated return false
   return false;
 }
 
-export function styleDiff<T extends AnimatedStyle>(
-  oldStyle: AnimatedStyle,
-  newStyle: AnimatedStyle
-): Partial<T> {
+export function shallowEqual(a: any, b: any) {
   'worklet';
-  const diff: any = {};
-  for (const key in oldStyle) {
-    if (newStyle[key] === undefined) {
-      diff[key] = null;
-    }
-  }
-  for (const key in newStyle) {
-    const value = newStyle[key];
-    const oldValue = oldStyle[key];
-
-    if (isAnimated(value)) {
-      // do nothing
-      continue;
-    }
-    if (oldValue !== value) {
-      diff[key] = value;
-    }
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) {
+    return false;
   }
-  return diff;
-}
-
-export function getStyleWithoutAnimations(newStyle: AnimatedStyle): StyleProps {
-  'worklet';
-  const diff: StyleProps = {};
-
-  for (const key in newStyle) {
-    const value = newStyle[key];
-    if (isAnimated(value)) {
-      continue;
+  for (let i = 0; i < aKeys.length; i++) {
+    if (a[aKeys[i]] !== b[aKeys[i]]) {
+      return false;
     }
-    diff[key] = value;
   }
-  return diff;
+  return true;
 }
 
 export const validateAnimatedStyles = (styles: AnimatedStyle): void => {

package/src/reanimated2/index.ts

@@ -10,3 +10,4 @@ export * from './PropAdapters';
 export * from './layoutReanimation';
 export * from './utils';
 export * from './commonTypes';
+export * from './pluginUtils';

package/src/reanimated2/initializers.ts

@@ -0,0 +1,184 @@
+import { reportFatalErrorOnJS } from './errors';
+import NativeReanimatedModule from './NativeReanimated';
+import { isJest } from './PlatformChecker';
+import {
+  runOnJS,
+  setupSetImmediate,
+  flushImmediates,
+  runOnUIImmediately,
+} from './threads';
+
+// callGuard is only used with debug builds
+function callGuardDEV<T extends Array<any>, U>(
+  fn: (...args: T) => U,
+  ...args: T
+): void {
+  'worklet';
+  try {
+    fn(...args);
+  } catch (e) {
+    if (global.ErrorUtils) {
+      global.ErrorUtils.reportFatalError(e as Error);
+    } else {
+      throw e;
+    }
+  }
+}
+
+function valueUnpacker(objectToUnpack: any, category?: string): any {
+  'worklet';
+  let workletsCache = global.__workletsCache;
+  let handleCache = global.__handleCache;
+  if (workletsCache === undefined) {
+    // init
+    workletsCache = global.__workletsCache = new Map();
+    handleCache = global.__handleCache = new WeakMap();
+  }
+  const workletHash = objectToUnpack.__workletHash;
+  if (workletHash !== undefined) {
+    let workletFun = workletsCache.get(workletHash);
+    if (workletFun === undefined) {
+      const initData = objectToUnpack.__initData;
+      if (global.evalWithSourceMap) {
+        // if the runtime (hermes only for now) supports loading source maps
+        // we want to use the proper filename for the location as it guarantees
+        // that debugger understands and loads the source code of the file where
+        // the worklet is defined.
+        workletFun = global.evalWithSourceMap(
+          '(' + initData.code + '\n)',
+          initData.location,
+          initData.sourceMap
+        ) as (...args: any[]) => any;
+      } else if (global.evalWithSourceUrl) {
+        // if the runtime doesn't support loading source maps, in dev mode we
+        // can pass source url when evaluating the worklet. Now, instead of using
+        // the actual file location we use worklet hash, as it the allows us to
+        // properly symbolicate traces (see errors.ts for details)
+        workletFun = global.evalWithSourceUrl(
+          '(' + initData.code + '\n)',
+          `worklet_${workletHash}`
+        ) as (...args: any[]) => any;
+      } else {
+        // in release we use the regular eval to save on JSI calls
+        // eslint-disable-next-line no-eval
+        workletFun = eval('(' + initData.code + '\n)') as (
+          ...args: any[]
+        ) => any;
+      }
+      workletsCache.set(workletHash, workletFun);
+    }
+    const functionInstance = workletFun.bind(objectToUnpack);
+    objectToUnpack._recur = functionInstance;
+    return functionInstance;
+  } else if (objectToUnpack.__init) {
+    let value = handleCache!.get(objectToUnpack);
+    if (value === undefined) {
+      value = objectToUnpack.__init();
+      handleCache!.set(objectToUnpack, value);
+    }
+    return value;
+  } else if (category === 'RemoteFunction') {
+    const fun = () => {
+      throw new Error(`Tried to synchronously call a non-worklet function on the UI thread.
+
+Possible solutions are:
+  a) If you want to synchronously execute this method, mark it as a worklet
+  b) If you want to execute this function on the JS thread, wrap it using \`runOnJS\``);
+    };
+    fun.__remoteFunction = objectToUnpack;
+    return fun;
+  } else {
+    throw new Error('data type not recognized by unpack method');
+  }
+}
+
+function setupRequestAnimationFrame() {
+  'worklet';
+
+  // Jest mocks requestAnimationFrame API and it does not like if that mock gets overridden
+  // so we avoid doing requestAnimationFrame batching in Jest environment.
+  const nativeRequestAnimationFrame = global.requestAnimationFrame;
+
+  let animationFrameCallbacks: Array<(timestamp: number) => void> = [];
+  let lastNativeAnimationFrameTimestamp = -1;
+
+  global.__flushAnimationFrame = (frameTimestamp: number) => {
+    const currentCallbacks = animationFrameCallbacks;
+    animationFrameCallbacks = [];
+    currentCallbacks.forEach((f) => f(frameTimestamp));
+    flushImmediates();
+  };
+
+  global.requestAnimationFrame = (
+    callback: (timestamp: number) => void
+  ): number => {
+    animationFrameCallbacks.push(callback);
+    if (animationFrameCallbacks.length === 1) {
+      // We schedule native requestAnimationFrame only when the first callback
+      // is added and then use it to execute all the enqueued callbacks. Once
+      // the callbacks are run, we clear the array.
+      nativeRequestAnimationFrame((timestamp) => {
+        if (lastNativeAnimationFrameTimestamp >= timestamp) {
+          // Make sure we only execute the callbacks once for a given frame
+          return;
+        }
+        lastNativeAnimationFrameTimestamp = timestamp;
+        global.__frameTimestamp = timestamp;
+        global.__flushAnimationFrame(timestamp);
+        global.__frameTimestamp = undefined;
+      });
+    }
+    // Reanimated currently does not support cancelling calbacks requested with
+    // requestAnimationFrame. We return -1 as identifier which isn't in line
+    // with the spec but it should give users better clue in case they actually
+    // attempt to store the value returned from rAF and use it for cancelling.
+    return -1;
+  };
+}
+
+export function initializeUIRuntime() {
+  NativeReanimatedModule.installCoreFunctions(callGuardDEV, valueUnpacker);
+
+  const IS_JEST = isJest();
+
+  if (IS_JEST) {
+    // requestAnimationFrame react-native jest's setup is incorrect as it polyfills
+    // the method directly using setTimeout, therefore the callback doesn't get the
+    // expected timestamp as the only argument: https://github.com/facebook/react-native/blob/main/jest/setup.js#L28
+    // We override this setup here to make sure that callbacks get the proper timestamps
+    // when executed. For non-jest environments we define requestAnimationFrame in setupRequestAnimationFrame
+    // @ts-ignore TypeScript uses Node definition for rAF, setTimeout, etc which returns a Timeout object rather than a number
+    global.requestAnimationFrame = (callback: (timestamp: number) => void) => {
+      return setTimeout(() => callback(performance.now()), 0);
+    };
+  }
+
+  const capturableConsole = console;
+  runOnUIImmediately(() => {
+    'worklet';
+    // setup error handler
+    global.ErrorUtils = {
+      reportFatalError: (error: Error) => {
+        runOnJS(reportFatalErrorOnJS)({
+          message: error.message,
+          stack: error.stack,
+        });
+      },
+    };
+
+    // setup console
+    // @ts-ignore TypeScript doesn't like that there are missing methods in console object, but we don't provide all the methods for the UI runtime console version
+    global.console = {
+      debug: runOnJS(capturableConsole.debug),
+      log: runOnJS(capturableConsole.log),
+      warn: runOnJS(capturableConsole.warn),
+      error: runOnJS(capturableConsole.error),
+      info: runOnJS(capturableConsole.info),
+    };
+
+    if (!IS_JEST) {
+      setupSetImmediate();
+      setupRequestAnimationFrame();
+    }
+  })();
+}

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,28 +1,32 @@
 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 {
-  _valueUnpacker?: <T>(value: T) => void = undefined;
+  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> {
     return { __hostObjectShareableJSRef: value };
   }
 
-  installCoreFunctions(valueUnpacker: <T>(value: T) => T): void {
-    this._valueUnpacker = valueUnpacker;
+  installCoreFunctions(
+    _callGuard: <T extends Array<any>, U>(
+      fn: (...args: T) => U,
+      ...args: T
+    ) => void,
+    _valueUnpacker: <T>(value: T) => T
+  ): void {
+    // noop
   }
 
   scheduleOnUI<T>(worklet: ShareableRef<T>) {
@@ -48,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 {
@@ -67,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';
+    }
+  }
 }