Android/iOS title rendering inconsistent?

[qbig]

  getTitle() {
    return 'MENU'
  },

      <ExNavigator
        initialRoute={homeRoute}
        style={{ flex: 1 }}
        titleStyle={{
          fontSize: 20,
          textAlign: 'center',
          margin: 10,
        }}
      />

For iOS title is centred while for Android is left-aligned. Is this a intended behaviour.

[ide]

We haven't done work on laying out the nav bar contents on Android. So we don't intend for it to look broken, but also haven't worked on making it look good either.

[kristian-puccio]

Any idea on the timeline for this or a workaround? Could renderTitle() be used to fix this in the interim?

[ide]

As a rough estimate, I imagine we will look into this by the end of December.

[masom]

I tried quickly playing with the renderTitle method. It seems like the layout issue is higher up in the component stack.

[delta1]

Hi @ide , any progress on this? Could you point me to the right file to look at this and hopefully provide a PR ?

@masom , @qbig any luck with this?

[ide]

Here's our workaround that's worked reasonably well:

<ExNavigator
  renderNavigationBar={props =>
    <Navigator.NavigationBar
      {...props}
      navigationStyles={Navigator.NavigationBar.StylesIOS}
    />
  }
/>

[delta1]

@ide thank you so much for the fast response! Works for me :) @aksonov do you need a PR? I just added

navigationStyles={Navigator.NavigationBar.StylesIOS}

to your ExNavigator component in ExRouter.js

[samuelkraft]

Is the goal of ex-navigator to make navigation look the same for all platforms? In our app we are aiming for the "default" android material style, in which case the current code (without the "navigationStyles" code above) is correct. Just tweak renderLeftButton in the Router to render the android back button instead of the iOS back button & text.

[delta1]

@samuelkraft that looks great, could you please share the change you made to renderLeftButton ?

[BigPun86]

+1

[samuelkraft]

Edit: renderBackButton has been added as a prop to <ExNavigator> in 0.3.6 - use that instead of renderLeftButton

For the default back button download it here: https://design.google.com/icons/#ic_arrow_back Then in your router do something like this:

renderLeftButton(navigator) {
  if (Platform.OS === 'android') {
    return (
      <TouchableOpacity
        touchRetentionOffset={ExNavigator.Styles.barButtonTouchRetentionOffset}
        onPress={() => navigator.pop()}
        style={[ExNavigator.Styles.barLeftButton, styles.backButtonAndroid]}>
          <Image source={require('./images/backAndroid.png')} />
      </TouchableOpacity>
    );
  }
}

and style the button:

backButtonAndroid: {
  paddingLeft: 16,
  paddingVertical: 15
},

[delta1]

Thanks @samuelkraft ! @ide what's the Android roadmap like for this? Is the goal to have a conventional Material style for the Android Navigator?

[efkan]

Although everybody know this issue, I'm explaining for newcomers;

Probably as you know, Actually there is no a problem. Because, according to Android navigation design , there is a back button on the top-left corner and the current page title next to the it. And top-right area has been left for other tools like buttons or another title. https://www.google.com/design/spec/patterns/navigation.html#navigation-usage

Unlike, iOS has a back button and previous screen title on the top-left of the screen. Title is in the middle.

Because of these reasons, I think the approach of @samuelkraft is true.

However, a cross-platform solution would be great.

Actually @ide has succeeded that the auto navigation bar style according to the OS. If the above differences can handle in the same way, the problem can be eliminated.

For instance; If the OS is an Android, shown the backAndroid.png and current screen title. Not shown the barLeftButtonText. The existing code is appropriate to iOS anyway.

[sudharsan1988]

@delta1, I tried adding as you said but it didn't work for me. I am using 0.27.

<ExNavigator initialRoute={YourRouter.getHomeRoute()} style={{ flex: 1 }} sceneStyle={{ paddingTop: 64 }} navigationStyles={Navigator.NavigationBar.StylesIOS} />

Am I missing something here?

[delta1]

sorry @sudharsan1988 this was back in 0.16/17 days so I have no idea what's changed. gl hf