Spacing between NavigationBar elements on Android

[alexstanbury]

I'm having a real hard time getting the nav bar to look like I want. It seems the navigationImage is set at a different inset to RightBar > BarButton meaning the spacing on the outside is different. Plus the container that navigationImage is in seems to have a preset width that cannot be altered, meaning getting my branding to sit in the middle of the two is also impossible to achieve without some hacks.

Please see the attached image for what I am trying to achieve (you should assume the gaps are the same i.e. the positioning is symmetrical).

Am I missing something here?

[grahammendick]

Hi, nice to hear from you. The NavigationBar renders to the native Toolbar on Android so I think the spacing matches the material design specs. I'm not manually setting any spacing. Could you compare it to some native Android apps on your phone, like WhatsApp or Twitter, and see if there's a difference in spacing?

I'm guessing your branding is a TitleBar. I use something like the following to center the title on the zoom sample

<NavigationBar>
  <TitleBar style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
     <Branding style={{width: 200}}>
  </TitleBar>
</NavigationBar>

[alexstanbury]

Hi Graham, thanks for the detailed reply. I was able to resolve it using the Material measurements and adding a marginLeft of 16 to the TitleBar. Not my favourite hack but it works!