Skip to main content
Version: 0.7.x

useReanimatedTiming

This hooks allow using custom withTiming and withSpring functions that are reduce motion aware.

Usage

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

const { withTiming, withSrping } = useReanimatedTiming();

Example

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import {
ClickableSpan,
Span,
isMotionAnimation,
useAMAContext,
useAnimationDuration,
useReanimatedTiming,
} from 'react-native-ama';
import Animated, {
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated';

export const ReanimatedReduceMotionScreen = () => {
const value = useSharedValue(0);
const { withTiming, withSpring } = useReanimatedTiming();

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

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

const testWithSpring = () => {
value.value = withSpring('translateX', Math.random());
};

return (
<View style={styles.view}>
<Span style={styles.intro}>
This example shows how to use the{' '}
<ClickableSpan onPress={() => {}}>getAnimationDuration</ClickableSpan>{' '}
with Reanimated for a more accessible animations.
</Span>
<Animated.View style={[styles.box, animatedStyles]} />

<Pressable onPress={testWithTiming}>
<Text>withTiming</Text>
</Pressable>
<Pressable onPress={testWithSpring}>
<Text>withSpring</Text>
</Pressable>
</View>
);
};

const styles = StyleSheet.create({
view: {
paddingHorizontal: theme.padding.big,
},
box: {
width: 100,
height: 100,
borderRadius: 20,
backgroundColor: theme.color.mixed,
},
intro: {
lineHeight: theme.lineHeight.medium,
},
});

withTiming

Under the hood calls the reanimated withTiming function.

If the given propertyKey is a motion one and reduce motion is enabled, the force the duration to be 0, before calling withTiming.

Syntax

withTiming(
propertyKey
:
keyof
ViewStyle,
toValue
:
number,
config
:
WithTimingConfig = {},
callback ? : AnimationCallback
)
;
PropertyDescription
propertyKeyThe animation key that will be used with the useSharedValue
toValueThe target value parameter passed to the original withTiming
configThe config parameter passed to the original withTiming
callbackThe callback parameter passed to the original withTiming

Example

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

withSpring

Under the hood calls the reanimated withSpring function.

If the given propertyKey is a motion one and reduce motion is enabled, then calls withTiming function with duration 0 instead.

Syntax

withTiming(
propertyKey
:
keyof
ViewStyle,
toValue
:
number,
config ? : WithSpringConfig,
callback ? : AnimationCallback,
)
;
PropertyDescription
propertyKeyThe animation key that will be used with the useSharedValue
toValueThe target value parameter passed to the original withTiming
configThe config parameter passed to the original withTiming
callbackThe callback parameter passed to the original withTiming

Example

value.value = withSpring('translateX', Math.random());