@react-native-ama/animations 0.0.1

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@react-native-ama/animations",
+  "version": "0.0.1",
+  "private": false,
+  "react-native": "src/index",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "exports": {
+    ".": [
+      {
+        "imports": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      },
+      "./dist/index.js"
+    ]
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p ./tsconfig.build.json",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@react-native-ama/internal": "*",
+    "@react-native-ama/core": "*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "keywords": [
+    "react-native",
+    "a11y",
+    "accessibility"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FormidableLabs/react-native-ama",
+    "directory": "packages/animations"
+  },
+  "bugs": {
+    "url": "https://github.com/FormidableLabs/react-native-ama/issues"
+  },
+  "homepage": "https://github.com/FormidableLabs/react-native-ama#readme",
+  "publishConfig": {
+    "provenance": false
+  },
+  "author": "",
+  "license": "MIT"
+}

package/src/components/AnimatedContainer.test.tsx

@@ -0,0 +1,100 @@
+import { AutofocusContainer } from '@react-native-ama/core';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import * as UseReanimatedAnimationBuilder from '../hooks/useReanimatedAnimationBuilder';
+import { AnimatedContainer } from './AnimatedContainer';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+
+  jest.spyOn(console, 'warn').mockImplementation();
+});
+
+const from = { left: 0 };
+const to = { opacity: 1 };
+
+describe('AnimatedContainer', () => {
+  it('passes the given animation data to the hook', () => {
+    const useReanimatedAnimationBuilder = jest
+      .spyOn(UseReanimatedAnimationBuilder, 'useReanimatedAnimationBuilder')
+      .mockReturnValue({ exiting: 'exiting', entering: 'entering' } as any);
+
+    const { getByTestId } = render(
+      <AnimatedContainer testID="test-id" from={from} to={to} />,
+    );
+
+    expect(useReanimatedAnimationBuilder).toHaveBeenCalledWith({
+      from,
+      to,
+      duration: 300,
+      exit: undefined,
+    });
+
+    expect(getByTestId('test-id').props).toEqual({
+      children: undefined,
+      entering: 'entering',
+      exiting: 'exiting',
+      style: undefined,
+      testID: 'test-id',
+    });
+  });
+
+  it('passes the given animation data to the hook 2', () => {
+    const useReanimatedAnimationBuilder = jest
+      .spyOn(UseReanimatedAnimationBuilder, 'useReanimatedAnimationBuilder')
+      .mockReturnValue({ exiting: 'exiting', entering: 'entering' } as any);
+
+    const { getByTestId } = render(
+      <AnimatedContainer testID="test-id" from={from} to={to} duration={600} />,
+    );
+
+    expect(useReanimatedAnimationBuilder).toHaveBeenCalledWith({
+      from,
+      to,
+      duration: 600,
+      exit: undefined,
+    });
+
+    expect(getByTestId('test-id').props).toEqual({
+      children: undefined,
+      entering: 'entering',
+      exiting: 'exiting',
+      style: undefined,
+      testID: 'test-id',
+    });
+  });
+
+  it('wraps the content with the AutofocusContainer when the autofocus property is true', () => {
+    const { UNSAFE_getAllByType } = render(
+      <AnimatedContainer
+        testID="test-id"
+        from={from}
+        to={to}
+        duration={300}
+        autofocus
+      />,
+    );
+
+    expect(UNSAFE_getAllByType(AutofocusContainer)).toBeDefined();
+  });
+});
+
+jest.mock('../hooks/useReanimatedAnimationBuilder');
+jest.mock('../hooks/useFocus', () => {
+  return {
+    useFocus: () => {
+      return {
+        setFocus: jest.fn(),
+      };
+    },
+  };
+});
+
+jest.mock('react-native-reanimated', () => {
+  const { View } = require('react-native');
+
+  return {
+    View: (props: any) => <View {...props} />,
+  };
+});

package/src/components/AnimatedContainer.tsx

@@ -0,0 +1,64 @@
+import { AutofocusContainer } from '@react-native-ama/core';
+import * as React from 'react';
+import type { PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+import Animated, { AnimateProps } from 'react-native-reanimated';
+
+import {
+  AnimatedEntryViewStyle,
+  AnimatedExitViewStyle,
+  ToAnimation,
+  useReanimatedAnimationBuilder,
+} from '../hooks/useReanimatedAnimationBuilder';
+
+type UseReanimated = Omit<AnimateProps<ViewProps>, 'entering' | 'exiting'> & {
+  autofocus?: boolean;
+  duration?: number;
+  from: AnimatedEntryViewStyle;
+  exitFrom?: AnimatedExitViewStyle;
+  exitTo?: ToAnimation;
+  to: ToAnimation;
+  style?: Pick<ViewProps, 'style'>;
+};
+
+export const AnimatedContainer = React.forwardRef<
+  Animated.View,
+  PropsWithChildren<UseReanimated>
+>(
+  (
+    {
+      from,
+      to,
+      exitFrom,
+      exitTo,
+      duration = 300,
+      style,
+      autofocus,
+      children,
+      ...rest
+    },
+    forwardRef,
+  ) => {
+    const { entering, exiting } = useReanimatedAnimationBuilder({
+      from,
+      to,
+      exitFrom,
+      exitTo,
+      duration,
+    });
+
+    const Wrapper = autofocus ? AutofocusContainer : React.Fragment;
+    return (
+      <Wrapper>
+        <Animated.View
+          style={style}
+          entering={entering}
+          exiting={exiting}
+          ref={forwardRef}
+          {...rest}>
+          {children}
+        </Animated.View>
+      </Wrapper>
+    );
+  },
+);

package/src/hooks/useAnimation.test.ts

@@ -0,0 +1,162 @@
+import * as AMAProvider from '@react-native-ama/core';
+import { renderHook } from '@testing-library/react-native';
+import { Animated } from 'react-native';
+
+import { useAnimation } from './useAnimation';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+let timing = jest.spyOn(Animated, 'timing');
+
+describe('useAnimation', () => {
+  describe('Given isReduceMotionEnabled is false', () => {
+    beforeEach(() => {
+      jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+        ...amaContextValues,
+        isReduceMotionEnabled: false,
+      } as any);
+    });
+
+    it('Then plays only the main timing', () => {
+      const { result } = renderHook(() =>
+        useAnimation({
+          duration: 300,
+          useNativeDriver: false,
+          from: {
+            left: 0,
+            opacity: 0,
+          },
+          to: {
+            left: 100,
+            opacity: 1,
+          },
+        }),
+      );
+
+      result.current.play();
+
+      expect(timing).toHaveBeenCalledTimes(1);
+      expect(timing).toHaveBeenCalledWith(expect.any(Animated.Value), {
+        duration: 300,
+        toValue: 1,
+        useNativeDriver: false,
+      });
+    });
+  });
+
+  describe('Given isReduceMotionEnabled is true', () => {
+    beforeEach(() => {
+      jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+        ...amaContextValues,
+        isReduceMotionEnabled: true,
+      } as any);
+    });
+
+    it('Then plays the reduceMotion and the main progress', () => {
+      const { result } = renderHook(() =>
+        useAnimation({
+          duration: 300,
+          useNativeDriver: false,
+          from: {
+            left: 0,
+            opacity: 0,
+          },
+          to: {
+            left: 100,
+            opacity: 1,
+          },
+        }),
+      );
+
+      result.current.play();
+
+      expect(timing).toHaveBeenCalledTimes(2);
+      expect(timing).toHaveBeenNthCalledWith(1, expect.any(Animated.Value), {
+        duration: 0,
+        toValue: 1,
+        useNativeDriver: false,
+      });
+      expect(timing).toHaveBeenNthCalledWith(2, expect.any(Animated.Value), {
+        duration: 300,
+        toValue: 1,
+        useNativeDriver: false,
+      });
+    });
+
+    it('Then plays the main progress with duration 0 when is a motion-only animation', () => {
+      const { result } = renderHook(() =>
+        useAnimation({
+          duration: 300,
+          useNativeDriver: false,
+          from: {
+            left: 0,
+          },
+          to: {
+            left: 100,
+          },
+        }),
+      );
+
+      result.current.play();
+
+      expect(timing).toHaveBeenCalledTimes(2);
+      expect(timing).toHaveBeenNthCalledWith(1, expect.any(Animated.Value), {
+        duration: 0,
+        toValue: 1,
+        useNativeDriver: false,
+      });
+      expect(timing).toHaveBeenNthCalledWith(2, expect.any(Animated.Value), {
+        duration: 0,
+        toValue: 1,
+        useNativeDriver: false,
+      });
+    });
+
+    it('Then plays the main progress with duration 0 when skipIfReduceMotionEnabled is set to true', () => {
+      const { result } = renderHook(() =>
+        useAnimation({
+          duration: 300,
+          useNativeDriver: false,
+          skipIfReduceMotionEnabled: true,
+          from: {
+            opacity: 0,
+          },
+          to: {
+            opacity: 100,
+          },
+        }),
+      );
+
+      result.current.play();
+
+      expect(timing).toHaveBeenCalledTimes(2);
+      expect(timing).toHaveBeenNthCalledWith(1, expect.any(Animated.Value), {
+        duration: 0,
+        toValue: 1,
+        useNativeDriver: false,
+      });
+      expect(timing).toHaveBeenNthCalledWith(2, expect.any(Animated.Value), {
+        duration: 0,
+        toValue: 1,
+        useNativeDriver: false,
+      });
+    });
+  });
+});
+
+const amaContextValues = {
+  isReduceTransparencyEnabled: false,
+  isBoldTextEnabled: false,
+  isGrayscaleEnabled: false,
+  isInvertColorsEnabled: false,
+  isReduceMotionEnabled: false,
+  isScreenReaderEnabled: false,
+  reactNavigationScreenOptions: {
+    animationEnabled: true,
+    animation: 'default',
+  },
+};
+
+jest.mock('@react-native-ama/core');

package/src/hooks/useAnimation.ts

@@ -0,0 +1,64 @@
+import { useAMAContext } from '@react-native-ama/core';
+import { interpolateAnimationStates } from '@react-native-ama/internal';
+import * as React from 'react';
+import type { ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
+
+type UseAnimation = {
+  from: ViewStyle;
+  to: ViewStyle;
+  duration: number;
+  useNativeDriver: boolean;
+  skipIfReduceMotionEnabled?: boolean;
+};
+
+export const useAnimation = ({
+  duration,
+  useNativeDriver,
+  from,
+  to,
+  skipIfReduceMotionEnabled = false,
+}: UseAnimation) => {
+  const { isReduceMotionEnabled } = useAMAContext();
+  const progress = React.useRef(new Animated.Value(0)).current;
+  const reduceMotionProgress = React.useRef(new Animated.Value(0)).current;
+  const hasOnlyMotionAnimation = React.useRef(false);
+
+  const play = (toValue: number = 1) => {
+    if (isReduceMotionEnabled) {
+      Animated.timing(reduceMotionProgress, {
+        duration: 0,
+        toValue,
+        useNativeDriver,
+      }).start();
+    }
+
+    const animationDuration =
+      isReduceMotionEnabled &&
+      (hasOnlyMotionAnimation.current || skipIfReduceMotionEnabled)
+        ? 0
+        : duration;
+
+    return Animated.timing(progress, {
+      duration: animationDuration,
+      toValue,
+      useNativeDriver,
+    });
+  };
+
+  const { __hasOnlyMotionAnimation, ...style } = interpolateAnimationStates(
+    from,
+    to,
+    isReduceMotionEnabled,
+    progress,
+    reduceMotionProgress,
+  );
+
+  hasOnlyMotionAnimation.current = __hasOnlyMotionAnimation;
+
+  return {
+    animatedStyle: style,
+    progress,
+    play,
+  };
+};

package/src/hooks/useAnimationDuration.test.ts

@@ -0,0 +1,39 @@
+import * as AMAProvider from '@react-native-ama/core';
+import { renderHook } from '@testing-library/react-native';
+
+import { useAnimationDuration } from './useAnimationDuration';
+
+describe('useAnimationDuration', () => {
+  it('returns the given duration for motion animation when isReduceMotionEnabled is false', () => {
+    jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+      ...amaContextValues,
+      isReduceMotionEnabled: false,
+    } as any);
+
+    const { result } = renderHook(() => useAnimationDuration());
+
+    expect(result.current.getAnimationDuration('left', 100)).toBe(100);
+  });
+
+  it('returns 0 for motion animation when isReduceMotionEnabled is true', () => {
+    jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+      ...amaContextValues,
+      isReduceMotionEnabled: true,
+    } as any);
+
+    const { result } = renderHook(() => useAnimationDuration());
+
+    expect(result.current.getAnimationDuration('left', 100)).toBe(0);
+  });
+});
+
+const amaContextValues = {
+  isReduceTransparencyEnabled: false,
+  isBoldTextEnabled: false,
+  isGrayscaleEnabled: false,
+  isInvertColorsEnabled: false,
+  isReduceMotionEnabled: false,
+  isScreenReaderEnabled: false,
+};
+
+jest.mock('@react-native-ama/core');

