How to add DarkMode to Navigator in App.js - react-native

Question

I have to add DarkMode switch to one of the Screen which applies to all the screen in React Native IOS App.
Below is the App.js where I wrap my main navigator inside ThemeProvider
import React from 'react';
import {Provider} from 'react-redux';
import {createStore, combineReducers,applyMiddleware} from 'redux';
import ReduxThunk from 'redux-thunk';
import authReducer from './store/reducers/auth';
import deviceReducer from './store/reducers/device';
import FR_Navigator from './navigation/FR_Navigator';
import downloadReducer from './store/reducers/download';
import { RootSiblingParent } from 'react-native-root-siblings';
import { ThemeProvider} from './theme/theme-context';
const rootReducer = combineReducers({
auth: authReducer,
download:downloadReducer,
device:deviceReducer
});
const store = createStore(rootReducer,applyMiddleware(ReduxThunk));
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<ThemeProvider>
<FR_Navigator />
</ThemeProvider>
</Provider>
);
}
}
Below is the FRNavigator which has Settings Page which sets DarkMode.
FRNavigator.js
import React from 'react';
import { View,StyleSheet,SafeAreaView,Button,ScrollView,Text} from 'react-native';
import { createSwitchNavigator,createAppContainer } from 'react-navigation';
import {createStackNavigator,StackViewTransitionConfigs} from 'react-navigation-
stack';
import MainPage from '../screens/FaceRecog/MainPage';
import UploadPage from '../screens/FaceRecog/UploadPage';
import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/Ionicons';
import DownloadPage from '../screens/FaceRecog/DownloadPage';
import RateUsScreen from '../screens/FaceRecog/RateUsScreen';
import ForgotPasswordScreen from '../screens/UI/ForgotPasswordScreen';
import ImageBrowserScreen from '../screens/FaceRecog/ImageBrowserScreen';
import LoginScreen from '../screens/UI/LoginScreen';
import RegisterScreen from '../screens/UI/Register';
import AddDevicePage from '../screens/FaceRecog/AddDevicePage';
import LogoutComponent from '../components/FaceRecog/LogoutComponent'
import DrawerHeader from '../components/FaceRecog/DrawerHeader';
import CommunicateComponent from '../components/FaceRecog/CommunicateComponent';
import ManageDevice from '../screens/FaceRecog/ManageDevicePage';
import Register from '../screens/UI/Register';
import Settings from '../screens/FaceRecog/Settings';
const AuthNavigator = createStackNavigator(
{
Login:
{
screen:LoginScreen,
navigationOptions: {
headerShown: false,
}
},
SignUp:
{
screen:Register
},
ForgotPasswordPage:
{
screen:ForgotPasswordScreen,
navigationOptions: {
headerShown: true,
}
}
},
);
const MainPageNavigator = createStackNavigator({
Home:MainPage,
AddDevice:AddDevicePage,
Upload:UploadPage,
ImagePicker:ImageBrowserScreen,
ManageDev:ManageDevice,
Setting:
{
screen:Settings,
transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,
},
RateUs:RateUsScreen,
})
const DrawerNavigator = createDrawerNavigator(
{
Home:
{
screen:MainPageNavigator,
navigationOptions:{
drawerIcon:(
<Icon
name='md-home-sharp' size={25} color='grey'/>
)
}
},
Download:
{
screen:DownloadPage,
navigationOptions:{
drawerIcon:(
<Icon
name='md-download'
type='ionicons' size={25} color='grey'onPress={ () => {
}}/>
)
}
},
Exit:
{
screen:Register,
navigationOptions:{
drawerIcon:(
<Icon
name='exit-outline'
type='ionicons' size={25} color='grey' onPress={ () => {
}}/>
)
}
}
},
{
contentOptions:{
activeTintColor: '#e91e63',
},
contentComponent: (props) =>
<ScrollView>
<SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never',
height:180 }}>
<View style={{width:'100%', backgroundColor: 'white', }}>
<DrawerHeader />
</View>
<DrawerItems {...props} />
<LogoutComponent />
<View
style={{
borderBottomColor: 'grey',
borderBottomWidth: 1
}}/>
<View style={styles.communicateview}>
<Text style={styles.communicatetext}>Communicate</Text>
<CommunicateComponent {...props}/>
</View>
</SafeAreaView>
</ScrollView>,
},
);
const MainNavigator = createSwitchNavigator({
Auth: AuthNavigator,
App:DrawerNavigator
});
const styles = StyleSheet.create({
communicatetext:{
fontWeight:'800',
color:'grey'
},
communicateview:{
top:'3%',
left:'3%'
}
})
export default createAppContainer(MainNavigator);
Below is the Settings Page where I have added Toggle button to set DarkMode:
Settings.js
import React,{useState,useContext} from 'react';
import { View, StyleSheet ,Text,Switch,StatusBar,TouchableOpacity,Button} from
'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import HeaderButton from '../../components/UI/HeaderButton';
import Icon from 'react-native-vector-icons/Entypo';
import { ThemeContext } from '../../theme/theme-context';
const Settings = props => {
const { dark, theme, toggle } = useContext(ThemeContext);
return <View style={styles.container}>
<View style={styles.appsettingstextview}>
<Text style={styles.appsettingstext}>App Settings </Text>
<View style={styles.box}>
<View style={{right:80}}>
<Icon name='adjust' type='entypo' size={40} color='#00008B'/>
</View>
<View style={{right:70}}><Text style={{fontWeight:'bold'}}>Dark Mode</Text></View>
<View style={{left:80}}>
<Switch
trackColor={{ false: "#767577", true: "#ccc" }}
thumbColor={dark ? "#fff" : "#f4f3f4"}
onChange={toggle} value = {dark} />
</View>
</View>
</View>
</View>
};
const styles = StyleSheet.create({
container:{
flex:1,paddingTop:40,paddingLeft:20,
paddingBottom: 60
},
apppermissiontextview:{
},
appsettingstext:{
fontSize:17,
color:'#0437F2',
fontWeight:'bold'
},
apppermissiontextview:{
top:'5%',
},
apppermissiontext:{
fontSize:17,
color:'#0437F2',
fontWeight:'bold'
},
box: {
shadowColor: 'rgba(0,0,0, .4)', // IOS
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 1, // IOS
shadowRadius: 1, //IOS
backgroundColor: '#fff',
elevation: 2, // Android
height: 80,
width:380,
borderRadius: 5,
marginVertical: 40,
backgroundColor: "#FFFFFF",
alignItems: "center",
justifyContent: "center",
flexDirection: 'row',
},
text: {
fontSize: 14,
fontWeight: "bold",
margin: 8,
color: "#000",
textAlign: "center"
}
});
Settings.navigationOptions = navData =>{
return{
headerTitle: 'Settings',
headerTitleStyle:{
color:'white',
},
headerTitleAlign:"left",
headerStyle: {
backgroundColor: '#0437F2',
},
headerLeft: () =>
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
//title="Menu"
iconName={'chevron-back-outline'}
onPress={() => {
//navData.navigation.toggleDrawer();
navData.navigation.navigate('Home');
}}
/>
</HeaderButtons>
}
};
export default Settings;
If I run the above program, when I toggle the Switch, nothing happens.Can anyone say how to add the Settings.js Page to work with FRNavigator to support darkmode toggle switch.Thanks in Advance.

