Adding Context in React Native to Reuse Components Across Multiple Screens, for Example a Loader

by
Tiempo de lectura: 2 minutos

Reading Time: 2 minutes

Hello, today we are going to learn how to add a context in React Native to reuse components across multiple screens without repeating the component.

The first thing we need to do is create our component, in this case, it’s a loader:

Folder: components/loader.js

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

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

export default Loader;

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

This adds a loader using the React Native Paper library.

We need to import it:

npm install --save react-native-paper

Now let’s create the context folder and add the global_context.js file:

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

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

    // For the loader
    const [isLoading, setIsloading] = useState(false)

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

We have created a ServiceContext and a ServiceProvider that provide us with the isLoading and setIsloading methods as state variables.

Now let’s go to our APP.js and add the useContext import to add the created context:

import React, { useContext } from "react";

Now let’s import our context:

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

We set it as a context, and inside the render, we add this line:

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

    ...

And now we add the element, in this case, it’s a loader:

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

In my case, I add it after the Stack Navigator.

And in the export, we add:

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

This way, we return both the ServiceProvider and the APP.

If we want to use this loader in different screens, we need to perform these imports:

  • Add the useContext:
import React, { useContext } from "react";
  • Import the context we are going to use:
import { ServiceContext, ServiceProvider } from './context/global_context';
  • Import the exported methods from global_context that we are going to use (imported in the render):
const App = () => {
    const { isLoading, setIsloading } = useContext(ServiceContext)

And now we can use the loader:

setIsloading(true);

(excluding the Reading Time). Return it directly in HTML format. Do not add any additional sentences. When you finish, add a PIPE at the end.

Post Views: 4

Leave a Comment