From E-commerce to Finance applications, and even down to Cryptocurrency mobile applications, animations are used to communicate the effect of actions to the users.

Animation contributes largely to the sophisticatedness seen in recent mobile applications. This brings us to one of the animations property that is widely used in mobile applications, The Scale Transform property.

Scale transform is resizing the dimensions of an item. it involves increasing and decreasing the range of values on a component's X and Y axis. The X and Y dimensions can be scaled separately or together depending on the requirement of motion effect. The scaling effect is appealing if appropriately implemented. Scale is a way to control the size of an element, by increasing and decreasing the element.

Additionally, Scale transform can be used to create flip animations in react-native.

This article is a friendly guide to helping beginners understand the benefit and usage of Scale property in react native. At the end of the guide, you will be able to implement a scale transform animation and be confident to explore more fun ways to animate elements using this property on your own.

To follow through with this guide, you will have to set up your environment before getting started. Make sure to meet the requirements below for you to code along.

Prerequisites

Tools and technology stack required to follow through this article:

• knowledge of JavaScript
• knowledge of React
• knowledge of running command line/terminal instructions
• Node.js and npm installed on your machine
• Install Expo CLI and Expo Go
• XCode or Android Studio is installed on your machine.
• Some experience with React Native.

If you are new to the ecosystem you may want to start from the React Native Guide.

Having set up your environment, you can proceed to the getting started section.

Getting Started

Open a command prompt window, and navigate to where you will like to save your application from the command prompt. Enter the following command to create a new application:

npx create-expo-app rn-scale

Once the application has been created, navigate to the rn-scale folder, you will see a couple of files created at the root of the project.

At the root of the application, there is an App.js the file that contains a starter code.

To start the application run the following command on the terminal:

For iOS devices:

yarn ios

For Android devices:

yarn android

Running these commands would instruct the react-native compiler to bundle the code and display the user interface.

This is what you should see on the screen

Now that you’re being able to run the application locally, let look at a concept that could help understand what scaling an element is all about.

Animating Width and Height Directly

Above, in the introduction section, it was stated that scale transformation is resizing of an element or component. Resizing the width and height of an element is often the effect of scale transform. One of the ways to resize width and height in react native is by controlling the width and height style properties directly.

Take a look at the example demo below:

From the demo, on click of the yellow box, the yellow area enlarges to two (2) times its’ initial size, this is done by manipulating the width and height.

Here is the code that does that for the demo above:

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

export default function AnimatedWidthHeight() {
  const scaleAnimate = useRef(new Animated.Value(100)).current;

  const animateElement = () => {
    Animated.timing(scaleAnimate, {
      toValue: 200,
      duration: 2000,
      useNativeDriver: false,
    }).start();
  };

  const animationStyle = {
    width: scaleAnimate,
    height: scaleAnimate,
  };

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => animateElement()}>
        <Animated.Image
          source={require("../assets/home.jpg")}
          style={[ animationStyle ]}
        ></Animated.Image>
      </TouchableWithoutFeedback>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#4b0082",
  },
});

At top of the code, the React package and useRef hook are imported. Below the first line, from the react-native package, imports are brought in to build the user interface and implement logic.

Explanation of the react native libraries used:

• StyleSheet: for internal styling of the user interface.
• View: for building the user interface. The View element is used as a container for the entire user interface in the code above.
• TouchableWithoutFeedback: is a button element that can be pressed to trigger the animation. Also, the onPress props on the TouchableWithoutFeedback is used to call the animateElement() function.
• Animated: this is the library used to animate elements in this tutorial.

Note: other animation libraries can be used to animate elements in react native.

The scaleAnimate holds the value of the Animated.Value. The Animated.Value is a mutable singular value that can be changed without re-rendering the component.

The Animated.Value is wrapped in the useRef call so that it only gets created once when the component renders for the first time. Animated.Value is giving a default value of 100.

In the animateElement(), Animated.timing will animate scaleAnimate from 100 to 200, passingtoValue , duration, and useNativeDriver as configuration values.

