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

package/react-native-reanimated.d.ts

@@ -114,7 +114,8 @@ declare module 'react-native-reanimated' {
     export type Adaptable<T> =
       | T
       | AnimatedNode<T>
-      | ReadonlyArray<T | AnimatedNode<T> | ReadonlyArray<T | AnimatedNode<T>>>;
+      | ReadonlyArray<T | AnimatedNode<T> | ReadonlyArray<T | AnimatedNode<T>>>
+      | SharedValue<T>;
     type BinaryOperator<T = number> = (
       left: Adaptable<number>,
       right: Adaptable<number>
@@ -150,7 +151,8 @@ declare module 'react-native-reanimated' {
             | AnimatedNode<
                 // allow `number` where `string` normally is to support colors
                 S[K] extends ColorValue | undefined ? S[K] | number : S[K]
-              >;
+              >
+            | SharedValue<AnimatableValue>;
     };
 
     export type StylesOrDefault<T> = 'style' extends keyof T
@@ -158,7 +160,7 @@ declare module 'react-native-reanimated' {
       : Record<string, unknown>;
 
     export type AnimateProps<P extends object> = {
-      [K in keyof Omit<P, 'style'>]: P[K] | AnimatedNode<P[K]>;
+      [K in keyof Omit<P, 'style'>]: P[K] | AnimatedNode<P[K]> | SharedValue<P[K]>;
     } & {
       style?: StyleProp<AnimateStyle<StylesOrDefault<P>>>;
     } & {
@@ -177,6 +179,8 @@ declare module 'react-native-reanimated' {
         | typeof BaseAnimationBuilder
         | EntryExitAnimationFunction
         | Keyframe;
+      sharedTransitionTag?: string;
+      sharedTransitionStyle?: ILayoutAnimationBuilder;
     };
 
     export interface PhysicsAnimationState extends AnimationState {
@@ -278,8 +282,12 @@ declare module 'react-native-reanimated' {
     export interface ScrollView extends ReactNativeScrollView {}
 
     export class Code extends Component<CodeProps> {}
-    export class FlatList<T> extends Component<AnimateProps<FlatListProps<T>>> {
-      itemLayoutAnimation: ILayoutAnimationBuilder;
+    export interface FlatListPropsWithLayout<T> extends FlatListProps<T> {
+      itemLayoutAnimation?: ILayoutAnimationBuilder;
+    }
+    export class FlatList<T> extends Component<
+      AnimateProps<FlatListPropsWithLayout<T>>
+    > {
       getNode(): ReactNativeFlatList;
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -496,14 +504,25 @@ declare module 'react-native-reanimated' {
     ROTATION = 5,
   }
 
-  export type SensorConfig = {
+  export enum IOSReferenceFrame {
+    XArbitraryZVertical = 0,
+    XArbitraryCorrectedZVertical = 1,
+    XMagneticNorthZVertical = 2,
+    XTrueNorthZVertical = 3,
+    Auto = 4,
+  }
+
+  export type SensorConfig = Partial<{
     interval: number | 'auto';
-  };
+    adjustToInterfaceOrientation: boolean;
+    iosReferenceFrame: IOSReferenceFrame;
+  }>;
 
   export type Value3D = {
     x: number;
     y: number;
     z: number;
+    interfaceOrientation: InterfaceOrientation;
   };
 
   export type SensorValue3D = SharedValue<Value3D>;
@@ -516,6 +535,7 @@ declare module 'react-native-reanimated' {
     yaw: number;
     pitch: number;
     roll: number;
+    interfaceOrientation: InterfaceOrientation;
   };
 
   export type SensorValueRotation = SharedValue<ValueRotation>;
@@ -566,7 +586,14 @@ declare module 'react-native-reanimated' {
     height: SharedValue<number>;
     state: SharedValue<KeyboardState>;
   };
-  export function useAnimatedKeyboard(): AnimatedKeyboardInfo;
+
+  export interface AnimatedKeyboardOptions {
+    isStatusBarTranslucentAndroid?: boolean;
+  }
+
+  export function useAnimatedKeyboard(
+    options?: AnimatedKeyboardOptions
+  ): AnimatedKeyboardInfo;
 
   export function useScrollViewOffset(
     aref: RefObject<Animated.ScrollView>
@@ -715,11 +742,19 @@ declare module 'react-native-reanimated' {
 
   export function processColor(color: number | string): number;
 
+  export type InterpolationOptions = {
+    gamma?: number;
+    useCorrectedHSVInterpolation?: boolean;
+  };
+
+  export function isColor(value: unknown): boolean;
+
   export function interpolateColor<T extends string | number>(
     value: number,
     inputRange: readonly number[],
     outputRange: readonly T[],
-    colorSpace?: 'RGB' | 'HSV'
+    colorSpace?: 'RGB' | 'HSV',
+    options?: InterpolationOptions
   ): T;
 
   export enum ColorSpace {
@@ -750,7 +785,8 @@ declare module 'react-native-reanimated' {
   export function useInterpolateConfig(
     inputRange: readonly number[],
     outputRange: readonly (string | number)[],
-    colorSpace?: ColorSpace
+    colorSpace?: ColorSpace,
+    options?: InterpolationOptions
   ): SharedValue<InterpolateConfig>;
 
   export function interpolateSharableColor(
@@ -1238,4 +1274,15 @@ declare module 'react-native-reanimated' {
   export const useValue: typeof Animated.useValue;
   export const ReverseAnimation: typeof Animated.ReverseAnimation;
   export function enableLayoutAnimations(flag: boolean): void;
+
+  type AnimationFactoryType = (values: LayoutAnimationsValues) => StyleProps;
+
+  export class SharedTransition implements ILayoutAnimationBuilder {
+    animationFactory: AnimationFactoryType | null = null;
+    static createInstance(): SharedTransition;
+    static custom(animationFactory: AnimationFactoryType): SharedTransition;
+    custom(animationFactory: AnimationFactoryType): SharedTransition;
+    static build(): LayoutAnimationFunction;
+    build(): LayoutAnimationFunction;
+  }
 }

package/scripts/reanimated_utils.rb

@@ -1,6 +1,6 @@
 def try_to_parse_react_native_package_json(node_modules_dir)
   react_native_package_json_path = File.join(node_modules_dir, 'react-native/package.json')
-  if !File.exists?(react_native_package_json_path)
+  if !File.exist?(react_native_package_json_path)
     return nil
   end
   return JSON.parse(File.read(react_native_package_json_path))
@@ -34,6 +34,9 @@ def find_config()
   result[:is_tvos_target] = react_native_json['name'] == 'react-native-tvos'
   result[:react_native_version] = react_native_json['version']
   result[:react_native_minor_version] = react_native_json['version'].split('.')[1].to_i
+  if result[:react_native_minor_version] == 0 # nightly
+    result[:react_native_minor_version] = 1000
+  end
   result[:react_native_node_modules_dir] = File.expand_path(react_native_node_modules_dir)
   result[:reanimated_node_modules_dir] = File.expand_path(File.join(__dir__, '..', '..'))
 
@@ -65,7 +68,7 @@ def assert_no_multiple_instances(react_native_info)
       location['/package.json'] = ''
       parsed_location += "- " + location + "\n"
     end
-    raise "[react-native-reanimated] Multiple versions of Reanimated were detected. Only one instance of react-native-reanimated can be installed in a project. You need to resolve the conflict manually. Check out the documentation: https://docs.swmansion.com/react-native-reanimated/docs/next/fundamentals/troubleshooting#multiple-versions-of-reanimated-were-detected \n\nConflict between: \n" + parsed_location
+    raise "[react-native-reanimated] Multiple versions of Reanimated were detected. Only one instance of react-native-reanimated can be installed in a project. You need to resolve the conflict manually. Check out the documentation: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/troubleshooting/#multiple-versions-of-reanimated-were-detected \n\nConflict between: \n" + parsed_location
   end
 end
 
@@ -76,3 +79,13 @@ def assert_no_reanimated2_with_new_architecture(reanimated_package_json)
     raise "[react-native-reanimated] Reanimated 2.x does not support Fabric. Please upgrade to 3.x to use Reanimated with the New Architecture. For details, see https://blog.swmansion.com/announcing-reanimated-3-16167428c5f7"
   end
 end
+
+def assert_latest_react_native_with_new_architecture(config, reanimated_package_json)
+  reanimated_version = reanimated_package_json['version']
+  reanimated_major_version = reanimated_version.split('.')[0].to_i
+  react_native_minor_version = config[:react_native_minor_version]
+  fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
+  if fabric_enabled && reanimated_major_version == 3 && react_native_minor_version < 71
+    raise "[react-native-reanimated] Reanimated " + reanimated_version + " supports the New Architecture only on the latest minor release of React Native. Please upgrade to React Native 0.71.0+ or downgrade to an older version of Reanimated v3"
+  end
+end

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,78 @@ const has = <K extends string>(
   return false;
 };
 
+function isInlineStyleTransform(transform: any): boolean {
+  return transform.some((t: Record<string, any>) => hasInlineStyles(t));
+}
+
+function hasInlineStyles(style: StyleProps): boolean {
+  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) => {
+        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 +212,8 @@ export type AnimatedComponentProps<P extends Record<string, unknown>> = P & {
     | typeof BaseAnimationBuilder
     | EntryExitAnimationFunction
     | Keyframe;
+  sharedTransitionTag?: string;
+  sharedTransitionStyle?: ILayoutAnimationBuilder;
 };
 
 type Options<P> = {
@@ -170,6 +251,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 +266,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 +325,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 +385,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 +410,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 +505,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 +581,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 +648,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 +692,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;
 }