Answer 1

I added darkmode style as style={[styles.box,{ backgroundColor: theme.backgroundColor }]}> to the View in the Settings Page and I could get switch between dark and light theme.Below is the Settings code changes I made :
Settings.js:
import React,{useState,useContext} from 'react';
import { View, StyleSheet
,Text,Switch,StatusBar,TouchableOpacity,Button} from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import HeaderButton from '../../components/UI/HeaderButton';
import Icon from 'react-native-vector-icons/Entypo';
import { ThemeContext } from '../../theme/theme-context';
const Settings = () => {
const { dark, theme, toggle } = useContext(ThemeContext);
return <View style={styles.container}>
<View style={styles.appsettingstextview}>
<Text style={styles.appsettingstext}>App Settings </Text>
<View style={[styles.box,{ backgroundColor: theme.backgroundColor }]}>
<View style={{right:80}}><Icon
name='adjust'
type='entypo' size={40} color='#00008B'/>
</View>
<View style={{right:70}}><Text style={[styles.darkmodetext,
{color:theme.color}]}>Dark Mode</Text></View>
<View style = {styles.containerSwitch}>
<Switch
trackColor={{ false: "#ccc", true: "#d43790" }}
thumbColor={dark ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onChange={toggle} value = {dark} />
</View>
</View>
</View>
</View>
};
const styles = StyleSheet.create({
container:{
flex:1,paddingTop:40,paddingLeft:20,
paddingBottom: 60
},
appsettingstext:{
fontSize:17,
color:'#0437F2',
fontWeight:'bold'
},
darkmodetext:{
fontWeight:'bold',
fontSize:18
},
box: {
shadowColor: 'rgba(0,0,0, .4)', // IOS
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 1, // IOS
shadowRadius: 1, //IOS
backgroundColor: '#fff',
elevation: 2, // Android
height: 80,
width:380,
borderRadius: 5,
marginVertical: 40,
backgroundColor: "#FFFFFF",
alignItems: "center",
justifyContent: "center",
flexDirection: 'row',
bottom:'7%'
},
text: {
fontSize: 14,
fontWeight: "bold",
margin: 8,
color: "#000",
textAlign: "center"
},
containerSwitch:{
marginBottom:50,
top:'6%',
left:'110%'
}
});
Settings.navigationOptions = navData =>{
return{
headerTitle: 'Settings',
headerTitleStyle:{
color:'white',
},
headerTitleAlign:"left",
headerStyle: {
backgroundColor: '#0437F2',
},
headerLeft: () =>
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
//title="Menu"
iconName={'chevron-back-outline'}
onPress={() => {
//navData.navigation.toggleDrawer();
navData.navigation.navigate('Home');
}}
/>
</HeaderButtons>
}
};
export default Settings;