@react-spring/native

What is @react-spring/native?

@react-spring/native is a library for creating animations in React Native applications. It provides a set of hooks and components that allow developers to create smooth and interactive animations with ease. The library is built on top of the react-spring animation library, which is known for its physics-based animations.

What are @react-spring/native's main functionalities?

Basic Animation

This feature allows you to create basic animations. In this example, a view fades in from opacity 0 to opacity 1.

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

const App = () => {
  const props = useSpring({ to: { opacity: 1 }, from: { opacity: 0 } });
  return <animated.View style={props}><View style={{ width: 100, height: 100, backgroundColor: 'red' }} /></animated.View>;
};

Spring Animation

This feature allows you to create spring animations that can be toggled. In this example, a button toggles the opacity of a view between 0 and 1.

import { useSpring, animated } from '@react-spring/native';
import { View, Button } from 'react-native';
import { useState } from 'react';

const App = () => {
  const [toggle, setToggle] = useState(false);
  const props = useSpring({ to: { opacity: toggle ? 1 : 0 }, from: { opacity: 0 } });
  return (
    <View>
      <Button title="Toggle" onPress={() => setToggle(!toggle)} />
      <animated.View style={props}><View style={{ width: 100, height: 100, backgroundColor: 'blue' }} /></animated.View>
    </View>
  );
};

Gesture-based Animation

This feature allows you to create gesture-based animations. In this example, a view can be dragged around the screen and will return to its original position when released.

import { useSpring, animated } from '@react-spring/native';
import { PanResponder, View } from 'react-native';
import { useRef } from 'react';

const App = () => {
  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }));
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: (e, { dx, dy }) => set({ x: dx, y: dy }),
      onPanResponderRelease: () => set({ x: 0, y: 0 })
    })
  ).current;
  return (
    <animated.View {...panResponder.panHandlers} style={{ transform: [{ translateX: x }, { translateY: y }] }}>
      <View style={{ width: 100, height: 100, backgroundColor: 'green' }} />
    </animated.View>
  );
};

Other packages similar to @react-spring/native

react-native-reanimated

react-native-reanimated is another popular library for creating animations in React Native. It provides a more declarative API and is known for its performance, especially for complex animations. Compared to @react-spring/native, react-native-reanimated offers more control over the animation lifecycle and better integration with gesture handling.

react-native-animatable

react-native-animatable is a library that provides a set of pre-defined animations and transitions for React Native components. It is easier to use for simple animations but lacks the flexibility and physics-based animations that @react-spring/native offers. It is a good choice for quick and simple animations.

lottie-react-native

lottie-react-native is a library for rendering Adobe After Effects animations in React Native. It is ideal for complex, designer-created animations. While it does not offer the same level of interactivity and physics-based animations as @react-spring/native, it excels in rendering high-quality animations created in After Effects.

README

@react-spring/native

react-native support

Note: This package is not compiled before being published, because Metro handles that for us, which means we get proper sourcemap support!