package/src/hooks/useAnimationDuration.ts

@@ -0,0 +1,22 @@
+import { useAMAContext } from '@react-native-ama/core';
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+
+import { isMotionAnimation } from '../utils/isMotionAnimation';
+
+export const useAnimationDuration = () => {
+  const { isReduceMotionEnabled } = useAMAContext();
+
+  const getAnimationDuration = React.useCallback(
+    (propertyToAnimate: keyof ViewStyle, duration: number) => {
+      return isReduceMotionEnabled && isMotionAnimation(propertyToAnimate)
+        ? 0
+        : duration;
+    },
+    [isReduceMotionEnabled],
+  );
+
+  return {
+    getAnimationDuration,
+  };
+};

package/src/hooks/useReanimatedAnimationBuilder.test.ts

@@ -0,0 +1,155 @@
+import * as AMAProvider from '@react-native-ama/core';
+import { renderHook } from '@testing-library/react-native';
+
+import { useReanimatedAnimationBuilder } from './useReanimatedAnimationBuilder';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+let withTiming: jest.Mock;
+
+describe('useReanimatedAnimationBuilder', () => {
+  describe('entering animation', () => {
+    it('handles the custom reanimated params', () => {
+      const { result } = renderHook(() =>
+        useReanimatedAnimationBuilder({
+          from: { transform: [{ translateY: 'targetHeight' }], opacity: 0 },
+          to: {
+            transform: [{ translateY: -42 }],
+            opacity: 1,
+          },
+          duration: 300,
+        }),
+      );
+
+      expect(
+        result.current.entering({
+          targetHeight: 42,
+        } as any),
+      ).toEqual({
+        animations: {
+          opacity: 1,
+          transform: [{ translateY: -42 }],
+        },
+        initialValues: { opacity: 0, transform: [{ translateY: 42 }] },
+      });
+    });
+
+    it('generates the animation with duration 0 for motion ones', () => {
+      jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+        isReduceMotionEnabled: true,
+      } as any);
+
+      const { result } = renderHook(() =>
+        useReanimatedAnimationBuilder({
+          from: { transform: [{ translateY: 'targetHeight' }], opacity: 0 },
+          to: {
+            transform: [{ translateY: -42 }],
+            opacity: 1,
+          },
+          duration: 300,
+        }),
+      );
+
+      result.current.entering({
+        targetHeight: 42,
+      } as any);
+
+      expect(withTiming).toHaveBeenCalledTimes(2);
+      expect(withTiming).toHaveBeenNthCalledWith(1, -42, {
+        duration: 0,
+      });
+      expect(withTiming).toHaveBeenNthCalledWith(2, 1, {
+        duration: 300,
+      });
+    });
+  });
+
+  describe('exiting animation', () => {
+    it('reverse the from/to animation', () => {
+      const { result } = renderHook(() =>
+        useReanimatedAnimationBuilder({
+          from: { transform: [{ translateY: 'targetHeight' }], opacity: 0 },
+          to: {
+            transform: [{ translateY: -42 }],
+            opacity: 1,
+          },
+          duration: 300,
+        }),
+      );
+
+      expect(
+        result.current.exiting({
+          targetHeight: 42,
+        } as any),
+      ).toEqual({
+        animations: {
+          opacity: 0,
+          transform: [{ translateY: 42 }],
+        },
+        initialValues: { opacity: 1, transform: [{ translateY: -42 }] },
+      });
+    });
+
+    it('allows specifying a different start animation', () => {
+      const { result } = renderHook(() =>
+        useReanimatedAnimationBuilder({
+          from: { transform: [{ translateY: 'targetHeight' }], opacity: 0 },
+          exitFrom: {
+            transform: [{ translateY: 0 }],
+            opacity: 0.5,
+          },
+          to: { transform: [{ translateY: -42 }], opacity: 1 },
+          duration: 300,
+        }),
+      );
+
+      expect(
+        result.current.exiting({
+          targetHeight: 42,
+        } as any),
+      ).toEqual({
+        animations: {
+          opacity: 0.5,
+          transform: [{ translateY: 0 }],
+        },
+        initialValues: { opacity: 1, transform: [{ translateY: -42 }] },
+      });
+    });
+
+    it('generates the animation with duration 0 for motion ones', () => {
+      jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+        isReduceMotionEnabled: true,
+      } as any);
+
+      const { result } = renderHook(() =>
+        useReanimatedAnimationBuilder({
+          from: { transform: [{ translateY: 'targetHeight' }], opacity: 0 },
+          to: { transform: [{ translateY: -42 }], opacity: 1 },
+          duration: 300,
+        }),
+      );
+
+      result.current.exiting({ targetHeight: 42 } as any);
+
+      expect(withTiming).toHaveBeenCalledTimes(2);
+      expect(withTiming).toHaveBeenNthCalledWith(1, 42, {
+        duration: 0,
+      });
+      expect(withTiming).toHaveBeenNthCalledWith(2, 0, {
+        duration: 300,
+      });
+    });
+  });
+});
+
+function mockReanimated() {
+  withTiming = jest.fn(value => value);
+
+  return {
+    withTiming,
+  };
+}
+
+jest.mock('react-native-reanimated', () => mockReanimated());

