Animated Scaling Button in React Native

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.

Demo

We can use the 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.