How to handle headerLeft navigation option on Android?

[joncursi]

headerLeft renders nicely on iOS since the title text is centered. There is room for it to render. However, on android, the title renders more on the left side to begin with, so sticking a custom element on headerLeft will cause conflicts. Consider the following example:

Thoughts on a clean way to handle this?

[AlanFoster]

@joncursi You can confirm this within the source code, but i believe the default back button may have paddingRight added to it to solve this issue

[alenia]

Maybe try to modify headerTitleStyle?

[RogerParis]

static navigationOptions = {
    header: (navigation) => ({
      title: <Text style={{ 
            color: 'rgba(0, 0, 0, .9)', 
            fontWeight: Platform.OS === 'ios' ? '600' : '500',  
            fontSize: Platform.OS === 'ios' ? 17 : 18, 
            alignSelf: 'center' 
         }}>Filters</Text>,
      right: <SearchButton />,
      left: <CancelButton />,
    })
  };

This looks good in my case. I hope it helps.