package/src/hooks/useReanimatedAnimationBuilder.ts

@@ -0,0 +1,187 @@
+import { useAMAContext } from '@react-native-ama/core';
+import { MOTION_ANIMATIONS } from '@react-native-ama/internal';
+import type { ViewProps, ViewStyle } from 'react-native';
+import {
+  EntryAnimationsValues,
+  EntryExitAnimationFunction,
+  ExitAnimationsValues,
+  StyleProps,
+  withTiming,
+} from 'react-native-reanimated';
+
+export type ToAnimation = ViewProps['style'];
+
+type UseReanimatedAnimationBuilder = {
+  from: AnimatedEntryViewStyle;
+  to: ToAnimation;
+  exitFrom?: AnimatedExitViewStyle;
+  exitTo?: ToAnimation;
+  duration: number;
+};
+
+export const useReanimatedAnimationBuilder = ({
+  from,
+  to,
+  exitFrom,
+  exitTo,
+  duration,
+}: UseReanimatedAnimationBuilder) => {
+  const { isReduceMotionEnabled } = useAMAContext();
+
+  const animationBuilder = <InitialValues, FinalValues>(
+    initial: InitialValues,
+    final: FinalValues,
+  ): EntryExitAnimationFunction => {
+    return (values: EntryAnimationsValues | ExitAnimationsValues) => {
+      'worklet';
+
+      const animations = (function generateAnimations(startValues, endValues) {
+        return Object.keys(startValues as object).reduce(
+          (outputAnimation, key) => {
+            const k: keyof InitialValues = key as keyof InitialValues;
+            const toValue = endValues[key as keyof FinalValues];
+            const value = startValues[k];
+            const mappedToValue =
+              // @ts-ignore
+              typeof toValue === 'string' ? values[toValue] || 0 : toValue;
+
+            const realDuration =
+              isReduceMotionEnabled &&
+              MOTION_ANIMATIONS.includes(key as keyof ViewStyle)
+                ? 0
+                : duration;
+            const newValue = Array.isArray(value)
+              ? value.map((item, index) =>
+                  generateAnimations(
+                    item as InitialValues,
+                    // @ts-ignore
+                    endValues?.[k]?.[index],
+                  ),
+                )
+              : withTiming(mappedToValue, {
+                  duration: realDuration,
+                });
+
+            outputAnimation[k] = newValue;
+
+            return outputAnimation;
+          },
+          {} as InitialValues,
+        );
+      })(initial, final);
+
+      const initialValues = (function generateInitialValues(
+        startValues,
+      ): StyleProps {
+        return Object.entries(startValues as object).reduce(
+          (newList, [key, value]) => {
+            const mappedValue =
+              // @ts-ignore
+              typeof value === 'string' ? values[value] : value;
+            const newValue = Array.isArray(value)
+              ? value.map(item => generateInitialValues(item as InitialValues))
+              : mappedValue;
+
+            newList[key as keyof StyleProps] = newValue;
+
+            return newList;
+          },
+          {} as StyleProps,
+        );
+      })(initial);
+
+      return {
+        initialValues,
+        animations,
+      };
+    };
+  };
+
+  return {
+    entering: animationBuilder<AnimatedEntryViewStyle, ToAnimation>(from, to),
+    exiting: animationBuilder<
+      ToAnimation,
+      AnimatedExitViewStyle | AnimatedEntryViewStyle
+    >(exitTo || to, exitFrom || from),
+  };
+};
+
+export type AnimatedEntryViewStyle = ReanimatedStyle<ReanimatedEntryValues>;
+export type AnimatedExitViewStyle = ReanimatedStyle<ReanimatedExitValues>;
+
+type ReanimatedStyle<K> = {
+  [key in keyof Omit<ViewStyle, 'transform'>]: ViewStyle[key] | K;
+} & {
+  transform?:
+    | (
+        | PerpectiveTransform<K>
+        | RotateTransform<K>
+        | RotateXTransform<K>
+        | RotateYTransform<K>
+        | RotateZTransform<K>
+        | ScaleTransform<K>
+        | ScaleXTransform<K>
+        | ScaleYTransform<K>
+        | TranslateXTransform<K>
+        | TranslateYTransform<K>
+        | SkewXTransform<K>
+        | SkewYTransform<K>
+        | MatrixTransform<K>
+      )[]
+    | undefined;
+};
+
+type PerpectiveTransform<K> = {
+  c: string | K;
+};
+
+type RotateTransform<K> = {
+  rotate: string | K;
+};
+
+type RotateXTransform<K> = {
+  rotateX: string | K;
+};
+
+type RotateYTransform<K> = {
+  rotateY: string | K;
+};
+
+type RotateZTransform<K> = {
+  rotateZ: string | K;
+};
+
+type ScaleTransform<K> = {
+  scale: number | K;
+};
+
+type ScaleXTransform<K> = {
+  scaleX: number | K;
+};
+
+type ScaleYTransform<K> = {
+  scaleY: number | K;
+};
+
+type TranslateXTransform<K> = {
+  translateX: number | K;
+};
+
+type TranslateYTransform<K> = {
+  translateY: number | K;
+};
+
+type SkewXTransform<K> = {
+  skewX: string | K;
+};
+
+type SkewYTransform<K> = {
+  skewY: string | K;
+};
+
+type MatrixTransform<K> = {
+  matrix: number[] | K;
+};
+
+type ReanimatedEntryValues = keyof EntryAnimationsValues;
+type ReanimatedExitValues = keyof ExitAnimationsValues;

