The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Context API

Next ►
►

Introduction

The Context API in React Native is a powerful feature that allows you to share state across the entire app (or part of it) without having to pass props down manually at every level. This is particularly useful for global settings, themes, user authentication, and other data that needs to be accessible by many components.

Key Concepts

  1. Context Creation: Creating a context using React.createContext().
  2. Provider: A component that provides the context value to its children.
  3. Consumer: A component that consumes the context value.
  4. useContext Hook: A hook that allows functional components to consume context.

Creating a Context

To create a context, you use the React.createContext() function. This function returns an object with two properties: Provider and Consumer.

import React from 'react';

// Create a Context
const MyContext = React.createContext();

Providing Context

The Provider component is used to wrap the part of your app where you want the context to be available. It accepts a value prop, which will be passed to all consuming components.

import React from 'react';
import { View, Text } from 'react-native';

// Create a Context
const MyContext = React.createContext();

const App = () => {
  return (
    <MyContext.Provider value="Hello, World!">
      <View>
        <MyComponent />
      </View>
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  return (
    <MyContext.Consumer>
      {value => <Text>{value}</Text>}
    </MyContext.Consumer>
  );
};

export default App;

Consuming Context

There are two ways to consume context: using the Consumer component or the useContext hook.

Using the Consumer Component

The Consumer component requires a function as a child. This function receives the current context value and returns a React node.

const MyComponent = () => {
  return (
    <MyContext.Consumer>
      {value => <Text>{value}</Text>}
    </MyContext.Consumer>
  );
};

Using the useContext Hook

The useContext hook is a simpler way to consume context in functional components.

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

const MyComponent = () => {
  const value = useContext(MyContext);
  return <Text>{value}</Text>;
};

Practical Example

Let's create a simple app that uses the Context API to manage a theme (light or dark).

Step 1: Create the Context

import React, { createContext, useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

// Create a Context for the theme
const ThemeContext = createContext();

const App = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={theme}>
      <View style={styles.container}>
        <Button title="Toggle Theme" onPress={toggleTheme} />
        <ThemeComponent />
      </View>
    </ThemeContext.Provider>
  );
};

const ThemeComponent = () => {
  const theme = useContext(ThemeContext);
  return (
    <View style={theme === 'light' ? styles.light : styles.dark}>
      <Text>The current theme is {theme}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  light: {
    backgroundColor: '#fff',
    padding: 20,
  },
  dark: {
    backgroundColor: '#333',
    padding: 20,
  },
});

export default App;

Explanation

  1. Creating the Context: We create a ThemeContext using createContext().
  2. Providing the Context: We wrap our app in a ThemeContext.Provider and pass the current theme as the value.
  3. Consuming the Context: In ThemeComponent, we use the useContext hook to get the current theme and apply styles accordingly.

Exercises

Exercise 1: User Authentication Context

Create a context to manage user authentication state (logged in or logged out).

  1. Create a UserContext using createContext().
  2. Provide the context with a state that indicates whether the user is logged in.
  3. Create a component that consumes the context and displays a message based on the user's authentication state.

Solution

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

// Create a Context for user authentication
const UserContext = createContext();

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const toggleLogin = () => {
    setIsLoggedIn(prevState => !prevState);
  };

  return (
    <UserContext.Provider value={isLoggedIn}>
      <View>
        <Button title="Toggle Login" onPress={toggleLogin} />
        <AuthComponent />
      </View>
    </UserContext.Provider>
  );
};

const AuthComponent = () => {
  const isLoggedIn = useContext(UserContext);
  return (
    <Text>{isLoggedIn ? 'User is logged in' : 'User is logged out'}</Text>
  );
};

export default App;

Conclusion

The Context API is a powerful tool for managing state that needs to be shared across multiple components in a React Native application. By understanding how to create, provide, and consume context, you can simplify state management and avoid prop drilling. Practice using the Context API in different scenarios to become more comfortable with its usage.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved