Hey 👋, In this article, we will be exploring how we can get started with React Spring Library in React native and how it makes animating Components simple

What is React- Spring and how it Works?

According to Official Docs react spring react-spring is a spring-physics-based animation library that should cover most of your UI-related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

In simple words, component animation is not based on duration(time-based) instead it will be based on actual physics properties, component neither has defined curves nor set duration, aside from this, it also supports Hooks.

It is cross-platform so it goes with Web, react-native, react-native-web, and practically any other platform like Konva and Three

Installation

npm install @react-spring/native

useSpring Hook

react-spring exposes multiple hooks, To get started we will be checking useSpring hook. useSpring turns values into animated values or its moves data from one place to another place one of the easiest hooks you only need to pass initial and final value to move component

Importing Hooks

import { useSpring, animated } from '@react-spring/native'

Turn View into animated View

const AnimatedView = animated(View);

Styling Component Usage

const card = {
    cardStyle: {
      backgroundColor: "#46e891",
      width: 100,
      height: 100,
      borderRadius: 15,
    },
  };

Adding Rotation Animation

  const cardAnimation = useSpring({
    // continuously run Animation if loop === true
    loop: true,
    // Initial Value for component
    from: {
      rotate: "-180deg",
    },
    // Final Value for Component
    to: {
      rotate: "0deg",
    },
  });
  const cardProps = {
      transform: [{ rotate: cardAnimation.rotate }],
  };

Adding Animation and Style props to Components

 <AnimatedView style={{ ...card.cardStyle, ...cardProps }}></AnimatedView>