react-native-reanimated 2.3.3 → 2.5.0

package/src/reanimated2/animation/styleAnimation.ts

@@ -1,35 +1,18 @@
 import { defineAnimation } from './util';
 import {
   Timestamp,
-  HigherOrderAnimation,
-  AnimationCallback,
   AnimatableValue,
   AnimationObject,
   Animation,
-} from './commonTypes';
-import {
   AnimatedStyle,
   NestedObject,
   NestedObjectValues,
-  StyleProps,
 } from '../commonTypes';
+import { StyleLayoutAnimation } from './commonTypes';
 import { withTiming } from './timing';
 import { ColorProperties } from '../UpdateProps';
 import { processColor } from '../Colors';
 
-export interface StyleLayoutAnimation extends HigherOrderAnimation {
-  current: StyleProps;
-  styleAnimations: AnimatedStyle;
-  onFrame: (animation: StyleLayoutAnimation, timestamp: Timestamp) => boolean;
-  onStart: (
-    nextAnimation: StyleLayoutAnimation,
-    current: AnimatedStyle,
-    timestamp: Timestamp,
-    previousAnimation: StyleLayoutAnimation
-  ) => void;
-  callback?: AnimationCallback;
-}
-
 // resolves path to value for nested objects
 // if path cannot be resolved returns undefined
 export function resolvePath<T>(
@@ -74,9 +57,8 @@ export function setPath<T>(
     currObj = currObj[keys[i]];
   }
 
-  (currObj as { [key: string]: NestedObjectValues<T> })[
-    keys[keys.length - 1]
-  ] = value;
+  (currObj as { [key: string]: NestedObjectValues<T> })[keys[keys.length - 1]] =
+    value;
 }
 
 interface NestedObjectEntry<T> {
@@ -100,7 +82,8 @@ export function withStyleAnimation(
         { value: animation.styleAnimations, path: [] },
       ];
       while (entriesToCheck.length > 0) {
-        const currentEntry: NestedObjectEntry<AnimationObject> = entriesToCheck.pop() as NestedObjectEntry<AnimationObject>;
+        const currentEntry: NestedObjectEntry<AnimationObject> =
+          entriesToCheck.pop() as NestedObjectEntry<AnimationObject>;
         if (Array.isArray(currentEntry.value)) {
           for (let index = 0; index < currentEntry.value.length; index++) {
             entriesToCheck.push({
@@ -120,7 +103,8 @@ export function withStyleAnimation(
             });
           }
         } else {
-          const currentStyleAnimation: AnimationObject = currentEntry.value as AnimationObject;
+          const currentStyleAnimation: AnimationObject =
+            currentEntry.value as AnimationObject;
           if (currentStyleAnimation.finished) {
             continue;
           }
@@ -228,7 +212,8 @@ export function withStyleAnimation(
           styleAnimations,
         ];
         while (animationsToCheck.length > 0) {
-          const currentAnimation: NestedObjectValues<AnimationObject> = animationsToCheck.pop() as NestedObjectValues<AnimationObject>;
+          const currentAnimation: NestedObjectValues<AnimationObject> =
+            animationsToCheck.pop() as NestedObjectValues<AnimationObject>;
           if (Array.isArray(currentAnimation)) {
             for (const element of currentAnimation) {
               animationsToCheck.push(element);
@@ -241,7 +226,8 @@ export function withStyleAnimation(
               animationsToCheck.push(value);
             }
           } else {
-            const currentStyleAnimation: AnimationObject = currentAnimation as AnimationObject;
+            const currentStyleAnimation: AnimationObject =
+              currentAnimation as AnimationObject;
             if (
               !currentStyleAnimation.finished &&
               currentStyleAnimation.callback

package/src/reanimated2/animation/timing.ts

@@ -5,7 +5,7 @@ import {
   AnimationCallback,
   Timestamp,
   AnimatableValue,
-} from './commonTypes';
+} from '../commonTypes';
 
 interface TimingConfig {
   duration?: number;
@@ -80,7 +80,9 @@ export function withTiming(
         // new timing over the old one with the same parameters. If so, we want
         // to copy animation timeline properties
         animation.startTime = (previousAnimation as TimingAnimation).startTime;
-        animation.startValue = (previousAnimation as TimingAnimation).startValue;
+        animation.startValue = (
+          previousAnimation as TimingAnimation
+        ).startValue;
       } else {
         animation.startTime = now;
         animation.startValue = value;

package/src/reanimated2/animation/util.ts

@@ -1,20 +1,23 @@
 import {
-  Animation,
-  AnimationObject,
   HigherOrderAnimation,
   NextAnimation,
-  AnimatableValue,
-  Timestamp,
+  DelayAnimation,
+  RepeatAnimation,
+  SequenceAnimation,
+  StyleLayoutAnimation,
 } from './commonTypes';
 /* global _WORKLET */
 import { ParsedColorArray, convertToHSVA, isColor, toRGBA } from '../Colors';
 
-import { AnimatedStyle, SharedValue } from '../commonTypes';
-import { DelayAnimation } from './delay';
+import {
+  AnimatedStyle,
+  SharedValue,
+  AnimatableValue,
+  Animation,
+  AnimationObject,
+  Timestamp,
+} from '../commonTypes';
 import NativeReanimatedModule from '../NativeReanimated';
-import { RepeatAnimation } from './repeat';
-import { SequenceAnimation } from './sequence';
-import { StyleLayoutAnimation } from './styleAnimation';
 
 let IN_STYLE_UPDATER = false;
 
@@ -225,17 +228,16 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
   };
 }
 
-type AnimationToDecoration<
-  T extends AnimationObject | StyleLayoutAnimation
-> = T extends StyleLayoutAnimation
-  ? Record<string, unknown>
-  : T extends DelayAnimation
-  ? NextAnimation<DelayAnimation>
-  : T extends RepeatAnimation
-  ? NextAnimation<RepeatAnimation>
-  : T extends SequenceAnimation
-  ? NextAnimation<SequenceAnimation>
-  : AnimatableValue | T;
+type AnimationToDecoration<T extends AnimationObject | StyleLayoutAnimation> =
+  T extends StyleLayoutAnimation
+    ? Record<string, unknown>
+    : T extends DelayAnimation
+    ? NextAnimation<DelayAnimation>
+    : T extends RepeatAnimation
+    ? NextAnimation<RepeatAnimation>
+    : T extends SequenceAnimation
+    ? NextAnimation<SequenceAnimation>
+    : AnimatableValue | T;
 
 export function defineAnimation<
   T extends AnimationObject | StyleLayoutAnimation

package/src/reanimated2/commonTypes.ts

@@ -15,7 +15,6 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { Animation, AnimationObject } from './animation/commonTypes';
 import { Context } from './hook/commonTypes';
 
 export type TransformProperty =
@@ -59,6 +58,10 @@ export interface BasicWorkletFunction<T> extends WorkletFunction {
   (): T;
 }
 
+export interface BasicWorkletFunctionOptional<T> extends WorkletFunction {
+  (): Partial<T>;
+}
+
 export interface NativeEvent<T> {
   nativeEvent: T;
 }
@@ -79,3 +82,67 @@ export type NestedObjectValues<T> =
 export interface AdapterWorkletFunction extends WorkletFunction {
   (value: NestedObject<string | number | AnimationObject>): void;
 }
+
+export type AnimatableValue = number | string | Array<number>;
+
+export interface AnimationObject {
+  [key: string]: any;
+  callback: AnimationCallback;
+  current?: AnimatableValue;
+  toValue?: AnimationObject['current'];
+  startValue?: AnimationObject['current'];
+  finished?: boolean;
+  strippedCurrent?: number;
+  cancelled?: boolean;
+
+  __prefix?: string;
+  __suffix?: string;
+  onFrame: (animation: any, timestamp: Timestamp) => boolean;
+  onStart: (
+    nextAnimation: any,
+    current: any,
+    timestamp: Timestamp,
+    previousAnimation: any
+  ) => void;
+}
+
+export interface Animation<T extends AnimationObject> extends AnimationObject {
+  onFrame: (animation: T, timestamp: Timestamp) => boolean;
+  onStart: (
+    nextAnimation: T,
+    current: T extends NumericAnimation ? number : AnimatableValue,
+    timestamp: Timestamp,
+    previousAnimation: T
+  ) => void;
+}
+
+export interface NumericAnimation {
+  current?: number;
+}
+
+export type AnimationCallback = (
+  finished?: boolean,
+  current?: AnimatableValue
+) => void;
+
+export type Timestamp = number;
+
+export type Value3D = {
+  x: number;
+  y: number;
+  z: number;
+};
+
+export type SensorValue3D = SharedValue<Value3D>;
+
+export type ValueRotation = {
+  qw: number;
+  qx: number;
+  qy: number;
+  qz: number;
+  yaw: number;
+  pitch: number;
+  roll: number;
+};
+
+export type SensorValueRotation = SharedValue<ValueRotation>;

package/src/reanimated2/component/FlatList.tsx

@@ -13,7 +13,8 @@ const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
     return (
       <WrappedComponents.View
         layout={itemLayoutAnimation}
-        onLayout={props.onLayout}>
+        onLayout={props.onLayout}
+      >
         {props.children}
       </WrappedComponents.View>
     );

package/src/reanimated2/core.ts

@@ -7,12 +7,10 @@ import {
   WorkletFunction,
   ComplexWorkletFunction,
   SharedValue,
-} from './commonTypes';
-import {
   AnimationObject,
   AnimatableValue,
   Timestamp,
-} from './animation/commonTypes';
+} from './commonTypes';
 import { Descriptor } from './hook/commonTypes';
 import JSReanimated from './js-reanimated/JSReanimated';
 
@@ -65,7 +63,7 @@ export const checkPluginState: (throwError: boolean) => boolean = (
 export const isConfigured: (throwError?: boolean) => boolean = (
   throwError = false
 ) => {
-  return checkPluginState(throwError) && !NativeReanimatedModule.useOnlyV1;
+  return checkPluginState(throwError);
 };
 
 export const isConfiguredCheck: () => void = () => {
@@ -364,32 +362,30 @@ export function runOnJS<A extends any[], R>(
   }
 }
 
-if (!NativeReanimatedModule.useOnlyV1) {
-  NativeReanimatedModule.installCoreFunctions(
-    NativeReanimatedModule.native
-      ? (workletValueSetter as <T>(value: T) => void)
-      : (workletValueSetterJS as <T>(value: T) => void)
-  );
+NativeReanimatedModule.installCoreFunctions(
+  NativeReanimatedModule.native
+    ? (workletValueSetter as <T>(value: T) => void)
+    : (workletValueSetterJS as <T>(value: T) => void)
+);
 
-  if (!isWeb() && isConfigured()) {
-    const capturableConsole = console;
-    runOnUI(() => {
-      'worklet';
-      const console = {
-        debug: runOnJS(capturableConsole.debug),
-        log: runOnJS(capturableConsole.log),
-        warn: runOnJS(capturableConsole.warn),
-        error: runOnJS(capturableConsole.error),
-        info: runOnJS(capturableConsole.info),
-      };
-      _setGlobalConsole(console);
-      if (global.performance == null) {
-        global.performance = {
-          now: global._chronoNow,
-        };
-      }
-    })();
-  }
+if (!isWeb() && isConfigured()) {
+  const capturableConsole = console;
+  runOnUI(() => {
+    'worklet';
+    const console = {
+      debug: runOnJS(capturableConsole.debug),
+      log: runOnJS(capturableConsole.log),
+      warn: runOnJS(capturableConsole.warn),
+      error: runOnJS(capturableConsole.error),
+      info: runOnJS(capturableConsole.info),
+    };
+    _setGlobalConsole(console);
+    if (global.performance == null) {
+      global.performance = {
+        now: global._chronoNow,
+      } as any; // due to conflict with lib.dom.d.ts -> Performance
+    }
+  })();
 }
 
 type FeaturesConfig = {
@@ -420,3 +416,13 @@ export function enableLayoutAnimations(
     NativeReanimatedModule.enableLayoutAnimations(flag);
   }
 }
+
+export function configureProps(uiProps: string[], nativeProps: string[]): void {
+  if (!nativeShouldBeMock()) {
+    NativeReanimatedModule.configureProps(uiProps, nativeProps);
+  }
+}
+
+export function jestResetJsReanimatedModule() {
+  (NativeReanimatedModule as JSReanimated).jestResetModule();
+}

package/src/reanimated2/globals.d.ts

@@ -27,6 +27,9 @@ declare global {
     animated: boolean
   ) => void;
   const _chronoNow: () => number;
+  const ReanimatedDataMock: {
+    now: () => number;
+  };
   namespace NodeJS {
     interface Global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
@@ -50,6 +53,9 @@ declare global {
           yogaValues: unknown
         ): void;
       };
+      ReanimatedDataMock: {
+        now: () => number;
+      };
     }
   }
 }

package/src/reanimated2/hook/commonTypes.ts

@@ -10,3 +10,8 @@ export interface Descriptor {
   tag: number;
   name: string;
 }
+
+export interface RefObjectFunction<T> {
+  current: T | null;
+  (component?: T): number;
+}

package/src/reanimated2/hook/index.ts

@@ -23,3 +23,4 @@ export {
   ScrollHandlers,
 } from './useAnimatedScrollHandler';
 export { useDerivedValue, DerivedValue } from './useDerivedValue';
+export { useAnimatedSensor, SensorType } from './useAnimatedSensor';

package/src/reanimated2/hook/useAnimatedGestureHandler.ts

@@ -1,6 +1,5 @@
 import { MutableRefObject } from 'react';
 import { WorkletFunction } from '../commonTypes';
-import { isWeb } from '../PlatformChecker';
 import WorkletEventHandler from '../WorkletEventHandler';
 import { Context, DependencyList } from './commonTypes';
 import { useEvent, useHandler } from './Hooks';
@@ -98,7 +97,7 @@ export function useAnimatedGestureHandler<
     }
   };
 
-  if (isWeb()) {
+  if (useWeb) {
     return handler;
   }
 

package/src/reanimated2/hook/useAnimatedRef.ts

@@ -1,11 +1,7 @@
 import { Component, useRef } from 'react';
 import { getTag } from '../NativeMethods';
 import { useSharedValue } from './useSharedValue';
-
-export interface RefObjectFunction<T> {
-  current: T | null;
-  (component?: T): number;
-}
+import { RefObjectFunction } from './commonTypes';
 
 export function useAnimatedRef<T extends Component>(): RefObjectFunction<T> {
   const tag = useSharedValue<number | null>(-1);

package/src/reanimated2/hook/useAnimatedSensor.ts

@@ -0,0 +1,91 @@
+import { useEffect, useRef } from 'react';
+import { makeMutable } from '../core';
+import NativeReanimated from '../NativeReanimated';
+import { SensorValue3D, SensorValueRotation } from '../commonTypes';
+
+export enum SensorType {
+  ACCELEROMETER = 1,
+  GYROSCOPE = 2,
+  GRAVITY = 3,
+  MAGNETIC_FIELD = 4,
+  ROTATION = 5,
+}
+
+export type SensorConfig = {
+  interval: number;
+};
+
+export type AnimatedSensor = {
+  sensor: SensorValue3D | SensorValueRotation | null;
+  unregister: () => void;
+  isAvailable: boolean;
+  config: {
+    interval: number;
+  };
+};
+
+export function useAnimatedSensor(
+  sensorType: SensorType,
+  userConfig?: SensorConfig
+): AnimatedSensor {
+  const ref = useRef({
+    sensor: null,
+    unregister: () => {
+      // NOOP
+    },
+    isAvailable: false,
+    config: {
+      interval: 0,
+    },
+  });
+
+  if (ref.current.sensor === null) {
+    ref.current.config = { interval: 10, ...userConfig };
+    let sensorData;
+    if (sensorType === SensorType.ROTATION) {
+      sensorData = {
+        qw: 0,
+        qx: 0,
+        qy: 0,
+        qz: 0,
+        yaw: 0,
+        pitch: 0,
+        roll: 0,
+      };
+    } else {
+      sensorData = {
+        x: 0,
+        y: 0,
+        z: 0,
+      };
+    }
+    ref.current.sensor = makeMutable(sensorData) as any;
+  }
+
+  useEffect(() => {
+    ref.current.config = { interval: 10, ...userConfig };
+    const id = NativeReanimated.registerSensor(
+      sensorType,
+      ref.current.config.interval,
+      ref.current.sensor as any
+    );
+
+    if (id !== -1) {
+      // if sensor is available
+      ref.current.unregister = () => NativeReanimated.unregisterSensor(id);
+      ref.current.isAvailable = true;
+    } else {
+      // if sensor is unavailable
+      ref.current.unregister = () => {
+        // NOOP
+      };
+      ref.current.isAvailable = false;
+    }
+
+    return () => {
+      ref.current.unregister();
+    };
+  }, [sensorType, userConfig]);
+
+  return ref.current;
+}

package/src/reanimated2/hook/useAnimatedStyle.ts

@@ -10,7 +10,7 @@ import {
   makeMutable,
 } from '../core';
 import updateProps, { updatePropsJestWrapper } from '../UpdateProps';
-import { initialUpdaterRun, Timestamp } from '../animation';
+import { initialUpdaterRun } from '../animation';
 import NativeReanimatedModule from '../NativeReanimated';
 import { useSharedValue } from './useSharedValue';
 import {
@@ -31,11 +31,13 @@ import {
   ViewRefSet,
 } from '../ViewDescriptorsSet';
 import { isJest, shouldBeUseWeb } from '../PlatformChecker';
-import { AnimationObject } from '../animation/commonTypes';
 import {
+  AnimationObject,
+  Timestamp,
   AdapterWorkletFunction,
   AnimatedStyle,
   BasicWorkletFunction,
+  BasicWorkletFunctionOptional,
   NestedObjectValues,
   SharedValue,
 } from '../commonTypes';
@@ -259,7 +261,12 @@ function styleUpdater(
   } else {
     state.isAnimationCancelled = true;
     state.animations = [];
-    updateProps(viewDescriptors, newValues, maybeViewRef);
+
+    const diff = styleDiff(oldValues, newValues);
+    state.last = Object.assign({}, oldValues, newValues);
+    if (diff) {
+      updateProps(viewDescriptors, newValues, maybeViewRef);
+    }
   }
 }
 
@@ -446,10 +453,10 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
 
   useEffect(() => {
     let fun;
-    let upadterFn = updater;
+    let updaterFn = updater as BasicWorkletFunctionOptional<T>;
     let optimalization = updater.__optimalization;
     if (adapters) {
-      upadterFn = () => {
+      updaterFn = () => {
         'worklet';
         const newValues = updater();
         adaptersArray.forEach((adapter) => {
@@ -459,26 +466,38 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
       };
     }
 
-    if (canApplyOptimalisation(upadterFn) && !shouldBeUseWeb()) {
-      if (hasColorProps(upadterFn())) {
-        upadterFn = () => {
+    if (canApplyOptimalisation(updaterFn) && !shouldBeUseWeb()) {
+      if (hasColorProps(updaterFn())) {
+        updaterFn = () => {
+          'worklet';
+          const newValues = updaterFn();
+          const oldValues = remoteState.last;
+          const diff = styleDiff<T>(oldValues, newValues);
+          remoteState.last = Object.assign({}, oldValues, newValues);
+          parseColors(diff);
+          return diff;
+        };
+      } else {
+        updaterFn = () => {
           'worklet';
-          const style = upadterFn();
-          parseColors(style);
-          return style;
+          const newValues = updaterFn();
+          const oldValues = remoteState.last;
+          const diff = styleDiff<T>(oldValues, newValues);
+          remoteState.last = Object.assign({}, oldValues, newValues);
+          return diff;
         };
       }
     } else if (!shouldBeUseWeb()) {
       optimalization = 0;
-      upadterFn = () => {
+      updaterFn = () => {
         'worklet';
-        const style = upadterFn();
+        const style = updaterFn();
         parseColors(style);
         return style;
       };
     }
     if (typeof updater.__optimalization !== undefined) {
-      upadterFn.__optimalization = optimalization;
+      updaterFn.__optimalization = optimalization;
     }
 
     if (isJest()) {
@@ -499,7 +518,7 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
         'worklet';
         styleUpdater(
           sharableViewDescriptors,
-          upadterFn,
+          updaterFn,
           remoteState,
           maybeViewRef,
           animationsActive
@@ -510,7 +529,7 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
       fun,
       inputs,
       [],
-      upadterFn,
+      updaterFn,
       // TODO fix this
       sharableViewDescriptors
     );