Añadir context en React Native para reutilizar componentes en varias pantallas por ejemplo un Loader

Tiempo de lectura: 2 minutos

Hola, hoy vamos a aprender a añadir un context en React Native para reutilizar componentes en varias pantallas sin tener que repetir el componente.

Lo primero que vamos a hacer es crear nuestro componente, en nuestro caso es un loader:

Carpeta: componentes/loader.js

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

const Loader = () => {
    return (
        <View style={[styles.contenedor]}>
            <ActivityIndicator animating={true} size="large" color="#235589" />
        </View>
    );
};

export default Loader;

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%",
    }
});

Esto añade un loader usando la librería de React Native Paper.

Tendremos que importarla:

npm install --save react-native-paper

Ahora vamos a crear la carpeta context y añadir el archivo global_context.js:

import React, { createContext, useState, useEffect, useContext, useRef } from 'react'
//Crea el context
export const ServiceContext = createContext()

export const ServiceProvider = ({ children }) => {

    //Para el loader
    const [isLoading, setIsloading] = useState(false)

    return (
        <ServiceContext.Provider value={{
            isLoading,
            setIsloading
        }}>
            {children}
        </ServiceContext.Provider>
    )
}

Hemos creado un ServiceContext y un ServiceProvider que nos proporciona el método isLoading y setIsloading como variable de estado.

Ahora vamos a nuestro APP.js y añadimos en el import de React el useContext que nos permitirá añadir el contexto creado:

import React, { useContext } from "react";

Ahora importamos nuestro context:

import { ServiceContext, ServiceProvider } from './context/global_context';

Lo establecemos como context, dentro del render añadimos esta línea:

   const App = () => {
    const { isLoading, setIsloading } = useContext(ServiceContext)

    ...

Y ahora añadimos el elemento, en este caso es un lodaer:

    ...
        </Stack.Navigator>
                {
                    isLoading && <Loader />
                }
            </NavigationContainer>
    ...

En mi caso lo añado después del Stack Navigator.

Y ahora en el export, se añade:

export default function App() {
    return (
        <ServiceProvider>
            <App />
        </ServiceProvider>
    );
}

De esta forma devolvemos tanto el ServiceProvider como el APP.

Si queremos utilizar este loader en las distintas pantallas tendremos que realizar estos imports:

• Añadir el useContext:

import React, { useContext } from "react";

• Importar el context que vamos a utilizar:

import { ServiceContext, ServiceProvider } from './context/global_context';

• Importar los métodos exportados de global_context que vamos a utilizar (se importa en el render):

   const App = () => {
    const { isLoading, setIsloading } = useContext(ServiceContext)

Y ya podemos utilizar el loader:

setIsloading(true);