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

package/src/reanimated2/globals.d.ts

@@ -6,7 +6,6 @@ import type {
   ShareableRef,
   ShareableSyncDataHolderRef,
 } from './commonTypes';
-import type { ReanimatedConsole } from './core';
 import type { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI';
 import type { ShadowNodeWrapper } from './hook/commonTypes';
 import { LayoutAnimationStartFunction } from './layoutReanimation';
@@ -16,14 +15,20 @@ 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 _setGlobalConsole: (console?: ReanimatedConsole) => void;
+  const evalWithSourceMap: (
+    js: string,
+    sourceURL: string,
+    sourceMap: string
+  ) => any;
+  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,
@@ -45,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,
@@ -60,25 +63,33 @@ declare global {
     commandName: string,
     args: Array<unknown>
   ) => void;
-  const _chronoNow: () => number;
   const performance: { now: () => number };
   const ReanimatedDataMock: {
     now: () => number;
   };
+  const ErrorUtils: {
+    reportFatalError: (error: Error) => void;
+  };
   const _frameCallbackRegistry: FrameCallbackRegistryUI;
+  const requestAnimationFrame: (callback: (time: number) => void) => number;
+  const setImmediate: (callback: (time: number) => void) => number;
+  const console: Console;
 
   namespace NodeJS {
     interface Global {
       _WORKLET: boolean;
       _IS_FABRIC: boolean;
       _REANIMATED_VERSION_CPP: string;
-      _frameTimestamp: number | null;
-      _eventTimestamp: number;
       __reanimatedModuleProxy: NativeReanimated;
-      _setGlobalConsole: (console?: ReanimatedConsole) => void;
+      __frameTimestamp?: number;
+      evalWithSourceMap: (
+        js: string,
+        sourceURL: string,
+        sourceMap: string
+      ) => any;
+      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: (
@@ -95,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,
@@ -110,7 +119,6 @@ declare global {
         commandName: string,
         args: Array<unknown>
       ) => void;
-      _chronoNow: () => number;
       performance: { now: () => number };
       LayoutAnimationsManager: {
         start: LayoutAnimationStartFunction;
@@ -118,10 +126,18 @@ declare global {
       ReanimatedDataMock: {
         now: () => number;
       };
+      ErrorUtils: {
+        reportFatalError: (error: Error) => void;
+      };
       _frameCallbackRegistry: FrameCallbackRegistryUI;
       __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,17 @@
 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';
 
 export type SensorConfig = {
   interval: number | 'auto';
+  adjustToInterfaceOrientation: boolean;
+  iosReferenceFrame: IOSReferenceFrame;
 };
 
 export type AnimatedSensor = {
@@ -33,19 +33,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,17 +117,32 @@ 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;
       }
     );

package/src/reanimated2/hook/useAnimatedStyle.ts

@@ -1,17 +1,14 @@
-/* global _frameTimestamp */
 import { MutableRefObject, useEffect, useRef } from 'react';
 
-import { startMapper, stopMapper, makeRemote, getTimestamp } from '../core';
+import { startMapper, stopMapper, makeRemote } from '../core';
 import updateProps, { updatePropsJestWrapper } from '../UpdateProps';
 import { initialUpdaterRun } from '../animation';
 import NativeReanimatedModule from '../NativeReanimated';
 import { useSharedValue } from './useSharedValue';
 import {
   buildWorkletsHash,
-  getStyleWithoutAnimations,
   isAnimated,
-  parseColors,
-  styleDiff,
+  shallowEqual,
   validateAnimatedStyles,
 } from './utils';
 import { DependencyList, Descriptor } from './commonTypes';
@@ -31,6 +28,7 @@ import {
   BasicWorkletFunctionOptional,
   NestedObjectValues,
   SharedValue,
+  StyleProps,
 } from '../commonTypes';
 export interface AnimatedStyleResult {
   viewDescriptors: ViewDescriptorsSet;
@@ -56,6 +54,7 @@ interface AnimationRef {
 }
 
 function prepareAnimation(
+  frameTimestamp: number,
   animatedProp: AnimatedStyle,
   lastAnimation: AnimatedStyle,
   lastValue: AnimatedStyle
@@ -64,6 +63,7 @@ function prepareAnimation(
   if (Array.isArray(animatedProp)) {
     animatedProp.forEach((prop, index) => {
       prepareAnimation(
+        frameTimestamp,
         prop,
         lastAnimation && lastAnimation[index],
         lastValue && lastValue[index]
@@ -98,12 +98,13 @@ function prepareAnimation(
     animation.callStart = (timestamp: Timestamp) => {
       animation.onStart(animation, value, timestamp, lastAnimation);
     };
-    animation.callStart(getTimestamp());
+    animation.callStart(frameTimestamp);
     animation.callStart = null;
   } else if (typeof animatedProp === 'object') {
     // it is an object
     Object.keys(animatedProp).forEach((key) =>
       prepareAnimation(
+        frameTimestamp,
         animatedProp[key],
         lastAnimation && lastAnimation[key],
         lastValue && lastValue[key]
@@ -184,23 +185,28 @@ function styleUpdater(
   const animations = state.animations ?? {};
   const newValues = updater() ?? {};
   const oldValues = state.last;
+  const nonAnimatedNewValues: StyleProps = {};
 
   let hasAnimations = false;
+  let frameTimestamp: number | undefined;
+  let hasNonAnimatedValues = false;
   for (const key in newValues) {
     const value = newValues[key];
     if (isAnimated(value)) {
-      prepareAnimation(value, animations[key], oldValues[key]);
+      frameTimestamp = global.__frameTimestamp || performance.now();
+      prepareAnimation(frameTimestamp, value, animations[key], oldValues[key]);
       animations[key] = value;
       hasAnimations = true;
     } else {
+      hasNonAnimatedValues = true;
+      nonAnimatedNewValues[key] = value;
       delete animations[key];
     }
   }
 
   if (hasAnimations) {
-    const frame = (_timestamp?: Timestamp) => {
+    const frame = (timestamp: Timestamp) => {
       const { animations, last, isAnimationCancelled } = state;
-      const timestamp = _timestamp ?? getTimestamp();
       if (isAnimationCancelled) {
         state.isAnimationRunning = false;
         return;
@@ -239,27 +245,21 @@ function styleUpdater(
     if (!state.isAnimationRunning) {
       state.isAnimationCancelled = false;
       state.isAnimationRunning = true;
-      if (_frameTimestamp) {
-        frame(_frameTimestamp);
-      } else {
-        requestAnimationFrame(frame);
-      }
+      frame(frameTimestamp!);
     }
-    state.last = Object.assign({}, oldValues, newValues);
-    const style = getStyleWithoutAnimations(state.last);
-    if (style) {
-      updateProps(viewDescriptors, style, maybeViewRef);
+
+    if (hasNonAnimatedValues) {
+      updateProps(viewDescriptors, nonAnimatedNewValues, maybeViewRef);
     }
   } else {
     state.isAnimationCancelled = true;
     state.animations = [];
 
-    const diff = styleDiff(oldValues, newValues);
-    state.last = Object.assign({}, oldValues, newValues);
-    if (diff) {
+    if (!shallowEqual(oldValues, newValues)) {
       updateProps(viewDescriptors, newValues, maybeViewRef);
     }
   }
+  state.last = newValues;
 }
 
 function jestStyleUpdater(
@@ -278,6 +278,7 @@ function jestStyleUpdater(
 
   // extract animated props
   let hasAnimations = false;
+  let frameTimestamp: number | undefined;
   Object.keys(animations).forEach((key) => {
     const value = newValues[key];
     if (!isAnimated(value)) {
@@ -287,15 +288,15 @@ function jestStyleUpdater(
   Object.keys(newValues).forEach((key) => {
     const value = newValues[key];
     if (isAnimated(value)) {
-      prepareAnimation(value, animations[key], oldValues[key]);
+      frameTimestamp = global.__frameTimestamp || performance.now();
+      prepareAnimation(frameTimestamp, value, animations[key], oldValues[key]);
       animations[key] = value;
       hasAnimations = true;
     }
   });
 
-  function frame(_timestamp?: Timestamp) {
+  function frame(timestamp: Timestamp) {
     const { animations, last, isAnimationCancelled } = state;
-    const timestamp = _timestamp ?? getTimestamp();
     if (isAnimationCancelled) {
       state.isAnimationRunning = false;
       return;
@@ -341,11 +342,7 @@ function jestStyleUpdater(
     if (!state.isAnimationRunning) {
       state.isAnimationCancelled = false;
       state.isAnimationRunning = true;
-      if (_frameTimestamp) {
-        frame(_frameTimestamp);
-      } else {
-        requestAnimationFrame(frame);
-      }
+      frame(frameTimestamp!);
     }
   } else {
     state.isAnimationCancelled = true;
@@ -353,13 +350,12 @@ function jestStyleUpdater(
   }
 
   // calculate diff
-  const diff = styleDiff(oldValues, newValues);
-  state.last = Object.assign({}, oldValues, newValues);
+  state.last = newValues;
 
-  if (Object.keys(diff).length !== 0) {
+  if (!shallowEqual(oldValues, newValues)) {
     updatePropsJestWrapper(
       viewDescriptors,
-      diff,
+      newValues,
       maybeViewRef,
       animatedStyle,
       adapters
@@ -401,7 +397,20 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
 ): AnimatedStyleResult {
   const viewsRef: ViewRefSet<any> = makeViewsRefSet();
   const initRef = useRef<AnimationRef>();
-  const inputs = Object.values(updater._closure ?? {});
+  let inputs = Object.values(updater._closure ?? {});
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+    if (__DEV__ && !inputs.length && !dependencies && !updater.__workletHash) {
+      throw new Error(
+        `useAnimatedStyle was used without a dependency array or Babel plugin. Please explicitly pass a dependency array, or enable the Babel/SWC plugin.
+
+For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support#web-without-a-babel-plugin`
+      );
+    }
+  }
   const adaptersArray: AdapterWorkletFunction[] = adapters
     ? Array.isArray(adapters)
       ? adapters
@@ -460,15 +469,6 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
       };
     }
 
-    if (!shouldBeUseWeb()) {
-      updaterFn = () => {
-        'worklet';
-        const style = updaterFn();
-        parseColors(style);
-        return style;
-      };
-    }
-
     if (isJest()) {
       fun = () => {
         'worklet';
@@ -503,8 +503,6 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
   useEffect(() => {
     animationsActive.value = true;
     return () => {
-      // initRef.current = null;
-      // viewsRef = null;
       animationsActive.value = false;
     };
   }, []);

package/src/reanimated2/hook/useDerivedValue.ts

@@ -3,6 +3,7 @@ import { initialUpdaterRun } from '../animation';
 import { BasicWorkletFunction, SharedValue } from '../commonTypes';
 import { makeMutable, startMapper, stopMapper } from '../core';
 import { DependencyList } from './commonTypes';
+import { shouldBeUseWeb } from '../PlatformChecker';
 
 export type DerivedValue<T> = Readonly<SharedValue<T>>;
 
@@ -11,7 +12,13 @@ export function useDerivedValue<T>(
   dependencies: DependencyList
 ): DerivedValue<T> {
   const initRef = useRef<SharedValue<T> | null>(null);
-  const inputs = Object.values(processor._closure ?? {});
+  let inputs = Object.values(processor._closure ?? {});
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+  }
 
   // build dependencies
   if (dependencies === undefined) {

package/src/reanimated2/hook/useScrollViewOffset.ts

@@ -7,7 +7,7 @@ import { findNodeHandle } from 'react-native';
 import { useEvent } from './utils';
 import { useSharedValue } from './useSharedValue';
 
-const subscribeForEvents = [
+const scrollEventNames = [
   'onScroll',
   'onScrollBeginDrag',
   'onScrollEndDrag',
@@ -26,7 +26,7 @@ export function useScrollViewOffset(
       event.contentOffset.x === 0
         ? event.contentOffset.y
         : event.contentOffset.x;
-  }, subscribeForEvents);
+  }, scrollEventNames);
 
   useEffect(() => {
     const viewTag = findNodeHandle(aref.current);