Adding a Loader in React Native

by
Tiempo de lectura: 3 minutos

Reading time: 2 minutes

I’m going to show you how to add a loader for loading screens in React Native.

To begin, we need to create a new component called 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)"
    }
});

Now let’s explain the code:

  • To create the loader, I used the react-native-paper library (https://reactnativepaper.com/), which provides Google’s Material Design-based styling. If you want to install this library, you need to run the following command in the console:npm install react-native-paper --save
  • I created a property for the component called “visible.” It receives a string value of “true” or “false” to activate or deactivate the loader. I also assign the “setMostrarLoader” variable to the “setLoaderVisible” function to use it in a function later.
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;
  • Now I show or hide the loader element depending on the state of the “loaderVisible” variable. If it’s true, it displays the loader, and if it’s false, it returns null to the view.
return (
    (loaderVisible) ?
        <View style={styles.contenedor}>
            <ActivityIndicator animating={true} color="#2145E6" />
        </View>
        : null
);
  • Finally, I created a function that allows us to hide or show the loader whenever we want. I exported it so that it can be used outside the component.

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

Now, to use the created component, we need to add it to the screen where we want to use it:

Reading time: 2 minutes

I’m going to show you how to add a loader for loading screens in React Native.

To begin, we need to create a new component called 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)"
    }
});

Now let’s explain the code:

  • To create the loader, I used the react-native-paper library (https://reactnativepaper.com/), which provides Google’s Material Design-based styling. If you want to install this library, you need to run the following command in the console:npm install react-native-paper --save
  • I created a property for the component called “visible.” It receives a string value of “true” or “false” to activate or deactivate the loader. I also assign the “setMostrarLoader” variable to the “setLoaderVisible” function to use it in a function later.
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;
  • Now I show or hide the loader element depending on the state of the “loaderVisible” variable. If it’s true, it displays the loader, and if it’s false, it returns null to the view.
return (
    (loaderVisible) ?
        <View style={styles.contenedor}>
            <ActivityIndicator animating={true} color="#2145E6" />
        </View>
        : null
);
  • Finally, I created a function that allows us to hide or show the loader whenever we want. I exported it so that it can be used outside the component.

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

Now, to use the created component, we need to add it to the screen where we want to use it:

If you set visible=”true”, it will be displayed by default. If you set visible=”false”, it will be deactivated by default.

*Note: If you want to show or hide the loader during loading or JavaScript methods, you can call the created function:

mostrarLoader("true") –> To show the loader

mostrarLoader("false") –> To hide the loader

Post Views: 15

Leave a Comment