react-native-reanimated 3.0.0-rc.9 → 3.0.1

package/src/createAnimatedComponent.tsx

@@ -10,6 +10,8 @@ import {
   configureLayoutAnimations,
   enableLayoutAnimations,
   runOnUI,
+  startMapper,
+  stopMapper,
 } from './reanimated2/core';
 import {
   isJest,
@@ -19,9 +21,11 @@ import {
 import { initialUpdaterRun } from './reanimated2/animation';
 import {
   BaseAnimationBuilder,
+  DefaultSharedTransition,
   EntryExitAnimationFunction,
   ILayoutAnimationBuilder,
   LayoutAnimationFunction,
+  LayoutAnimationType,
 } from './reanimated2/layoutReanimation';
 import {
   SharedValue,
@@ -29,11 +33,14 @@ import {
   ShadowNodeWrapper,
 } from './reanimated2/commonTypes';
 import {
+  makeViewDescriptorsSet,
   ViewDescriptorsSet,
   ViewRefSet,
 } from './reanimated2/ViewDescriptorsSet';
 import { getShadowNodeWrapperFromRef } from './reanimated2/fabricUtils';
-import { makeShareableShadowNodeWrapper } from './reanimated2/shareables';
+import updateProps from './reanimated2/UpdateProps';
+import NativeReanimatedModule from './reanimated2/NativeReanimated';
+import { isSharedValue } from './reanimated2';
 
 function dummyListener() {
   // empty listener we use to assign to listener properties for which animated
@@ -108,6 +115,87 @@ const has = <K extends string>(
   return false;
 };
 
+function isInlineStyleTransform(transform: any): boolean {
+  if (!transform) {
+    return false;
+  }
+  return transform.some((t: Record<string, any>) => hasInlineStyles(t));
+}
+
+function hasInlineStyles(style: StyleProps): boolean {
+  if (!style) {
+    return false;
+  }
+  return Object.keys(style).some((key) => {
+    const styleValue = style[key];
+    return (
+      isSharedValue(styleValue) ||
+      (key === 'transform' && isInlineStyleTransform(styleValue))
+    );
+  });
+}
+
+function extractSharedValuesMapFromProps(
+  props: AnimatedComponentProps<InitialComponentProps>
+): Record<string, any> {
+  const inlineProps: Record<string, any> = {};
+
+  for (const key in props) {
+    const value = props[key];
+    if (key === 'style') {
+      const styles = flattenArray<StyleProps>(props.style ?? []);
+      styles.forEach((style) => {
+        if (!style) {
+          return;
+        }
+        for (const [key, styleValue] of Object.entries(style)) {
+          if (isSharedValue(styleValue)) {
+            inlineProps[key] = styleValue;
+          } else if (
+            key === 'transform' &&
+            isInlineStyleTransform(styleValue)
+          ) {
+            inlineProps[key] = styleValue;
+          }
+        }
+      });
+    } else if (isSharedValue(value)) {
+      inlineProps[key] = value;
+    }
+  }
+
+  return inlineProps;
+}
+
+function inlinePropsHasChanged(styles1: StyleProps, styles2: StyleProps) {
+  if (Object.keys(styles1).length !== Object.keys(styles2).length) {
+    return true;
+  }
+
+  for (const key of Object.keys(styles1)) {
+    if (styles1[key] !== styles2[key]) return true;
+  }
+
+  return false;
+}
+
+function getInlinePropsUpdate(inlineProps: Record<string, any>) {
+  'worklet';
+  const update: Record<string, any> = {};
+  for (const [key, styleValue] of Object.entries(inlineProps)) {
+    if (key === 'transform') {
+      update[key] = styleValue.map((transform: Record<string, any>) => {
+        return getInlinePropsUpdate(transform);
+      });
+    } else if (isSharedValue(styleValue)) {
+      update[key] = styleValue.value;
+    } else {
+      update[key] = styleValue;
+    }
+  }
+  return update;
+}
+
 interface AnimatedProps extends Record<string, unknown> {
   viewDescriptors?: ViewDescriptorsSet;
   viewsRef?: ViewRefSet<unknown>;
@@ -133,6 +221,8 @@ export type AnimatedComponentProps<P extends Record<string, unknown>> = P & {
     | typeof BaseAnimationBuilder
     | EntryExitAnimationFunction
     | Keyframe;
+  sharedTransitionTag?: string;
+  sharedTransitionStyle?: ILayoutAnimationBuilder;
 };
 
 type Options<P> = {
@@ -170,6 +260,9 @@ export default function createAnimatedComponent(
     animatedStyle: { value: StyleProps } = { value: {} };
     initialStyle = {};
     _component: ComponentRef | null = null;
+    _inlinePropsViewDescriptors: ViewDescriptorsSet | null = null;
+    _inlinePropsMapperId: number | null = null;
+    _inlineProps: StyleProps = {};
     static displayName: string;
 
     constructor(props: AnimatedComponentProps<InitialComponentProps>) {
@@ -182,15 +275,27 @@ export default function createAnimatedComponent(
     componentWillUnmount() {
       this._detachNativeEvents();
       this._detachStyles();
+      this._detachInlineProps();
     }
 
     componentDidMount() {
       this._attachNativeEvents();
       this._attachAnimatedStyles();
+      this._attachInlineProps();
+    }
+
+    _getEventViewRef() {
+      // Make sure to get the scrollable node for components that implement
+      // `ScrollResponder.Mixin`.
+      return this._component?.getScrollableNode
+        ? this._component.getScrollableNode()
+        : this._component;
     }
 
     _attachNativeEvents() {
-      const viewTag = findNodeHandle(this);
+      const node = this._getEventViewRef();
+      const viewTag = findNodeHandle(options?.setNativeProps ? this : node);
+
       for (const key in this.props) {
         const prop = this.props[key];
         if (
@@ -229,10 +334,10 @@ export default function createAnimatedComponent(
           this.props.animatedProps.viewDescriptors.remove(this._viewTag);
         }
         if (global._IS_FABRIC) {
-          const shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
+          const viewTag = this._viewTag;
           runOnUI(() => {
             'worklet';
-            _removeShadowNodeFromRegistry(shadowNodeWrapper);
+            _removeShadowNodeFromRegistry(viewTag);
           })();
         }
       }
@@ -289,23 +394,16 @@ export default function createAnimatedComponent(
       }
     }
 
-    _attachAnimatedStyles() {
-      const styles = this.props.style
-        ? onlyAnimatedStyles(flattenArray<StyleProps>(this.props.style))
-        : [];
-      const prevStyles = this._styles;
-      this._styles = styles;
-
-      const prevAnimatedProps = this._animatedProps;
-      this._animatedProps = this.props.animatedProps;
-
+    _getViewInfo() {
       let viewTag: number | null;
       let viewName: string | null;
       let shadowNodeWrapper: ShadowNodeWrapper | null = null;
+      let viewConfig;
       if (Platform.OS === 'web') {
         viewTag = findNodeHandle(this);
         viewName = null;
         shadowNodeWrapper = null;
+        viewConfig = null;
       } else {
         // hostInstance can be null for a component that doesn't render anything (render function returns null). Example: svg Stop: https://github.com/react-native-svg/react-native-svg/blob/develop/src/elements/Stop.tsx
         const hostInstance = RNRenderer.findHostInstance_DEPRECATED(this);
@@ -321,19 +419,36 @@ export default function createAnimatedComponent(
          * The name we're looking for is in the field named uiViewClassName.
          */
         viewName = hostInstance?.viewConfig?.uiViewClassName;
-        // update UI props whitelist for this view
-        const hasReanimated2Props =
-          this.props.animatedProps?.viewDescriptors || styles.length;
-        if (hasReanimated2Props && hostInstance?.viewConfig) {
-          adaptViewConfig(hostInstance.viewConfig);
-        }
+
+        viewConfig = hostInstance?.viewConfig;
 
         if (global._IS_FABRIC) {
-          shadowNodeWrapper = makeShareableShadowNodeWrapper(
-            getShadowNodeWrapperFromRef(this)
-          );
+          shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
         }
       }
+      return { viewTag, viewName, shadowNodeWrapper, viewConfig };
+    }
+
+    _attachAnimatedStyles() {
+      const styles = this.props.style
+        ? onlyAnimatedStyles(flattenArray<StyleProps>(this.props.style))
+        : [];
+      const prevStyles = this._styles;
+      this._styles = styles;
+
+      const prevAnimatedProps = this._animatedProps;
+      this._animatedProps = this.props.animatedProps;
+
+      const { viewTag, viewName, shadowNodeWrapper, viewConfig } =
+        this._getViewInfo();
+
+      // update UI props whitelist for this view
+      const hasReanimated2Props =
+        this.props.animatedProps?.viewDescriptors || styles.length;
+      if (hasReanimated2Props && viewConfig) {
+        adaptViewConfig(viewConfig);
+      }
+
       this._viewTag = viewTag as number;
 
       // remove old styles
@@ -399,11 +514,72 @@ export default function createAnimatedComponent(
       }
     }
 
+    _attachInlineProps() {
+      const newInlineProps: Record<string, any> =
+        extractSharedValuesMapFromProps(this.props);
+      const hasChanged = inlinePropsHasChanged(
+        newInlineProps,
+        this._inlineProps
+      );
+
+      if (hasChanged) {
+        if (!this._inlinePropsViewDescriptors) {
+          this._inlinePropsViewDescriptors = makeViewDescriptorsSet();
+
+          const { viewTag, viewName, shadowNodeWrapper, viewConfig } =
+            this._getViewInfo();
+
+          if (Object.keys(newInlineProps).length && viewConfig) {
+            adaptViewConfig(viewConfig);
+          }
+
+          this._inlinePropsViewDescriptors.add({
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            tag: viewTag!,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            name: viewName!,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            shadowNodeWrapper: shadowNodeWrapper!,
+          });
+        }
+        const sharableViewDescriptors =
+          this._inlinePropsViewDescriptors.sharableViewDescriptors;
+
+        const maybeViewRef = NativeReanimatedModule.native
+          ? undefined
+          : ({ items: new Set([this]) } as ViewRefSet<any>); // see makeViewsRefSet
+
+        const updaterFunction = () => {
+          'worklet';
+          const update = getInlinePropsUpdate(newInlineProps);
+          updateProps(sharableViewDescriptors, update, maybeViewRef);
+        };
+        this._inlineProps = newInlineProps;
+        if (this._inlinePropsMapperId) {
+          stopMapper(this._inlinePropsMapperId);
+        }
+        this._inlinePropsMapperId = null;
+        if (Object.keys(newInlineProps).length) {
+          this._inlinePropsMapperId = startMapper(
+            updaterFunction,
+            Object.values(newInlineProps)
+          );
+        }
+      }
+    }
+
+    _detachInlineProps() {
+      if (this._inlinePropsMapperId) {
+        stopMapper(this._inlinePropsMapperId);
+      }
+    }
+
     componentDidUpdate(
       prevProps: AnimatedComponentProps<InitialComponentProps>
     ) {
       this._reattachNativeEvents(prevProps);
       this._attachAnimatedStyles();
+      this._attachInlineProps();
     }
 
     _setComponentRef = setAndForwardRef<Component>({
@@ -414,19 +590,44 @@ export default function createAnimatedComponent(
       setLocalRef: (ref) => {
         // TODO update config
         const tag = findNodeHandle(ref);
-        const { layout, entering, exiting } = this.props;
-        if ((layout || entering || exiting) && tag != null) {
+        const { layout, entering, exiting, sharedTransitionTag } = this.props;
+        if (
+          (layout || entering || exiting || sharedTransitionTag) &&
+          tag != null
+        ) {
           if (!shouldBeUseWeb()) {
             enableLayoutAnimations(true, false);
           }
           if (layout) {
-            configureLayoutAnimations(tag, 'layout', maybeBuild(layout));
+            configureLayoutAnimations(
+              tag,
+              LayoutAnimationType.LAYOUT,
+              maybeBuild(layout)
+            );
           }
           if (entering) {
-            configureLayoutAnimations(tag, 'entering', maybeBuild(entering));
+            configureLayoutAnimations(
+              tag,
+              LayoutAnimationType.ENTERING,
+              maybeBuild(entering)
+            );
           }
           if (exiting) {
-            configureLayoutAnimations(tag, 'exiting', maybeBuild(exiting));
+            configureLayoutAnimations(
+              tag,
+              LayoutAnimationType.EXITING,
+              maybeBuild(exiting)
+            );
+          }
+          if (sharedTransitionTag) {
+            const sharedElementTransition =
+              this.props.sharedTransitionStyle ?? DefaultSharedTransition;
+            configureLayoutAnimations(
+              tag,
+              LayoutAnimationType.SHARED_ELEMENT_TRANSITION,
+              maybeBuild(sharedElementTransition),
+              sharedTransitionTag
+            );
           }
         }
 
@@ -456,6 +657,20 @@ export default function createAnimatedComponent(
                 };
               }
               return this.initialStyle;
+            } else if (hasInlineStyles(style)) {
+              if (this._isFirstRender) {
+                return getInlinePropsUpdate(style);
+              }
+              const newStyle: StyleProps = {};
+              for (const [key, styleValue] of Object.entries(style)) {
+                if (
+                  !isSharedValue(styleValue) &&
+                  !(key === 'transform' && isInlineStyleTransform(styleValue))
+                ) {
+                  newStyle[key] = styleValue;
+                }
+              }
+              return newStyle;
             } else {
               return style;
             }
@@ -486,6 +701,10 @@ export default function createAnimatedComponent(
           } else {
             props[key] = dummyListener;
           }
+        } else if (isSharedValue(value)) {
+          if (this._isFirstRender) {
+            props[key] = (value as SharedValue<any>).value;
+          }
         } else if (
           key !== 'onGestureHandlerStateChange' ||
           !isChromeDebugger()

package/src/reanimated2/Colors.ts

@@ -573,11 +573,12 @@ function HSVtoRGB(h: any, s?: any, v?: any) {
 export const hsvToColor = (
   h: number,
   s: number,
-  v: number
+  v: number,
+  a: number
 ): number | string => {
   'worklet';
   const { r, g, b } = HSVtoRGB(h, s, v);
-  return rgbaColor(r, g, b);
+  return rgbaColor(r, g, b, a);
 };
 
 export function processColorInitially(
@@ -634,19 +635,45 @@ export function processColor(color: unknown): number | null | undefined {
 
 export type ParsedColorArray = [number, number, number, number];
 
-export function convertToHSVA(color: unknown): ParsedColorArray {
+export function convertToRGBA(color: unknown): ParsedColorArray {
   'worklet';
   const processedColor = processColorInitially(color)!; // argb;
   const a = (processedColor >>> 24) / 255;
-  const r = (processedColor << 8) >>> 24;
-  const g = (processedColor << 16) >>> 24;
-  const b = (processedColor << 24) >>> 24;
-  const { h, s, v } = RGBtoHSV(r, g, b);
-  return [h, s, v, a];
+  const r = ((processedColor << 8) >>> 24) / 255;
+  const g = ((processedColor << 16) >>> 24) / 255;
+  const b = ((processedColor << 24) >>> 24) / 255;
+  return [r, g, b, a];
 }
 
-export function toRGBA(HSVA: ParsedColorArray): string {
+export function rgbaArrayToRGBAColor(RGBA: ParsedColorArray): string {
   'worklet';
-  const { r, g, b } = HSVtoRGB(HSVA[0], HSVA[1], HSVA[2]);
-  return `rgba(${r}, ${g}, ${b}, ${HSVA[3]})`;
+  return `rgba(${Math.round(RGBA[0] * 255)}, ${Math.round(
+    RGBA[1] * 255
+  )}, ${Math.round(RGBA[2] * 255)}, ${RGBA[3]})`;
+}
+
+export function toLinearSpace(
+  RGBA: ParsedColorArray,
+  gamma = 2.2
+): ParsedColorArray {
+  'worklet';
+  const res = [];
+  for (let i = 0; i < 3; ++i) {
+    res.push(Math.pow(RGBA[i], gamma));
+  }
+  res.push(RGBA[3]);
+  return res as ParsedColorArray;
+}
+
+export function toGammaSpace(
+  RGBA: ParsedColorArray,
+  gamma = 2.2
+): ParsedColorArray {
+  'worklet';
+  const res = [];
+  for (let i = 0; i < 3; ++i) {
+    res.push(Math.pow(RGBA[i], 1 / gamma));
+  }
+  res.push(RGBA[3]);
+  return res as ParsedColorArray;
 }

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,38 +23,19 @@ 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(
     callGuard: <T extends Array<any>, U>(
       fn: (...args: T) => U,
@@ -60,8 +49,14 @@ export class NativeReanimated {
     );
   }
 
-  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>(
@@ -88,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) {
@@ -118,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 {
@@ -132,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 (