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

package/src/reanimated2/core.ts

@@ -1,7 +1,7 @@
 /* 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,
@@ -10,7 +10,7 @@ import {
 } from './commonTypes';
 import {
   AnimationObject,
-  PrimitiveValue,
+  AnimatableValue,
   Timestamp,
 } from './animation/commonTypes';
 import { Descriptor } from './hook/commonTypes';
@@ -31,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> = () => {
@@ -183,9 +189,9 @@ export function getTimestamp(): number {
   return _getTimestamp();
 }
 
-function workletValueSetter(
+function workletValueSetter<T extends WorkletValue>(
   this: WorkletValueSetterContext,
-  value: (() => AnimationObject) | AnimationObject | PrimitiveValue | Descriptor
+  value: T
 ): void {
   'worklet';
   const previousAnimation = this._animation;
@@ -200,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)
@@ -244,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) {
@@ -267,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
     ) => {
@@ -284,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 {
@@ -296,7 +306,7 @@ function workletValueSetterJS(
 
     requestFrame(step);
   } else {
-    this._setValue && this._setValue(value as PrimitiveValue | Descriptor);
+    this._setValue && this._setValue(value as AnimatableValue | Descriptor);
   }
 }
 
@@ -356,11 +366,13 @@ export function runOnJS<A extends any[], R>(
 
 if (!NativeReanimatedModule.useOnlyV1) {
   NativeReanimatedModule.installCoreFunctions(
-    NativeReanimatedModule.native ? workletValueSetter : workletValueSetterJS
+    NativeReanimatedModule.native
+      ? (workletValueSetter as <T>(value: T) => void)
+      : (workletValueSetterJS as <T>(value: T) => void)
   );
 
-  const capturableConsole = console;
-  isConfigured() &&
+  if (!isWeb() && isConfigured()) {
+    const capturableConsole = console;
     runOnUI(() => {
       'worklet';
       const console = {
@@ -371,5 +383,38 @@ if (!NativeReanimatedModule.useOnlyV1) {
         info: runOnJS(capturableConsole.info),
       };
       _setGlobalConsole(console);
+      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,13 +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/useAnimatedStyle.ts

@@ -31,7 +31,7 @@ import {
   ViewRefSet,
 } from '../ViewDescriptorsSet';
 import { isJest, shouldBeUseWeb } from '../PlatformChecker';
-import { AnimationObject, PrimitiveValue } from '../animation/commonTypes';
+import { AnimationObject } from '../animation/commonTypes';
 import {
   AdapterWorkletFunction,
   AnimatedStyle,
@@ -122,7 +122,7 @@ function prepareAnimation(
 function runAnimations(
   animation: AnimatedStyle,
   timestamp: Timestamp,
-  key: PrimitiveValue,
+  key: number | string,
   result: AnimatedStyle,
   animationsActive: SharedValue<boolean>
 ): boolean {

package/src/reanimated2/js-reanimated/JSReanimated.ts

@@ -2,21 +2,11 @@ import MapperRegistry from './MapperRegistry';
 import MutableValue from './MutableValue';
 import Mapper from './Mapper';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
-import {
-  AnimationObject,
-  PrimitiveValue,
-  Timestamp,
-} from '../animation/commonTypes';
-import { Descriptor } from '../hook/commonTypes';
+import { Timestamp } from '../animation/commonTypes';
+import { NestedObjectValues } from '../commonTypes';
 
 export default class JSReanimated extends NativeReanimated {
-  _valueSetter?: (
-    value:
-      | (() => AnimationObject)
-      | AnimationObject
-      | PrimitiveValue
-      | Descriptor
-  ) => void = undefined;
+  _valueSetter?: <T>(value: T) => void = undefined;
 
   _renderRequested = false;
   _mapperRegistry = new MapperRegistry(this);
@@ -68,15 +58,7 @@ export default class JSReanimated extends NativeReanimated {
     }
   }
 
-  installCoreFunctions(
-    valueSetter: (
-      value:
-        | (() => AnimationObject)
-        | AnimationObject
-        | PrimitiveValue
-        | Descriptor
-    ) => void
-  ): void {
+  installCoreFunctions(valueSetter: <T>(value: T) => void): void {
     this._valueSetter = valueSetter;
   }
 
@@ -84,8 +66,9 @@ export default class JSReanimated extends NativeReanimated {
     return value;
   }
 
-  makeMutable<T>(value: T): MutableValue {
-    return new MutableValue(value, this._valueSetter);
+  makeMutable<T>(value: T): MutableValue<T> {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return new MutableValue(value, this._valueSetter!);
   }
 
   makeRemote<T>(object = {}): T {
@@ -94,8 +77,8 @@ export default class JSReanimated extends NativeReanimated {
 
   startMapper(
     mapper: () => void,
-    inputs: any[] = [],
-    outputs: any[] = []
+    inputs: NestedObjectValues<MutableValue<unknown>>[] = [],
+    outputs: NestedObjectValues<MutableValue<unknown>>[] = []
   ): number {
     const instance = new Mapper(this, mapper, inputs, outputs);
     const mapperId = this._mapperRegistry.startMapper(instance);
@@ -115,4 +98,10 @@ export default class JSReanimated extends NativeReanimated {
   unregisterEventHandler(_: string): void {
     // noop
   }
+
+  enableLayoutAnimations() {
+    console.warn(
+      '[Reanimated] enableLayoutAnimations is not available for WEB yet'
+    );
+  }
 }

package/src/reanimated2/js-reanimated/Mapper.ts

@@ -1,13 +1,22 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
+import { NestedObjectValues } from '../commonTypes';
+import JSReanimated from './JSReanimated';
 import MutableValue from './MutableValue';
 
-export default class Mapper {
+export default class Mapper<T> {
   static MAPPER_ID = 1;
+  id: number;
+  inputs: MutableValue<T>[];
+  outputs: MutableValue<T>[];
+  mapper: () => void;
 
   dirty = true;
 
-  constructor(module, mapper, inputs: any[] = [], outputs: any[] = []) {
+  constructor(
+    module: JSReanimated,
+    mapper: () => void,
+    inputs: NestedObjectValues<MutableValue<T>>[] = [],
+    outputs: NestedObjectValues<MutableValue<T>>[] = []
+  ) {
     this.id = Mapper.MAPPER_ID++;
     this.inputs = this.extractMutablesFromArray(inputs);
     this.outputs = this.extractMutablesFromArray(outputs);
@@ -23,16 +32,20 @@ export default class Mapper {
     });
   }
 
-  execute() {
+  execute(): void {
     this.dirty = false;
     this.mapper();
   }
 
-  extractMutablesFromArray(array) {
-    const res = [];
+  extractMutablesFromArray<T>(
+    array: NestedObjectValues<MutableValue<T>>
+  ): MutableValue<T>[] {
+    const res: MutableValue<T>[] = [];
 
-    function extractMutables(value) {
-      if (value instanceof MutableValue) {
+    function extractMutables(value: NestedObjectValues<MutableValue<T>>) {
+      if (value == null) {
+        // return;
+      } else if (value instanceof MutableValue) {
         res.push(value);
       } else if (Array.isArray(value)) {
         value.forEach((v) => extractMutables(v));

package/src/reanimated2/js-reanimated/MapperRegistry.ts

@@ -1,27 +1,29 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-export default class MapperRegistry {
-  sortedMappers = [];
-  mappers = new Map();
+import JSReanimated from './JSReanimated';
+import Mapper from './Mapper';
+
+export default class MapperRegistry<T> {
+  sortedMappers: Mapper<T>[] = [];
+  mappers: Map<number, Mapper<T>> = new Map();
+  _module: JSReanimated;
 
   updatedSinceLastExecute = false;
 
-  constructor(module) {
+  constructor(module: JSReanimated) {
     this._module = module;
   }
 
-  startMapper(mapper) {
+  startMapper(mapper: Mapper<T>): number {
     this.mappers.set(mapper.id, mapper);
     this.updatedSinceLastExecute = true;
     return mapper.id;
   }
 
-  stopMapper(id) {
+  stopMapper(id: number): void {
     this.mappers.delete(id);
     this.updatedSinceLastExecute = true;
   }
 
-  execute() {
+  execute(): void {
     if (this.updatedSinceLastExecute) {
       this.updateOrder();
       this.updatedSinceLastExecute = false;
@@ -35,10 +37,10 @@ export default class MapperRegistry {
     }
   }
 
-  updateOrder() {
+  updateOrder(): void {
     const nodes = [...this.mappers.values()].map((mapper) => new Node(mapper));
 
-    const mappersById = {};
+    const mappersById: Record<number, Mapper<T>> = {};
     this.mappers.forEach((mapper) => {
       mappersById[mapper.id] = mapper;
     });
@@ -75,9 +77,9 @@ export default class MapperRegistry {
       }
     }
 
-    const post = {};
+    const post: Record<number, number> = {};
     let postCounter = 1;
-    const dfs = (node) => {
+    const dfs = (node: Node<T>) => {
       const index = nodes.indexOf(node);
       if (index === -1) {
         // this node has already been handled
@@ -99,7 +101,8 @@ export default class MapperRegistry {
     while (nodes.length) dfs(nodes[0]);
 
     const postArray = Object.keys(post).map((key) => {
-      return [key, post[key]];
+      const num = parseInt(key);
+      return [num, post[num]];
     });
     postArray.sort((a, b) => {
       return b[1] - a[1];
@@ -114,16 +117,16 @@ export default class MapperRegistry {
     }
   }
 
-  get needRunOnRender() {
+  get needRunOnRender(): boolean {
     return this.updatedSinceLastExecute;
   }
 }
 
-class Node {
-  mapper = null;
-  children = [];
+class Node<T> {
+  mapper: Mapper<T>;
+  children: Node<T>[];
 
-  constructor(mapper, _parents = [], children = []) {
+  constructor(mapper: Mapper<T>, children = []) {
     this.mapper = mapper;
     this.children = children;
   }

package/src/reanimated2/js-reanimated/MutableValue.ts

@@ -1,36 +1,36 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-export default class MutableValue {
+export default class MutableValue<T> {
   static MUTABLE_ID = 1;
-
+  _id: number;
+  _value: T;
+  _setter: (value: T) => void;
   _animation = null;
-  _listeners = [];
+  _listeners: (() => void)[] = [];
 
-  constructor(value, setter) {
+  constructor(value: T, setter: (value: T) => void) {
     this._id = MutableValue.MUTABLE_ID++;
     this._value = value;
     this._setter = setter;
   }
 
-  get value() {
+  get value(): T {
     return this._value;
   }
 
-  set value(nextValue) {
+  set value(nextValue: T) {
     this._setter(nextValue);
   }
 
   // this changes the value finally and is supposed to be called from this._setter
-  _setValue(newValue) {
+  _setValue(newValue: T): void {
     this._value = newValue;
     this._triggerListener();
   }
 
-  addListener(listener) {
+  addListener(listener: () => void): void {
     this._listeners.push(listener);
   }
 
-  _triggerListener() {
+  _triggerListener(): void {
     for (let i = 0, len = this._listeners.length; i < len; ++i) {
       this._listeners[i]();
     }

package/src/reanimated2/js-reanimated/index.ts

@@ -1,10 +1,18 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import JSReanimated from './JSReanimated';
 import { shouldBeUseWeb } from '../PlatformChecker';
+import { AnimatedStyle, StyleProps } from '../commonTypes';
 
 const reanimatedJS = new JSReanimated();
 
+interface JSReanimatedComponent {
+  previousStyle: StyleProps;
+  setNativeProps: (style: StyleProps) => void;
+  props: Record<string, string | number>;
+  _touchableNode: {
+    setAttribute: (key: string, props: unknown) => void;
+  };
+}
+
 if (shouldBeUseWeb()) {
   global._frameTimestamp = null;
   global._setGlobalConsole = (_val) => {
@@ -28,12 +36,21 @@ if (shouldBeUseWeb()) {
       "[Reanimated] You can't use 'scrollTo' method with Chrome Debugger or with web version"
     );
   };
+  global._setGestureState = () => {
+    console.warn(
+      "[Reanimated] You can't use 'setGestureState' method with Chrome Debugger or with web version"
+    );
+  };
 }
 
-export const _updatePropsJS = (updates, viewRef) => {
-  if (viewRef?._component) {
+export const _updatePropsJS = (
+  updates: StyleProps | AnimatedStyle,
+  viewRef: { _component?: JSReanimatedComponent }
+): void => {
+  if (viewRef._component) {
+    const component = viewRef._component;
     const [rawStyles] = Object.keys(updates).reduce(
-      (acc, key) => {
+      (acc: [StyleProps, AnimatedStyle], key) => {
         const value = updates[key];
         const index = typeof value === 'function' ? 1 : 0;
         acc[index][key] = value;
@@ -42,18 +59,15 @@ export const _updatePropsJS = (updates, viewRef) => {
       [{}, {}]
     );
 
-    if (typeof viewRef._component.setNativeProps === 'function') {
-      setNativeProps(viewRef._component, rawStyles);
-    } else if (Object.keys(viewRef._component.props).length > 0) {
-      Object.keys(viewRef._component.props).forEach((key) => {
+    if (typeof component.setNativeProps === 'function') {
+      setNativeProps(component, rawStyles);
+    } else if (Object.keys(component.props).length > 0) {
+      Object.keys(component.props).forEach((key) => {
         if (!rawStyles[key]) {
           return;
         }
         const dashedKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
-        viewRef._component._touchableNode.setAttribute(
-          dashedKey,
-          rawStyles[key]
-        );
+        component._touchableNode.setAttribute(dashedKey, rawStyles[key]);
       });
     } else {
       console.warn('It is not possible to manipulate component');
@@ -61,7 +75,10 @@ export const _updatePropsJS = (updates, viewRef) => {
   }
 };
 
-const setNativeProps = (component, style) => {
+const setNativeProps = (
+  component: JSReanimatedComponent,
+  style: StyleProps
+): void => {
   const previousStyle = component.previousStyle ? component.previousStyle : {};
   const currentStyle = { ...previousStyle, ...style };
   component.previousStyle = currentStyle;

package/src/reanimated2/layoutReanimation/{LayoutAnimationRepository.tsx → LayoutAnimationRepository.ts}

@@ -1,6 +1,8 @@
 /* global _stopObservingProgress, _startObservingProgress */
 import { runOnUI } from '../core';
 import { withStyleAnimation } from '../animation/styleAnimation';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 
 runOnUI(() => {
   'worklet';
@@ -36,13 +38,22 @@ runOnUI(() => {
         for (const key in layoutAnimation) {
           currentAnimation[key] = layoutAnimation[key];
         }
-        enteringAnimationForTag[tag] = null;
       }
 
       const sv: { value: boolean; _value: boolean } = configs[tag].sv;
       _stopObservingProgress(tag, false);
       _startObservingProgress(tag, sv);
-      sv._value = Object.assign({}, sv._value, style.initialValues);
+
+      const backupColor: Record<string, string> = {};
+      for (const key in style.initialValues) {
+        if (ColorProperties.includes(key)) {
+          const value = style.initialValues[key];
+          backupColor[key] = value;
+          style.initialValues[key] = processColor(value);
+        }
+      }
+
+      sv.value = Object.assign({}, sv._value, style.initialValues);
       _stopObservingProgress(tag, false);
       const animation = withStyleAnimation(currentAnimation);
 
@@ -51,10 +62,12 @@ runOnUI(() => {
           _stopObservingProgress(tag, finished);
         }
         style.callback && style.callback(finished);
-        if (type === 'entering') {
-          enteringAnimationForTag[tag] = null;
-        }
       };
+
+      if (backupColor) {
+        configs[tag].sv._value = { ...configs[tag].sv.value, ...backupColor };
+      }
+
       configs[tag].sv.value = animation;
       _startObservingProgress(tag, sv);
     },

package/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts

@@ -14,32 +14,43 @@ export type LayoutAnimation = {
 
 export type AnimationFunction = (a?: any, b?: any, c?: any) => any; // this is just a temporary mock
 
-export interface EntryExitAnimationsValues {
-  originX: number;
-  originY: number;
-  width: number;
-  height: number;
-  globalOriginX: number;
-  globalOriginY: number;
+export interface EntryAnimationsValues {
+  targetOriginX: number;
+  targetOriginY: number;
+  targetWidth: number;
+  targetHeight: number;
+  targetGlobalOriginX: number;
+  targetGlobalOriginY: number;
+}
+
+export interface ExitAnimationsValues {
+  currentOriginX: number;
+  currentOriginY: number;
+  currentWidth: number;
+  currentHeight: number;
+  currentGlobalOriginX: number;
+  currentGlobalOriginY: number;
 }
 
 export type EntryExitAnimationFunction = (
-  targetValues: EntryExitAnimationsValues
+  targetValues: EntryAnimationsValues | ExitAnimationsValues
 ) => LayoutAnimation;
 
+export type AnimationConfigFunction<T> = (targetValues: T) => LayoutAnimation;
+
 export interface LayoutAnimationsValues {
-  originX: number;
-  originY: number;
-  width: number;
-  height: number;
-  globalOriginX: number;
-  globalOriginY: number;
-  boriginX: number;
-  boriginY: number;
-  bwidth: number;
-  bheight: number;
-  bglobalOriginX: number;
-  bglobalOriginY: number;
+  currentOriginX: number;
+  currentOriginY: number;
+  currentWidth: number;
+  currentHeight: number;
+  currentGlobalOriginX: number;
+  currentGlobalOriginY: number;
+  targetOriginX: number;
+  targetOriginY: number;
+  targetWidth: number;
+  targetHeight: number;
+  targetGlobalOriginX: number;
+  targetGlobalOriginY: number;
   windowWidth: number;
   windowHeight: number;
 }
@@ -76,3 +87,11 @@ export type LayoutAnimationAndConfig = [
 export interface IEntryExitAnimationBuilder {
   build: () => EntryExitAnimationFunction;
 }
+
+export interface IEntryAnimationBuilder {
+  build: () => AnimationConfigFunction<EntryAnimationsValues>;
+}
+
+export interface IExitAnimationBuilder {
+  build: () => AnimationConfigFunction<ExitAnimationsValues>;
+}