react-native-reanimated 2.3.0-beta.3 → 2.4.0

package/src/reanimated2/animation/index.ts

@@ -1,16 +1,15 @@
 export {
-  AnimationObject,
-  Animation,
   HigherOrderAnimation,
-  AnimationCallback,
   NextAnimation,
-  Timestamp,
+  RepeatAnimation,
+  SequenceAnimation,
+  StyleLayoutAnimation,
 } from './commonTypes';
 export { cancelAnimation, defineAnimation, initialUpdaterRun } from './util';
 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';
+export { withDelay } from './delay';
+export { withRepeat } from './repeat';
+export { withSequence } from './sequence';
+export { withStyleAnimation } from './styleAnimation';

package/src/reanimated2/animation/repeat.ts

@@ -2,20 +2,10 @@ import { defineAnimation } from './util';
 import {
   Animation,
   AnimationCallback,
-  NextAnimation,
   AnimatableValue,
   Timestamp,
-  HigherOrderAnimation,
-} from './commonTypes';
-
-export interface RepeatAnimation
-  extends Animation<RepeatAnimation>,
-    HigherOrderAnimation {
-  reps: number;
-  startValue: AnimatableValue;
-  toValue?: AnimatableValue;
-  previousAnimation?: RepeatAnimation;
-}
+} from '../commonTypes';
+import { NextAnimation, RepeatAnimation } from './commonTypes';
 
 export interface InnerRepeatAnimation
   extends Omit<RepeatAnimation, 'toValue' | 'startValue'> {

package/src/reanimated2/animation/sequence.ts

@@ -1,18 +1,11 @@
 import { defineAnimation } from './util';
+import { NextAnimation, SequenceAnimation } from './commonTypes';
 import {
   Animation,
-  Timestamp,
-  NextAnimation,
   AnimatableValue,
-  HigherOrderAnimation,
   AnimationObject,
-} from './commonTypes';
-
-export interface SequenceAnimation
-  extends Animation<SequenceAnimation>,
-    HigherOrderAnimation {
-  animationIndex: number;
-}
+  Timestamp,
+} from '../commonTypes';
 
 export function withSequence(
   ..._animations: NextAnimation<AnimationObject>[]

package/src/reanimated2/animation/spring.ts

@@ -4,7 +4,7 @@ import {
   AnimationCallback,
   AnimatableValue,
   Timestamp,
-} from './commonTypes';
+} from '../commonTypes';
 
 interface SpringConfig {
   mass?: number;

package/src/reanimated2/animation/styleAnimation.ts

@@ -1,32 +1,17 @@
 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';
-
-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;
-}
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 
 // resolves path to value for nested objects
 // if path cannot be resolved returns undefined
@@ -134,6 +119,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,

package/src/reanimated2/animation/timing.ts

