Progress Bar in React Native

What is a progress bar in React Native?

A progress bar is a thin horizontal track with a colored fill that represents completion from 0 to 100%. React Native has no single cross-platform ProgressBar component today. The Android-only ProgressBarAndroid and iOS-only ProgressViewIOS were both deprecated and moved out of core, so the portable answer is to build one yourself from View— it’s a few lines, works identically on both platforms, and you control the styling.

Basic example

A determinate bar driven by a 0–1 progress value:

import { View } from 'react-native';

function ProgressBar({ progress = 0 }) {
  // progress: 0..1
  const pct = Math.max(0, Math.min(1, progress)) * 100;
  return (
    <View style={{ height: 8, borderRadius: 4, backgroundColor: '#e5e7eb', overflow: 'hidden' }}>
      <View
        style={{
          width: `${pct}%`,
          height: '100%',
          backgroundColor: '#fb923c',
          borderRadius: 4,
        }}
      />
    </View>
  );
}

Animated example

For a smooth fill as progress changes, animate the width with Animated:

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

function AnimatedProgressBar({ progress = 0 }) {
  const w = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(w, {
      toValue: Math.max(0, Math.min(1, progress)),
      duration: 300,
      useNativeDriver: false, // width can't use the native driver
    }).start();
  }, [progress, w]);

  const width = w.interpolate({
    inputRange: [0, 1],
    outputRange: ['0%', '100%'],
  });

  return (
    <View style={{ height: 8, borderRadius: 4, backgroundColor: '#e5e7eb', overflow: 'hidden' }}>
      <Animated.View style={{ width, height: '100%', backgroundColor: '#fb923c' }} />
    </View>
  );
}

Props

The custom component above takes one prop; here’s a typical, fuller API you’d expose:

Common patterns

Indeterminate (unknown duration):when you don’t know how long something takes, don’t fake a determinate bar — use a looping ActivityIndicator or an animated shuttle. A library like react-native-progressships both bar and circle variants if you don’t want to build them.

Segmented / stepper:for a multi-step flow, render N track segments and fill the completed ones — clearer than a single bar for “step 2 of 5.”

Gotchas

• ProgressBarAndroid is gone from core. If a 2019 tutorial imports it from react-native, that code no longer compiles — use a View or a community package.
• Animating width requires useNativeDriver: false. Layout props can’t run on the native driver; setting it to true silently does nothing or warns.
• Clamp your progress value. A value above 1 (or below 0) overflows the track unless you Math.min(1, ...) it.
• Put overflow: 'hidden' on the track or the rounded fill corners poke past the rounded track edges.
• For accessibility, set accessibilityRole="progressbar" and accessibilityValue so screen readers announce completion.

FAQ

How do I make a progress bar in React Native? Wrap a colored fill View inside a track View and set the fill’s width to a percentage. That’s the whole component — see the basic example above.

Is ProgressBarAndroid still available? No. It was deprecated and removed from React Native core. Build your own from View or use react-native-progress.

How do I animate the progress smoothly? Use Animated.timing on a value, interpolate it to a width percentage, and set useNativeDriver: false (see the animated example).

Related components