Añadir un loader en React Native

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

Deja un comentario