I implemented a dark mode in my app by screenProps. On iOS it works fine, everything changes color on Android except the header navigator. I have a darkMode boolean screenProps so I set my Views and Text elements to change when this variable changes in the App.js and it's great but I can not make it work with the header. But also the header title should change color but it does not.
This is the defaultNavigationOptions which works on iOS but not on Android
{
defaultNavigationOptions: ({navigation, screenProps}) => ({
headerStyle: {
borderBottomColor: '#CED0CE',
backgroundColor: screenProps.darkMode ? "#212121" : "#fff"
,elevation: 0,
shadowOpacity: 0,
},
}),
}
And I have this navigationOptions in my screen that also not working, so all my troubles are with the navigation header, but for example the Drawer navigator and bottom navigator changes color with o problem so that's why I don not understand.
static navigationOptions = ({navigation, screenProps}) => {
return {
headerTitle: (
<HeaderTitle text={'Népszerű'} darkMode={screenProps.darkMode} />
),
headerLeft: <MenuIcon openDrawer={() => navigation.toggleDrawer()} />,
headerRight: (
<HeaderProfileImage
image={{uri: URL + '/media/' + screenProps.profile_image}}
navigate={() =>
navigation.navigate('Profile', {
current_profile: true,
})
}
/>
),
};
};
Also weird that the profile image as screenProps loads perfectly so it is not the problem.