React Native Animation Tutorial Series (Part 2): How to Create Scaling Animations in React Native

React Native Animation Tutorial Series (Part 2): How to Create Scaling Animations in React Native

This blog submit is the second one a part of the recently started react native animation series. We already went through fade animations in react local and now allow’s test out a way to create scaling animations in react local.

import React, { Component } from "react";

import { StyleSheet, View, Animated, TouchableWithoutFeedback } from "react-native";

export default class animations extends Component {

  state = {

    animation: new Animated.Value(1),

  };

  startAnimation = () => {

    Animated.timing(this.state.animation, {

      toValue: 2,

      duration: 1500

    }).start(() => {

      this.state.animation.setValue(1);

    });

  }

  

  render() {

    const animatedStyles = {

      transform: [

        { scale: this.state.animation }

      ]

    }

    return (

      <View style={styles.container}>

        <TouchableWithoutFeedback onPress={this.startAnimation}>

          <Animated.View style={[styles.box, animatedStyles]} />

        </TouchableWithoutFeedback>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: "center",

    justifyContent: "center",

  },

  box: {

    width: 150,

    height: 150,

    backgroundColor: "tomato",

  }

});