@@ -5,7 +5,7 @@ import {
   AnimationCallback,
   Timestamp,
   AnimatableValue,
-} from './commonTypes';
+} from '../commonTypes';
 
 interface TimingConfig {
   duration?: number;

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;
 

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,47 @@ 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;

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;

package/src/reanimated2/core.ts

@@ -1,18 +1,16 @@
 /* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
 import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
-import { nativeShouldBeMock, shouldBeUseWeb } from './PlatformChecker';
+import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
 import {
   BasicWorkletFunction,
   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';
 
@@ -371,8 +369,8 @@ if (!NativeReanimatedModule.useOnlyV1) {
       : (workletValueSetterJS as <T>(value: T) => void)
   );
 
-  const capturableConsole = console;
-  isConfigured() &&
+  if (!isWeb() && isConfigured()) {
+    const capturableConsole = console;
     runOnUI(() => {
       'worklet';
       const console = {
@@ -383,5 +381,40 @@ if (!NativeReanimatedModule.useOnlyV1) {
         info: runOnJS(capturableConsole.info),
       };
       _setGlobalConsole(console);
+      if (global.performance == null) {
+        global.performance = {
+          now: global._chronoNow,
+        };
+      }
     })();
+  }
+}
+
+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

@@ -13,6 +13,7 @@ declare global {
     tag: number,
     flag: { value: boolean; _value: boolean }
   ) => void;
+  const _setGestureState: (handlerTag: number, newState: number) => void;
   const _updateProps: (
     tag: number,
     name: string,
@@ -25,16 +26,20 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _chronoNow: () => number;
   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;
+      _chronoNow: () => number;
+      performance: { now: () => number };
       LayoutAnimationRepository: {
         configs: Record<string, unknown>;
         registerConfig(tag: number, config: Record<string, unknown>): void;

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/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/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
     );

package/src/reanimated2/hook/utils.ts

@@ -1,5 +1,4 @@
 import { MutableRefObject, useEffect, useRef } from 'react';
-import { AnimationObject } from '../animation';
 import { processColor } from '../Colors';
 import {
   AnimatedStyle,
@@ -7,9 +6,10 @@ import {
   NestedObjectValues,
   StyleProps,
   WorkletFunction,
+  AnimationObject,
 } from '../commonTypes';
 import { makeRemote } from '../core';
-import { isWeb } from '../PlatformChecker';
+import { isWeb, isJest } from '../PlatformChecker';
 import { colorProps } from '../UpdateProps';
 import WorkletEventHandler from '../WorkletEventHandler';
 import {
@@ -80,7 +80,7 @@ export function useHandler<T, TContext extends Context>(
     savedDependencies
   );
   initRef.current.savedDependencies = dependencies;
-  const useWeb = isWeb();
+  const useWeb = isWeb() || isJest();
 
   return { context, doDependenciesDiffer, useWeb };
 }
@@ -163,7 +163,12 @@ export function parseColors(updates: AnimatedStyle): void {
   'worklet';
   for (const key in updates) {
     if (colorProps.indexOf(key) !== -1) {
-      updates[key] = processColor(updates[key]);
+      // value could be an animation in which case processColor will recognize it and will return undefined
+      // -> in such a case we don't want to override style of that key
+      const processedColor = processColor(updates[key]);
+      if (processedColor !== undefined) {
+        updates[key] = processedColor;
+      }
     }
   }
 }
@@ -201,33 +206,29 @@ export function isAnimated(prop: NestedObjectValues<AnimationObject>): boolean {
   return false;
 }
 
-export function styleDiff(
+export function styleDiff<T extends AnimatedStyle>(
   oldStyle: AnimatedStyle,
   newStyle: AnimatedStyle
-): AnimatedStyle {
+): Partial<T> {
   'worklet';
-  const diff: AnimatedStyle = {};
-  Object.keys(oldStyle).forEach((key) => {
+  const diff: any = {};
+  for (const key in oldStyle) {
     if (newStyle[key] === undefined) {
       diff[key] = null;
     }
-  });
-  Object.keys(newStyle).forEach((key) => {
+  }
+  for (const key in newStyle) {
     const value = newStyle[key];
     const oldValue = oldStyle[key];
 
     if (isAnimated(value)) {
       // do nothing
-      return;
+      continue;
     }
-    if (
-      oldValue !== value &&
-      JSON.stringify(oldValue) !== JSON.stringify(value)
-    ) {
-      // I'd use deep equal here but that'd take additional work and this was easier
+    if (oldValue !== value) {
       diff[key] = value;
     }
-  });
+  }
   return diff;
 }
 

package/src/reanimated2/index.ts

@@ -2,9 +2,11 @@ export * from './core';
 export * from './hook';
 export * from './animation';
 export * from './interpolation';
+export * from './interpolateColor';
 export * from './Easing';
 export * from './NativeMethods';
 export * from './Colors';
 export * from './PropAdapters';
 export * from './layoutReanimation';
 export * from './utils';
+export * from './commonTypes';