Spring and decay animations in React Native - Mini App: Build & Ship

Build: SpringDecayAnimationScreen

This screen demonstrates how to use spring and decay animations in React Native. It shows a circle that can be dragged horizontally. When released, it either springs back to center or decays with momentum.

Target UI

┌───────────────────────────────┐
│ Spring and Decay Animations    │
├───────────────────────────────┤
│                               │
│           ○                   │
│                               │
│ Drag the circle left or right │
│ Release to see spring or decay│
└───────────────────────────────┘

Display a circle in the center horizontally.

Allow user to drag the circle horizontally with touch.

When user releases drag, if velocity is small, animate circle back to center with spring animation.

If velocity is large, animate circle with decay animation simulating momentum.

Use React Native Animated API with useNativeDriver set to false.

Show instructions text below the circle.

Starter Code

React Native

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

export default function SpringDecayAnimationScreen() {
  const translateX = useRef(new Animated.Value(0)).current;

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (e, gestureState) => {
        // TODO: Update translateX with gestureState.dx
      },
      onPanResponderRelease: (e, gestureState) => {
        // TODO: Animate translateX with spring or decay based on velocity
      },
    })
  ).current;

  return (
    <View style={styles.container}>
      <Animated.View
        style={[styles.circle, { transform: [{ translateX }] }]}
        {...panResponder.panHandlers}
      />
      <Text style={styles.instructions}>
        Drag the circle left or right{'
'}Release to see spring or decay
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  circle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: '#4a90e2',
  },
  instructions: {
    marginTop: 20,
    fontSize: 16,
    color: '#333',
    textAlign: 'center',
  },
});

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

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

export default function SpringDecayAnimationScreen() {
  const translateX = useRef(new Animated.Value(0)).current;

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (e, gestureState) => {
        translateX.setValue(gestureState.dx);
      },
      onPanResponderRelease: (e, gestureState) => {
        const velocity = gestureState.vx;
        if (Math.abs(velocity) < 0.5) {
          Animated.spring(translateX, {
            toValue: 0,
            useNativeDriver: false,
            bounciness: 10,
          }).start();
        } else {
          Animated.decay(translateX, {
            velocity: velocity,
            deceleration: 0.997,
            useNativeDriver: false,
          }).start();
        }
      },
    })
  ).current;

  return (
    <View style={styles.container}>
      <Animated.View
        style={[styles.circle, { transform: [{ translateX }] }]}
        {...panResponder.panHandlers}
        accessibilityLabel="Draggable circle"
        accessible={true}
      />
      <Text style={styles.instructions} accessibilityRole="text">
        Drag the circle left or right{'
'}Release to see spring or decay
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  circle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: '#4a90e2',
  },
  instructions: {
    marginTop: 20,
    fontSize: 16,
    color: '#333',
    textAlign: 'center',
  },
});

This solution uses React Native's Animated API to create a draggable circle that responds to user gestures.

We use PanResponder to track the horizontal drag movement and update the translateX animated value accordingly.

When the user releases the drag, we check the horizontal velocity (gestureState.vx). If the velocity is small (less than 0.5), we animate the circle back to the center using a spring animation, which gives a natural bounce effect.

If the velocity is larger, we use a decay animation that simulates momentum, letting the circle continue moving and gradually slow down.

We set useNativeDriver: false because the translation affects layout and gesture handling.

Accessibility labels are added for screen readers, and the UI is simple and clear for easy interaction.

Final Result

Completed Screen

┌───────────────────────────────┐
│ Spring and Decay Animations    │
├───────────────────────────────┤
│                               │
│           ○                   │
│                               │
│ Drag the circle left or right │
│ Release to see spring or decay│
└───────────────────────────────┘

User touches and drags the blue circle horizontally.

Circle moves following the finger horizontally.

When user releases the circle with slow movement, it springs back to center with bounce.

When user releases the circle with fast movement, it continues moving with decay animation and slows down gradually.

Stretch Goal

Add a toggle button to switch between light and dark mode for the screen.

💡 Hint

Use React state to track mode and change background and text colors accordingly.