Build React Native WordPress App [Expo way] #16 :: manually and automatic change theme

in this chapter, we will continue from the previous chapter that we successfully set up dark mode but not at all compatible react native htmlview not auto change dark mode that required do manually this chapter we separate post item to individual component and add custom style from react-native paper for switch dark and light theme

Create ThemeManager Context

first we create Context component that using for toggling theme or get the theme variable create ThemeController.js

next, add code below to file

import React, { createContext, useState } from "react";

export const ThemeContext = createContext();
export const ThemeController = ({ children }) => {
  const [theme, setTheme] = useState(false);

  const toggleTheme = value => {
    if (value === true) {
      setTheme(true);
    } else {
      setTheme(false);
    }
  };
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

first, we create a new context object then create function ThemeController and create theme state variable then create simple function for toggle theme variable last thing we return theme state and toggle function

inject to Navigator

now we inject theme context while wrap Navigator Component in App.js

import { ThemeController } from "./src/components/ThemeController";
export default function App() {
  return (
    <ThemeController>
      <Navigators />
    </ThemeController>
  );
}

then we using theme context control theme in Navigator.js

import React, { useContext } from 'react'
import { ThemeContext } from "../components/ThemeController";

we need to import ThemeContext and useContext for getting data from ThemeController

then inject theme variable for control theme state

export default function Navigator() {
    const { theme } = useContext(ThemeContext);
    let paper\_theme = theme ? PaperDarkTheme : PaperDefaultTheme;
    let nav\_theme = theme ? DarkTheme : DefaultTheme;

    return (
        <PaperProvider theme={paper\_theme}>
            <NavigationContainer theme={nav\_theme}>
........
            </NavigationContainer>
        </PaperProvider>
    );
}

now we have done on setup theme

Toggle with Switch

we use switch for toggle theme in Setting.js

import React, { Component,useContext } from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
import { List, Switch } from "react-native-paper";
import { ThemeContext } from "../components/ThemeController";

we import Context and useContext again for using react hook we need to convert the class to function component

import React, { Component, useContext } from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
import { List, Switch } from "react-native-paper";
import { ThemeContext } from "../components/ThemeController";
const Setting = () => {
    const { toggleTheme, theme } = useContext(ThemeContext);
    return (
        <View>
            <List.Item
                title="Dark Mode"
                left={() => <List.Icon icon="brightness-4" />}
                right={() => <Switch value={theme} onValueChange={toggleTheme} />}
            />

we get toggleTheme function and theme state from ThemeContext then using in Switch component

finally, we see the result here

Conclusion

we success to use React Context for control Theme by manually next chapter we will learn how to change automatically based on operating system preference

Originally published at [_Kriss](https://kriss.io/build-react-native-wordpress-app-expo-way-16-making-card-component/)._

Author note

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since we successfully build an app on the React Native CLI path., for the next step, we try to develop this app again but using Expo. We will discover the Expo ecosystem that makes our lives comfortable and help us avoid dealing with Native modules to learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll, in-app purchase, and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the React Native Templates from instamobile