Context API in React Native

Introduction

The Context API helps share data easily across many parts of your app without passing props step-by-step.

You want to share user login info across many screens.

You need a theme (dark or light) to be available everywhere.

You want to manage app language settings globally.

You want to avoid passing the same data through many components.

You want to keep your code clean and simple.

Syntax

React Native

import React, { createContext, useState, useContext } from 'react';

const MyContext = createContext();

function MyProvider({ children }) {
  const [value, setValue] = useState(null);

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

function MyComponent() {
  const context = useContext(MyContext);
  // use context.value or context.setValue
}

createContext makes a new context object.

Provider wraps components to share data.

Examples

Create a context with default value 'light'.

React Native

const ThemeContext = createContext('light');

Provide theme state and updater to children.

React Native

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('dark');
  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
}

Consume the theme value inside a component.

React Native

import { Text } from 'react-native';

function DisplayTheme() {
  const { theme } = useContext(ThemeContext);
  return <Text>Current theme is {theme}</Text>;
}

Sample App

This app uses Context API to share a counter value and update functions across components without passing props. The CounterProvider wraps the app and provides the count state. CounterDisplay shows the current count. CounterButtons has buttons to increase or decrease the count.

React Native

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

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CounterContext.Provider value={{ count, setCount }}>
      {children}
    </CounterContext.Provider>
  );
}

function CounterDisplay() {
  const { count } = useContext(CounterContext);
  return <Text>Count: {count}</Text>;
}

function CounterButtons() {
  const { setCount } = useContext(CounterContext);
  return (
    <View>
      <Button title="Increase" onPress={() => setCount(c => c + 1)} />
      <Button title="Decrease" onPress={() => setCount(c => c - 1)} />
    </View>
  );
}

export default function App() {
  return (
    <CounterProvider>
      <View style={{ padding: 20 }}>
        <CounterDisplay />
        <CounterButtons />
      </View>
    </CounterProvider>
  );
}

Important Notes

Always wrap components that use context inside the Provider.

Context is great for global data but avoid overusing it for local states.

Use descriptive names for your context to keep code clear.

Summary

Context API shares data easily across many components.

Use createContext, Provider, and useContext together.

It helps avoid passing props through many layers.