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
Top comments (0)