ProgressBarAndroid

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

const App = () => (
  <View style={styles.container}>
    <ProgressBarAndroid />
    <ProgressBarAndroid styleAttr="Horizontal" />
    <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" />
    <ProgressBarAndroid
      styleAttr="Horizontal"
      indeterminate={false}
      progress={0.5}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-evenly',
    padding: 10,
  },
});

export default App;

<ProgressBarAndroid styleAttr="Horizontal" indeterminate={false} progress={0.5} />

<ProgressBarAndroid
  styleAttr="Horizontal"
  indeterminate={false}
  progress={0.75}
/>

<ProgressBarAndroid animating={false} />

<ProgressBarAndroid color="#2196F3" />
<ProgressBarAndroid color="rgb(255, 0, 0)" />
<ProgressBarAndroid color="rgba(0, 255, 0, 0.5)" />

import React, { useState, useEffect } from 'react';
import { View, ProgressBarAndroid, Button, Text, StyleSheet } from 'react-native';

const App = () => {
  const [progress, setProgress] = useState(0);
  const [animating, setAnimating] = useState(true);

  useEffect(() => {
    let interval;
    if (animating && progress < 1) {
      interval = setInterval(() => {
        setProgress((prevProgress) => {
          const newProgress = prevProgress + 0.01;
          return newProgress > 1 ? 0 : newProgress;
        });
      }, 100);
    }
    return () => clearInterval(interval);
  }, [animating, progress]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Indeterminate Progress</Text>
      <ProgressBarAndroid styleAttr="Horizontal" />

      <Text style={styles.title}>Determinate Progress</Text>
      <ProgressBarAndroid
        styleAttr="Horizontal"
        indeterminate={false}
        progress={progress}
        animating={animating}
        color="#2196F3"
      />
      <Text style={styles.progressText}>{Math.round(progress * 100)}%</Text>

      <Button
        title={animating ? 'Pause' : 'Resume'}
        onPress={() => setAnimating(!animating)}
      />
      <Button title="Reset" onPress={() => setProgress(0)} />

      <Text style={styles.title}>Different Styles</Text>
      <View style={styles.row}>
        <ProgressBarAndroid styleAttr="Small" />
        <ProgressBarAndroid styleAttr="Normal" />
        <ProgressBarAndroid styleAttr="Large" />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    marginTop: 20,
    marginBottom: 10,
  },
  progressText: {
    textAlign: 'center',
    marginVertical: 10,
    fontSize: 14,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

export default App;