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.