package/src/hooks/useReanimatedTiming.test.ts

@@ -0,0 +1,96 @@
+import * as AMAProvider from '@react-native-ama/core';
+import { MOTION_ANIMATIONS } from '@react-native-ama/internal';
+import { renderHook } from '@testing-library/react-native';
+
+import { useReanimatedTiming } from './useReanimatedTiming';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('useReanimatedTiming', () => {
+  describe('withTiming', () => {
+    it('calls reanimated withTiming function with the give parameters when isReduceMotionEnabled is false', () => {
+      jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+        ...amaContextValues,
+        isReduceMotionEnabled: false,
+      } as any);
+
+      const { result } = renderHook(() => useReanimatedTiming());
+
+      result.current.withTiming('left', 42, { duration: 100 });
+      expect(withTiming).toHaveBeenCalledWith(42, { duration: 100 }, undefined);
+    });
+
+    it.each(MOTION_ANIMATIONS)(
+      'calls reanimated withTiming function with duration = 0 for motion animation when isReduceMotionEnabled is true',
+      key => {
+        jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+          ...amaContextValues,
+          isReduceMotionEnabled: true,
+        } as any);
+
+        const { result } = renderHook(() => useReanimatedTiming());
+
+        result.current.withTiming(key as any, 42, { duration: 100 });
+        expect(withTiming).toHaveBeenCalledWith(42, { duration: 0 }, undefined);
+      },
+    );
+  });
+
+  describe('withSpring', () => {
+    it('calls reanimated withSpring function with the give parameters when isReduceMotionEnabled is false', () => {
+      jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+        ...amaContextValues,
+        isReduceMotionEnabled: false,
+      } as any);
+
+      const { result } = renderHook(() => useReanimatedTiming());
+
+      result.current.withSpring('left', 42, { damping: 42 });
+      expect(withSpring).toHaveBeenCalledWith(42, { damping: 42 }, undefined);
+    });
+
+    it.each(MOTION_ANIMATIONS)(
+      'calls reanimated withTiming function with duration = 0 for motion animation when isReduceMotionEnabled is true',
+      key => {
+        jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+          ...amaContextValues,
+          isReduceMotionEnabled: true,
+        } as any);
+
+        const { result } = renderHook(() => useReanimatedTiming());
+
+        result.current.withSpring(key as any, 42);
+
+        expect(withSpring).not.toHaveBeenCalled();
+        expect(withTiming).toHaveBeenCalledWith(42, { duration: 0 });
+      },
+    );
+  });
+});
+
+const amaContextValues = {
+  isReduceTransparencyEnabled: false,
+  isBoldTextEnabled: false,
+  isGrayscaleEnabled: false,
+  isInvertColorsEnabled: false,
+  isReduceMotionEnabled: false,
+  isScreenReaderEnabled: false,
+};
+
+let withSpring: jest.Mock;
+let withTiming: jest.Mock;
+
+function mockReanimated() {
+  withSpring = jest.fn();
+  withTiming = jest.fn();
+
+  return {
+    withSpring,
+    withTiming,
+  };
+}
+
+jest.mock('@react-native-ama/core');
+jest.mock('react-native-reanimated', () => mockReanimated());

