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

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,
@@ -126,55 +133,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;
   };
 
@@ -247,6 +258,8 @@ type AnimationToDecoration<T extends AnimationObject | StyleLayoutAnimation> =
     ? NextAnimation<SequenceAnimation>
     : AnimatableValue | T;
 
+const IS_NATIVE = NativeReanimatedModule.native;
+
 export function defineAnimation<
   T extends AnimationObject | StyleLayoutAnimation
 >(starting: AnimationToDecoration<T>, factory: () => T): T {
@@ -261,7 +274,7 @@ export function defineAnimation<
     return animation;
   };
 
-  if (_WORKLET || !NativeReanimatedModule.native) {
+  if (_WORKLET || !IS_NATIVE) {
     return create();
   }
   // @ts-ignore: eslint-disable-line

package/src/reanimated2/commonTypes.ts

@@ -79,7 +79,6 @@ export type Context = Record<string, unknown>;
 export interface WorkletFunction {
   _closure?: Context;
   __workletHash?: number;
-  __optimalization?: number;
 }
 
 export interface BasicWorkletFunction<T> extends WorkletFunction {
@@ -145,6 +144,21 @@ export interface Animation<T extends AnimationObject> extends AnimationObject {
   ) => void;
 }
 
+export enum SensorType {
+  ACCELEROMETER = 1,
+  GYROSCOPE = 2,
+  GRAVITY = 3,
+  MAGNETIC_FIELD = 4,
+  ROTATION = 5,
+}
+export enum IOSReferenceFrame {
+  XArbitraryZVertical,
+  XArbitraryCorrectedZVertical,
+  XMagneticNorthZVertical,
+  XTrueNorthZVertical,
+  Auto,
+}
+
 export interface NumericAnimation {
   current?: number;
 }
@@ -160,6 +174,7 @@ export type Value3D = {
   x: number;
   y: number;
   z: number;
+  interfaceOrientation: InterfaceOrientation;
 };
 
 export type ValueRotation = {
@@ -170,8 +185,16 @@ export type ValueRotation = {
   yaw: number;
   pitch: number;
   roll: number;
+  interfaceOrientation: InterfaceOrientation;
 };
 
+export enum InterfaceOrientation {
+  ROTATION_0 = 0,
+  ROTATION_90 = 90,
+  ROTATION_180 = 180,
+  ROTATION_270 = 270,
+}
+
 export type ShadowNodeWrapper = object;
 
 export enum KeyboardState {
@@ -195,3 +218,7 @@ export interface MeasuredDimensions {
   pageX: number;
   pageY: number;
 }
+
+export interface AnimatedKeyboardOptions {
+  isStatusBarTranslucentAndroid?: boolean;
+}

package/src/reanimated2/core.ts

@@ -1,6 +1,11 @@
 import NativeReanimatedModule from './NativeReanimated';
 import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
-import { BasicWorkletFunction, Value3D, ValueRotation } from './commonTypes';
+import {
+  AnimatedKeyboardOptions,
+  BasicWorkletFunction,
+  Value3D,
+  ValueRotation,
+} from './commonTypes';
 import {
   makeShareableCloneRecursive,
   makeShareable as makeShareableUnwrapped,
@@ -10,12 +15,14 @@ import {
   makeMutable as makeMutableUnwrapped,
   makeRemote as makeRemoteUnwrapped,
 } from './mutables';
-import { LayoutAnimationFunction } from './layoutReanimation';
+import {
+  LayoutAnimationFunction,
+  LayoutAnimationType,
+} from './layoutReanimation';
 import { initializeUIRuntime } from './initializers';
 
 export { stopMapper } from './mappers';
 export { runOnJS, runOnUI } from './threads';
-export { getTimestamp } from './time';
 
 export type ReanimatedConsole = Pick<
   Console,
@@ -110,9 +117,16 @@ export function registerEventHandler<T>(
   eventHash: string,
   eventHandler: (event: T) => void
 ): string {
+  function handleAndFlushImmediates(eventTimestamp: number, event: T) {
+    'worklet';
+    global.__frameTimestamp = eventTimestamp;
+    eventHandler(event);
+    global.__flushAnimationFrame(eventTimestamp);
+    global.__frameTimestamp = undefined;
+  }
   return NativeReanimatedModule.registerEventHandler(
     eventHash,
-    makeShareableCloneRecursive(eventHandler)
+    makeShareableCloneRecursive(handleAndFlushImmediates)
   );
 }
 
@@ -121,10 +135,22 @@ export function unregisterEventHandler(id: string): void {
 }
 
 export function subscribeForKeyboardEvents(
-  eventHandler: (state: number, height: number) => void
+  eventHandler: (state: number, height: number) => void,
+  options: AnimatedKeyboardOptions
 ): number {
+  // TODO: this should really go with the same code path as other events, that is
+  // via registerEventHandler. For now we are copying the code from there.
+  function handleAndFlushImmediates(state: number, height: number) {
+    'worklet';
+    const now = performance.now();
+    global.__frameTimestamp = now;
+    eventHandler(state, height);
+    global.__flushAnimationFrame(now);
+    global.__frameTimestamp = undefined;
+  }
   return NativeReanimatedModule.subscribeForKeyboardEvents(
-    makeShareableCloneRecursive(eventHandler)
+    makeShareableCloneRecursive(handleAndFlushImmediates),
+    options.isStatusBarTranslucentAndroid ?? false
   );
 }
 
@@ -135,11 +161,16 @@ export function unsubscribeFromKeyboardEvents(listenerId: number): void {
 export function registerSensor(
   sensorType: number,
   interval: number,
-  eventHandler: (data: Value3D | ValueRotation) => void
+  iosReferenceFrame: number,
+  eventHandler: (
+    data: Value3D | ValueRotation,
+    orientationDegrees: number
+  ) => void
 ): number {
   return NativeReanimatedModule.registerSensor(
     sensorType,
     interval,
+    iosReferenceFrame,
     makeShareableCloneRecursive(eventHandler)
   );
 }
@@ -184,12 +215,14 @@ export function enableLayoutAnimations(
 
 export function configureLayoutAnimations(
   viewTag: number,
-  type: string,
-  config: LayoutAnimationFunction | Keyframe
+  type: LayoutAnimationType,
+  config: LayoutAnimationFunction | Keyframe,
+  sharedTransitionTag = ''
 ): void {
   NativeReanimatedModule.configureLayoutAnimation(
     viewTag,
     type,
+    sharedTransitionTag,
     makeShareableCloneRecursive(config)
   );
 }

package/src/reanimated2/frameCallback/FrameCallbackRegistryUI.ts

@@ -1,4 +1,4 @@
-import { runOnUI } from '../core';
+import { runOnUIImmediately } from '../threads';
 
 type CallbackDetails = {
   callback: (frameInfo: FrameInfo) => void;
@@ -24,7 +24,7 @@ export interface FrameCallbackRegistryUI {
   manageStateFrameCallback: (callbackId: number, state: boolean) => void;
 }
 
-export const prepareUIRegistry = runOnUI(() => {
+export const prepareUIRegistry = runOnUIImmediately(() => {
   'worklet';
 
   const frameCallbackRegistry: FrameCallbackRegistryUI = {

package/src/reanimated2/globals.d.ts

@@ -15,8 +15,6 @@ declare global {
   const _WORKLET: boolean;
   const _IS_FABRIC: boolean;
   const _REANIMATED_VERSION_CPP: string;
-  const _frameTimestamp: number | null;
-  const _eventTimestamp: number;
   const __reanimatedModuleProxy: NativeReanimated;
   const evalWithSourceMap: (
     js: string,
@@ -26,8 +24,11 @@ declare global {
   const evalWithSourceUrl: (js: string, sourceURL: string) => any;
   const _log: (s: string) => void;
   const _getCurrentTime: () => number;
-  const _getTimestamp: () => number;
-  const _notifyAboutProgress: (tag: number, value: number) => void;
+  const _notifyAboutProgress: (
+    tag: number,
+    value: number,
+    isSharedTransition: boolean
+  ) => void;
   const _notifyAboutEnd: (
     tag: number,
     finished: boolean,
@@ -49,9 +50,7 @@ declare global {
     shadowNodeWrapper: ShadowNodeWrapper,
     props: StyleProps | AnimatedStyle
   ) => void;
-  const _removeShadowNodeFromRegistry: (
-    shadowNodeWrapper: ShadowNodeWrapper
-  ) => void;
+  const _removeShadowNodeFromRegistry: (viewTag: number) => void;
   const _measure: (viewTag: number) => MeasuredDimensions;
   const _scrollTo: (
     viewTag: number,
@@ -64,7 +63,6 @@ declare global {
     commandName: string,
     args: Array<unknown>
   ) => void;
-  const _chronoNow: () => number;
   const performance: { now: () => number };
   const ReanimatedDataMock: {
     now: () => number;
@@ -74,6 +72,7 @@ declare global {
   };
   const _frameCallbackRegistry: FrameCallbackRegistryUI;
   const requestAnimationFrame: (callback: (time: number) => void) => number;
+  const setImmediate: (callback: (time: number) => void) => number;
   const console: Console;
 
   namespace NodeJS {
@@ -81,9 +80,8 @@ declare global {
       _WORKLET: boolean;
       _IS_FABRIC: boolean;
       _REANIMATED_VERSION_CPP: string;
-      _frameTimestamp: number | null;
-      _eventTimestamp: number;
       __reanimatedModuleProxy: NativeReanimated;
+      __frameTimestamp?: number;
       evalWithSourceMap: (
         js: string,
         sourceURL: string,
@@ -92,7 +90,6 @@ declare global {
       evalWithSourceUrl: (js: string, sourceURL: string) => any;
       _log: (s: string) => void;
       _getCurrentTime: () => number;
-      _getTimestamp: () => number;
       _setGestureState: (handlerTag: number, newState: number) => void;
       _makeShareableClone: (value: any) => any;
       _updateDataSynchronously: (
@@ -109,9 +106,7 @@ declare global {
         shadowNodeWrapper: ShadowNodeWrapper,
         props: StyleProps | AnimatedStyle
       ) => void;
-      _removeShadowNodeFromRegistry: (
-        shadowNodeWrapper: ShadowNodeWrapper
-      ) => void;
+      _removeShadowNodeFromRegistry: (viewTag: number) => void;
       _measure: (viewTag: number) => MeasuredDimensions;
       _scrollTo: (
         viewTag: number,
@@ -124,7 +119,6 @@ declare global {
         commandName: string,
         args: Array<unknown>
       ) => void;
-      _chronoNow: () => number;
       performance: { now: () => number };
       LayoutAnimationsManager: {
         start: LayoutAnimationStartFunction;
@@ -139,7 +133,10 @@ declare global {
       __workletsCache?: Map<string, (...args: any[]) => any>;
       __handleCache?: WeakMap<any, any>;
       __mapperRegistry?: MapperRegistry;
+      __flushImmediates: () => void;
+      __flushAnimationFrame: (frameTimestamp: number) => void;
       requestAnimationFrame: (callback: (time: number) => void) => number;
+      setImmediate: (callback: (time: number) => void) => number;
       console: Console;
     }
   }

package/src/reanimated2/hook/index.ts

@@ -20,7 +20,7 @@ export { useAnimatedScrollHandler } from './useAnimatedScrollHandler';
 export type { ScrollHandler, ScrollHandlers } from './useAnimatedScrollHandler';
 export { useDerivedValue } from './useDerivedValue';
 export type { DerivedValue } from './useDerivedValue';
-export { useAnimatedSensor, SensorType } from './useAnimatedSensor';
+export { useAnimatedSensor } from './useAnimatedSensor';
 export { useFrameCallback } from './useFrameCallback';
 export type { FrameCallback } from './useFrameCallback';
 export { useAnimatedKeyboard } from './useAnimatedKeyboard';

package/src/reanimated2/hook/useAnimatedKeyboard.ts

@@ -4,9 +4,15 @@ import {
   subscribeForKeyboardEvents,
   unsubscribeFromKeyboardEvents,
 } from '../core';
-import { AnimatedKeyboardInfo, KeyboardState } from '../commonTypes';
+import {
+  AnimatedKeyboardInfo,
+  AnimatedKeyboardOptions,
+  KeyboardState,
+} from '../commonTypes';
 
-export function useAnimatedKeyboard(): AnimatedKeyboardInfo {
+export function useAnimatedKeyboard(
+  options: AnimatedKeyboardOptions = { isStatusBarTranslucentAndroid: false }
+): AnimatedKeyboardInfo {
   const ref = useRef<AnimatedKeyboardInfo | null>(null);
   const listenerId = useRef<number>(-1);
   const isSubscribed = useRef<boolean>(false);
@@ -20,7 +26,7 @@ export function useAnimatedKeyboard(): AnimatedKeyboardInfo {
       'worklet';
       keyboardEventData.state.value = state;
       keyboardEventData.height.value = height;
-    });
+    }, options);
     ref.current = keyboardEventData;
     isSubscribed.current = true;
   }
@@ -32,7 +38,7 @@ export function useAnimatedKeyboard(): AnimatedKeyboardInfo {
         'worklet';
         keyboardEventData.state.value = state;
         keyboardEventData.height.value = height;
-      });
+      }, options);
       isSubscribed.current = true;
     }
     return () => {

package/src/reanimated2/hook/useAnimatedReaction.ts

@@ -3,6 +3,7 @@ import { BasicWorkletFunction, WorkletFunction } from '../commonTypes';
 import { startMapper, stopMapper } from '../core';
 import { DependencyList } from './commonTypes';
 import { useSharedValue } from './useSharedValue';
+import { shouldBeUseWeb } from '../PlatformChecker';
 
 export interface AnimatedReactionWorkletFunction<T> extends WorkletFunction {
   (prepared: T, previous: T | null): void;
@@ -19,6 +20,16 @@ export function useAnimatedReaction<T>(
   dependencies: DependencyList
 ): void {
   const previous = useSharedValue<T | null>(null);
+
+  let inputs = Object.values(prepare._closure ?? {});
+
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+  }
+
   if (dependencies === undefined) {
     dependencies = [
       Object.values(prepare._closure ?? {}),
@@ -37,11 +48,7 @@ export function useAnimatedReaction<T>(
       react(input, previous.value);
       previous.value = input;
     };
-    const mapperId = startMapper(
-      fun,
-      Object.values(prepare._closure ?? {}),
-      []
-    );
+    const mapperId = startMapper(fun, inputs, []);
     return () => {
       stopMapper(mapperId);
     };

package/src/reanimated2/hook/useAnimatedRef.ts

@@ -6,16 +6,13 @@ import { getTag } from '../NativeMethods';
 import { getShadowNodeWrapperFromHostInstance } from '../fabricUtils';
 import {
   makeShareableCloneRecursive,
-  makeShareableShadowNodeWrapper,
   registerShareableMapping,
 } from '../shareables';
 
 function getShareableShadowNodeFromComponent(
   component: Component
 ): ShadowNodeWrapper {
-  return makeShareableShadowNodeWrapper(
-    getShadowNodeWrapperFromHostInstance(component)
-  );
+  return getShadowNodeWrapperFromHostInstance(component);
 }
 
 const getTagValueFunction = global._IS_FABRIC

package/src/reanimated2/hook/useAnimatedSensor.ts

@@ -1,17 +1,18 @@
 import { useEffect, useRef } from 'react';
 import { makeMutable, registerSensor, unregisterSensor } from '../core';
-import { SharedValue, Value3D, ValueRotation } from '../commonTypes';
-
-export enum SensorType {
-  ACCELEROMETER = 1,
-  GYROSCOPE = 2,
-  GRAVITY = 3,
-  MAGNETIC_FIELD = 4,
-  ROTATION = 5,
-}
+import {
+  SensorType,
+  SharedValue,
+  Value3D,
+  ValueRotation,
+  IOSReferenceFrame,
+} from '../commonTypes';
+import { flushImmediates } from '../threads';
 
 export type SensorConfig = {
   interval: number | 'auto';
+  adjustToInterfaceOrientation: boolean;
+  iosReferenceFrame: IOSReferenceFrame;
 };
 
 export type AnimatedSensor = {
@@ -33,19 +34,81 @@ function initSensorData(
       yaw: 0,
       pitch: 0,
       roll: 0,
+      interfaceOrientation: 0,
     });
   } else {
     return makeMutable<Value3D | ValueRotation>({
       x: 0,
       y: 0,
       z: 0,
+      interfaceOrientation: 0,
     });
   }
 }
 
+// euler angles are in order ZXY, z = yaw, x = pitch, y = roll
+// https://github.com/mrdoob/three.js/blob/dev/src/math/Quaternion.js#L237
+function eulerToQuaternion(pitch: number, roll: number, yaw: number) {
+  'worklet';
+  const c1 = Math.cos(pitch / 2);
+  const s1 = Math.sin(pitch / 2);
+  const c2 = Math.cos(roll / 2);
+  const s2 = Math.sin(roll / 2);
+  const c3 = Math.cos(yaw / 2);
+  const s3 = Math.sin(yaw / 2);
+
+  return [
+    s1 * c2 * c3 - c1 * s2 * s3,
+    c1 * s2 * c3 + s1 * c2 * s3,
+    c1 * c2 * s3 + s1 * s2 * c3,
+    c1 * c2 * c3 - s1 * s2 * s3,
+  ];
+}
+
+function adjustRotationToInterfaceOrientation(data: ValueRotation) {
+  'worklet';
+  const { interfaceOrientation, pitch, roll, yaw } = data;
+  if (interfaceOrientation === 90) {
+    data.pitch = roll;
+    data.roll = -pitch;
+    data.yaw = yaw - Math.PI / 2;
+  } else if (interfaceOrientation === 270) {
+    data.pitch = -roll;
+    data.roll = pitch;
+    data.yaw = yaw + Math.PI / 2;
+  } else if (interfaceOrientation === 180) {
+    data.pitch *= -1;
+    data.roll *= -1;
+    data.yaw *= -1;
+  }
+
+  const q = eulerToQuaternion(data.pitch, data.roll, data.yaw);
+  data.qx = q[0];
+  data.qy = q[1];
+  data.qz = q[2];
+  data.qw = q[3];
+  return data;
+}
+
+function adjustVectorToInterfaceOrientation(data: Value3D) {
+  'worklet';
+  const { interfaceOrientation, x, y } = data;
+  if (interfaceOrientation === 90) {
+    data.x = -y;
+    data.y = x;
+  } else if (interfaceOrientation === 270) {
+    data.x = y;
+    data.y = -x;
+  } else if (interfaceOrientation === 180) {
+    data.x *= -1;
+    data.y *= -1;
+  }
+  return data;
+}
+
 export function useAnimatedSensor(
   sensorType: SensorType,
-  userConfig?: SensorConfig
+  userConfig?: Partial<SensorConfig>
 ): AnimatedSensor {
   const ref = useRef<AnimatedSensor>({
     sensor: initSensorData(sensorType),
@@ -55,18 +118,34 @@ export function useAnimatedSensor(
     isAvailable: false,
     config: {
       interval: 0,
+      adjustToInterfaceOrientation: true,
+      iosReferenceFrame: IOSReferenceFrame.Auto,
     },
   });
 
   useEffect(() => {
-    ref.current.config = { interval: 'auto', ...userConfig };
+    ref.current.config = {
+      interval: 'auto',
+      adjustToInterfaceOrientation: true,
+      iosReferenceFrame: IOSReferenceFrame.Auto,
+      ...userConfig,
+    };
     const sensorData = ref.current.sensor!;
     const id = registerSensor(
       sensorType,
       ref.current.config.interval === 'auto' ? -1 : ref.current.config.interval,
+      ref.current.config.iosReferenceFrame,
       (data) => {
         'worklet';
+        if (ref.current.config.adjustToInterfaceOrientation) {
+          if (sensorType === SensorType.ROTATION) {
+            data = adjustRotationToInterfaceOrientation(data as ValueRotation);
+          } else {
+            data = adjustVectorToInterfaceOrientation(data as Value3D);
+          }
+        }
         sensorData.value = data;
+        flushImmediates();
       }
     );