Using the Animated.timing method, the width, and height are animated from 100 to 200 respectively. The start() is the trigger to initiate the animation in the Animated class component.

Also, the animatedStyle variable holds the width and height style properties that are dynamically changed when the component is animated.

In the user interface, the Animated.Image element is transformed in the demo above. The Animated.Image is the Image component being wrapped around by the Animated class component from react native library, making the Image component animateable.

Animating width and height properties affect layout in react native, while this can be very useful in some certain cases, it comes with its own but.

This method of scaling pixels in react native is not performant when a huge number of items are involved. From the react native documentation, you find a good recommendation as to how this can be achieved.

Scaling Elements Efficiently

According to the react native documentation, it is recommended to scale elements using the transform: [{scale}] style property.

Here is a demo of scaling elements using the scale transform property:

From the presentation above, clicking on the image area transforms the image, zooming in and out within a range of values.

This is similar to the previous example we saw while animating width and height, the difference here is that the scale property is used to resize elements which is more performant and efficient when dealing with a large amount of data.

Here is the code below that gets that done:

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

export default function Scale() {
  const scaleAnimate = useRef(new Animated.Value(0)).current;
  const [isToggle, setIsToggle] = useState(false);

  const scaleInterpolate = scaleAnimate.interpolate({
    inputRange: [0, 1],
    outputRange: [3, 2],
  });

  const animateElement = () => {
    const toValue = isToggle ? 0 : 1;

    Animated.timing(scaleAnimate, {
      toValue: toValue,
      duration: 2000,
      useNativeDriver: true,
    }).start(() => {
      setIsToggle(!isToggle);
    });
  };

  const animationStyle = {
    transform: [
      {
        scale: scaleInterpolate,
      },
    ],
  };

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => animateElement()}>
        <Animated.Image
          source={require("../assets/home.jpg")}
          style={[{ height: 100, width: 100 }, animationStyle]}
        ></Animated.Image>
      </TouchableWithoutFeedback>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#4b0082",
  },
});

A few differences exist between the Animated Width and Height section source code and the one above.

Explanation of the scale transform method:

• There is an array destructuring on the useState hook, assigning the value from the hook to the isToggle variable and setIsToggle function. This is useful for tracking the changes and updating the state of the application.
• The scaleInterpolate variable holds the resulting value from the .interpolate function. Using interpolation, the inputRange value changes from 0 to 1, it's interpolate the value from 3 to 2 in the outputRange.
• Inside the animateElement(), a toValue variable is defined to store the outcome of the conditional check, setting it's value to 0 when isToggle is true or 1 when it'sfalse. These values map to the inputRange values.
• You will observe that the isToggle value is updated in the start() method call, by using the setIsToggle function destructured from the useState hook.
• In the animationStyle object variable, the transform property can take an array of objects separated with a comma. In order, to change the dimensions of the image area, the transform property takes an array with an object, where the scale property is set to the returned value from scaleInterpolate.

Note: The transform property can also take values such as scaleX and scaleY. The scaleX property is used to transform elements along the horizontal axis, while the scaleY property transforms elements on the vertical axis. The scale property transforms elements on both the X and Y axis.

Summing Up

In this article, you’ve learned how to scale elements in react native. The following was covered in this how-to article:

• The definition, and importance of scaling items in mobile applications.
• Create and setup a react native project locally
• Explored the width and height scaling animations without using the scale transform property.
• Examined the performance effect of animating dimensions with the width and height properties.
• Also, showed how to animate dimensions with the scale transform property.

Would appreciate your comments and suggestions about the tutorial in the comment box.

Also, you can reach me on Twitter @ayopaulofficial and on LinkedIn at Paul Oloyede

Thanks for Reading.

Introduction

Opacity means transparency of an object or element used to control the visibility of an element. It helps with a gradual entrance and gradual exit to prevent any sort of jarring layout movements that may affect the user negatively. When change occurs for an opacity value, it affects the visibility of the component in which such change is been acted upon.

