React-Native-Router-Flux - Left align title on Android

Question

I'm using React-native-router-flux for an Android app, and by default the title seems to be centered. How can I left align it instead so it looks the way a Native Android Toolbar looks?

Thank you!

Answer 1

use headerLayoutPreset={'center'} to parent component:

<Scene key={'root'} headerLayoutPreset={'center'}>

that'll work.

Answer 2

You can override the style and do it,

<Router
        sceneStyle={styles.sceneStyle}
        navigationBarStyle={styles.navBarStyle}
        titleStyle={styles.titleStyle}
        ...
        ...>
</Router>

and then, Define the titleStyle as

titleStyle: {
    color: '#FFFFFF',
    fontWeight: 'bold',
    fontSize: 18,
    textAlign: 'left',
    alignSelf: 'flex-start',
    paddingLeft: 40,
}

Hope it helps!

Answer 3

You can override the renderBackButton function in your Router to show the title instead of the back button. Something like this:

class Router extends React.Component {
  renderTitle = (props) => {
    return <Text style={...}>{props.leftTitle}</Text>
  };

  render() {
    return (
      <Router>
        <Scene key="myScene" leftTitle="My Title" renderBackButton={this.renderTitle} />
      </Router>
    );
  }
}  

I don't specify the title props so the scene won't render a title in the middle. Instead, I use my own leftTitle prop.

Answer 4

I tried the codes from the last answer, but it didnt work. So I tried and noticed that when we create root Scene, you can hard code the styles inside of root Scene(not in Router)

It should be like this can you can style all your scenes in root scene :

<Router>
    <Scene key="root"  titleStyle={{ alignSelf: 'center' }}>
          <Scene key="login" component={LoginForm} title="Please Login" initial />
          <Scene key="employeeList" component={EmployeeList} title="Emloyees"/>
    </Scene>
</Router>