react-native-reanimated 2.3.0-beta.2 → 2.3.1

package/src/reanimated1/core/Core.test.js

@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 jest.mock('../../ReanimatedEventEmitter');
 jest.mock('../../ReanimatedModule');
-jest.mock('../../reanimated2/NativeReanimated');
+jest.mock('../../reanimated2/NativeReanimated/NativeReanimated');
 
 describe('Core Animated components', () => {
   xit('fails if something other then a node or function that returns a node is passed to Animated.Code exec prop', () => {

package/src/reanimated2/NativeMethods.ts

@@ -1,4 +1,6 @@
-/* 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';
@@ -47,3 +49,13 @@ export function scrollTo(
   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

@@ -1,5 +1,3 @@
-import { AnimationObject } from '../animation';
-import { PrimitiveValue } from '../animation/commonTypes';
 import { SharedValue } from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 
@@ -13,15 +11,7 @@ export class NativeReanimated {
     this.useOnlyV1 = InnerNativeModule === null;
   }
 
-  installCoreFunctions(
-    valueSetter: (
-      value:
-        | (() => AnimationObject)
-        | AnimationObject
-        | PrimitiveValue
-        | Descriptor
-    ) => void
-  ): void {
+  installCoreFunctions(valueSetter: <T>(value: T) => void): void {
     return InnerNativeModule.installCoreFunctions(valueSetter);
   }
 
@@ -75,4 +65,8 @@ export class NativeReanimated {
   ): Promise<T> {
     return InnerNativeModule.getViewProp(viewTag, propName, callback);
   }
+
+  enableLayoutAnimations(flag: boolean): void {
+    InnerNativeModule.enableLayoutAnimations(flag);
+  }
 }

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

@@ -26,7 +26,7 @@ export const colorProps = [
   'overlayColor',
 ];
 
-const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
+export const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
 
 let updatePropsByPlatform;
 if (shouldBeUseWeb()) {

package/src/reanimated2/ViewDescriptorsSet.ts

@@ -2,6 +2,7 @@ import { useRef } from 'react';
 import { makeMutable } from './core';
 import { SharedValue } from './commonTypes';
 import { Descriptor } from './hook/commonTypes';
+import { Platform } from 'react-native';
 
 export interface ViewRefSet<T> {
   items: Set<T>;
@@ -23,6 +24,9 @@ export interface ViewDescriptorsSet {
   ) => void;
 }
 
+const scheduleUpdates =
+  Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
+
 export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   const ref = useRef<ViewDescriptorsSet | null>(null);
   if (ref.current === null) {
@@ -44,7 +48,7 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
         if (!data.waitForInsertSync) {
           data.waitForInsertSync = true;
 
-          setImmediate(() => {
+          scheduleUpdates(() => {
             data.sharableViewDescriptors.value = data.items;
             data.waitForInsertSync = false;
           });
@@ -57,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)) {

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(
@@ -57,7 +57,7 @@ export function withDelay(
 
     function onStart(
       animation: DelayAnimation,
-      value: PrimitiveValue,
+      value: AnimatableValue,
       now: Timestamp,
       previousAnimation: DelayAnimation
     ): 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;

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;
@@ -32,28 +34,31 @@ export interface StyleLayoutAnimation extends HigherOrderAnimation {
 // if path cannot be resolved returns undefined
 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
+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 @@ export 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 */
@@ -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
@@ -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/component/FlatList.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FlatList, FlatListProps, LayoutChangeEvent } from 'react-native';
+import WrappedComponents from './WrappedComponents';
+import createAnimatedComponent from '../../createAnimatedComponent';
+import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/commonTypes';
+
+const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
+
+const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
+  const cellRenderer: React.FC<{
+    onLayout: (event: LayoutChangeEvent) => void;
+  }> = (props) => {
+    return (
+      <WrappedComponents.View
+        layout={itemLayoutAnimation}
+        onLayout={props.onLayout}>
+        {props.children}
+      </WrappedComponents.View>
+    );
+  };
+
+  return cellRenderer;
+};
+
+interface ReanimatedFlatlistProps<ItemT> extends FlatListProps<ItemT> {
+  itemLayoutAnimation?: ILayoutAnimationBuilder;
+}
+
+type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatlistProps<T>>;
+
+const ReanimatedFlatlist: ReanimatedFlatListFC = ({
+  itemLayoutAnimation,
+  ...restProps
+}) => {
+  const cellRenderer = React.useMemo(
+    () => createCellRenderer(itemLayoutAnimation),
+    []
+  );
+  return (
+    <AnimatedFlatList {...restProps} CellRendererComponent={cellRenderer} />
+  );
+};
+
+export default ReanimatedFlatlist;

package/src/reanimated2/component/WrappedComponents.ts

@@ -0,0 +1,11 @@
+import { Image, ScrollView, Text, View } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const WrappedComponents = {
+  View: createAnimatedComponent(View),
+  Text: createAnimatedComponent(Text as any),
+  Image: createAnimatedComponent(Image as any),
+  ScrollView: createAnimatedComponent(ScrollView),
+};
+
+export default WrappedComponents;

package/src/reanimated2/component/index.ts

@@ -0,0 +1,9 @@
+import ReanimatedFlatlist from './FlatList';
+import WrappedComponents from './WrappedComponents';
+
+const ReanimatedComponents = {
+  ...WrappedComponents,
+  FlatList: ReanimatedFlatlist,
+};
+
+export default ReanimatedComponents;