react-native-reanimated 3.0.0-rc.8 → 3.0.0

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -1,7 +1,15 @@
 import { NativeModules } from 'react-native';
-import { ShareableRef, ShareableSyncDataHolderRef } from '../commonTypes';
-import { LayoutAnimationFunction } from '../layoutReanimation';
-import { version as jsVersion } from '../../../package.json';
+import {
+  ShareableRef,
+  ShareableSyncDataHolderRef,
+  Value3D,
+  ValueRotation,
+} from '../commonTypes';
+import {
+  LayoutAnimationFunction,
+  LayoutAnimationType,
+} from '../layoutReanimation';
+import { checkVersion } from '../platform-specific/checkVersion';
 
 export class NativeReanimated {
   native: boolean;
@@ -15,44 +23,40 @@ export class NativeReanimated {
     this.InnerNativeModule = global.__reanimatedModuleProxy;
     this.native = native;
     if (native) {
-      this.checkVersion();
-    }
-  }
-
-  checkVersion(): void {
-    const cppVersion = global._REANIMATED_VERSION_CPP;
-    const ok = (() => {
-      if (
-        jsVersion.match(/^\d+\.\d+\.\d+$/) &&
-        cppVersion.match(/^\d+\.\d+\.\d+$/)
-      ) {
-        // x.y.z, compare only major and minor, skip patch
-        const [jsMajor, jsMinor] = jsVersion.split('.');
-        const [cppMajor, cppMinor] = cppVersion.split('.');
-        return jsMajor === cppMajor && jsMinor === cppMinor;
-      } else {
-        // alpha, beta or rc, compare everything
-        return jsVersion === cppVersion;
+      if (this.InnerNativeModule === undefined) {
+        console.error(
+          `[Reanimated] The native part of Reanimated doesn't seem to be initialized. This could be caused by\n\
+  - not rebuilding the app after installing or upgrading Reanimated\n\
+  - trying to run Reanimated on an unsupported platform\n\
+  - running in a brownfield app without manually initializing the native library`
+        );
+        return;
       }
-    })();
-    if (!ok) {
-      console.error(
-        `[Reanimated] Mismatch between JavaScript part and native part of Reanimated (${jsVersion} vs. ${cppVersion}). Did you forget to re-build the app after upgrading react-native-reanimated? If you use Expo Go, you must downgrade to ${cppVersion} which is bundled into Expo SDK.`
-      );
-      // TODO: detect Expo managed workflow
+      checkVersion();
     }
   }
 
-  getTimestamp(): number {
-    throw new Error('stub implementation, used on the web only');
-  }
-
-  installCoreFunctions(valueUnpacker: <T>(value: T) => T): void {
-    return this.InnerNativeModule.installCoreFunctions(valueUnpacker);
+  installCoreFunctions(
+    callGuard: <T extends Array<any>, U>(
+      fn: (...args: T) => U,
+      ...args: T
+    ) => void,
+    valueUnpacker: <T>(value: T) => T
+  ): void {
+    return this.InnerNativeModule.installCoreFunctions(
+      callGuard,
+      valueUnpacker
+    );
   }
 
-  makeShareableClone<T>(value: T): ShareableRef<T> {
-    return this.InnerNativeModule.makeShareableClone(value);
+  makeShareableClone<T>(
+    value: T,
+    shouldPersistRemote: boolean
+  ): ShareableRef<T> {
+    return this.InnerNativeModule.makeShareableClone(
+      value,
+      shouldPersistRemote
+    );
   }
 
   makeSynchronizedDataHolder<T>(
@@ -79,9 +83,15 @@ export class NativeReanimated {
   registerSensor<T>(
     sensorType: number,
     interval: number,
-    handler: ShareableRef<T>
+    iosReferenceFrame: number,
+    handler: ShareableRef<T> | ((data: Value3D | ValueRotation) => void)
   ) {
-    return this.InnerNativeModule.registerSensor(sensorType, interval, handler);
+    return this.InnerNativeModule.registerSensor(
+      sensorType,
+      interval,
+      iosReferenceFrame,
+      handler
+    );
   }
 
   unregisterSensor(sensorId: number) {
@@ -109,10 +119,16 @@ export class NativeReanimated {
 
   configureLayoutAnimation(
     viewTag: number,
-    type: string,
+    type: LayoutAnimationType,
+    sharedTransitionTag: string,
     config: ShareableRef<Keyframe | LayoutAnimationFunction>
   ) {
-    this.InnerNativeModule.configureLayoutAnimation(viewTag, type, config);
+    this.InnerNativeModule.configureLayoutAnimation(
+      viewTag,
+      type,
+      sharedTransitionTag,
+      config
+    );
   }
 
   enableLayoutAnimations(flag: boolean): void {
@@ -123,8 +139,14 @@ export class NativeReanimated {
     this.InnerNativeModule.configureProps(uiProps, nativeProps);
   }
 
-  subscribeForKeyboardEvents(handler: ShareableRef<number>): number {
-    return this.InnerNativeModule.subscribeForKeyboardEvents(handler);
+  subscribeForKeyboardEvents(
+    handler: ShareableRef<number>,
+    isStatusBarTranslucent: boolean
+  ): number {
+    return this.InnerNativeModule.subscribeForKeyboardEvents(
+      handler,
+      isStatusBarTranslucent
+    );
   }
 
   unsubscribeFromKeyboardEvents(listenerId: number): void {

package/src/reanimated2/animation/styleAnimation.ts

@@ -46,7 +46,7 @@ export function setPath<T>(
   for (let i = 0; i < keys.length - 1; i++) {
     // creates entry if there isn't one
     currObj = currObj as { [key: string]: NestedObjectValues<T> };
-    if (!currObj[keys[i]]) {
+    if (!(keys[i] in currObj)) {
       // if next key is a number create an array
       if (typeof keys[i + 1] === 'number') {
         currObj[keys[i]] = [];
@@ -178,6 +178,13 @@ export function withStyleAnimation(
           if (prevAnimation && !prevVal) {
             prevVal = prevAnimation.current;
           }
+          if (prevVal === undefined) {
+            console.warn(
+              `Initial values for animation are missing for property ${currentEntry.path.join(
+                '.'
+              )}`
+            );
+          }
           setPath(animation.current, currentEntry.path, prevVal);
           let currentAnimation: AnimationObject;
           if (

package/src/reanimated2/animation/util.ts

@@ -7,7 +7,14 @@ import {
   StyleLayoutAnimation,
 } from './commonTypes';
 /* global _WORKLET */
-import { ParsedColorArray, convertToHSVA, isColor, toRGBA } from '../Colors';
+import {
+  ParsedColorArray,
+  isColor,
+  convertToRGBA,
+  rgbaArrayToRGBAColor,
+  toGammaSpace,
+  toLinearSpace,
+} from '../Colors';
 
 import {
   AnimatedStyle,
@@ -126,55 +133,59 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     return res;
   };
 
-  const tab = ['H', 'S', 'V', 'A'];
+  const tab = ['R', 'G', 'B', 'A'];
   const colorOnStart = (
     animation: Animation<AnimationObject>,
     value: string | number,
     timestamp: Timestamp,
     previousAnimation: Animation<AnimationObject>
   ): void => {
-    let HSVAValue: ParsedColorArray;
-    let HSVACurrent: ParsedColorArray;
-    let HSVAToValue: ParsedColorArray;
+    let RGBAValue: ParsedColorArray;
+    let RGBACurrent: ParsedColorArray;
+    let RGBAToValue: ParsedColorArray;
     const res: Array<number> = [];
     if (isColor(value)) {
-      HSVACurrent = convertToHSVA(animation.current);
-      HSVAValue = convertToHSVA(value);
+      RGBACurrent = toLinearSpace(convertToRGBA(animation.current));
+      RGBAValue = toLinearSpace(convertToRGBA(value));
       if (animation.toValue) {
-        HSVAToValue = convertToHSVA(animation.toValue);
+        RGBAToValue = toLinearSpace(convertToRGBA(animation.toValue));
       }
     }
     tab.forEach((i, index) => {
       animation[i] = Object.assign({}, animationCopy);
-      animation[i].current = HSVACurrent[index];
-      animation[i].toValue = HSVAToValue ? HSVAToValue[index] : undefined;
+      animation[i].current = RGBACurrent[index];
+      animation[i].toValue = RGBAToValue ? RGBAToValue[index] : undefined;
       animation[i].onStart(
         animation[i],
-        HSVAValue[index],
+        RGBAValue[index],
         timestamp,
         previousAnimation ? previousAnimation[i] : undefined
       );
       res.push(animation[i].current);
     });
 
-    animation.current = toRGBA(res as ParsedColorArray);
+    animation.current = rgbaArrayToRGBAColor(
+      toGammaSpace(res as ParsedColorArray)
+    );
   };
 
   const colorOnFrame = (
     animation: Animation<AnimationObject>,
     timestamp: Timestamp
   ): boolean => {
-    const HSVACurrent = convertToHSVA(animation.current);
+    const RGBACurrent = toLinearSpace(convertToRGBA(animation.current));
     const res: Array<number> = [];
     let finished = true;
     tab.forEach((i, index) => {
-      animation[i].current = HSVACurrent[index];
+      animation[i].current = RGBACurrent[index];
       // @ts-ignore: disable-next-line
       finished &= animation[i].onFrame(animation[i], timestamp);
       res.push(animation[i].current);
     });
 
-    animation.current = toRGBA(res as ParsedColorArray);
+    animation.current = rgbaArrayToRGBAColor(
+      toGammaSpace(res as ParsedColorArray)
+    );
     return finished;
   };
 
@@ -247,6 +258,8 @@ type AnimationToDecoration<T extends AnimationObject | StyleLayoutAnimation> =
     ? NextAnimation<SequenceAnimation>
     : AnimatableValue | T;
 
+const IS_NATIVE = NativeReanimatedModule.native;
+
 export function defineAnimation<
   T extends AnimationObject | StyleLayoutAnimation
 >(starting: AnimationToDecoration<T>, factory: () => T): T {
@@ -261,7 +274,7 @@ export function defineAnimation<
     return animation;
   };
 
-  if (_WORKLET || !NativeReanimatedModule.native) {
+  if (_WORKLET || !IS_NATIVE) {
     return create();
   }
   // @ts-ignore: eslint-disable-line

package/src/reanimated2/commonTypes.ts

@@ -79,7 +79,6 @@ export type Context = Record<string, unknown>;
 export interface WorkletFunction {
   _closure?: Context;
   __workletHash?: number;
-  __optimalization?: number;
 }
 
 export interface BasicWorkletFunction<T> extends WorkletFunction {
@@ -145,6 +144,21 @@ export interface Animation<T extends AnimationObject> extends AnimationObject {
   ) => void;
 }
 
+export enum SensorType {
+  ACCELEROMETER = 1,
+  GYROSCOPE = 2,
+  GRAVITY = 3,
+  MAGNETIC_FIELD = 4,
+  ROTATION = 5,
+}
+export enum IOSReferenceFrame {
+  XArbitraryZVertical,
+  XArbitraryCorrectedZVertical,
+  XMagneticNorthZVertical,
+  XTrueNorthZVertical,
+  Auto,
+}
+
 export interface NumericAnimation {
   current?: number;
 }
@@ -160,6 +174,7 @@ export type Value3D = {
   x: number;
   y: number;
   z: number;
+  interfaceOrientation: InterfaceOrientation;
 };
 
 export type ValueRotation = {
@@ -170,8 +185,16 @@ export type ValueRotation = {
   yaw: number;
   pitch: number;
   roll: number;
+  interfaceOrientation: InterfaceOrientation;
 };
 
+export enum InterfaceOrientation {
+  ROTATION_0 = 0,
+  ROTATION_90 = 90,
+  ROTATION_180 = 180,
+  ROTATION_270 = 270,
+}
+
 export type ShadowNodeWrapper = object;
 
 export enum KeyboardState {
@@ -195,3 +218,7 @@ export interface MeasuredDimensions {
   pageX: number;
   pageY: number;
 }
+
+export interface AnimatedKeyboardOptions {
+  isStatusBarTranslucentAndroid?: boolean;
+}

package/src/reanimated2/component/FlatList.tsx

@@ -1,8 +1,14 @@
 import React, { ForwardedRef, forwardRef } from 'react';
-import { FlatList, FlatListProps, LayoutChangeEvent } from 'react-native';
+import {
+  FlatList,
+  FlatListProps,
+  LayoutChangeEvent,
+  StyleSheet,
+} from 'react-native';
 import ReanimatedView from './View';
 import createAnimatedComponent from '../../createAnimatedComponent';
 import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/commonTypes';
+import { StyleProps } from '../commonTypes';
 
 const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
 
@@ -10,12 +16,20 @@ interface AnimatedFlatListProps {
   onLayout: (event: LayoutChangeEvent) => void;
   // implicit `children` prop has been removed in @types/react^18.0.0
   children: React.ReactNode;
+  inverted?: boolean;
+  horizontal?: boolean;
 }
 
-const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
+const createCellRenderer = (
+  itemLayoutAnimation?: ILayoutAnimationBuilder,
+  cellStyle?: StyleProps
+) => {
   const cellRenderer = (props: AnimatedFlatListProps) => {
     return (
-      <ReanimatedView layout={itemLayoutAnimation} onLayout={props.onLayout}>
+      <ReanimatedView
+        layout={itemLayoutAnimation}
+        onLayout={props.onLayout}
+        style={cellStyle}>
         {props.children}
       </ReanimatedView>
     );
@@ -34,9 +48,15 @@ const ReanimatedFlatlist: ReanimatedFlatListFC = forwardRef(
   (props: ReanimatedFlatListProps<any>, ref: ForwardedRef<FlatList>) => {
     const { itemLayoutAnimation, ...restProps } = props;
 
+    const cellStyle = restProps?.inverted
+      ? restProps?.horizontal
+        ? styles.horizontallyInverted
+        : styles.verticallyInverted
+      : undefined;
+
     const cellRenderer = React.useMemo(
-      () => createCellRenderer(itemLayoutAnimation),
-      []
+      () => createCellRenderer(itemLayoutAnimation, cellStyle),
+      [cellStyle]
     );
 
     return (
@@ -49,4 +69,9 @@ const ReanimatedFlatlist: ReanimatedFlatListFC = forwardRef(
   }
 );
 
+const styles = StyleSheet.create({
+  verticallyInverted: { transform: [{ scaleY: -1 }] },
+  horizontallyInverted: { transform: [{ scaleX: -1 }] },
+});
+
 export default ReanimatedFlatlist;

package/src/reanimated2/core.ts

@@ -1,29 +1,28 @@
-/* global _setGlobalConsole */
 import NativeReanimatedModule from './NativeReanimated';
 import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
-import { BasicWorkletFunction, Value3D, ValueRotation } from './commonTypes';
+import {
+  AnimatedKeyboardOptions,
+  BasicWorkletFunction,
+  Value3D,
+  ValueRotation,
+} from './commonTypes';
 import {
   makeShareableCloneRecursive,
   makeShareable as makeShareableUnwrapped,
 } from './shareables';
-import { runOnUI, runOnJS } from './threads';
 import { startMapper as startMapperUnwrapped } from './mappers';
 import {
   makeMutable as makeMutableUnwrapped,
   makeRemote as makeRemoteUnwrapped,
 } from './mutables';
-import { LayoutAnimationFunction } from './layoutReanimation';
+import {
+  LayoutAnimationFunction,
+  LayoutAnimationType,
+} from './layoutReanimation';
+import { initializeUIRuntime } from './initializers';
 
 export { stopMapper } from './mappers';
 export { runOnJS, runOnUI } from './threads';
-export { getTimestamp } from './time';
-
-if (global._setGlobalConsole === undefined) {
-  // it can happen when Reanimated plugin wasn't added, but the user uses the only API from version 1
-  global._setGlobalConsole = () => {
-    // noop
-  };
-}
 
 export type ReanimatedConsole = Pick<
   Console,
@@ -114,56 +113,20 @@ export function getViewProp<T>(viewTag: string, propName: string): Promise<T> {
   });
 }
 
-function valueUnpacker(objectToUnpack: any, category?: string): any {
-  'worklet';
-  let workletsCache = global.__workletsCache;
-  let handleCache = global.__handleCache;
-  if (workletsCache === undefined) {
-    // init
-    workletsCache = global.__workletsCache = new Map();
-    handleCache = global.__handleCache = new WeakMap();
-  }
-  if (objectToUnpack.__workletHash) {
-    let workletFun = workletsCache.get(objectToUnpack.__workletHash);
-    if (workletFun === undefined) {
-      // eslint-disable-next-line no-eval
-      workletFun = eval('(' + objectToUnpack.asString + '\n)') as (
-        ...args: any[]
-      ) => any;
-      workletsCache.set(objectToUnpack.__workletHash, workletFun);
-    }
-    const functionInstance = workletFun.bind(objectToUnpack);
-    objectToUnpack._recur = functionInstance;
-    return functionInstance;
-  } else if (objectToUnpack.__init) {
-    let value = handleCache!.get(objectToUnpack);
-    if (value === undefined) {
-      value = objectToUnpack.__init();
-      handleCache!.set(objectToUnpack, value);
-    }
-    return value;
-  } else if (category === 'RemoteFunction') {
-    const fun = () => {
-      throw new Error(`Tried to synchronously call a non-worklet function on the UI thread.
-
-Possible solutions are:
-  a) If you want to synchronously execute this method, mark it as a worklet
-  b) If you want to execute this function on the JS thread, wrap it using \`runOnJS\``);
-    };
-    fun.__remoteFunction = objectToUnpack;
-    return fun;
-  } else {
-    throw new Error('data type not recognized by unpack method');
-  }
-}
-
 export function registerEventHandler<T>(
   eventHash: string,
   eventHandler: (event: T) => void
 ): string {
+  function handleAndFlushImmediates(eventTimestamp: number, event: T) {
+    'worklet';
+    global.__frameTimestamp = eventTimestamp;
+    eventHandler(event);
+    global.__flushAnimationFrame(eventTimestamp);
+    global.__frameTimestamp = undefined;
+  }
   return NativeReanimatedModule.registerEventHandler(
     eventHash,
-    makeShareableCloneRecursive(eventHandler)
+    makeShareableCloneRecursive(handleAndFlushImmediates)
   );
 }
 
@@ -172,10 +135,22 @@ export function unregisterEventHandler(id: string): void {
 }
 
 export function subscribeForKeyboardEvents(
-  eventHandler: (state: number, height: number) => void
+  eventHandler: (state: number, height: number) => void,
+  options: AnimatedKeyboardOptions
 ): number {
+  // TODO: this should really go with the same code path as other events, that is
+  // via registerEventHandler. For now we are copying the code from there.
+  function handleAndFlushImmediates(state: number, height: number) {
+    'worklet';
+    const now = performance.now();
+    global.__frameTimestamp = now;
+    eventHandler(state, height);
+    global.__flushAnimationFrame(now);
+    global.__frameTimestamp = undefined;
+  }
   return NativeReanimatedModule.subscribeForKeyboardEvents(
-    makeShareableCloneRecursive(eventHandler)
+    makeShareableCloneRecursive(handleAndFlushImmediates),
+    options.isStatusBarTranslucentAndroid ?? false
   );
 }
 
@@ -186,11 +161,16 @@ export function unsubscribeFromKeyboardEvents(listenerId: number): void {
 export function registerSensor(
   sensorType: number,
   interval: number,
-  eventHandler: (data: Value3D | ValueRotation) => void
+  iosReferenceFrame: number,
+  eventHandler: (
+    data: Value3D | ValueRotation,
+    orientationDegrees: number
+  ) => void
 ): number {
   return NativeReanimatedModule.registerSensor(
     sensorType,
     interval,
+    iosReferenceFrame,
     makeShareableCloneRecursive(eventHandler)
   );
 }
@@ -199,21 +179,9 @@ export function unregisterSensor(listenerId: number): void {
   return NativeReanimatedModule.unregisterSensor(listenerId);
 }
 
-NativeReanimatedModule.installCoreFunctions(valueUnpacker);
-
+// initialize UI runtime if applicable
 if (!isWeb() && isConfigured()) {
-  const capturableConsole = console;
-  runOnUI(() => {
-    'worklet';
-    const console = {
-      debug: runOnJS(capturableConsole.debug),
-      log: runOnJS(capturableConsole.log),
-      warn: runOnJS(capturableConsole.warn),
-      error: runOnJS(capturableConsole.error),
-      info: runOnJS(capturableConsole.info),
-    };
-    _setGlobalConsole(console);
-  })();
+  initializeUIRuntime();
 }
 
 type FeaturesConfig = {
@@ -247,12 +215,14 @@ export function enableLayoutAnimations(
 
 export function configureLayoutAnimations(
   viewTag: number,
-  type: string,
-  config: LayoutAnimationFunction | Keyframe
+  type: LayoutAnimationType,
+  config: LayoutAnimationFunction | Keyframe,
+  sharedTransitionTag = ''
 ): void {
   NativeReanimatedModule.configureLayoutAnimation(
     viewTag,
     type,
+    sharedTransitionTag,
     makeShareableCloneRecursive(config)
   );
 }

package/src/reanimated2/errors.ts

@@ -0,0 +1,57 @@
+type StackDetails = [Error, number, number];
+
+const _workletStackDetails = new Map<number, StackDetails>();
+
+export function registerWorkletStackDetails(
+  hash: number,
+  stackDetails: StackDetails
+) {
+  _workletStackDetails.set(hash, stackDetails);
+}
+
+function getBundleOffset(error: Error): [string, number, number] {
+  const frame = error.stack?.split('\n')?.[0];
+  if (frame) {
+    const parsedFrame = /@([^@]+):(\d+):(\d+)/.exec(frame);
+    if (parsedFrame) {
+      const [, file, line, col] = parsedFrame;
+      return [file, Number(line), Number(col)];
+    }
+  }
+  return ['unknown', 0, 0];
+}
+
+function processStack(stack: string): string {
+  const workletStackEntries = stack.match(/worklet_(\d+):(\d+):(\d+)/g);
+  let result = stack;
+  workletStackEntries?.forEach((match) => {
+    const [, hash, origLine, origCol] = match.split(/:|_/).map(Number);
+    const errorDetails = _workletStackDetails.get(hash);
+    if (!errorDetails) {
+      return;
+    }
+    const [error, lineOffset, colOffset] = errorDetails;
+    const [bundleFile, bundleLine, bundleCol] = getBundleOffset(error);
+    const line = origLine + bundleLine + lineOffset;
+    const col = origCol + bundleCol + colOffset;
+
+    result = result.replace(match, `${bundleFile}:${line}:${col}`);
+  });
+  return result;
+}
+
+export function reportFatalErrorOnJS({
+  message,
+  stack,
+}: {
+  message: string;
+  stack?: string;
+}) {
+  const error = new Error();
+  error.message = message;
+  error.stack = stack ? processStack(stack) : undefined;
+  error.name = 'ReanimatedError';
+  // @ts-ignore React Native's ErrorUtils implementation extends the Error type with jsEngine field
+  error.jsEngine = 'reanimated';
+  global.ErrorUtils.reportFatalError(error);
+}

package/src/reanimated2/frameCallback/FrameCallbackRegistryUI.ts

@@ -1,4 +1,4 @@
-import { runOnUI } from '../core';
+import { runOnUIImmediately } from '../threads';
 
 type CallbackDetails = {
   callback: (frameInfo: FrameInfo) => void;
@@ -24,7 +24,7 @@ export interface FrameCallbackRegistryUI {
   manageStateFrameCallback: (callbackId: number, state: boolean) => void;
 }
 
-export const prepareUIRegistry = runOnUI(() => {
+export const prepareUIRegistry = runOnUIImmediately(() => {
   'worklet';
 
   const frameCallbackRegistry: FrameCallbackRegistryUI = {