![Cover image for Build React Native WordPress App [Expo way] #15 : setup dark mode](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3840%2F0%2Ad5lPU-n-Vvye4tVK.png)
in this chapter, we will set up dark mode for react-navigation and react-native paper, fortunately, two packages have already builtin dark mode feature but we need to
Active dark mode in React navigation
first, we need to import theme configuration from react-navigation and react-native paper
in Navigator.js
import {
NavigationContainer,
DefaultTheme,
DarkTheme
} from "@react-navigation/native";
and also import theme configuration from react-native paper
import {
Provider as PaperProvider,
DefaultTheme as PaperDefaultTheme,
DarkTheme as PaperDarkTheme
} from "react-native-paper";
next step we activate two themes on main component
<PaperProvider theme={PaperDarkTheme} >
<NavigationContainer theme={DarkTheme} >
....................
</NavigationContainer>
</PaperProvider>
we use Paper theme provider wrap react-navigation then set two-component to dark theme
now when your see app will go dark
inject theme variable to another component
but your will see exert will not change following other components so that we need to manual configuration first in ContentCard component we import HOC name withTheme from react-native-paper
import {
Avatar,
Card,
Title,
Paragraph,
List,
withTheme,
} from 'react-native-paper';
then we update function by use withTheme wrap function before export
export default withTheme(ContentCard)
next, we can pass theme configuration props to function
const ContentCard = ({ item, navigation, theme }) => {}
now we can use theme colors in react-native-htmlview package
<HTMLRender value={item.excerpt.rendered}
stylesheet={{
p: {
fontWeight: '300',
color: theme.colors.text,
}
}} />
now text color will change follow the theme
next, we can do again in SinglePost screen but in htmlview component we need more configuration
<HTML value={post[0].content.rendered} addLineBreaks={false}
stylesheet={{
p: {
color: colors.text, // make links coloured pink
},
pre: {
color: colors.primary, // make links coloured pink
}
}} />
here result
conclusion
this chapter we setup theme for our app that pretty easy because two main packages in our app is already builtin theme configuration next chapter we will learn how to toggle theme using React Context
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
Originally published at [_Kriss](https://kriss.io/build-react-native-wordpress-app-expo-way-15-setup-dark-mode/)._
Top comments (0)