How to use the Animated API for a loading spinner in React Native?

Question

Accepted Answer

**Loading spinner** — animated loading indicator.

**Basic spinner:**
```tsx
import { Animated, Easing } from "react-native";
import { useEffect, useRef } from "react";

function Spinner() {
  const spinAnim = useRef(new Animated.Value(0)).current;

useEffect(() => {
    Animated.loop(
      Animated.timing(spinAnim, {
        toValue: 1,
        duration: 1000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
  }, []);

const rotation = spinAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"],
  });

return (
    <Animated.View
      style={{
        width: 50,
        height: 50,
        borderRadius: 25,
        borderWidth: 3,
        borderColor: "#ccc",
        borderTopColor: "#333",
        transform: [{ rotate: rotation }],
      }}
    />
  );
}
```

**Pulse animation:**
```tsx
const pulseAnim = useRef(new Animated.Value(1)).current;

Animated.loop(
  Animated.sequence([
    Animated.timing(pulseAnim, {
      toValue: 1.2,
      duration: 500,
      useNativeDriver: true,
    }),
    Animated.timing(pulseAnim, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }),
  ])
).start();
```

React Native: How to use the Animated API for a loading spinner in React Native?