React Native ProgressBarAndroid

React Native ProgressBarAndroid is an Android component that displays a horizontal bar indicating the progress of an operation.

Installation

To use React Native ProgressBarAndroid, install the react-native-progress package:

npm install react-native-progress

Usage

Import the ProgressBarAndroid component from the react-native-progress package:

import ProgressBarAndroid from 'react-native-progress/ProgressBarAndroid';

Use the component in your code:

render() {
  return (
    <ProgressBarAndroid styleAttr="Horizontal" indeterminate={false} progress={0.5} />
  );
}

Available props:

• styleAttr: One of Horizontal, Normal, Small, Large, Inverse, SmallInverse, LargeInverse.
• indeterminate: A boolean indicating whether the progress bar should animate.
• progress: A number between 0 and 1 indicating the progress of the operation.

Example

Here is an example of a component that displays a progress bar that increases by 10% every second:

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

class Example extends Component {
  state = {
    progress: 0,
  };

  componentDidMount() {
    this.interval = setInterval(this.onTick, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  onTick = () => {
    const { progress } = this.state;
    if (progress >= 1) {
      clearInterval(this.interval);
      return;
    }
    this.setState({ progress: progress + 0.1 });
  };

  render() {
    const { progress } = this.state;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Progress: {(progress * 100).toFixed()}%</Text>
        <ProgressBarAndroid styleAttr="Horizontal" indeterminate={false} progress={progress} />
      </View>
    );
  }
}

export default Example;

Conclusion

React Native ProgressBarAndroid is a useful component for displaying progress in Android applications. It is easy to use and highly customizable.