react-native-router-flux back button shows top

Question

I am trying to create nested routing using react-native-router-flux, but i am getting back button at the top like below (red marked area) :

My Code :

const RouterComponent = () => {
    return(
        <Router>
            <Scene key="root">
                <Scene key="auth">
                    <Scene key="login" component={LoginForm} title="Please Login" />
                </Scene>

                <Scene key="main">
                    <Scene key="userList" component={UserList} title="NUMBER OF DONOR : XX" />
                </Scene>
            </Scene>
        </Router>
    );
};

export default RouterComponent;

Platform version :
react-native : 0.51.0
react-native-router-flux : 4.0.0-beta.27

Can anybody tell me how can i get back button with title ?

Answer 1

I got my solution. I solved it by adding hideNavBar={true} on parent and hideNavBar={false} on child Scene.

const RouterComponent = () => {
    return(
        <Router>
            <Scene key="root">
                <Scene key="auth" hideNavBar={true}>
                    <Scene key="login" hideNavBar={false} component={LoginForm} title="Please Login" />
                </Scene>

                <Scene key="main" hideNavBar={true}>
                    <Scene key="userList" hideNavBar={false} component={UserList} title="NUMBER OF DONOR : XX" />
                </Scene>
            </Scene>
        </Router>
    );
};

export default RouterComponent;