React-native-router-flux: How to hide navbar?

Use it for 'Router', not for 'Route'. PR for documentation is welcome :)

I have tried that too, doesn't remove the navbar :/

Let me check

Are you sure you removed root navbar first?

Otherwise it will be visible if you are hide child ones...

Just to be sure, I add it in most possible places

Android or iOS? I've just modified demo, added flag to Login and doesn't see navbar there normally:
Or you want to hide "Launch" navbar? Then probably 'wrapRouter' doesn't pass it to inner Router, i will fix it.

            <Route name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="register" component={Register} title="Register"/>
            <Route name="home" component={Home} title="Replace" type="replace"/>
            <Route name="login" schema="modal">
                <Router showNavigationBar={false}>
                    <Route name="loginModal" component={Login} title="Login" schema="modal"/>
                    <Route name="loginModal2" component={Login2} title="Login2"/>
                </Router>
            </Route>
            <Route name="register2" component={Register} title="Register2"  schema="withoutAnimation"/>
            <Route name="tabbar">
                <Router footer={TabBar} showNavigationBar={false}>
                    <Route name="tab1" schema="tab" title="Tab #1" >
                        <Router>
                            <Route name="tab1_1" component={TabView} title="Tab #1_1" />
                            <Route name="tab1_2" component={TabView} title="Tab #1_2" />
                        </Router>
                    </Route>
                    <Route name="tab2" schema="tab" title="Tab #2" component={TabView} />
                    <Route name="tab3" schema="tab" title="Tab #3" component={TabView} />
                    <Route name="tab4" schema="tab" title="Tab #4" component={TabView} />
                    <Route name="tab5" schema="tab" title="Tab #5" component={TabView} />
                </Router>
            </Route>
        </Router>

Check 1.0.2 version, i've disabled nav bar for 'launch' screen within Example also.

Worked like a charm. Thanks!

This works to me!

  <Router hideNavBar={true} >

Also works.

I tried the above code from lakmalniranga, but header still takes a spot.
https://snag.gy/91aXTj.jpg

hideNavBar={true} :D

work !!!! thanks @lakmalniranga

<Scene key="SplashSCreen" component={SplashSCreen}  title="splash" hideNavBar={true} initial/>

We don't even need to assign hideNavBar a value of true.
If we mention it then it simply means we are giving it a value of true rather than being undefined.
Just adding for future users referring to this issue.

<Scene 
key="SplashSCreen" 
component={SplashSCreen}  
title="splash" 
hideNavBar
 initial
/>

any ideas why when using hideNavBar it still appears

@Omarkojak You gave the Router a paddingTop of 65. That means every scene gets a paddingTop of 65 whether they have titles (navbar) or not.

ok fixed sorry for that

There are any way to not only hide the navbar, but also remove it? Even hidden, it still taking up space on the screen.

it still appears,I can not see why

any update on this? even if hide the nav still takes some space there

@MehranJanfeshan Are you talking about v4 version?

@aksonov Thanks for the reply, I got the version 4 but I am getting this error:

[react-native-router-flux] props should be defined

Check breaking changes first

13 июля 2017 г., в 18:22, MehranJanfeshan notifications@github.com написал(а):

@aksonov Thanks for the reply, I got the version 4 but I am getting this error:

[react-native-router-flux] props should be defined

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

@aksonov I found that in the old version I was able to do this:
<Router sceneStyle={{margin:0}} hideNavBar={true}> <Scene key="auth"> <Scene key="login" component={AuthScreen}/> </Scene> <Scene key="main"> <Scene onRight={() => Actions.auth()} rightTitle="Log out" key="newOrderList" component={EmployeeList} title="New Orders" initial /> <Scene key="orderDetails" component={OrderDetails} title="Order Details"/> </Scene> </Router>

but after I moved to version 4 I cannot do that so I changed to this and it worked:

<Router sceneStyle={{margin:0}} hideNavBar={true}> <Scene key="auth"> <Scene key="login" component={AuthScreen}/> <Scene onRight={() => Actions.auth()} rightTitle="Log out" key="newOrderList" component={EmployeeList} title="New Orders" initial /> <Scene key="orderDetails" component={OrderDetails} title="Order Details"/> </Scene> </Router>

but this not what I want, I want to able to categorize the Scene, is there any other alternative?

I don't understand the problem. Please check Example and try to reproduce your issue there.

13 июля 2017 г., в 18:45, MehranJanfeshan notifications@github.com написал(а):

@aksonov I found that in the old version I was able to do this:

but after I moved to version 4 I cannot do that so I changed to this and it worked:

but this not what I want, I want to able to categorize the Scene, is there any other alternative?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

here is my code that works perfectly in version 3 but when I upgraded to version 4 I got this error:
[react-native-router-flux] props should be defined
so I removed the part that is surrounded by the blue line and it works fine.

Wrap it with one root scene.

13 июля 2017 г., в 18:55, MehranJanfeshan notifications@github.com написал(а):

here is my code that works perfectly in version 3 but when I upgraded to version 4 I got this error:
[react-native-router-flux] props should be defined
so I removed the part that is surrounded by the blue line and it works fine.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

if I wrap it with one root scene then how I can control the back button? I do not want the user to be able to back to the login page, that' why I used to Scene.

It is not question about RNRF but more about your application structure. I guess you need to use tabs or disable back button (mark it with 'init' attribute) or use 'replace' type. Check Example.

Actually v3 just wrapped multiple scenes into one, so you will not see any back button (because you hide parent navbar)

@aksonov Thanks for the help and thanks for the great job :)

this worked for me : <Scene key="homeScreen" component={mainScreen} hideNavBar={1} />

You could just use <Scene key="homeScreen" component={mainScreen} hideNavBar />

@lakmalniranga this worked for me, thanks!

Works

const RouterComponent = () => (
    <Router headerMode="none">
        <Stack key="main">
            <Scene 
                key="login" 
                component={Login} 
            />
        </Stack>
    </Router>
);

@ahmetilhann Thanks! Removes all headers of child Scenes in the Router, still works as of v4.0.0-beta.3.

@ahmetilhann thanks so much! maybe the older way only works on pre 4.0 RN? I'm on 4.0.6 and headerMode="none" works

Upgraded my project to RN0.59.10, however still using react-native-router-flux for Router and Scene. And having this white header bar issue. Took me for days, all the while I suspected it was due to react-navigation and managed to turn it off but still there is another header blocking the view, then only I thought of may be due to react-native-router-flux. @ahmetilhann method is WORKING. Set headerMode="none" at Router, life saver!!!

This works to me!

to the point

Hello,
using the hideNavBar makes the hole components disappear.
Here is my code :

<Router>
                <Stack key="root" >
                    <Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
                    <Scene key="signup" component={Signup} title="Signup" />
                </Stack>
</Router>

What could be the cause?

Hello,
using the hideNavBar makes the hole components disappear.
Here is my code :

<Router>
                <Stack key="root" >
                    <Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
                    <Scene key="signup" component={Signup} title="Signup" />
                </Stack>
</Router>

What could be the cause?

I have the same issue as well.