Android/iOS title rendering inconsistent? about ex-navigator HOT 15 OPEN

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.

from ex-navigator.

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

from ex-navigator.

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

from ex-navigator.

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

from ex-navigator.

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?

from ex-navigator.

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

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

from ex-navigator.

@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

from ex-navigator.

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.

from ex-navigator.

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

from ex-navigator.

+1

from ex-navigator.

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
},

from ex-navigator.

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

from ex-navigator.

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.

from ex-navigator.

@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?

from ex-navigator.

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

from ex-navigator.