Ein-/Ausblenden ist die einfachste Animation und der klassische Einstieg in die Animated-API von React Native – ein Wert wird über Zeit von 0 auf 1 (oder umgekehrt) animiert und als opacity an eine Komponente gebunden.

1. Beschreibung

Kernstück ist Animated.Value – ein spezieller, mutierbarer Zahlenwert außerhalb des normalen React-States, den die Animated-API direkt und performant (oft auf dem UI-Thread statt dem JS-Thread, siehe Kapitel "Threads") verändern kann. Animated.timing() animiert diesen Wert über eine feste Dauer zu einem Zielwert.

2. Kurzes Beispiel

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

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

3. Komplettes Projekt: Ein-/ausblendbare Hinweisbox

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 [sichtbar, setSichtbar] = useState(false);

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

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

  return (
    <View style={styles.container}>
      <View style={styles.buttons}>
        <Button title="Einblenden" onPress={einblenden} />
        <Button title="Ausblenden" onPress={ausblenden} />
      </View>
      {sichtbar && (
        <Animated.View style={[styles.box, { opacity }]}>
          <Text style={styles.text}>Diese Box wird ein- und ausgeblendet.</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. Erklärung

• useRef(new Animated.Value(0)).current – der Animated-Wert wird EINMAL über useRef erzeugt, nicht bei jedem Render neu (sonst würde jede Animation von vorn beginnen).
• useNativeDriver: true verschiebt die Animation auf den nativen UI-Thread – flüssiger, weil sie unabhängig vom (potenziell beschäftigten) JS-Thread läuft; funktioniert nur für nicht-Layout-Eigenschaften wie opacity und transform.
• Der Callback in .start(({{ finished }}) => ...) feuert, sobald die Animation abgeschlossen ist – hier genutzt, um die Box erst NACH dem vollständigen Ausblenden aus dem Baum zu entfernen (setSichtbar(false)), statt sie abrupt verschwinden zu lassen.
• Animated.View statt normalem View ist zwingend – nur Animated.*-Komponenten können Animated.Values als Style-Eigenschaften entgegennehmen.

5. Ausgaben