fbpx

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


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.