Context API in React Native - Mini App: Build & Ship

Build: ThemeSwitcher

A screen that lets users switch between light and dark themes using React Native Context API.

Target UI

-------------------------
|       ThemeSwitcher    |
|-----------------------|
| Current Theme: Light   |
|                       |
| [Toggle Theme Button]  |
-------------------------

Create a ThemeContext with 'light' as default value.

Use Context Provider to share theme state across the app.

Display current theme text on screen.

Add a button that toggles theme between 'light' and 'dark'.

Update displayed theme text when toggled.

Starter Code

React Native

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

// TODO: Create ThemeContext here

export default function ThemeSwitcher() {
  // TODO: Use ThemeContext Provider and state here

  return (
    <View style={styles.container}>
      {/* TODO: Display current theme here */}
      {/* TODO: Add button to toggle theme here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

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

const ThemeContext = createContext('light');

export default function ThemeSwitcher() {
  const [theme, setTheme] = useState('light');

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

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

function ThemeContent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Current Theme: {theme.charAt(0).toUpperCase() + theme.slice(1)}</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} accessibilityLabel="Toggle theme button" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 20,
    marginBottom: 20
  }
});

We created a ThemeContext with default value 'light'. The ThemeSwitcher component holds the theme state and a function to toggle it. We pass both through the ThemeContext.Provider. The ThemeContent component uses useContext to access the current theme and toggle function. It displays the current theme and a button to switch themes. This shows how Context API shares state easily without passing props down manually.

Final Result

Completed Screen

-------------------------
|       ThemeSwitcher    |
|-----------------------|
| Current Theme: Light   |
|                       |
| [Toggle Theme Button]  |
-------------------------

When user taps 'Toggle Theme' button, the text changes to 'Current Theme: Dark'.

Tapping again switches back to 'Light'.

Stretch Goal

Add background color change for light and dark themes.

💡 Hint

Use the theme value from context to set container background color conditionally.

Practice

1. What is the main purpose of React Native's Context API?

easy

A. To share data easily across many components without passing props manually

B. To style components with CSS

C. To handle navigation between screens

D. To fetch data from a server

Solution

1. Step 1: Understand Context API's role

   Context API is designed to share data globally in a React app without passing props through every level.

2. Step 2: Compare options

   Only To share data easily across many components without passing props manually describes this purpose. Others relate to styling, navigation, or data fetching, which are unrelated.

3. Final Answer:

   To share data easily across many components without passing props manually -> Option A

4. Quick Check:

   Context API = Share data easily [OK]

Hint: Context API shares data without prop drilling [OK]

Common Mistakes:

• Confusing Context API with styling or navigation
• Thinking it fetches data from servers
• Believing it replaces all props usage

2. Which of the following is the correct way to create a context in React Native?

easy

A. const MyContext = React.useContext();

B. const MyContext = createContext();

C. const MyContext = React.createContext();

D. const MyContext = new Context();

Solution

1. Step 1: Recall correct syntax for creating context

   React Native uses React.createContext() to create a new context object.

2. Step 2: Analyze options

   const MyContext = React.createContext(); uses the full correct syntax. const MyContext = createContext(); misses React prefix. new Context(); uses invalid constructor. React.useContext(); calls useContext which is a hook, not for creation.

3. Final Answer:

   const MyContext = React.createContext(); -> Option C

4. Quick Check:

   Create context = React.createContext() [OK]

Hint: Use React.createContext() to create context [OK]

Common Mistakes:

• Omitting React prefix
• Using new Context() which doesn't exist
• Confusing useContext hook with createContext

3. Given this code snippet, what will be the output displayed by ChildComponent?

const MyContext = React.createContext('Default');

function Parent() {
  return (
    
      
    
  );
}

function ChildComponent() {
  const value = React.useContext(MyContext);
  return {value};
}

medium

A. Default

B. Error: useContext called outside provider

C. undefined

D. Hello

Solution

1. Step 1: Identify the Provider value

   The sets the value to "Hello" for all children inside it.

2. Step 2: Check useContext usage in ChildComponent

   ChildComponent uses React.useContext(MyContext) which reads the nearest Provider's value, which is "Hello".

3. Final Answer:

   Hello -> Option D

4. Quick Check:

   useContext reads Provider value = Hello [OK]

Hint: useContext reads nearest Provider value [OK]

Common Mistakes:

• Thinking default value is used when Provider exists
• Assuming undefined if value is string
• Confusing error with missing Provider

4. What is wrong with this React Native Context usage?

const MyContext = React.createContext();

function Parent() {
  return (
    
      
    
  );
}

function Child() {
  const value = React.useContext();
  return {value};
}

medium

A. createContext requires an initial value

B. useContext is called without passing the context object

C. Provider is missing a value prop

D. Child component should not use useContext

Solution

1. Step 1: Check useContext call in Child

   useContext must be called with the context object as argument, e.g., React.useContext(MyContext).

2. Step 2: Verify other parts

   Provider has a value prop "Hi" which is correct. createContext can be called without initial value (undefined default). Child can use useContext.

3. Final Answer:

   useContext is called without passing the context object -> Option B

4. Quick Check:

   useContext needs context argument [OK]

Hint: Always pass context to useContext() [OK]

Common Mistakes:

• Calling useContext() with no arguments
• Thinking createContext must have initial value
• Believing Provider can omit value prop

5. You want to share a user object across multiple nested components without passing props. Which steps correctly use Context API to achieve this? A) Create context with React.createContext(), wrap components with Provider passing user as value, use useContext in children. B) Pass user as props to every component manually. C) Use useState in every component to store user. D) Use React.createContext() but do not wrap components with Provider.

hard

A. Create context, wrap with Provider passing user, use useContext in children

B. Pass user as props manually to each component

C. Use useState in every component to store user

D. Create context but do not wrap with Provider

Solution

1. Step 1: Identify correct Context API usage

   To share data globally, create context, wrap components with Provider passing data, and consume with useContext.

2. Step 2: Eliminate incorrect options

   B passes props manually, not using Context API. C duplicates state unnecessarily. D creates context but no Provider means default or undefined value.

3. Final Answer:

   Create context, wrap with Provider passing user, use useContext in children -> Option A

4. Quick Check:

   Context API = create + Provider + useContext [OK]

Hint: Use createContext + Provider + useContext to share data [OK]

Common Mistakes:

• Skipping Provider wrapping
• Passing props manually instead of using context
• Using useState in every component unnecessarily