How to show ProgressBar in ReactNative?

ProgressBar is a way to tell users that the content will be available in sometime. It can best be used when you submit something to the server and wait for the server to respond.

To work with the progress bar component install react-native-paper module using npm.

The command to install react-native-paper is ?

npm install --save-dev react-native-paper

Basic Syntax

The basic component of progress bar is as follows?

<ProgressBar progress={progress_number} color="progresscolorbar" />

To work with Progress Bar you need to import it from react-native-paper as follows ?

import { ProgressBar} from 'react-native-paper';

Properties

Following are some of the important properties available on ProgressBar ?

Example: Basic Progress Bar

It is very simple to display a progressbar. Just import it first from react-native-paper.

import React from 'react';
import { View } from 'react-native';
import { ProgressBar } from 'react-native-paper';

const MyComponent = () => (
  <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
    <ProgressBar progress={0.5} color="#00BCD4" />
  </View>
);

export default MyComponent;

Example: Animated Progress Bar

You can create an animated progress bar that updates over time:

import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import { ProgressBar, Text } from 'react-native-paper';

const AnimatedProgressBar = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(prevProgress => {
        if (prevProgress >= 1) {
          clearInterval(timer);
          return 1;
        }
        return prevProgress + 0.1;
      });
    }, 500);

    return () => clearInterval(timer);
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <Text>Loading: {Math.round(progress * 100)}%</Text>
      <ProgressBar progress={progress} color="#4CAF50" style={{ marginTop: 10 }} />
    </View>
  );
};

export default AnimatedProgressBar;

Example: Multiple Progress Bars

You can display multiple progress bars with different colors and values:

import React from 'react';
import { View } from 'react-native';
import { ProgressBar, Text } from 'react-native-paper';

const MultipleProgressBars = () => (
  <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
    <Text>Download Progress</Text>
    <ProgressBar progress={0.7} color="#2196F3" style={{ marginBottom: 20 }} />
    
    <Text>Upload Progress</Text>
    <ProgressBar progress={0.3} color="#FF9800" style={{ marginBottom: 20 }} />
    
    <Text>Processing</Text>
    <ProgressBar progress={0.9} color="#9C27B0" />
  </View>
);

export default MultipleProgressBars;

Key Points

• Progress value ranges from 0 (empty) to 1 (complete), not 0 to 10
• Use meaningful colors to indicate different states (blue for download, green for success, red for errors)
• Combine with Text components to show percentage or status messages
• Consider using useEffect and useState for dynamic progress updates

Conclusion

React Native Paper's ProgressBar provides an elegant way to show loading states and progress feedback. Use it with proper progress values (0-1) and meaningful colors to enhance user experience.