package/src/hooks/useReanimatedTiming.ts

@@ -0,0 +1,53 @@
+import { useAMAContext } from '@react-native-ama/core';
+import type { MotionAnimationKey } from '@react-native-ama/internal';
+import React from 'react';
+import {
+  AnimationCallback,
+  withSpring as ReanimateWithSpring,
+  withTiming as ReanimateWithTiming,
+  WithSpringConfig,
+  WithTimingConfig,
+} from 'react-native-reanimated';
+
+import { isMotionAnimation } from '../utils/isMotionAnimation';
+
+export const useReanimatedTiming = () => {
+  const { isReduceMotionEnabled } = useAMAContext();
+
+  const withTiming = React.useCallback(
+    (
+      propertyKey: MotionAnimationKey,
+      toValue: number,
+      config: WithTimingConfig = {},
+      callback?: AnimationCallback,
+    ) => {
+      if (isReduceMotionEnabled && isMotionAnimation(propertyKey)) {
+        config.duration = 0;
+      }
+
+      return ReanimateWithTiming(toValue, config, callback);
+    },
+    [isReduceMotionEnabled],
+  );
+
+  const withSpring = React.useCallback(
+    (
+      propertyKey: MotionAnimationKey,
+      toValue: number,
+      config?: WithSpringConfig,
+      callback?: AnimationCallback,
+    ) => {
+      if (isReduceMotionEnabled && isMotionAnimation(propertyKey)) {
+        return ReanimateWithTiming(toValue, { duration: 0 });
+      }
+
+      return ReanimateWithSpring(toValue, config, callback);
+    },
+    [isReduceMotionEnabled],
+  );
+
+  return {
+    withTiming,
+    withSpring,
+  };
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+// Components
+export { AnimatedContainer } from './components/AnimatedContainer';
+
+// Hooks
+export { useAnimation } from './hooks/useAnimation';
+export { useAnimationDuration } from './hooks/useAnimationDuration';
+export { useReanimatedAnimationBuilder } from './hooks/useReanimatedAnimationBuilder';
+export { useReanimatedTiming } from './hooks/useReanimatedTiming';

package/src/utils/isMotionAnimation.ts

@@ -0,0 +1,8 @@
+import {
+  MOTION_ANIMATIONS,
+  type MotionAnimationKey,
+} from '@react-native-ama/internal';
+
+export const isMotionAnimation = (key: MotionAnimationKey) => {
+  return MOTION_ANIMATIONS.includes(key);
+};