I've been working with react native elements. I want to implement a dark mode to my app but for some reason I cant get the theme prop in <ThemeProvider/> to change when my state in my context changes.
Here is my context where I have my darkTheme and lightTheme object. I also have a lightThemeState using useState so I can set that state from a child component.
import React, { createContext, useState, useEffect } from react;
import { AsyncStorage } from react-native;
import { ThemeProvider } from react-native-elements;
import lightTheme from ../themes/light;
import darkTheme from ../themes/dark;
export const ThemeModeContext = createContext();
export const ThemeContextProvider = (props) => {
const [lightThemeState, setLightThemeState] = useState(true);
const saveThemeState = async () => {
if (lightThemeState) {
await AsyncStorage.removeItem(lightThemeState);
} else {
await AsyncStorage.setItem(
lightThemeState,
JSON.stringify(lightThemeState)
);
}
};
const getThemeState = async () => {
currentMode = await AsyncStorage.getItem(lightThemeState);
if (currentMode) {
setLightThemeState(JSON.parse(currentMode));
}
};
useEffect(() => {
saveThemeState();
}, [lightThemeState]);
useEffect(() => {
getThemeState();
}, []);
const currentTheme = lightThemeState ? lightTheme : darkTheme;
console.log(LIGHT THEME STATE, lightThemeState);
// When I log this after I used the setLigthThemeState in a child component. It gives the correct state ie true or false.
console.log(COLOR OF THE THEMES BACKGROUND, currentTheme.colors.background);
// This also gives the correct background for the theme that is the currentTheme depending on the state. So this far, everything is correct.
return (
<ThemeModeContext.Provider value={[lightThemeState, setLightThemeState]}>
<ThemeProvider theme={currentTheme}>{props.children}</ThemeProvider>
</ThemeModeContext.Provider>
);
};
export default ThemeContextProvider;
Because I have another context that I use for other logic. I combine <ThemeContextProvider/> with my other context <JourneyContextProvider/>. Like so:
import React from react;
import ThemeContextProvider from ./themeStore;
import JourneyContextProvider from ./journeyStore;
export const CombinedStoreProvider = (props) => {
return (
<JourneyContextProvider>
<ThemeContextProvider>{props.children}</ThemeContextProvider>
</JourneyContextProvider>
);
};
export default CombinedStoreProvider;
Then finally i wrap the whole app in my <CombinedStoreProvider/>. Like so.
import React from react;
import { SafeAreaView } from react-native;
import { createAppContainer, createSwitchNavigator } from react-navigation;
import { createMaterialBottomTabNavigator } from react-navigation-material-bottom-tabs;
import Icon from react-native-vector-icons/Ionicons;
import MoreScreenfrom ./src/screens/MoreModal;
import CombinedStoreProvider from ./store/combinedStore;
const TabNavigator = createMaterialBottomTabNavigator(
{
MoreScreen: {
screen: MoreScreen,
navigationOptions: {
title: More,
tabBarIcon: ({ tintColor }) => (
<SafeAreaView>
<Icon style={[{ color: tintColor }]} size={25} name={ios-more} />
</SafeAreaView>
),
},
},
},
{
theme: ({ darkTheme }) => console.log(darkTheme),
barStyleDark: {
backgroundColor: darkTheme.colors.background,
},
barStyleLight: {
backgroundColor: lightTheme.colors.background,
},
shifting: false,
labeled: true,
initialRouteName: MoreScreen,
activeColor: #E4DC93,
inactiveColor: #fff,
barStyle: { backgroundColor: transparent, height: 80, paddingTop: 10 },
}
);
const AllRoutes = createSwitchNavigator(
{
PersonalSettings: {
title: Personal Settings,
screen: PersonalSettings,
header: ({ goBack }) => ({
left: (
<Icon
name={chevron-left}
onPress={() => {
goBack();
}}
/>
),
}),
},
Tabs: {
screen: TabNavigator,
},
},
{
initialRouteName: Tabs,
}
);
const AppContainer = createAppContainer(AllRoutes);
export default App = () => {
return (
<CombinedStoreProvider>
<AppContainer />
</CombinedStoreProvider>
);
};
And here is my child component where I toggle the lightThemeState in my context. But even though everything looks great in ThemeContextProvider (I console log the state and background color and they have succesfully changed the theme). But in this component I only get the previous theme. Like nothing changed even though this child component rerenders when I toggle the lightThemeState. I know this because the console log in this component logs again after i toggle the theme but the logs show the previous theme colors. Here is the child component:
import React, { useContext, useState } from react;
import { StyleSheet, View, Text } from react-native;
import { LayoutView, ContainerView } from ../../components/styles;
import { ThemeModeContext } from ../../../store/themeStore;
import { Card, ListItem, Avatar, ThemeContext } from react-native-elements;
import CustomButton from ../../components/CustomButton;
const INITIAL_PERSONAL_INFO_STATE = {
name: ,
username: ,
profileImage: ,
favoriteDestinations: [],
};
const MoreModal = (props) => {
const [personalInfo, setPersonalInfo] = useState(INITIAL_PERSONAL_INFO_STATE);
const [lightThemeState, setLightThemeState] = useContext(ThemeModeContext);
const { theme } = useContext(ThemeContext);
const { navigate } = props.navigation;
const primaryColor = theme.colors.background;
console.log(COLOR IN COMPONENT, primaryColor);
// The color is from the previous theme and even thou the state has changed in the state below
console.log(LIGHT THEME STATE IN COMPONENT, lightThemeState);
return (
<LayoutView primaryColor={theme.colors.background}>
<ContainerView>
<View>
</View>
<Card
title={Settings}
>
<ListItem
title=Light mode
switch={{
value: lightThemeState,
onValueChange: (value) => setLightThemeState(value),
// Here is where I set lighThemeState to false in my context
}}
bottomDivider
</Card>
</ContainerView>
<CustomButton title={Sign in}></CustomButton>
</LayoutView>
);
};
export default MoreModal;
Maybe there is something wrong with the darkTheme and lightTheme you ask? No, if I changs the state from true to false and reload the app. It works.
Somehow the theme doesnt update in the <ThemeProvider theme={currentTheme}/>. Can someone explain why?
