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

package/src/reanimated2/animation/styleAnimation.ts

@@ -3,7 +3,7 @@ import {
   Timestamp,
   HigherOrderAnimation,
   AnimationCallback,
-  PrimitiveValue,
+  AnimatableValue,
   AnimationObject,
   Animation,
 } from './commonTypes';
@@ -14,6 +14,8 @@ import {
   StyleProps,
 } from '../commonTypes';
 import { withTiming } from './timing';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 
 export interface StyleLayoutAnimation extends HigherOrderAnimation {
   current: StyleProps;
@@ -30,30 +32,33 @@ export interface StyleLayoutAnimation extends HigherOrderAnimation {
 
 // resolves path to value for nested objects
 // if path cannot be resolved returns undefined
-function resolvePath<T>(
+export function resolvePath<T>(
   obj: NestedObject<T>,
-  path: PrimitiveValue[] | PrimitiveValue
+  path: AnimatableValue[] | AnimatableValue
 ): NestedObjectValues<T> | undefined {
   'worklet';
-  const keys: PrimitiveValue[] = Array.isArray(path) ? path : [path];
+  const keys: AnimatableValue[] = Array.isArray(path) ? path : [path];
   return keys.reduce<NestedObjectValues<T> | undefined>((acc, current) => {
     if (Array.isArray(acc) && typeof current === 'number') {
       return acc[current];
-    } else if (typeof acc === 'object' && current in acc) {
-      return (acc as { [key: string]: NestedObjectValues<T> })[current];
+    } else if (typeof acc === 'object' && (current as number | string) in acc) {
+      return (acc as { [key: string]: NestedObjectValues<T> })[
+        current as number | string
+      ];
     }
     return undefined;
   }, obj);
 }
 
 // set value at given path
-function setPath<T>(
+type Path = Array<string | number> | string | number;
+export function setPath<T>(
   obj: NestedObject<T>,
-  path: PrimitiveValue[] | PrimitiveValue,
+  path: Path,
   value: NestedObjectValues<T>
-) {
+): void {
   'worklet';
-  const keys: PrimitiveValue[] = Array.isArray(path) ? path : [path];
+  const keys: Path = Array.isArray(path) ? path : [path];
   let currObj: NestedObjectValues<T> = obj;
   for (let i = 0; i < keys.length - 1; i++) {
     // creates entry if there isn't one
@@ -76,7 +81,7 @@ function setPath<T>(
 
 interface NestedObjectEntry<T> {
   value: NestedObjectValues<T>;
-  path: PrimitiveValue[];
+  path: (string | number)[];
 }
 
 export function withStyleAnimation(
@@ -131,6 +136,13 @@ export function withStyleAnimation(
           } else {
             stillGoing = true;
           }
+
+          if (ColorProperties.includes(currentEntry.path[0] as string)) {
+            currentStyleAnimation.current = processColor(
+              currentStyleAnimation.current
+            ) as number;
+          }
+
           setPath(
             animation.current,
             currentEntry.path,
@@ -148,13 +160,13 @@ export function withStyleAnimation(
       previousAnimation: StyleLayoutAnimation
     ): void => {
       const entriesToCheck: NestedObjectEntry<
-        AnimationObject | PrimitiveValue
+        AnimationObject | AnimatableValue
       >[] = [{ value: styleAnimations, path: [] }];
       while (entriesToCheck.length > 0) {
         const currentEntry: NestedObjectEntry<
-          AnimationObject | PrimitiveValue
+          AnimationObject | AnimatableValue
         > = entriesToCheck.pop() as NestedObjectEntry<
-          AnimationObject | PrimitiveValue
+          AnimationObject | AnimatableValue
         >;
         if (Array.isArray(currentEntry.value)) {
           for (let index = 0; index < currentEntry.value.length; index++) {
@@ -189,7 +201,7 @@ export function withStyleAnimation(
             !currentEntry.value.onStart
           ) {
             currentAnimation = withTiming(
-              currentEntry.value as PrimitiveValue,
+              currentEntry.value as AnimatableValue,
               { duration: 0 }
             );
             setPath(

package/src/reanimated2/animation/timing.ts

@@ -4,7 +4,7 @@ import {
   Animation,
   AnimationCallback,
   Timestamp,
-  PrimitiveValue,
+  AnimatableValue,
 } from './commonTypes';
 
 interface TimingConfig {
@@ -15,11 +15,11 @@ interface TimingConfig {
 export interface TimingAnimation extends Animation<TimingAnimation> {
   type: string;
   easing: EasingFn;
-  startValue: PrimitiveValue;
+  startValue: AnimatableValue;
   startTime: Timestamp;
   progress: number;
-  toValue: PrimitiveValue;
-  current: PrimitiveValue;
+  toValue: AnimatableValue;
+  current: AnimatableValue;
 }
 
 export interface InnerTimingAnimation
@@ -29,7 +29,7 @@ export interface InnerTimingAnimation
 }
 
 export function withTiming(
-  toValue: PrimitiveValue,
+  toValue: AnimatableValue,
   userConfig?: TimingConfig,
   callback?: AnimationCallback
 ): Animation<TimingAnimation> {

package/src/reanimated2/animation/util.ts

@@ -3,7 +3,7 @@ import {
   AnimationObject,
   HigherOrderAnimation,
   NextAnimation,
-  PrimitiveValue,
+  AnimatableValue,
   Timestamp,
 } from './commonTypes';
 /* global _WORKLET */
@@ -11,7 +11,7 @@ import { ParsedColorArray, convertToHSVA, isColor, toRGBA } from '../Colors';
 
 import { AnimatedStyle, SharedValue } from '../commonTypes';
 import { DelayAnimation } from './delay';
-import NativeReanimated from '../NativeReanimated';
+import NativeReanimatedModule from '../NativeReanimated';
 import { RepeatAnimation } from './repeat';
 import { SequenceAnimation } from './sequence';
 import { StyleLayoutAnimation } from './styleAnimation';
@@ -32,7 +32,7 @@ interface RecognizedPrefixSuffix {
   strippedValue: number;
 }
 
-function recognizePrefixSuffix(value: PrimitiveValue): RecognizedPrefixSuffix {
+function recognizePrefixSuffix(value: string | number): RecognizedPrefixSuffix {
   'worklet';
   if (typeof value === 'string') {
     const match = value.match(
@@ -68,7 +68,7 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
 
   const prefNumberSuffOnStart = (
     animation: Animation<AnimationObject>,
-    value: PrimitiveValue,
+    value: string | number,
     timestamp: number,
     previousAnimation: Animation<AnimationObject>
   ) => {
@@ -78,7 +78,7 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     animation.__suffix = suffix;
     animation.strippedCurrent = strippedValue;
     const { strippedValue: strippedToValue } = recognizePrefixSuffix(
-      animation.toValue as PrimitiveValue
+      animation.toValue as string | number
     );
     animation.current = strippedValue;
     animation.startValue = strippedValue;
@@ -167,6 +167,41 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     return finished;
   };
 
+  const arrayOnStart = (
+    animation: Animation<AnimationObject>,
+    value: Array<number>,
+    timestamp: Timestamp,
+    previousAnimation: Animation<AnimationObject>
+  ): void => {
+    value.forEach((v, i) => {
+      animation[i] = Object.assign({}, animationCopy);
+      animation[i].current = v;
+      animation[i].toValue = (animation.toValue as Array<number>)[i];
+      animation[i].onStart(
+        animation[i],
+        v,
+        timestamp,
+        previousAnimation ? previousAnimation[i] : undefined
+      );
+    });
+
+    animation.current = value;
+  };
+
+  const arrayOnFrame = (
+    animation: Animation<AnimationObject>,
+    timestamp: Timestamp
+  ): boolean => {
+    let finished = true;
+    (animation.current as Array<number>).forEach((v, i) => {
+      // @ts-ignore: disable-next-line
+      finished &= animation[i].onFrame(animation[i], timestamp);
+      (animation.current as Array<number>)[i] = animation[i].current;
+    });
+
+    return finished;
+  };
+
   animation.onStart = (
     animation: Animation<AnimationObject>,
     value: number,
@@ -177,6 +212,10 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
       colorOnStart(animation, value, timestamp, previousAnimation);
       animation.onFrame = colorOnFrame;
       return;
+    } else if (Array.isArray(value)) {
+      arrayOnStart(animation, value, timestamp, previousAnimation);
+      animation.onFrame = arrayOnFrame;
+      return;
     } else if (typeof value === 'string') {
       prefNumberSuffOnStart(animation, value, timestamp, previousAnimation);
       animation.onFrame = prefNumberSuffOnFrame;
@@ -196,7 +235,7 @@ type AnimationToDecoration<
   ? NextAnimation<RepeatAnimation>
   : T extends SequenceAnimation
   ? NextAnimation<SequenceAnimation>
-  : PrimitiveValue | T;
+  : AnimatableValue | T;
 
 export function defineAnimation<
   T extends AnimationObject | StyleLayoutAnimation
@@ -212,7 +251,7 @@ export function defineAnimation<
     return animation;
   };
 
-  if (_WORKLET || !NativeReanimated.native) {
+  if (_WORKLET || !NativeReanimatedModule.native) {
     return create();
   }
   // @ts-ignore: eslint-disable-line
@@ -227,7 +266,7 @@ export function cancelAnimation<T>(sharedValue: SharedValue<T>): void {
 
 // TODO it should work only if there was no animation before.
 export function withStartValue(
-  startValue: PrimitiveValue,
+  startValue: AnimatableValue,
   animation: NextAnimation<AnimationObject>
 ): Animation<AnimationObject> {
   'worklet';

package/src/reanimated2/commonTypes.ts

@@ -59,6 +59,9 @@ export interface BasicWorkletFunction<T> extends WorkletFunction {
   (): T;
 }
 
+export interface NativeEvent<T> {
+  nativeEvent: T;
+}
 export interface ComplexWorkletFunction<A extends any[], R>
   extends WorkletFunction {
   (...args: A): R;

package/src/reanimated2/core.ts

@@ -1,5 +1,5 @@
 /* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
-import NativeReanimated from './NativeReanimated';
+import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
 import { nativeShouldBeMock, shouldBeUseWeb } from './PlatformChecker';
 import {
@@ -10,10 +10,11 @@ import {
 } from './commonTypes';
 import {
   AnimationObject,
-  PrimitiveValue,
+  AnimatableValue,
   Timestamp,
 } from './animation/commonTypes';
 import { Descriptor } from './hook/commonTypes';
+import JSReanimated from './js-reanimated/JSReanimated';
 
 global.__reanimatedWorkletInit = function (worklet: WorkletFunction) {
   worklet.__worklet = true;
@@ -30,11 +31,17 @@ export type ReanimatedConsole = Pick<
   Console,
   'debug' | 'log' | 'warn' | 'info' | 'error'
 >;
+
+export type WorkletValue =
+  | (() => AnimationObject)
+  | AnimationObject
+  | AnimatableValue
+  | Descriptor;
 interface WorkletValueSetterContext {
   _animation?: AnimationObject | null;
-  _value?: PrimitiveValue | Descriptor;
-  value?: PrimitiveValue;
-  _setValue?: (val: PrimitiveValue | Descriptor) => void;
+  _value?: AnimatableValue | Descriptor;
+  value?: AnimatableValue;
+  _setValue?: (val: AnimatableValue | Descriptor) => void;
 }
 
 const testWorklet: BasicWorkletFunction<void> = () => {
@@ -58,13 +65,13 @@ export const checkPluginState: (throwError: boolean) => boolean = (
 export const isConfigured: (throwError?: boolean) => boolean = (
   throwError = false
 ) => {
-  return checkPluginState(throwError) && !NativeReanimated.useOnlyV1;
+  return checkPluginState(throwError) && !NativeReanimatedModule.useOnlyV1;
 };
 
 export const isConfiguredCheck: () => void = () => {
   if (!isConfigured(true)) {
     throw new Error(
-      'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation'
+      'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation'
     );
   }
 };
@@ -112,12 +119,12 @@ global.__reanimatedWorkletInit = function (worklet: WorkletFunction) {
 };
 
 function pushFrame(frame: (timestamp: Timestamp) => void): void {
-  NativeReanimated.pushFrame(frame);
+  (NativeReanimatedModule as JSReanimated).pushFrame(frame);
 }
 
 export function requestFrame(frame: (timestamp: Timestamp) => void): void {
   'worklet';
-  if (NativeReanimated.native) {
+  if (NativeReanimatedModule.native) {
     requestAnimationFrame(frame);
   } else {
     pushFrame(frame);
@@ -137,25 +144,29 @@ export function runOnUI<A extends any[], R>(
 
 export function makeShareable<T>(value: T): T {
   isConfiguredCheck();
-  return NativeReanimated.makeShareable(value);
+  return NativeReanimatedModule.makeShareable(value);
 }
 
 export function getViewProp<T>(viewTag: string, propName: string): Promise<T> {
   return new Promise((resolve, reject) => {
-    return NativeReanimated.getViewProp(viewTag, propName, (result: T) => {
-      if (typeof result === 'string' && result.substr(0, 6) === 'error:') {
-        reject(result);
-      } else {
-        resolve(result);
+    return NativeReanimatedModule.getViewProp(
+      viewTag,
+      propName,
+      (result: T) => {
+        if (typeof result === 'string' && result.substr(0, 6) === 'error:') {
+          reject(result);
+        } else {
+          resolve(result);
+        }
       }
-    });
+    );
   });
 }
 
 let _getTimestamp: () => number;
 if (nativeShouldBeMock()) {
   _getTimestamp = () => {
-    return NativeReanimated.getTimestamp();
+    return (NativeReanimatedModule as JSReanimated).getTimestamp();
   };
 } else {
   _getTimestamp = () => {
@@ -173,14 +184,14 @@ if (nativeShouldBeMock()) {
 export function getTimestamp(): number {
   'worklet';
   if (Platform.OS === 'web') {
-    return NativeReanimated.getTimestamp();
+    return (NativeReanimatedModule as JSReanimated).getTimestamp();
   }
   return _getTimestamp();
 }
 
-function workletValueSetter(
+function workletValueSetter<T extends WorkletValue>(
   this: WorkletValueSetterContext,
-  value: (() => AnimationObject) | AnimationObject | PrimitiveValue | Descriptor
+  value: T
 ): void {
   'worklet';
   const previousAnimation = this._animation;
@@ -195,7 +206,9 @@ function workletValueSetter(
       (value as AnimationObject).onFrame !== undefined)
   ) {
     const animation: AnimationObject =
-      typeof value === 'function' ? value() : (value as AnimationObject);
+      typeof value === 'function'
+        ? (value as () => AnimationObject)()
+        : (value as AnimationObject);
     // prevent setting again to the same value
     // and triggering the mappers that treat this value as an input
     // this happens when the animation's target value(stored in animation.current until animation.onStart is called) is set to the same value as a current one(this._value)
@@ -239,15 +252,15 @@ function workletValueSetter(
     if (this._value === value) {
       return;
     }
-    this._value = value as Descriptor | PrimitiveValue;
+    this._value = value as Descriptor | AnimatableValue;
   }
 }
 
 // We cannot use pushFrame
 // so we use own implementation for js
-function workletValueSetterJS(
+function workletValueSetterJS<T extends WorkletValue>(
   this: WorkletValueSetterContext,
-  value: (() => AnimationObject) | AnimationObject | PrimitiveValue | Descriptor
+  value: T
 ): void {
   const previousAnimation = this._animation;
   if (previousAnimation) {
@@ -262,7 +275,9 @@ function workletValueSetterJS(
   ) {
     // animated set
     const animation: AnimationObject =
-      typeof value === 'function' ? value() : (value as AnimationObject);
+      typeof value === 'function'
+        ? (value as () => AnimationObject)()
+        : (value as AnimationObject);
     let initializeAnimation: ((timestamp: number) => void) | null = (
       timestamp: number
     ) => {
@@ -279,7 +294,7 @@ function workletValueSetterJS(
       }
       const finished = animation.onFrame(animation, timestamp);
       animation.timestamp = timestamp;
-      this._setValue && this._setValue(animation.current as PrimitiveValue);
+      this._setValue && this._setValue(animation.current as AnimatableValue);
       if (finished) {
         animation.callback && animation.callback(true /* finished */);
       } else {
@@ -291,18 +306,18 @@ function workletValueSetterJS(
 
     requestFrame(step);
   } else {
-    this._setValue && this._setValue(value as PrimitiveValue | Descriptor);
+    this._setValue && this._setValue(value as AnimatableValue | Descriptor);
   }
 }
 
 export function makeMutable<T>(value: T): SharedValue<T> {
   isConfiguredCheck();
-  return NativeReanimated.makeMutable(value);
+  return NativeReanimatedModule.makeMutable(value);
 }
 
 export function makeRemote<T>(object = {}): T {
   isConfiguredCheck();
-  return NativeReanimated.makeRemote(object);
+  return NativeReanimatedModule.makeRemote(object);
 }
 
 export function startMapper(
@@ -315,7 +330,7 @@ export function startMapper(
   viewDescriptors: Descriptor[] | SharedValue<Descriptor[]> = []
 ): number {
   isConfiguredCheck();
-  return NativeReanimated.startMapper(
+  return NativeReanimatedModule.startMapper(
     mapper,
     inputs,
     outputs,
@@ -325,7 +340,7 @@ export function startMapper(
 }
 
 export function stopMapper(mapperId: number): void {
-  NativeReanimated.stopMapper(mapperId);
+  NativeReanimatedModule.stopMapper(mapperId);
 }
 
 export interface RunOnJSFunction<A extends any[], R> {
@@ -349,9 +364,11 @@ export function runOnJS<A extends any[], R>(
   }
 }
 
-if (!NativeReanimated.useOnlyV1) {
-  NativeReanimated.installCoreFunctions(
-    NativeReanimated.native ? workletValueSetter : workletValueSetterJS
+if (!NativeReanimatedModule.useOnlyV1) {
+  NativeReanimatedModule.installCoreFunctions(
+    NativeReanimatedModule.native
+      ? (workletValueSetter as <T>(value: T) => void)
+      : (workletValueSetterJS as <T>(value: T) => void)
   );
 
   const capturableConsole = console;
@@ -368,3 +385,32 @@ if (!NativeReanimated.useOnlyV1) {
       _setGlobalConsole(console);
     })();
 }
+
+type FeaturesConfig = {
+  enableLayoutAnimations: boolean;
+  setByUser: boolean;
+};
+
+let featuresConfig: FeaturesConfig = {
+  enableLayoutAnimations: false,
+  setByUser: false,
+};
+
+export function enableLayoutAnimations(
+  flag: boolean,
+  isCallByUser = true
+): void {
+  if (isCallByUser) {
+    featuresConfig = {
+      enableLayoutAnimations: flag,
+      setByUser: true,
+    };
+    NativeReanimatedModule.enableLayoutAnimations(flag);
+  } else if (
+    !featuresConfig.setByUser &&
+    featuresConfig.enableLayoutAnimations !== flag
+  ) {
+    featuresConfig.enableLayoutAnimations = flag;
+    NativeReanimatedModule.enableLayoutAnimations(flag);
+  }
+}

package/src/reanimated2/globals.d.ts

@@ -1,5 +1,7 @@
-import { WorkletFunction } from './commonTypes';
+import { AnimatedStyle, StyleProps, WorkletFunction } from './commonTypes';
 import { ReanimatedConsole } from './core';
+import { MeasuredDimensions } from './NativeMethods';
+import { NativeReanimated } from './NativeReanimated/NativeReanimated';
 declare global {
   const _WORKLET: boolean;
   const _frameTimestamp: number;
@@ -11,12 +13,30 @@ declare global {
     tag: number,
     flag: { value: boolean; _value: boolean }
   ) => void;
+  const _setGestureState: (handlerTag: number, newState: number) => void;
+  const _updateProps: (
+    tag: number,
+    name: string,
+    updates: StyleProps | AnimatedStyle
+  ) => void;
+  const _measure: (viewTag: number) => MeasuredDimensions;
+  const _scrollTo: (
+    viewTag: number,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => void;
   namespace NodeJS {
     interface Global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
       _setGlobalConsole: (console?: ReanimatedConsole) => void;
       _log: (s: string) => void;
+      _setGestureState: () => void;
       _WORKLET: boolean;
+      __reanimatedModuleProxy: NativeReanimated;
+      _frameTimestamp: number | null;
+      _measure: () => MeasuredDimensions;
+      _scrollTo: () => void;
       LayoutAnimationRepository: {
         configs: Record<string, unknown>;
         registerConfig(tag: number, config: Record<string, unknown>): void;

package/src/reanimated2/hook/useAnimatedGestureHandler.ts

@@ -46,7 +46,7 @@ export function useAnimatedGestureHandler<
 >(
   handlers: GestureHandlers<T, TContext>,
   dependencies?: DependencyList
-): MutableRefObject<WorkletEventHandler | null> | ((e: T) => void) {
+): MutableRefObject<WorkletEventHandler<T> | null> | ((e: T) => void) {
   const { context, doDependenciesDiffer, useWeb } = useHandler<T, TContext>(
     handlers,
     dependencies

package/src/reanimated2/hook/useAnimatedRef.ts

@@ -1,28 +1,26 @@
-import { Component, RefObject, useRef } from 'react';
+import { Component, useRef } from 'react';
 import { getTag } from '../NativeMethods';
 import { useSharedValue } from './useSharedValue';
 
-interface RefObjectFunction<T> {
+export interface RefObjectFunction<T> {
   current: T | null;
-  (component: T): number;
+  (component?: T): number;
 }
 
-export function useAnimatedRef<T extends Component>(): RefObject<T> {
+export function useAnimatedRef<T extends Component>(): RefObjectFunction<T> {
   const tag = useSharedValue<number | null>(-1);
-  const ref = useRef<RefObject<T>>();
+  const ref = useRef<RefObjectFunction<T>>();
 
   if (!ref.current) {
-    const fun: RefObjectFunction<T> = <RefObjectFunction<T>>(
-      function (component) {
-        'worklet';
-        // enters when ref is set by attaching to a component
-        if (component) {
-          tag.value = getTag(component);
-          fun.current = component;
-        }
-        return tag.value;
+    const fun: RefObjectFunction<T> = <RefObjectFunction<T>>((component) => {
+      'worklet';
+      // enters when ref is set by attaching to a component
+      if (component) {
+        tag.value = getTag(component);
+        fun.current = component;
       }
-    );
+      return tag.value;
+    });
 
     Object.defineProperty(fun, 'current', {
       value: null,

package/src/reanimated2/hook/useAnimatedScrollHandler.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { NativeScrollEvent } from 'react-native';
-import { WorkletFunction } from '../commonTypes';
+import { NativeEvent, WorkletFunction } from '../commonTypes';
 import WorkletEventHandler from '../WorkletEventHandler';
 import { Context, DependencyList } from './commonTypes';
 import { useEvent, useHandler } from './Hooks';
@@ -10,7 +10,7 @@ export interface ScrollHandler<TContext extends Context>
   (event: NativeScrollEvent, context?: TContext): void;
 }
 
-interface ScrollEvent extends NativeScrollEvent {
+interface ScrollEvent extends NativeScrollEvent, NativeEvent<ScrollEvent> {
   eventName: string;
 }
 export interface ScrollHandlers<TContext extends Context> {
@@ -25,7 +25,7 @@ export interface ScrollHandlers<TContext extends Context> {
 export function useAnimatedScrollHandler<TContext extends Context>(
   handlers: ScrollHandlers<TContext> | ScrollHandler<TContext>,
   dependencies?: DependencyList
-): RefObject<WorkletEventHandler> {
+): RefObject<WorkletEventHandler<ScrollEvent>> {
   // case when handlers is a function
   const scrollHandlers: ScrollHandlers<TContext> =
     typeof handlers === 'function' ? { onScroll: handlers } : handlers;