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.

React Native কিভাবে শুরু করা যায়, এটা সবার একটি কমন প্রশ্ন, যারা এটি নিয়ে কাজ করতে ইচ্ছুক। তাই এই পোস্টে আমি ট্রাই করব কিছুটা আইডিয়া দেয়ার। আমি React Native নিয়ে কাজ করছি প্রায় ৪ বছর ধরে, একটুক বলা যায় যে React Native এখন অনেক বেশি রবাস্ট অ্যান্ড পরিপক্ব। তাহলে শুরু…

Saad Khan

React-Native | JS | Native Android | Node | A Learner

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store