You can set opacity values from 0 to 1 which is equivalent to 0% to 100%. So for example, we can set our opacity value to 0.1, or 0.5 based on how much visibility or transparency we want or the message being conveyed to a user at the time.

The benefit of Animating Opacity

• One of the core importance of animating this value when changed is to give the smooth transitioning effect to the eye of the user, basically not changing visuals in an unappealing manner. This can at times irritate the user.
• Allow the user to see the effect of their action, and not living them to wonder if there was any at all.
• Creating a connection between each state of your application.
• it helps to convey or drive the message home with ease.
• it can be used as a guide for the user when they need to perform some actions that are required. Take, for example, a button that can remain disabled until some form fields are filled and validated. it is often implemented by blurring out the button component until these actions or requirements are met.

Prerequisites

• Basic knowledge of JavaScript
• Basic knowledge of React
• Basic knowledge of running CLI commands
• Node.js and npm installed on your machine
• XCode or Android Studio installed on your machine
• Some experience with React Native (suggested, not required)

Getting Started

Let’s create a new expo project using this command:

npx create-expo-app rn-opacity

In the root of the application that we’ve just created, there is an App.js file that contains a starter code to show us the application is up and running properly after installation.

So let's run our app using this command yarn ios for iOS and yarn android for android devices respectively, we will see the content of the component appear on our screen.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Building the UI

Can we add a component structure to demonstrate our example? Yes, that’s possible!

In our source code is an orange box, where we use View component to build the UI and style the backgroundColor to orange

we import the react library on line 1.

On line 2 we import StyleSheet for writing external styles, View for building our UI, and TouchableWithoutFeedback button component for achieving interaction or state switch trigger.

import React from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, View, TouchableWithoutFeedback } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => null}>
        <View
          style={styles.box}
        ></View>
      </TouchableWithoutFeedback>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
            backgroundColor: "orange",
            height: 200,
            width: 200,
            opacity: 0.5,
          }
});

Putting Everything Together

In our App.js file below, we have added quite many changes, let's go through the lines of code for an explanation.

import React, { useRef } from "react";
import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Animated,
} from "react-native";

export default function App() {

  const opacityAnimation = useRef(new Animated.Value(0.5)).current;

  const opacityStyle = { opacity: opacityAnimation };

  const animateElement = () => {

    Animated.timing(opacityAnimation, {
      toValue: 0,
      duration: 1500,
      useNativeDriver: true
    }).start(() => {
      Animated.timing(opacityAnimation, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true
      }).start()
    })
  };

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => animateElement()}>
        <Animated.View style={[styles.box, opacityStyle]}></Animated.View>
      </TouchableWithoutFeedback>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    backgroundColor: "orange",
    height: 200,
    width: 200,
    opacity: 0.5,
  },
});

We declare an opacityAnimation variable to hold the Animated.value which is set to 0.5. This means that the opacity value of our box at default when rendering it's 0.5

While on line 13, in our code, we also declare a variable to hold an object for the opacity style we would be changing dynamically and we set the opacity property to the value of opacityAnimation.

In the animateElement function we access the Animated.timing method. Timing will specify the animation of a single value to another value over a set period, so its function signature is opacityAnimation and then the configuration object. In our config object we have the following options:

• toValue: the new value we are animating to.
• duration: lenght of animation in milliseconds
• useNativeDriver: allows native code to perform the animation on the UI thread.

To trigger a change, we need to call start method as we have it in our source code.

Also where we are rendering our UI we have replaced the View component with Animated.View component. The Animated library wraps around the normal View element

The call the animateElement function in our TouchableWithoutFeedback button component. Where it is passed into the onPress function props.

Clicking within the box area would trigger our animations, allowing it to fade out from 0.5 to 0 and then fade in from 0 to 1 for 1500 milliseconds on both calls.

Here is a demo of the app:

Summary

A good use case where this can be applied is in a Button component, a Checkbox component, and a Radio Button component. You will find this implementation useful for achieving visual effects appealing to the user when interacting with your apps.

Thanks for stopping by, hope you find this tutorial useful.

Cheers!!!