Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 28480

Why Android header does not change color in React Native?

$
0
0

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.

enter image description here

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.


Viewing all articles
Browse latest Browse all 28480

Trending Articles