A simple React-Native Animated hook
Here’s a React-Native hook that I’ve been using for a while to animate views trough the Animated API.
import { useState } from "react"; | |
import { Animated, Easing } from "react-native"; | |
export const useAnimation = function(initialValue: number = 0) { | |
const endValue = initialValue === 0 ? 1 : 0; | |
const [animationValue] = useState(new Animated.Value(initialValue)); | |
const setup = (config: Partial<Animated.TimingAnimationConfig> = {}) => | |
Animated.timing(animationValue, { | |
toValue: endValue, | |
useNativeDriver: true, | |
easing: Easing.inOut(Easing.quad), | |
...config | |
}); | |
return { | |
value: animationValue, | |
setup: setup | |
}; | |
}; |
Its usage should be straightforward:
import React, { useEffect } from "react";
import { View } from "react-native";
import { useAnimation } from "./useAnimation";
const FadeInOnMount: React.FC = function() {
const fadeAnim = useAnimation();
useEffect(() => {
fadeAnim.setup().start();
}, []);
const style = {
opacity: fadeAnim.value,
width: 50,
height: 50,
backgroundColor: "red"
};
return <View style={style} />;
};
By default the animation goes from 0
to 1
using an easing-in-out timing. This settings suit 90% of my animation use cases; if I need a fine-grained control on the animation style I tweak the style interpolation.
However, you can still manually configure the animation settings by passing your preferences to the setup()
function.