How can I implement a theme switcher in my React Native app?

How can I implement a theme switcher in my React Native app?

You can create a theme switcher by using React Context to manage your themes and a toggle button to switch between them.

Can you show me a code example for that?

Sure! First, create a context for your theme, then use a provider to wrap your app. Here's a simple example:

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

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('light');
    const toggleTheme = () => {
        setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
    };
    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
};

export const useTheme = () => useContext(ThemeContext);

Then, use the useTheme hook in your components to access the current theme and toggle function.

What about styling for light and dark themes?

You can define your styles based on the current theme. For example:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme === 'light' ? '#fff' : '#333',
    },
    text: {
        color: theme === 'light' ? '#000' : '#fff',
    },
});

This way, your components will adapt their styles based on the selected theme.