Build React Native WordPress App [Expo way] #15 : setup dark mode
Tags: reactnative
Published: 2020-02-20 17:44:36

---
title: Build React Native WordPress App [Expo way] #15 : setup dark mode
published: true
date: 2020-02-20 07:42:07 UTC
tags: react-native
canonical_url: https://kriss.io/build-react-native-wordpress-app-expo-way-15-setup-dark-mode/
cover_image: https://cdn-images-1.medium.com/max/3840/0*d5lPU-n-Vvye4tVK.png
series: Build React native Wordpress client app with Expo 
---


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

![](https://cdn-images-1.medium.com/max/578/0*bJUFfL7grTzQNnpV.jpg)

#### 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](https://callstack.github.io/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

![](https://cdn-images-1.medium.com/max/578/0*HAzBMkrkJCYKzFEK.jpg)

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

![](https://cdn-images-1.medium.com/max/578/0*0LfXekcDal6m9kTa.jpg)

#### 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](http://instamobile.io) from instamobile

_Originally published at _[_Kriss_](https://kriss.io/build-react-native-wordpress-app-expo-way-15-setup-dark-mode/)_._

* * *