How to Use Context in React Native for State Sharing

In React Native, you use React.createContext() to create a context object, then wrap your components with a Context.Provider to share data. Inside child components, use useContext(Context) to access the shared data easily without passing props manually.

Syntax

To use context in React Native, first create a context with React.createContext(). Then wrap your component tree with Context.Provider and pass the shared value as a prop. Inside any child component, use useContext(Context) to access the shared value.

• React.createContext(): Creates a context object.
• Context.Provider: Wraps components to provide context value.
• useContext(Context): Hook to consume context value inside components.

javascript

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

const MyContext = createContext('defaultValue');

function App() {
  const sharedValue = 'Hello from context!';
  return (
    <MyContext.Provider value={sharedValue}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

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

Example

This example shows how to create a context to share a theme color across components without passing props manually. The ThemeContext provides a color string, and the child component uses it to style text.

javascript

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

const ThemeContext = createContext('blue');

export default function App() {
  return (
    <ThemeContext.Provider value="green">
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ThemedText />
      </View>
    </ThemeContext.Provider>
  );
}

function ThemedText() {
  const color = useContext(ThemeContext);
  return <Text style={{ color, fontSize: 24 }}>Hello with theme color!</Text>;
}

Output

A centered text on screen that says "Hello with theme color!" in green color.

Common Pitfalls

Common mistakes when using context in React Native include:

• Not wrapping components with the Provider, so useContext returns the default value or undefined.
• Updating context value incorrectly, causing components not to re-render.
• Overusing context for all state, which can lead to unnecessary re-renders; use context only for global or shared state.

javascript

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

/* Wrong: Not wrapping with Provider */
const MyContext = createContext('default');

function Child() {
  const value = useContext(MyContext); // Always 'default'
  return <Text>{value}</Text>;
}

/* Right: Wrap with Provider */
function App() {
  return (
    <MyContext.Provider value="new value">
      <Child />
    </MyContext.Provider>
  );
}

Quick Reference

Remember these quick tips when using context in React Native:

• Create context with createContext(defaultValue).
• Wrap components with Context.Provider to supply value.
• Use useContext(Context) inside functional components to consume value.
• Use context for global/shared state, not for all local state.

Key Takeaways

Use React.createContext() to create a context object for shared data.

Wrap your component tree with Context.Provider to supply the shared value.

Access context data inside components using the useContext hook.

Always wrap consumers with a Provider to avoid default or undefined values.

Use context wisely to avoid unnecessary re-renders and keep state management clean.