React-native-router-flux: Multiple navigation bars on nested <Scene>

[ChristianTucker]

Version

"react-native-router-flux": "^4.0.0-beta.17"
"react-native": "0.47.1"

Expected behaviour

There should only be a single navigation bar for the parent <Scene> which is the tabBar scene. Each individual scene should not return multiple navigation bars.

Actual behaviour

There are two navigation bars, one for the component that is the tabs={true} component and one for the nested <Scene>. You can turn the navigation bar off using hideNavBar for the tabs={true} component and only the navbar for the child component will remain. However, trying to disable the navbar for the child component will disable both navigation bars.

Steps to reproduce

The key being rendered here is home under rootTabController

import React from "react";
import { Actions, Scene, Router } from "react-native-router-flux";
import { View } from "react-native";

class BlankPage extends React.Component {
    render() {
        return (
            <View />
        );
    }
}

export default class NavigationRouter extends React.Component {
    render() {
        return (
            <Router>
                <Scene key="root">
                    <Scene key="splashScreen" hideNavBar={true} component={BlankPage} />

                    <Scene key="signIn" initial={true} component={BlankPage} />

                    <Scene key="welcome" component={BlankPage} hideNavBar={true} />

                    { /* iOS only */ }
                    <Scene key="locationRequest" component={BlankPage} />

                    <Scene key="otherProfile" component={BlankPage} />

                    <Scene key="messenger" component={BlankPage} />

                    <Scene key="rootTabController" tabs={true} hideTabBar={true} initial={true}>
                        <Scene key="profile" component={BlankPage}>
                            <Scene key="settings" component={BlankPage}>
                                <Scene key="blockedUsers" component={BlankPage} />

                                <Scene key="support" component={BlankPage} />

                                <Scene key="termsConditions" component={BlankPage} />

                                <Scene key="privacyPolicy" component={BlankPage} />
                            </Scene>
                        </Scene>

                        <Scene key="home" initial={true} component={BlankPage}>
                            <Scene key="filters" component={BlankPage} />
                        </Scene>

                        <Scene key="chats" component={BlankPage} />
                    </Scene>
                </Scene>
            </Router>
        );
    }
}

[aksonov]

Sorry, but your desired behaviour (common navbar) it is not correct behaviour (atleast for iOS). iOS UI guides requires own navbar for each tab:
http://www.ios-blog.co.uk/tutorials/ios-custom-ui-series-tabbar-navbar/

RNRF does wrapping scene with navbar internally to achieve that.

[aksonov]

Check latest master, set wrap={false} if you don't want to wrap tabs to own navbar

[iiitmahesh]

@ChristianTucker is your problem solved???

[radding]

Hello! I just fixed this issue, even tho I did it a little differently. I put hideNavBar on my root scene and it got rid of the double navBar.

[pinsoneatra]

Quick solution:
on root scene set hideNavBar={true}
on scene you want to show header or navigator back set hideNavBar={false}