Double Line in Navigation Bar for nested StackedNavigation and Title does not center in 4.0.0

[abhaychitnis]

My Router.js code is as follows:

  import React from 'react';
  import { Scene, Router, Modal } from 'react-native-router-flux';
  import JobList from './components/JobList';
  import JobList2 from './components/JobList2';
  import EntryForm from './components/EntryForm';
  import TopDashboard from './components/TopDashboard';

  const RouterComponent = () => {
    return (
      <Router>
        <Scene
          key="modal"
          component={Modal}
          hideNavBar
        >
          <Scene key="auth">
            <Scene
              key="login"
              component={EntryForm}
              hideNavBar
            />
          </Scene>
          <Scene key="main" >
            <Scene
              key="topdashboard"
              component={TopDashboard}
              title="Dashboard"
              navigationBarStyle={styles.navBar}
              titleStyle={styles.titleStyle}
              initial
            />
            <Scene key="tabMain" tabs tabBarPosition="bottom">
             <Scene
                key="OpenJobs"
                component={JobList}
                title="Open Jobs"
                navigationBarStyle={styles.navBar}
                titleStyle={styles.titleStyle}
                hideTabBar={false}
              />
              <Scene
                key="AllJobs"
                component={JobList2}
                title="All Jobs"
                navigationBarStyle={styles.navBar}
                titleStyle={styles.titleStyle}
                hideTabBar={false}
              />
          </Scene>
        </Scene>
        </Scene>
      </Router>
    );
  };


  const styles = {
    navBar: {
      backgroundColor: '#01a1d3' // changing navbar color
    },
    titleStyle: {
      color: 'white', // changing navbar title color
      fontWeight: 'bold'
    }
  };

  export default RouterComponent;

I having two problems in Screen tabMain

1. There are two lines for the Navigation Bar. The top one has the back button arrow and no styling and the second has the title with styling. I want the back button arrow and the title on a single line of Navigation Bar. I have tried all combinations, but am not able to make it happen.

2. The titles on the Navigation Base do not center, no matter what property I give ! Where am I going wrong ?

Following is image from the Android Emulator:

[diegocouto]

Hi, @abhaychitnis! I've experienced something similar. Have you tried to add hideNavBar to your Scene with key main?

Regarding the title not being centered, I think that this is expected by Material design guidelines, but you can always change it with the titleStyle attribute. What if you tried this:

titleStyle: {
  color: 'white',
  fontWeight: 'bold',
  alignSelf: 'center',
}

[abhaychitnis]

@diegocouto

The alignSelf did work ! Thanks !

However if I add hideNavBar to 'main' screen, it will hide the top line in the navigation bar. Which means I do not get the back functionality. So the issue remains open......

[ghost]

I see the same thing, but what i noticed when messing with their example is that is you send the navTransparent prop it fixes the problem and you can have the back button show without the navebar... however, I cant get the navTransparent prop to work outside their example js file..... not sure why

[diegocouto]

That's good news, @abhaychitnis!

To show the back button, maybe you could add the back prop to the OpenJobs scene... but I've never tried it. 😂

[abhaychitnis]

Nope that did not work. Interesting though after adding the back prop, the title of the screen shifted to the right little bit. Now the screen looks like,

[abhaychitnis]

@Paloman If I add navTransparent instead of hideNavBar to 'main' screen, I do get both the title and back button on a single row. However now the screen looks like this !!!!

[diegocouto]

@abhaychitnis, well... that's odd. If you try to touch where there should be the back button, does anything happen?

Off the top of my head, I'd guess that:

1. The button is right there, but it has the same tint color than the background;
2. You're using a outdated version of the RNRF, where the button wouldn't show on android (try to update to beta12).

[abhaychitnis]

Yup ! That worked. I updated the version to beta12. The screen now looks like,

I will work on styling a little bit more...
@diegocouto rocks ! Thanks you !

[abhaychitnis]

Are you referring to the bottom Tab Bar ? Its a standard TabBar with styling. Please check the code I have posted.

…

On Fri, Jul 21, 2017 at 10:14 AM, paloman ***@***.***> wrote: @abhaychitnis <https://github.com/abhaychitnis> jus out of curriosity what did you use for the bottom bar? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2080 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AbTagNcPSG-0sW4S5qFh_QB1PsHrP7p-ks5sQCzGgaJpZM4OeZyo> .