Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

React Native ProgressBarAndroid

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In this article, we are going to discuss how to create a Progress Bar for Android applications. We will be using the React Native component ProgressBarAndroid.


   // Other Component
   // Other Component

ProgressBarAndroid Props:

  • animating: Boolean value which specifies whether to show the progress bar or not.
  • color: It specifies the color of the progress bar.
  • indeterminate: It is used to show indeterminate progress.
  • progress: It specifies the progress value as a number.
  • styleAttr: It specifies the style of the ProgressBar Android component. It can have Horizontal, Normal (default), Small, Large, Inverse, SmallInverse, and LargeInverse as value.
  • testID: It is used to locate this view in end-to-end tests.


Now let’s start with the implementation:

  • Step 1: Open your terminal and install expo-cli by the following command.

    npm install -g expo-cli
  • Step 2: Now create a project by the following command.

    expo init ProgressBarAndroidDemo
  • Step 3: Now go into your project folder i.e. ProgressBarAndroidDemo using the following command.

    cd ProgressBarAndroidDemo

Project Structure: It will look like the following.

Example: Now let’s implement the ProgressBarAndroid. Here we have shown a simple loader animation, and after it ends, we have shown a text to the user.


import React, { useState } from 'react';
import {
  StyleSheet, Text, View, ProgressBarAndroid,
} from 'react-native';
export default function App() {
  // State to hold current value
  const [val, setVal] = useState(true);
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => { setVal(false); }}
        style={{ flex: 1 }}>
        <View style={{
          flex: 1, justifyContent: 'center',
          alignItems: 'center'
          <ProgressBarAndroid animating={val} color="blue"
            styleAttr='LargeInverse' />
          {!val && <Text>App has finished loading</Text>}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.


My Personal Notes arrow_drop_up
Last Updated : 28 Jun, 2021
Like Article
Save Article
Similar Reads
Related Tutorials