Skip to main content

useAnimationDuration

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

Usage

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

const { getAnimationDuration } = useAccessibleAnimationDuration();

getAnimationDuration

Syntax

function getAnimationDuration(
property: ViewStyle,
durationMS: number,
): WithTimingConfig {}
PropertyDescription
propertyThe property to animate
durationMSThe 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(),
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