Problem

If the title gets to be to long, it will push out the headerRight and headerLeft before it applies the ellipsis.

Note

I found a similar question here with no fix for this issue: React Native Navigation – adding headerRight causes title to be pushed away from the left side

The Code

{
    headerTitleAlign: 'center',
    headerStyle: { backgroundColor: colors.blueOne },
    headerRightContainerStyle: { paddingRight: 20 },
    headerLeftContainerStyle: { paddingLeft: 20 },
    headerTitleStyle: {
      fontSize: 24,
      color: colors.whiteTwo,
      maxWidth: '90%'
    },
    headerTintColor: colors.whiteTwo,
    title: routeTitle,
    ...TransitionPresets.ModalFadeTransition,
    headerLeft: () => <Hamburger navigation={navigation} isOpen={isHamburgerOpen} />,
    headerRight: () => <HeaderRight routeName={route.name} />
}

Semi-Fix

Only after adding maxWidth: '90%', did it fix this issue, however now other titles are cut off when they should not be. See results below…