This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and 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 and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the from instamobile React Native App Templates Here, we are going to implement a feature to change the theme of the app to dark or white in the app itself. For that, we are going to place a Switch component in the file. By toggling the switch, we need to enable the function to change the theme from dark to white and vice-versa. Settings.js First, we need to go to file and import the necessary components as shown in the code snippet below: Settings.js React, {useContext} ; {TouchableOpacity} ; {List, Switch} ; import from 'react' import from 'react-native' import from 'react-native-paper' In this screen, we do not need to use the local state or any event component. However, we will use the functional component as shown in the code snippet below: Setting = { ( <List.Item
            title="Dark Mode"
            left={() => <List.Icon icon="brightness-4" />}
            right={() => <Switch/>}
          />
          <TouchableOpacity
            onPress={() => {navigation.navigate('Contact')}}>
            <List.Item
              title="Contact Us"
              left={() => <List.Icon icon="chevron-right" />}
            />
          </TouchableOpacity>
        </List.Section>
      );
    };
    Setting.navigationOptions = {
      title: 'Setting',
      };
    export default Setting; const ( ) => {navigation} return < > List.Section Hence, we will get the following result in the emulator screens: Now, we are going to create a new file that will handle the manual change of themes. For that, we need to create Context name file in the folder. In this, we do not need to use an event function or state. Here, we will use react hook with the functional component. For that, we need to make the following imports to the file: ThemeManager.js './components' ThemeManager.js React, {createContext,useState} ; ThemeContext = createContext(); import from 'react' export const Then, we need to create Context object name ThemeContext. Next, we need to create a simple function for toggle theme variable. The function is called whose implementation is provided in the code snippet below: toggleTheme ThemeManager = { [theme, setTheme] = useState( ); toggleTheme = { (value === ) {
          setTheme( );
        } {
          setTheme( );
        }
      }; export const ( ) => {children} const false const => value if true true else false Here, we can see that we replaced the normal react state to react hook using function. useState Lastly, we export the variable as shown in the code snippet below: ( return {children} );
    }; < = }}> ThemeContext.Provider value {{theme, toggleTheme </ > ThemeContext.Provider Now, we can see the component anywhere in the project. ThemeManager ThemeManager in Navigator.js Here, we are going to place the component in the . The will be the parent component that handles the theme for the menu. Then, the will handle the UI component theme. ThemeManager Navigator.js ThemeManger PaperProvider First, we need to import and as shown in the code snippet below: ThemeContext useContext React, {useContext } ; {ThemeContext} ; import from 'react' import from './ThemeManager' Then, we need to export the component as shown in the code snippet below: Navigator () => { {theme} = useContext(ThemeContext); paper_theme =  theme ? DarkTheme : DefaultTheme; nav_theme =  theme ? : ; ( <Navigation theme={nav_theme} />
        </PaperProvider> export default const let let 'dark' 'light' return < = > PaperProvider theme {paper_theme} );
    }; Here, we get the theme variable that export from first. Then, we toggle the two variablse that we attached to two theme providers. ThemeContext ThemeManager in Settings.js Now, we need to go back to in order to change theme based on the switch toggle. First, we need to import the as shown in the code snippet below: Setting.js ThemeContext {ThemeContext} ; import from '../components/ThemeManager' Next, we need to use function and variable from to configure the as shown in the code snippet below: ThemeContext Switch Setting = { {toggleTheme, theme} = useContext(ThemeContext); ( <List.Item
            title="Dark Mode"
            left={() => <List.Icon icon="brightness-4" />}
            right={() => <Switch value={theme} onValueChange={toggleTheme} />}
          /> const ( ) => {navigation} const return < > List.Section Now, we are going to make us of in the as well. Here, we are going to wrap the component with the component as shown in the code snippet below: ThemeManager App.js Navigator ThemeManager {ThemeManager} ;
    render() { ( <ThemeManager>
              <Navigator />
            </ThemeManager> import from './src/components/ThemeManager' return <> );
      } </> Hence, we will get the following result in the emulator screen: As we can see, we can change the theme from dark to normal and vice-versa with just the click of the toggle button in the Settings screen. Changing Theme Automatically Now, we are going to change the theme in our app from normal to dark mode and vice-versa automatically when we change the theme in the device itself. For that, we need to make use of the package called . In order to install this package into our project, we need to run following command in our projects command prompt: react-native-dark-mode yarn add react-native-dark-mode Then, we can just link the package to respective android and ios native files just as we did in the previous packages. Now, we need to import the module from this package in the file as shown in the code snippet below: eventEmitter Navigator.js {eventEmitter} ; import from 'react-native-dark-mode' Here, this function will catch the change of theme from the device itself and inform the app. Now, we need to use the module in the function to trigger when the theme is the device changes. For that, we need to make use of code from the following code snippet in the file: eventEmitter ThemeManager ThemeManager.js React, {createContext, useState} ; ThemeContext = createContext(); {eventEmitter} ; ThemeManager = { [theme, setTheme] = useState( );
      eventEmitter.on( , newMode => { (newMode == ) {
          setTheme( );
        } {
          setTheme( );
        }
      }); import from 'react' export const import from 'react-native-dark-mode' export const ( ) => {children} const false 'currentModeChanged' if 'dark' true else false Here, in , we trigger an event when theme change from toggle mode. ThemeContext _ _ Note that, for this dark mode package to work in Android, we need to have Android 10 OS installed in the device. Hence, we will get the following result in the emulator screens: As we can see, the theme of the app automatically changes when we change the theme of the device itself. And, the theme toggle inside the app works as well. Summary In this chapter, we learned how to configure the dark mark to our react native app in both Android and iOS. First, we learned how to enable the dark mode theme in the project using the theme prop provided by the component. Navigation Then, we learned how to use the component from the package in order to change our UI theme made using the components from this package to dark. By using component from the package, we learned how to display every screen in our app in dark mode. DarkTheme react-native-paper withTheme react-native-paper Then, we implemented the manual changing to the dark mode or normal mode in the Settings screen using a package. Lastly, we learned how to use component from the package to automatically change the app to dark mode when changing the overall theme of the device to a dark theme. react-native-dark-mode eventEmitter react-native-dark-mode

Chevron

How To Build WordPress App with React Native Part #19: Offline Notifications

How To Build WordPress App with React Native Part #18: Changing Theme Functionality

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Best React Native Chart Libraries

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 Best React Native Chart Libraries

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps