Skip to main content
This component is Android-only. It will not work on iOS or other platforms.ProgressBarAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from @react-native-community/progress-bar-android instead of react-native.
React component that wraps the Android-only ProgressBar. This component is used to indicate that the app is loading or there is activity in the app.

​
Example

import React from 'react';
import { View, ProgressBarAndroid, StyleSheet } from 'react-native';

const App = () => (
  <View style={styles.container}>
    <ProgressBarAndroid />
    <ProgressBarAndroid styleAttr="Horizontal" />
    <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" />
    <ProgressBarAndroid
      styleAttr="Horizontal"
      indeterminate={false}
      progress={0.5}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-evenly',
    padding: 10,
  },
});

export default App;

​
Props

​
styleAttr

Type: 'Horizontal' | 'Normal' | 'Small' | 'Large' | 'Inverse' | 'SmallInverse' | 'LargeInverse' Default: 'Normal' Style of the ProgressBar:
  • Horizontal - A horizontal progress bar
  • Normal - Circular, normal size (default)
  • Small - Circular, small size
  • Large - Circular, large size
  • Inverse - Circular, normal size, for use on dark backgrounds
  • SmallInverse - Circular, small size, for use on dark backgrounds
  • LargeInverse - Circular, large size, for use on dark backgrounds

​
indeterminate

Type: boolean Default: true If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal. 
<ProgressBarAndroid styleAttr="Horizontal" indeterminate={false} progress={0.5} />

​
progress

Type: number The progress value (between 0 and 1). This prop is only used when indeterminate is false. 
<ProgressBarAndroid
  styleAttr="Horizontal"
  indeterminate={false}
  progress={0.75}
/>

​
animating

Type: boolean Default: true Whether to show the ProgressBar (true, the default) or hide it (false). 
<ProgressBarAndroid animating={false} />

​
color

Type: ColorValue Color of the progress bar. 
<ProgressBarAndroid color="#2196F3" />
<ProgressBarAndroid color="rgb(255, 0, 0)" />
<ProgressBarAndroid color="rgba(0, 255, 0, 0.5)" />

​
testID

Type: string Used to locate this view in end-to-end tests.

​
Complete Example

import React, { useState, useEffect } from 'react';
import { View, ProgressBarAndroid, Button, Text, StyleSheet } from 'react-native';

const App = () => {
  const [progress, setProgress] = useState(0);
  const [animating, setAnimating] = useState(true);

  useEffect(() => {
    let interval;
    if (animating && progress < 1) {
      interval = setInterval(() => {
        setProgress((prevProgress) => {
          const newProgress = prevProgress + 0.01;
          return newProgress > 1 ? 0 : newProgress;
        });
      }, 100);
    }
    return () => clearInterval(interval);
  }, [animating, progress]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Indeterminate Progress</Text>
      <ProgressBarAndroid styleAttr="Horizontal" />

      <Text style={styles.title}>Determinate Progress</Text>
      <ProgressBarAndroid
        styleAttr="Horizontal"
        indeterminate={false}
        progress={progress}
        animating={animating}
        color="#2196F3"
      />
      <Text style={styles.progressText}>{Math.round(progress * 100)}%</Text>

      <Button
        title={animating ? 'Pause' : 'Resume'}
        onPress={() => setAnimating(!animating)}
      />
      <Button title="Reset" onPress={() => setProgress(0)} />

      <Text style={styles.title}>Different Styles</Text>
      <View style={styles.row}>
        <ProgressBarAndroid styleAttr="Small" />
        <ProgressBarAndroid styleAttr="Normal" />
        <ProgressBarAndroid styleAttr="Large" />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    marginTop: 20,
    marginBottom: 10,
  },
  progressText: {
    textAlign: 'center',
    marginVertical: 10,
    fontSize: 14,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

export default App;

Build docs developers (and LLMs) love

Get started for freeTalk to us