How To Build WordPress App with React Native Part #16: Adding Dark Mode

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 In this chapter, we are going to implement a new feature in our app. The feature is called which is very prevalent in the app nowadays. The dark mode is configured into any app to make it night friendly or low light friendly. In order to implement the dark mode into our react native application, we are going to use the features of and . This will make it easier to trigger the dark mode manually through the app itself. dark mode react-navigation react-native-paper We are going to implement the Settings screen in which there will be a switch to trigger on and off the dark mode. We are also going to make use of the package. Finally, we are going to implement the configuration by which the app will automatically go into dark mode when switching into dark mode in the device itself. react-native-dark-mode Moving Navigation code We might remember that we have all our navigation code in the App.js file. Keeping the navigation configuration in the file is not suitable for large applications. So now, we are going to move the navigation code into different files. App.js First, we need to create a directory called in the folder. Then, we need to create a new file called in the folder. Then, we need to copy all the navigation codes from the file to the file as shown in the code snippet below: ‘./components/’ ‘./src/’ Navigator.js ‘./src/components/’ App.js Navigator.js React ; {createAppContainer} ; {createBottomTabNavigator} ; {createStackNavigator} ; Home ; Categories ; Setting ; About ; SinglePost ; CategorieList ; Contact ; Bookmark ; Ionicons ; DashboardTabNavigator = createBottomTabNavigator( { : { : Home, : { : , : , }, }, : { : Categories, : { : , : , }, }, : { : Bookmark, : { : , : , }, }, : { : Setting, : { { : , : , }; }, }, { : { {routeName} = navigation.state.routes[navigation.state.index]; { : routeName }; }, }, ); StackNavigator = createStackNavigator({ : DashboardTabNavigator, : SinglePost, : CategorieList, : Contact, }); createAppContainer(StackNavigator); import from 'react' import from 'react-navigation' import from 'react-navigation-tabs' import from 'react-navigation-stack' import from '../screens/Home' import from '../screens/Categories' import from '../screens/Setting' import from '../screens/About' import from '../screens/SinglePost' import from '../screens/CategorieList' import from '../screens/Contact' import from '../screens/Bookmark' import from 'react-native-vector-icons/Ionicons' const HomePage screen navigationOptions tabBarLabel 'Home' tabBarIcon => () "md-home" 30 Categories screen navigationOptions tabBarLabel 'Categories' tabBarIcon => () "md-apps" 30 Bookmark screen navigationOptions tabBarLabel 'BookMark' tabBarIcon => () "ios-bookmark" 30 Setting screen navigationOptions return tabBarLabel 'Setting' tabBarIcon => () "md-settings" 30 navigationOptions ( ) => {navigation} const return headerTitle const DashboardTabNavigator SinglePost CategorieList Contact export default Now, we are going to include the navigator component back to . For that, we need to import the file into the file as and use it in the function as shown in the code snippet below: App.js Navigator.js App.js Navigator render() React, {Component} ; Navigator ; { (props) { (props); .state = {}; }

render() { import from 'react' import from './src/components/Navigator' class App extends Component constructor super this return } }

export default App; Navigator Activate dark mode in React navigation Here, we are going to activate the dark mode in the react-navigation. The react-navigation package provides us with a prop called theme through which we can easily change into dark mode. For that, we need to use the theme prop in the Navigation component that we are exporting from the file as shown in the code snippet below: Navigator.js Navigation = createAppContainer(StackNavigator); () => const export default Navigation theme { dark Here, we integrated the theme prop to the component we are exporting from file with theme as dark. Navigator.js Hence, we will get the dark mode in the app interface as shown in the emulator screenshots below on the next page: As we can see, we have activated the dark mode in the app interface but the cards displaying the article posts are still in white theme. For that, we need to configure the components as well. react-native-paper Activate dark mode on React native paper Here, we are going to activate the dark mode in the components from the package. We are going to make use of the component from as in the file. We are also react-native-paper Provider react-native-paper PaperProvider Navigator.js { Provider PaperProvider, DarkTheme, DefaultTheme } ; import as from 'react-native-paper' Here, component is the main Context class that makes the global config of dark mode. The and are set of configurations. Now, we need to wrap the component that we are exporting from the with the component. And then, integrate it with the theme prop set to component as shown in the code snippet below: Provider DarkTheme DefaultTheme Navigation Navigator.js PaperProvider DarkTheme Going to import the and from the component as shown in the code snippet below: DarkTheme DefaultTheme react-native-paper () => { ( export default return PaperProvider theme {DarkTheme} ); }; Hence, we will get the following result in our emulator screens on the next page: As we can see, we now have the dark mode activated in the article post cards as well. But, we can also see that there is some issue with the excerpt of the article that is being displayed in the cards. All the letters in the excerpt are in black color style. This is because we used the component from package. react-native-render-html 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