useAnimationDuration

When passing a motion property, returns 0 if Reduce Motion is enabled otherwise the given value.

Usage

import { useAnimationDuration } from 'react-native-ama/animations';

const { getAnimationDuration } = useAnimationDuration();

getAnimationDuration

Syntax

function getAnimationDuration(
  property: ViewStyle,
  durationMS: number,
): WithTimingConfig {}

Property	Description
property	The property to animate
durationMS	The duration to use if reduced motion is off

Example

We can create more accessible animations when using Reanimated:

const value = useSharedValue(0);

const animatedStyles = useAnimatedStyle(() => {
  return {
    transform: [{ translateX: value.value * 255 }],
  };
});

const playAnimation = () => {
  value.value = withTiming(Math.random(), {
    duration: getAnimationDuration('translateX', 300),
  });
};

Because we specified translateX as the property we're going to use for the animation, and considering that that property is a motion animation; playAnimation will use a duration of 300ms when reduce motion is off, and duration of 0s when is on

Related guidelines

• Animations