React Native: How to use the Animated API for a spring animation?

Spring animation — physics-based animation.

Basic spring:

1import { Animated } from "react-native";
2
3const scaleAnim = useRef(new Animated.Value(1)).current;
4
5Animated.spring(scaleAnim, {
6  toValue: 1.5,
7  tension: 40,
8  friction: 7,
9  useNativeDriver: true,
10}).start();

Spring parameters:

• tension — spring stiffness (higher = faster).
• friction — damping (higher = less bounce).
• speed — animation speed.
• bounciness — bounce amount.

Presets:

• Default: tension=40, friction=7.
• Gentle: tension=30, friction=10.
• Wobbly: tension=150, friction=8.
• Stiff: tension=200, friction=10.

Reanimated spring:

1import { withSpring } from 'react-native-reanimated';
2
3offset.value = withSpring(100, {
4  damping: 10,
5  stiffness: 100,
6});