How to Create Horizontal Progress Bar in React Native (Android Only)

Last Updated on December 11, 2020.

As you know, the ActivityIndicator component of React Native is round in shape and not horizontal. If you need a horizontal progress bar in your React Native Android app then you should use ProgressBarAndroid component.

The ProgressBarAndroid component should be installed from react native community using the following command.

npm install @react-native-community/progress-bar-android --save

or

yarn add @react-native-community/progress-bar-android

For iOs, run the following command too.

npx pod-install

The following snippet creates a horizontal progress bar in red color.

<ProgressBar
          styleAttr="Horizontal"
          color="red"
          indeterminate={false}
          progress={0.5}
        />

Following is the complete example.

import React from 'react';
import {View} from 'react-native';
import {ProgressBar} from '@react-native-community/progress-bar-android';

const App = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <ProgressBar
        style={{width: 150}}
        styleAttr="Horizontal"
        color="#2196F3"
      />
    </View>
  );
};

export default App;

Following is the output of react native horizontal progress bar example.

horizontal progress bar react native

That’s how you show horizontal progress bar in react native.

Leave a Reply

%d bloggers like this: