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

Last Updated on December 15, 2020.

This blog post is the second part of the recently started react native animation series. We already went through fade animations in react native and now let’s check out how to create scaling animations in react native.

Scaling can be done in three ways: scaling through the x-axis, scaling through the y-axis and scaling through both axes. We use transform property and Animated API to bring scaling changes to an object.

In the following react native animation example, we animate a square view by changing its scaling properties. we set new Animated.Value as 1 because then only we can show the predefined size of the view at the start.

this.state = {
      startValue: new Animated.Value(1),
    };

We use Animated.timing to begin the animation.

Animated.timing(this.state.startValue, {
      toValue: 2,
      duration: 5000,
      useNativeDriver: true,
    }).start();

Here, toValue is set as 2, which means when the animation ends in five seconds, the size of the square would be two multiplied by the original size of the square.

Animated.View and transform are used to create scaling animation.

<Animated.View
          style={[
            styles.square,
            {
              transform: [
                {
                  scale: this.state.startValue,
                },
              ],
            },
          ]}
        />

Here’s the full example of react native scaling animation.

Class Component

import React, {Component} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

export default class ScaleXY extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.Value(1),
      endValue: 2,
      duration: 5000,
    };
  }

  componentDidMount() {
    Animated.timing(this.state.startValue, {
      toValue: this.state.endValue,
      duration: this.state.duration,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.square,
            {
              transform: [
                {
                  scale: this.state.startValue,
                },
              ],
            },
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    height: 150,
    width: 150,
    backgroundColor: 'blue',
  },
});

Function Component

import React, {useEffect} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

const ScaleXY = () => {
  const startValue = new Animated.Value(1);
  const endValue = 2;
  const duration = 5000;

  useEffect(() => {
    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
    }).start();
  }, [startValue, endValue, duration]);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.square,
          {
            transform: [
              {
                scale: startValue,
              },
            ],
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    height: 150,
    width: 150,
    backgroundColor: 'blue',
  },
});

export default ScaleXY;

The following is the output.

react native scaling animation example

If you only want to scale through x-axis then use scaleX prop instead of the scale.

import React, {Component} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

export default class ScaleX extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.Value(1),
      endValue: 2,
      duration: 5000,
    };
  }

  componentDidMount() {
    Animated.timing(this.state.startValue, {
      toValue: this.state.endValue,
      duration: this.state.duration,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.square,
            {
              transform: [
                {
                  scaleX: this.state.startValue,
                },
              ],
            },
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    height: 150,
    width: 150,
    backgroundColor: 'green',
  },
});

Here’s the output.

react native scale x animation example

If you want to scale through the y-axis only then use scaleY instead of scaleX.

import React, {Component} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

export default class ScaleXY extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.Value(1),
      endValue: 2,
      duration: 5000,
    };
  }

  componentDidMount() {
    Animated.timing(this.state.startValue, {
      toValue: this.state.endValue,
      duration: this.state.duration,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.square,
            {
              transform: [
                {
                  scaleY: this.state.startValue,
                },
              ],
            },
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    height: 150,
    width: 150,
    backgroundColor: 'red',
  },
});

Here’s the output.

react native scale y animation example

All react native animation examples in this tutorial series can be obtained from this Github repository.

1 thought on “React Native Animation Tutorial Series (Part 2): How to Create Scaling Animations in React Native”

Leave a Reply to rahamin Cancel reply

%d bloggers like this: