Cree un indicador de actividad en react-native usando la biblioteca de react-native-paper

React Native es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. Inicialmente, Facebook solo desarrolló React Native para admitir iOS. Sin embargo, con su compatibilidad reciente con el sistema operativo Android, la biblioteca ahora puede generar interfaces de usuario móviles para ambas plataformas.

requisitos previos:

• Conocimientos básicos de ReactJs.
• Html, CSS y javascript con sintaxis ES6.
• NodeJs debe estar instalado en su sistema.
• Jdk y android studio para probar tu aplicación en el emulador

En este artículo, mostraremos un indicador de actividad en react native usando la biblioteca de reactivos nativos en papel . mostraremos cómo se actualiza un texto después de 6 segundos y el indicador de actividad desaparece.

Creación de la aplicación React Native:

Paso 1: Cree un proyecto nativo de reacción:

npx react-native init DemoProject

Paso 2: ahora instala react-native-paper

npm install react-native-paper

Paso 3: Inicie el servidor

npx react-native run-android

Ahora ve a tu proyecto y crea una carpeta de componentes. Dentro de la carpeta de componentes, cree un archivo ActivityIndicator.js

Estructura del proyecto: El proyecto debería verse así:

Para mostrar un indicador de actividad usando react-native-paper, tenemos que pasar los accesorios de animación como verdaderos. Para ocultarlo, simplemente configure el accesorio de animación en falso. Para cambiar el color del indicador, podemos pasar accesorios de color y cambiar el tamaño del indicador, esta biblioteca proporciona accesorios de tamaño . Puede ser cualquiera de los siguientes:

Size = 'small' | 'large' | number

Ejemplo: Usaremos useState, useEffect hooks de react-native para actualizar el estado de los componentes.

import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet } from 'react-native';
import { ActivityIndicator, } from "react-native-paper";
  
  
const ActivityIndicatorExample = () => {
    const [text, setText] = useState('');
    const [animate, setAnimate] = useState(true);
  
    useEffect(() => {
        setTimeout(() => {
            setText("Value updated successfully");
            setAnimate(false);
        }, 6000);
    })
    return (
        <View style={styles.activityI}>
            <ActivityIndicator animating={animate} 
                color="red" size="large" />
            <Text style={styles.text}>{text}</Text>
        </View>
    )
}
  
export default ActivityIndicatorExample;
const styles = StyleSheet.create({
    activityI: {
        alignContent: "center",
        margin: 50
    },
    text: {
        fontSize: 30,
        fontWeight: "bold"
    }
})

import React from 'react';
import { Text, View, StyleSheet, Alert } from 'react-native';
import ActivityIndicatorExample from './components/ActivityIndicator';
  
const App: () => Node = () => {
    return (
  
        <View>
            <ActivityIndicatorExample />
        </View>
  
    );
};
  
export default App;

Guárdelo y reinicie el servidor con el siguiente comando:

npx react-native run-android

Producción: