headerTintColor ignored for back button in iOS15 (react-navigation v5)

Viewed 248

The value headerTintColor for the back button is being ignored in iOS 15 and instead uses the system standard blue color. The Title and Header Right buttons still respect the value that I pass in. I am using react-navigation v5 and I am trying to avoid upgrading to v6 right now, if I can avoid it. (And I don't know if this is happening in v6 or not?). This occurs on both the device and the simulator.

iOS 15 (via Simulator): screenshot from iOS 15 showing blue-colored back button

iOS <= 14 (via Simulator): screenshot from iOS 13 showing white colored back button

 <Stack.Navigator
      initialRouteName="EventList"
      screenOptions={{gestureEnabled: true}}>
      <Stack.Screen
        name="EventListScreen"
        component={EventTabs}
        options={({navigation}) => ({
          title: parametersBand.APP_NAME,
          headerTintColor: colors.NAV_TEXT_COLOR,
          headerStyle: styles.navBar,
          headerTitleStyle: styles.navBarTextStyle,
          headerTitleAllowFontScaling: false,
          headerRight: () => (
            <HeaderRightContainer>
              <HeaderRightButton
                onPress={() =>
                  analytics()
                    .logEvent('extras')
                    .then(() => navigation.navigate('Extras'))
                }
                hitSlop={hitSlop}>
                <FontAwesome name="bars" style={styles.navBarButtonHamburger} />
              </HeaderRightButton>
            </HeaderRightContainer>
          ),
          headerBackAllowFontScaling: false,
          headerBackTitle: null,
          headerBackTitleVisible: false,
          backgroundColor: colors.PRIMARY,
          borderBottomWidth: 0,
        })}
      />
      <Stack.Screen
        name="EventDetailScreen"
        component={EventDetail}
        options={({route, navigation}) => ({
          title: route.params.event.title,
          headerTintColor: colors.NAV_TEXT_COLOR,
          headerStyle: styles.navBar,
          headerTitleStyle: styles.navBarTextStyle,
          headerTitleAllowFontScaling: false,
          headerRight: () => (
            <HeaderRightContainer>
              <HeaderRightButton
                onPress={() =>
                  analytics()
                    .logEvent('setlist', {
                      event: `${route.params.event.YYYYMMDD} ${route.params.event.altName}`,
                    })
                    .then(() =>
                      showBrowser(
                        navigation,
                        route.params.event.setlistURL,
                        parametersBand.SETLIST_TITLE,
                      ),
                    )
                }
                hitSlop={hitSlop}>
                <HeaderRightButtonText
                  style={styles.navBarButtonRight}
                  allowFontScaling={false}>
                  Setlist
                </HeaderRightButtonText>
              </HeaderRightButton>
            </HeaderRightContainer>
          ),
          headerBackAllowFontScaling: false,
          headerBackTitle: null,
          headerBackTitleVisible: false,
          backgroundColor: colors.PRIMARY,
          borderBottomWidth: 0,
        })}
      />
</Stack.Navigator>

Has anyone else encountered and fixed this yet?

1 Answers

I'm sure you fixed this by now but just in case anyone else runs into this, as I just did.

The tint color for the back button is handled by the theme so you can override theme.colors.primary to change the tint color for the button and title text.

<NavigationContainer theme={{
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'custom color here'
  }}
>
  {...}
</NavigationContainer>
Related