Managing Multiple Contexts in React Native

Managing multiple contexts in React Native helps organize different pieces of shared state across an application. It is especially useful in large apps where separate features require independent data handling.

• Each context handles a specific piece of data or functionality.
• Improves separation of concerns and code clarity.
• Makes large applications easier to scale and maintain.

Implementing Multiple Contexts in React Native

It allows different parts of an application to manage and share their own state independently in a clean and organized way.

1. Import React and Required Modules:

Begin by importing the necessary modules at the top of your React Native component file.

import React, { createContext, useState, useContext } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

2. Create Multiple Contexts:

Create multiple contexts using the createContext function. Each context will have its own Provider and Consumer components.

const UserContext = createContext();
const ThemeContext = createContext();

3. Create Provider Components:

Create provider components for each context. These provider components will wrap around the parts of your app where you want the shared data for that specific context to be available.

const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

In these examples, UserProvider manages user-related data, and ThemeProvider manages theme-related data.

4. Use the Providers:

Wrap the root of your component tree with the provider components.

const App = () => {
  return (
    <UserProvider>
      <ThemeProvider>
        <MyComponent />
      </ThemeProvider>
    </UserProvider>
  );
};

5. Consume Multiple Contexts:

In components that need access to multiple contexts, use the useContext hook for each context.

const MyComponent = () => {
  const { user, setUser } = useContext(UserContext);
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <View>
      <Text>{user ? `Hello, ${user.name}!` : 'Please log in.'}</Text>
      <Text>{`Current Theme: ${theme}`}</Text>

      <TouchableOpacity onPress={() => setUser({ name: 'John' })}>
        <Text>Login</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        <Text>Toggle Theme</Text>
      </TouchableOpacity>
    </View>
  );
};

6. Customize and Expand:

Repeat the process to create and manage as many contexts as needed in your React Native application. This modular approach allows you to separate concerns and maintain a clean and organized codebase.

• Managing multiple contexts lets different parts of the app handle their own data independently.
• This approach improves scalability and maintainability, especially in large applications with varied data requirements.