react-native-reanimated 2.3.0-alpha.3 → 2.3.0-beta.4

package/src/reanimated2/NativeMethods.ts

@@ -1,23 +1,29 @@
-/* global _WORKLET _measure _scrollTo */
+/* global _WORKLET _measure _scrollTo _setGestureState */
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
+import { Component } from 'react';
 import { findNodeHandle } from 'react-native';
+import { RefObjectFunction } from './hook/useAnimatedRef';
 import { isChromeDebugger } from './PlatformChecker';
 
-export function getTag(view) {
+export function getTag(
+  view: null | number | React.Component<any, any> | React.ComponentClass<any>
+): null | number {
   return findNodeHandle(view);
 }
 
-/**
- * fields that can be accessed:
- *  x
- *  y
- *  width
- *  height
- *  pageX
- *  pageY
- */
-export function measure(animatedRef) {
+export interface MeasuredDimensions {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+}
+
+export function measure(
+  animatedRef: RefObjectFunction<Component>
+): MeasuredDimensions {
   'worklet';
   if (!_WORKLET && !isChromeDebugger()) {
     throw new Error('(measure) method cannot be used on RN side!');
@@ -30,7 +36,12 @@ export function measure(animatedRef) {
   return result;
 }
 
-export function scrollTo(animatedRef, x, y, animated) {
+export function scrollTo(
+  animatedRef: RefObjectFunction<Component>,
+  x: number,
+  y: number,
+  animated: boolean
+): void {
   'worklet';
   if (!_WORKLET && !isChromeDebugger()) {
     return;
@@ -38,3 +49,13 @@ export function scrollTo(animatedRef, x, y, animated) {
   const viewTag = animatedRef();
   _scrollTo(viewTag, x, y, animated);
 }
+
+export function setGestureState(handlerTag: number, newState: number): void {
+  'worklet';
+  if (!_WORKLET && !isChromeDebugger()) {
+    console.warn(
+      '[Reanimated] You can not use setGestureState in non-worklet function.'
+    );
+  }
+  _setGestureState(handlerTag, newState);
+}

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -0,0 +1,72 @@
+import { SharedValue } from '../commonTypes';
+import { Descriptor } from '../hook/commonTypes';
+
+const InnerNativeModule = global.__reanimatedModuleProxy;
+export class NativeReanimated {
+  native: boolean;
+  useOnlyV1: boolean;
+
+  constructor(native = true) {
+    this.native = native;
+    this.useOnlyV1 = InnerNativeModule === null;
+  }
+
+  installCoreFunctions(valueSetter: <T>(value: T) => void): void {
+    return InnerNativeModule.installCoreFunctions(valueSetter);
+  }
+
+  makeShareable<T>(value: T): T {
+    return InnerNativeModule.makeShareable(value);
+  }
+
+  makeMutable<T>(value: T): SharedValue<T> {
+    return InnerNativeModule.makeMutable(value);
+  }
+
+  makeRemote<T>(object = {}): T {
+    return InnerNativeModule.makeRemote(object);
+  }
+
+  startMapper(
+    mapper: () => void,
+    inputs: any[] = [],
+    outputs: any[] = [],
+    updater: () => void,
+    viewDescriptors: Descriptor[] | SharedValue<Descriptor[]>
+  ): number {
+    return InnerNativeModule.startMapper(
+      mapper,
+      inputs,
+      outputs,
+      updater,
+      viewDescriptors
+    );
+  }
+
+  stopMapper(mapperId: number): void {
+    return InnerNativeModule.stopMapper(mapperId);
+  }
+
+  registerEventHandler<T>(
+    eventHash: string,
+    eventHandler: (event: T) => void
+  ): string {
+    return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+  }
+
+  unregisterEventHandler(id: string): void {
+    return InnerNativeModule.unregisterEventHandler(id);
+  }
+
+  getViewProp<T>(
+    viewTag: string,
+    propName: string,
+    callback?: (result: T) => void
+  ): Promise<T> {
+    return InnerNativeModule.getViewProp(viewTag, propName, callback);
+  }
+
+  enableLayoutAnimations(flag: boolean): void {
+    InnerNativeModule.enableLayoutAnimations(flag);
+  }
+}

package/src/reanimated2/NativeReanimated/index.ts

@@ -0,0 +1,18 @@
+import reanimatedJS from '../js-reanimated';
+import { nativeShouldBeMock } from '../PlatformChecker';
+import { Platform } from 'react-native';
+import { NativeReanimated } from './NativeReanimated';
+
+let exportedModule;
+if (nativeShouldBeMock()) {
+  exportedModule = reanimatedJS;
+} else {
+  exportedModule = new NativeReanimated();
+  if (exportedModule.useOnlyV1 && Platform.OS === 'android') {
+    console.warn(
+      `If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`
+    );
+  }
+}
+
+export default exportedModule as NativeReanimated;

package/src/reanimated2/PropAdapters.ts

@@ -1,4 +1,3 @@
-// @ts-ignore JS file
 import { addWhitelistedNativeProps } from '../ConfigHelper';
 import { AdapterWorkletFunction } from './commonTypes';
 

package/src/reanimated2/UpdateProps.ts

@@ -1,10 +1,12 @@
 /* global _updateProps */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
+import { MutableRefObject } from 'react';
 import { processColor } from './Colors';
+import { AnimatedStyle, SharedValue, StyleProps } from './commonTypes';
 import { makeShareable, isConfigured } from './core';
+import { Descriptor } from './hook/commonTypes';
 import { _updatePropsJS } from './js-reanimated';
 import { shouldBeUseWeb } from './PlatformChecker';
+import { ViewRefSet } from './ViewDescriptorsSet';
 
 // copied from react-native/Libraries/Components/View/ReactNativeStyleAttributes
 export const colorProps = [
@@ -24,18 +26,28 @@ export const colorProps = [
   'overlayColor',
 ];
 
-const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
+export const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
 
 let updatePropsByPlatform;
 if (shouldBeUseWeb()) {
-  updatePropsByPlatform = (_, updates, maybeViewRef) => {
+  updatePropsByPlatform = (
+    _: SharedValue<Descriptor[]>,
+    updates: StyleProps | AnimatedStyle,
+    maybeViewRef: ViewRefSet<any> | undefined
+  ): void => {
     'worklet';
-    maybeViewRef.items.forEach((item, _) => {
-      _updatePropsJS(updates, item);
-    });
+    if (maybeViewRef) {
+      maybeViewRef.items.forEach((item, _) => {
+        _updatePropsJS(updates, item);
+      });
+    }
   };
 } else {
-  updatePropsByPlatform = (viewDescriptors, updates, _) => {
+  updatePropsByPlatform = (
+    viewDescriptors: SharedValue<Descriptor[]>,
+    updates: StyleProps | AnimatedStyle,
+    _: ViewRefSet<any> | undefined
+  ): void => {
     'worklet';
 
     for (const key in updates) {
@@ -54,15 +66,19 @@ if (shouldBeUseWeb()) {
   };
 }
 
-export const updateProps = updatePropsByPlatform;
+export const updateProps: (
+  viewDescriptor: SharedValue<Descriptor[]>,
+  updates: StyleProps | AnimatedStyle,
+  maybeViewRef: ViewRefSet<any> | undefined
+) => void = updatePropsByPlatform;
 
 export const updatePropsJestWrapper = (
-  viewDescriptors,
-  updates,
-  maybeViewRef,
-  animatedStyle,
-  adapters
-) => {
+  viewDescriptors: SharedValue<Descriptor[]>,
+  updates: AnimatedStyle,
+  maybeViewRef: ViewRefSet<any> | undefined,
+  animatedStyle: MutableRefObject<AnimatedStyle>,
+  adapters: ((updates: AnimatedStyle) => void)[]
+): void => {
   adapters.forEach((adapter) => {
     adapter(updates);
   });

package/src/reanimated2/ViewDescriptorsSet.ts

@@ -1,8 +1,8 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { useRef } from 'react';
 import { makeMutable } from './core';
-import { SharedValue } from './hook/commonTypes';
+import { SharedValue } from './commonTypes';
+import { Descriptor } from './hook/commonTypes';
+import { Platform } from 'react-native';
 
 export interface ViewRefSet<T> {
   items: Set<T>;
@@ -24,10 +24,13 @@ export interface ViewDescriptorsSet {
   ) => void;
 }
 
+const scheduleUpdates =
+  Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
+
 export function makeViewDescriptorsSet(): ViewDescriptorsSet {
-  const ref = useRef(null);
+  const ref = useRef<ViewDescriptorsSet | null>(null);
   if (ref.current === null) {
-    const data = {
+    const data: ViewDescriptorsSet = {
       batchToRemove: new Set(),
       tags: new Set(),
       waitForInsertSync: false,
@@ -45,7 +48,7 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
         if (!data.waitForInsertSync) {
           data.waitForInsertSync = true;
 
-          setImmediate(() => {
+          scheduleUpdates(() => {
             data.sharableViewDescriptors.value = data.items;
             data.waitForInsertSync = false;
           });
@@ -58,7 +61,7 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
         if (!data.waitForRemoveSync) {
           data.waitForRemoveSync = true;
 
-          setImmediate(() => {
+          scheduleUpdates(() => {
             const items = [];
             for (const item of data.items) {
               if (data.batchToRemove.has(item.tag)) {
@@ -87,18 +90,18 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   return ref.current;
 }
 
-export function makeViewsRefSet(): ViewRefSet {
-  const ref = useRef(null);
+export function makeViewsRefSet<T>(): ViewRefSet<T> {
+  const ref = useRef<ViewRefSet<T> | null>(null);
   if (ref.current === null) {
-    const data = {
+    const data: ViewRefSet<T> = {
       items: new Set(),
 
-      add: (item) => {
+      add: (item: T) => {
         if (data.items.has(item)) return;
         data.items.add(item);
       },
 
-      remove: (item) => {
+      remove: (item: T) => {
         data.items.delete(item);
       },
     };

package/src/reanimated2/WorkletEventHandler.ts

@@ -1,38 +1,57 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import NativeModule from './NativeReanimated';
+import { NativeEvent } from './commonTypes';
+import NativeReanimatedModule from './NativeReanimated';
 
-const jsListener = (eventName, handler) => (evt) => {
-  handler({ ...evt.nativeEvent, eventName });
-};
+function jsListener<T extends NativeEvent<T>>(
+  eventName: string,
+  handler: (event: T) => void
+) {
+  return (evt: T) => {
+    handler({ ...evt.nativeEvent, eventName });
+  };
+}
 
-export default class WorkletEventHandler {
-  constructor(worklet, eventNames: string[] = []) {
+export default class WorkletEventHandler<T extends NativeEvent<T>> {
+  worklet: (event: T) => void;
+  eventNames: string[];
+  reattachNeeded: boolean;
+  listeners: Record<string, (event: T) => void>;
+  viewTag: number | undefined;
+  registrations: string[];
+  constructor(worklet: (event: T) => void, eventNames: string[] = []) {
     this.worklet = worklet;
     this.eventNames = eventNames;
     this.reattachNeeded = false;
+    this.listeners = {};
+    this.viewTag = undefined;
+    this.registrations = [];
 
-    if (!NativeModule.native) {
-      this.listeners = eventNames.reduce((acc, eventName) => {
-        acc[eventName] = jsListener(eventName, worklet);
-        return acc;
-      }, {});
+    if (!NativeReanimatedModule.native) {
+      this.listeners = eventNames.reduce(
+        (acc: Record<string, (event: T) => void>, eventName: string) => {
+          acc[eventName] = jsListener(eventName, worklet);
+          return acc;
+        },
+        {}
+      );
     }
   }
 
-  updateWorklet(newWorklet) {
+  updateWorklet(newWorklet: (event: T) => void): void {
     this.worklet = newWorklet;
     this.reattachNeeded = true;
   }
 
-  registerForEvents(viewTag, fallbackEventName = undefined) {
+  registerForEvents(viewTag: number, fallbackEventName?: string): void {
     this.viewTag = viewTag;
     this.registrations = this.eventNames.map((eventName) =>
-      NativeModule.registerEventHandler(viewTag + eventName, this.worklet)
+      NativeReanimatedModule.registerEventHandler(
+        viewTag + eventName,
+        this.worklet
+      )
     );
     if (this.registrations.length === 0 && fallbackEventName) {
       this.registrations.push(
-        NativeModule.registerEventHandler(
+        NativeReanimatedModule.registerEventHandler(
           viewTag + fallbackEventName,
           this.worklet
         )
@@ -40,11 +59,10 @@ export default class WorkletEventHandler {
     }
   }
 
-  unregisterFromEvents() {
-    this.registrations &&
-      this.registrations.forEach((id) =>
-        NativeModule.unregisterEventHandler(id)
-      );
-    this.registrations = undefined;
+  unregisterFromEvents(): void {
+    this.registrations.forEach((id) =>
+      NativeReanimatedModule.unregisterEventHandler(id)
+    );
+    this.registrations = [];
   }
 }

package/src/reanimated2/animation/commonTypes.ts

@@ -1,9 +1,9 @@
-export type PrimitiveValue = number | string;
+export type AnimatableValue = number | string | Array<number>;
 
 export interface AnimationObject {
   [key: string]: any;
   callback: AnimationCallback;
-  current?: PrimitiveValue;
+  current?: AnimatableValue;
   toValue?: AnimationObject['current'];
   startValue?: AnimationObject['current'];
   finished?: boolean;
@@ -25,7 +25,7 @@ export interface Animation<T extends AnimationObject> extends AnimationObject {
   onFrame: (animation: T, timestamp: Timestamp) => boolean;
   onStart: (
     nextAnimation: T,
-    current: T extends NumericAnimation ? number : PrimitiveValue,
+    current: T extends NumericAnimation ? number : AnimatableValue,
     timestamp: Timestamp,
     previousAnimation: T
   ) => void;
@@ -40,7 +40,7 @@ export interface HigherOrderAnimation {
 
 export type AnimationCallback = (
   finished?: boolean,
-  current?: PrimitiveValue
+  current?: AnimatableValue
 ) => void;
 
 export type NextAnimation<T extends AnimationObject> = T | (() => T);

package/src/reanimated2/animation/decay.ts

@@ -3,7 +3,7 @@ import {
   Animation,
   AnimationCallback,
   AnimationObject,
-  PrimitiveValue,
+  AnimatableValue,
   Timestamp,
 } from './commonTypes';
 import { Platform } from 'react-native';
@@ -27,7 +27,7 @@ export interface DecayAnimation extends Animation<DecayAnimation> {
   startTimestamp: Timestamp;
   initialVelocity: number;
   velocity: number;
-  current: PrimitiveValue;
+  current: AnimatableValue;
 }
 
 export interface InnerDecayAnimation

package/src/reanimated2/animation/delay.ts

@@ -4,7 +4,7 @@ import {
   NextAnimation,
   Timestamp,
   HigherOrderAnimation,
-  PrimitiveValue,
+  AnimatableValue,
 } from './commonTypes';
 
 export interface DelayAnimation
@@ -13,7 +13,7 @@ export interface DelayAnimation
   startTime: Timestamp;
   started: boolean;
   previousAnimation: DelayAnimation | null;
-  current: PrimitiveValue;
+  current: AnimatableValue;
 }
 
 export function withDelay(
@@ -44,7 +44,9 @@ export function withDelay(
         animation.current = nextAnimation.current;
         return finished;
       } else if (previousAnimation) {
-        const finished = previousAnimation.onFrame(previousAnimation, now);
+        const finished =
+          previousAnimation.finished ||
+          previousAnimation.onFrame(previousAnimation, now);
         animation.current = previousAnimation.current;
         if (finished) {
           animation.previousAnimation = null;
@@ -55,14 +57,18 @@ export function withDelay(
 
     function onStart(
       animation: DelayAnimation,
-      value: PrimitiveValue,
+      value: AnimatableValue,
       now: Timestamp,
       previousAnimation: DelayAnimation
     ): void {
       animation.startTime = now;
       animation.started = false;
       animation.current = value;
-      animation.previousAnimation = previousAnimation;
+      if (previousAnimation === animation) {
+        animation.previousAnimation = previousAnimation.previousAnimation;
+      } else {
+        animation.previousAnimation = previousAnimation;
+      }
     }
 
     const callback = (finished?: boolean): void => {

package/src/reanimated2/animation/index.ts

@@ -7,10 +7,10 @@ export {
   Timestamp,
 } from './commonTypes';
 export { cancelAnimation, defineAnimation, initialUpdaterRun } from './util';
-export { withTiming } from './timing';
-export { withSpring } from './spring';
-export { withDecay } from './decay';
-export { withDelay } from './delay';
-export { withRepeat } from './repeat';
-export { withSequence } from './sequence';
-export { withStyleAnimation } from './styleAnimation';
+export { withTiming, TimingAnimation } from './timing';
+export { withSpring, SpringAnimation } from './spring';
+export { withDecay, DecayAnimation } from './decay';
+export { withDelay, DelayAnimation } from './delay';
+export { withRepeat, RepeatAnimation } from './repeat';
+export { withSequence, SequenceAnimation } from './sequence';
+export { withStyleAnimation, StyleLayoutAnimation } from './styleAnimation';

package/src/reanimated2/animation/repeat.ts

@@ -3,7 +3,7 @@ import {
   Animation,
   AnimationCallback,
   NextAnimation,
-  PrimitiveValue,
+  AnimatableValue,
   Timestamp,
   HigherOrderAnimation,
 } from './commonTypes';
@@ -12,8 +12,8 @@ export interface RepeatAnimation
   extends Animation<RepeatAnimation>,
     HigherOrderAnimation {
   reps: number;
-  startValue: PrimitiveValue;
-  toValue?: PrimitiveValue;
+  startValue: AnimatableValue;
+  toValue?: AnimatableValue;
   previousAnimation?: RepeatAnimation;
 }
 
@@ -81,7 +81,7 @@ export function withRepeat(
 
     function onStart(
       animation: RepeatAnimation,
-      value: PrimitiveValue,
+      value: AnimatableValue,
       now: Timestamp,
       previousAnimation: RepeatAnimation
     ): void {

package/src/reanimated2/animation/sequence.ts

@@ -3,7 +3,7 @@ import {
   Animation,
   Timestamp,
   NextAnimation,
-  PrimitiveValue,
+  AnimatableValue,
   HigherOrderAnimation,
   AnimationObject,
 } from './commonTypes';
@@ -66,7 +66,7 @@ export function withSequence(
 
       function onStart(
         animation: SequenceAnimation,
-        value: PrimitiveValue,
+        value: AnimatableValue,
         now: Timestamp,
         previousAnimation: SequenceAnimation
       ): void {

package/src/reanimated2/animation/spring.ts

@@ -2,12 +2,11 @@ import { defineAnimation } from './util';
 import {
   Animation,
   AnimationCallback,
-  PrimitiveValue,
+  AnimatableValue,
   Timestamp,
 } from './commonTypes';
 
 interface SpringConfig {
-  // [key: string]: any;
   mass?: number;
   stiffness?: number;
   overshootClamping?: boolean;
@@ -18,8 +17,8 @@ interface SpringConfig {
 }
 
 export interface SpringAnimation extends Animation<SpringAnimation> {
-  current: PrimitiveValue;
-  toValue: PrimitiveValue;
+  current: AnimatableValue;
+  toValue: AnimatableValue;
   velocity: number;
   lastTimestamp: Timestamp;
 }
@@ -31,7 +30,7 @@ export interface InnerSpringAnimation
 }
 
 export function withSpring(
-  toValue: PrimitiveValue,
+  toValue: AnimatableValue,
   userConfig?: SpringConfig,
   callback?: AnimationCallback
 ): Animation<SpringAnimation> {
@@ -131,6 +130,8 @@ export function withSpring(
           animation.velocity = 0;
           animation.current = toValue;
         }
+        // clear lastTimestamp to avoid using stale value by the next spring animation that starts after this one
+        animation.lastTimestamp = 0;
         return true;
       }
       return false;