react-native-router-flux back button shows top

[arif2009]

Version

• react-native-router-flux v4.0.0-beta.27 (v3 is not supported)
• react-native v0.51.0

Expected behaviour

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

Actual behaviour

I want to get back button with title.

Steps to reproduce

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;

Stackoverflow Issue

[Blapi]

Have a look at this please: #2675

[arif2009]

@Blapi In my case BackButton shows and works fine but problem is 1st row it shows BackButton and 2nd row it shows Title like my screenshot, they are not showing together. I update my screenshot you can consider it again.

[arif2009]

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;