Skip to content

Instantly share code, notes, and snippets.

@marksyzm
Created July 14, 2021 13:12
Show Gist options
  • Save marksyzm/06237d1a5a15238c0afba12c3822529e to your computer and use it in GitHub Desktop.
Save marksyzm/06237d1a5a15238c0afba12c3822529e to your computer and use it in GitHub Desktop.
React native Animated timing hook for tweening
import {useEffect, useRef, useState} from 'react';
import {Animated} from 'react-native';
function useTimingAnimation(
initialValue: number,
{
delay,
duration,
easing,
toValue,
isInteraction = true,
useNativeDriver = true,
}: Partial<Animated.TimingAnimationConfig>,
onFinish?: Animated.EndCallback,
) {
const {current: animatingValue} = useRef(new Animated.Value(initialValue));
const [animatedValue, setAnimatedValue] = useState(initialValue);
useEffect(() => {
Animated.timing(animatingValue, {
delay,
duration,
easing,
toValue,
useNativeDriver,
}).start(onFinish);
const animatingId = animatingValue.addListener(({value}) =>
setAnimatedValue(value),
);
return () => {
animatingValue.removeListener(animatingId);
};
}, [
animatingValue,
delay,
duration,
easing,
toValue,
useNativeDriver,
isInteraction,
onFinish,
]);
return {
ref: animatingValue,
animatedValue,
};
}
export default useTimingAnimation;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment