Arif
Arif

Reputation: 6478

react-native-router-flux back button shows top

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) :

enter image description here

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 ?

Upvotes: 0

Views: 2081

Answers (3)

Muhammad Usman
Muhammad Usman

Reputation: 1258

"react-native-router-flux": "4.1.0-beta.2"

This works for me. I set the back={true}

<Scene key='key' component={MyComponent} title='title' back={true}/>

Upvotes: 0

Arif
Arif

Reputation: 6478

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;

Upvotes: 1

Blapi
Blapi

Reputation: 31

this is a known issue and I suggest you to have a look at this please :)

https://github.com/aksonov/react-native-router-flux/issues/2675

Upvotes: 1

Related Questions