How to Create Scaling Animations in React Native

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 the transform style property and the 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.

const startValue = useRef(new Animated.Value(1)).current;

We use Animated.timing to begin the animation.

Animated.timing(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: startValue,
              },
            ],
          },
        ]}
      />

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

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

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

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

  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.

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

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

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

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

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

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

export default ScaleX;

Here’s the output.

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

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

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

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

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

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

export default ScaleY;

Here’s the output.

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