In this post, I will try to describe how can we easily create an animated scaling button in react native. First, let’s see how does the button work in action.
We can use Animated.sequence in order to scale up and down sequentially. So onPress button, the code looks like the following –
onPress={() => {
Animated.sequence([
Animated.timing(selectedAnim, {
toValue: 2,
duration: 300,
useNativeDriver: true,
}),
Animated.timing(selectedAnim, {
toValue: 1,
duration: 300,
useNativeDriver: true,
})
]).start(() => setSelected(prev=>!prev));
}}Finally we just need to use this selectedAnim value in our Animated.View.
<Animated.View style={[{transform: [{ scale: selectedAnim }]}]}>
The source code can be found here.
