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

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 any of the following commands.

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


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.


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'}}>
        style={{width: 150}}

export default App;

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

horizontal progress bar react native

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

Similar Posts

Leave a Reply