React-Native ProgressBarAndroid

Syntax

The <ProgressBarAndroid> component in React-Native can be used to display a horizontal progress bar on Android devices.

import React from 'react';
import { ProgressBarAndroid } from 'react-native';

function MyComponent(props) {
  return (
    <ProgressBarAndroid
      styleAttr='Horizontal'
      indeterminate={false}
      progress={0.5}
    />
  )
}

Example

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

function MyComponent(props) {
  return (
    <View>
      <Text>Downloading...</Text>
      <ProgressBarAndroid
        styleAttr='Horizontal'
        indeterminate={false}
        progress={0.75}
      />
    </View>
  )
}

export default MyComponent;

Output

The <ProgressBarAndroid> component will display a horizontal progress bar in the specified style with the specified progress value.

Explanation

The <ProgressBarAndroid> component is used to display a horizontal progress bar on Android devices. It has several props, including:

• styleAttr: A string that specifies the style of the progress bar. Options include Horizontal, Small, Large, Inverse, SmallInverse, and LargeInverse.
• indeterminate: A boolean that indicates whether the progress bar should be indeterminate.
• progress: A number between 0 and 1 that specifies the progress value of the bar.

Use

The <ProgressBarAndroid> component is useful for displaying the progress of a long-running task, such as a file download or upload. It can be customized with different styles and progress values.

Important Points

• The <ProgressBarAndroid> component only works on Android devices. For iOS, use <ProgressViewIOS> instead.
• The <ProgressBarAndroid> component can be styled with different colors and sizes using the color and style props.

Summary

The <ProgressBarAndroid> component in React-Native is a useful tool for displaying a horizontal progress bar on Android devices. By customizing the style and progress values, it can be used to display the progress of long-running tasks.