Barra de progreso animada nativa de React

React Native es un marco de software de interfaz de usuario de código abierto creado por Meta Platforms, Inc. Se utiliza para desarrollar aplicaciones para Android, Android TV, iOS, etc. Siempre estamos buscando ciclos de desarrollo más cortos, un tiempo de implementación más rápido y mejores rendimiento de la aplicación. Y hay tantos marcos móviles híbridos como NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc.

En este artículo, veremos cómo crear una barra de progreso animada en React-Native.

Dependencia requerida:

npm install react-native-animated-progress

Sintaxis:

<ProgressBar
     progress={*}
     height={*}
     backgroundColor="*"
   />

Accesorios en la barra de progreso animada:

• altura: Se utiliza para establecer la altura de la barra de progreso.
• backgroundColor: se utiliza para establecer el color de la barra de progreso.
• animado: esta propiedad toma un valor booleano para habilitar o deshabilitar la animación.
• indeterminado: se necesita un valor booleano para configurar la barra para que se anime constantemente como un progreso de carga.
• progreso: elige el punto donde el progreso debe animarse, según el ancho de la barra de progreso.
• trackColor: establece el color de la pista de la barra de progreso.

Para crear una aplicación React-Native, utilizaremos la versión Expo CLI que será mucho más fluida para ejecutar sus aplicaciones React Native.

Expo: Es un framework y una plataforma para aplicaciones React universales. Es un conjunto de herramientas y servicios construidos alrededor de React Native y plataformas nativas que lo ayudan a desarrollar, construir, implementar e iterar rápidamente en iOS, Android y aplicaciones web desde la misma base de código JavaScript/TypeScript.

A continuación se muestra la implementación paso a paso del enfoque anterior.

Paso 1: Abra su terminal y ejecute el siguiente comando.

npm install -g expo-cli

Paso 2: ahora expo-cli está instalado globalmente para que pueda crear la carpeta del proyecto ejecutando el siguiente comando.

expo init "projectName"

Paso 3: Ahora ve a la carpeta creada e inicia el servidor usando el siguiente comando.

cd "projectName"

Estructura del proyecto: Tendrá el siguiente aspecto. 

A continuación se muestra la implementación del código. En el archivo App.js, primero creamos una barra de progreso simple y luego creamos una barra de progreso animada. También cambiaremos el fondo de la barra de progreso usando backgroundColor. También hemos configurado el color en esa parte de la barra de progreso que aún no se ha completado con trackColor prop,

import React from 'react';
import { View, Text } from 'react-native';
import ProgressBar from 'react-native-animated-progress';
  
const App = () => {
  return (
    <View>
      
      <Text style={{ marginBottom: 20 }}>
        Progress without animation
      </Text>
      <ProgressBar
        progress={30}
        height={7}
        backgroundColor="#4a0072"
        animated={false}
      />
     <Text>{'\n'} {'\n'}</Text>
      <Text style={{ marginBottom: 20 }}>
        Progress with animation and increased height
      </Text>
      <ProgressBar progress={60} height={7} 
        backgroundColor="green" />
      <Text>{'\n'} {'\n'}</Text>
      <Text style={{ marginBottom: 20 }}>With indeterminate</Text>
      <ProgressBar indeterminate="true" backgroundColor="#4a0072" />
       
      <Text>{'\n'} {'\n'}</Text>
        <Text style={{ marginBottom: 20 }}>
          With TrackColor (that shows remaining part)
      </Text>
      <ProgressBar
        progress={60}
        height={7}
        backgroundColor="green"
        trackColor="yellow"
      />
    </View>
  );
};
export default App;

Paso para ejecutar la aplicación: para ejecutar el programa React-Native, use el siguiente comando.

npm start web

Producción: