Animated API Basics

The box in this example fades from fully visible to invisible over one second, and its component function runs exactly once.

import { View, Animated, Button, StyleSheet, useAnimatedValue } from 'react-native';

export default function App() {
  const opacity = useAnimatedValue(1);

  const fadeTo = (toValue) => {
    Animated.timing(opacity, {
      toValue,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, { opacity }]} />