Fortschrittsbalken in React Native

Auch für Fortschrittsbalken gibt es keine eingebaute, plattformübergreifende Komponente mehr in aktuellem React Native (das frühere ProgressBarAndroid/ProgressViewIOS wurden entfernt) – die gängige Lösung: ein View mit animierter Breite in Prozent.

1. Beschreibung

Ein Fortschrittsbalken besteht aus zwei verschachtelten Views: einem äußeren mit fester Breite (die "Spur") und einem inneren, dessen Breite (als Prozentsatz oder animierter Animated.Value) den aktuellen Fortschritt darstellt.

2. Kurzes Beispiel

<View style={{ height: 8, backgroundColor: '#e5e7eb', borderRadius: 4 }}>
  <View style={{ width: `${fortschritt}%`, height: '100%', backgroundColor: '#2563eb', borderRadius: 4 }} />
</View>

3. Komplettes Projekt: Datei-Upload-Simulation

npx create-expo-app progress-bar-demo
cd progress-bar-demo

components/Fortschrittsbalken.js

import { useEffect, useRef } from 'react';
import { Animated, View, StyleSheet } from 'react-native';

function Fortschrittsbalken({ prozent }) {
  const breite = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(breite, {
      toValue: prozent,
      duration: 300,
      useNativeDriver: false, // width kann nicht mit dem Native Driver animiert werden
    }).start();
  }, [prozent]);

  return (
    <View style={styles.spur}>
      <Animated.View
        style={[
          styles.fuellung,
          { width: breite.interpolate({ inputRange: [0, 100], outputRange: ['0%', '100%'] }) },
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  spur: { height: 10, backgroundColor: '#e5e7eb', borderRadius: 5, overflow: 'hidden' },
  fuellung: { height: '100%', backgroundColor: '#2563eb', borderRadius: 5 },
});

export default Fortschrittsbalken;

App.js

import { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import Fortschrittsbalken from './components/Fortschrittsbalken';

export default function App() {
  const [prozent, setProzent] = useState(0);

  function hochladenSimulieren() {
    setProzent(0);
    const intervall = setInterval(() => {
      setProzent((aktuell) => {
        const naechster = aktuell + 10;
        if (naechster >= 100) clearInterval(intervall);
        return Math.min(naechster, 100);
      });
    }, 200);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Upload: {prozent}%</Text>
      <Fortschrittsbalken prozent={prozent} />
      <View style={styles.button}>
        <Button title="Upload starten" onPress={hochladenSimulieren} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 80, paddingHorizontal: 24 },
  label: { marginBottom: 8, fontSize: 16 },
  button: { marginTop: 20 },
});

4. Erklärung

useNativeDriver: false ist hier PFLICHT – width ist eine Layout-Eigenschaft, und der native Treiber unterstützt ausschließlich opacity/transform.
breite.interpolate() übersetzt den numerischen Animated-Wert (0–100) in einen Prozent-STRING ('0%'–'100%'), da width im Style entweder eine Zahl (Pixel) oder einen Prozent-String erwartet.
overflow: 'hidden' an der "Spur" schneidet die innere Füllung an den abgerundeten Ecken ab, statt eckig über den Rand hinauszuragen.
setInterval simuliert hier einen echten Netzwerk-Upload-Fortschritt; in einer echten App käme der Prozentwert typischerweise aus dem onUploadProgress-Callback einer HTTP-Bibliothek wie Axios (siehe Kapitel "Axios").

5. Ausgaben

Ausgabe

Text "Upload: 0%" über einem leeren grauen Balken, darunter ein "Upload starten"-Button. Nach Antippen füllt sich der Balken alle 200ms um 10% (blau, animiert, abgerundet) bis 100%, der Prozenttext zählt synchron mit.