Añadir un loader en React Native

Tiempo de lectura: 2 minutos

Os voy a enseñar cómo añadir un loader para las pantallas de carga de React Native.

Para comenzar, hay que crear un nuevo componente que llamaremos Loader.js

import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import { ActivityIndicator } from 'react-native-paper';

var setMostrarLoader;

const Loader = (props) => {

    var { visible } = props;

    if (visible != null && visible == "false") {
        visible = false;
    } else if (visible != null && visible == "true") {
        visible = true;
    }

    const [loaderVisible, setLoaderVisible] = useState(visible);
    setMostrarLoader = setLoaderVisible;

    return (
        (loaderVisible) ?
            <View style={styles.contenedor}>
                <ActivityIndicator animating={true} color="#2145E6" />
            </View>
            : null
    );

};


export default Loader;

export function mostrarLoader(estado) {
    setMostrarLoader(estado);
}

const styles = StyleSheet.create({
    contenedor: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: "100%",
        height: "100%",
        backgroundColor: "rgba(0,0,0,0.5)"
    }
});

Ahora voy a explicar el código:

• Para crear el loader he utilizado la librería react-native-paper (https://reactnativepaper.com/), esta librería proporciona diseño basado en Material Design de Google.
  
  Si queremos instalar esta librería tenemos que introducir en la consola el siguiente comando:
  
  npm install react-native-paper --save
  
• He creado una propiedad para el componente, llamada visible. Recibe un String true o false con el que activa o desactiva el loader. Además igualo la variable setMostrarLoader a la función setLoaderVisible, para poder utilizarla en una función más adelante.

var { visible } = props;
if (visible != null && visible == "false") {
    visible = false;
} else if (visible != null && visible == "true") {
    visible = true;
}

const [loaderVisible, setLoaderVisible] = useState(visible);
setMostrarLoader = setLoaderVisible;

• Ahora muestro o no el elemento loader dependiendo del estado de la variable loaderVisible (si es true, lo muestra y si es false devuelve null a la vista).

return (
    (loaderVisible) ?
        <View style={styles.contenedor}>
            <ActivityIndicator animating={true} color="#2145E6" />
        </View>
        : null
);

• Finalmente, he creado una función con la que podemos ocultar o mostrar el loader cuándo queramos. La he exportado para que se pueda utilizar fuera del componente.

export function mostrarLoader(estado) {
setMostrarLoader(estado);
}

Ahora, para usar el componente creado, tendremos que añadirlo al Screen en la que queramos utilizarlo:

import React, { useState } from "react";
import { View, StyleSheet } from 

//Importamos el componente Loader creado
import Loader, { mostrarLoader } from "../componentes/Loader";

const Screen= ({ navigation }) => {

    return (
        <View style={styles.contenedor}>
            <Loader visible="true" />
        </View>
    )
};

export default Screen;

const styles = StyleSheet.create({
    contenedor: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
    }
});

Primero se importa el componente:

//Importamos el componente Loader creado
import Loader, { mostrarLoader } from "../componentes/Loader";

Después se añade al render:

<Loader visible = "true" />

Si ponemos visible = «true» se mostrará por defecto cargando. Si ponemos visible = «false» por defecto estará desactivado.

*Nota, si queremos mostrar u ocultar el loader cuando realizamos cargas o métodos Javascript llamamos a la función creada:

mostrarLoader("true") –> Para mostrar el loader

mostrarLoader("false") –> Para ocultar el loader