Fading in/out is the simplest animation and the classic entry point into React Native's Animated API – a value is animated over time from 0 to 1 (or the reverse) and bound to a component's opacity.

1. Description

The centerpiece is Animated.Value – a special, mutable number outside of normal React state, which the Animated API can change directly and efficiently (often on the UI thread rather than the JS thread, see the "Threads" chapter). Animated.timing() animates this value to a target value over a fixed duration.

2. Short example

const opacity = useRef(new Animated.Value(0)).current;

Animated.timing(opacity, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true,
}).start();

3. Complete project: a fadeable info box

npx create-expo-app fade-animation-demo
cd fade-animation-demo

import { useRef, useState } from 'react';
import { View, Text, Animated, Button, StyleSheet } from 'react-native';

export default function App() {
  const opacity = useRef(new Animated.Value(0)).current;
  const [visible, setVisible] = useState(false);

  function fadeIn() {
    setVisible(true);
    Animated.timing(opacity, {
      toValue: 1,
      duration: 400,
      useNativeDriver: true,
    }).start();
  }

  function fadeOut() {
    Animated.timing(opacity, {
      toValue: 0,
      duration: 400,
      useNativeDriver: true,
    }).start(({ finished }) => {
      if (finished) setVisible(false);
    });
  }

  return (
    <View style={styles.container}>
      <View style={styles.buttons}>
        <Button title="Fade In" onPress={fadeIn} />
        <Button title="Fade Out" onPress={fadeOut} />
      </View>
      {visible && (
        <Animated.View style={[styles.box, { opacity }]}>
          <Text style={styles.text}>This box fades in and out.</Text>
        </Animated.View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 80, alignItems: 'center' },
  buttons: { flexDirection: 'row', gap: 12, marginBottom: 24 },
  box: { backgroundColor: '#2563eb', padding: 20, borderRadius: 12, width: '80%' },
  text: { color: 'white', textAlign: 'center' },
});

4. Explanation

• useRef(new Animated.Value(0)).current – the animated value is created ONCE via useRef, not recreated on every render (otherwise every animation would restart from scratch).
• useNativeDriver: true moves the animation to the native UI thread – smoother, since it runs independently of the (potentially busy) JS thread; only works for non-layout properties like opacity and transform.
• The callback in .start(({{ finished }}) => ...) fires once the animation has completed – used here to remove the box from the tree only AFTER it has fully faded out (setVisible(false)), instead of having it disappear abruptly.
• Animated.View instead of a plain View is mandatory – only Animated.* components can accept Animated.Values as style properties.

5. Outputs