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?