Reaccionar nativo ProgressBarAndroid

En este artículo, vamos a discutir cómo crear una barra de progreso para aplicaciones de Android. Usaremos el componente React Native ProgressBarAndroid.

Sintaxis:

<View>
   // Other Component
  <ProgressBarAndroid/>
   // Other Component
<View>

Accesorios de ProgressBarAndroid:

• animando: valor booleano que especifica si mostrar la barra de progreso o no.
• color: Especifica el color de la barra de progreso.
• indeterminado: Se utiliza para mostrar un progreso indeterminado.
• progreso: Especifica el valor del progreso como un número.
• styleAttr: Especifica el estilo del componente Android ProgressBar. Puede tener Horizontal, Normal (predeterminado), Pequeño, Grande, Inverso, PequeñoInverso y GranInverso como valor.
• testID: Se utiliza para ubicar esta vista en pruebas de extremo a extremo.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init ProgressBarAndroidDemo

• Paso 3: Ahora vaya a la carpeta de su proyecto, es decir, ProgressBarAndroidDemo usando el siguiente comando.

  cd ProgressBarAndroidDemo

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: Ahora implementemos ProgressBarAndroid. Aquí mostramos una animación simple del cargador y, una vez que finaliza, mostramos un texto al usuario.

import React, { useState } from 'react';
import {
  StyleSheet, Text, View, ProgressBarAndroid,
  TouchableWithoutFeedback
} 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>}
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.

Referencia:  https://reactnative.dev/docs/progressbarandroid