React-native-router-flux: Hide drawer/hamburger button in NavBar

Created on 7 Nov 2016  路  7Comments  路  Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

  • react-native-router-flux v3.35.0
  • react-native v0.35

I'm trying to create a tabbar like facebook, last tab opens the drawer.
I have

<Scene key="tabbar" component={NavigationDrawer} open={false}>
    <Scene key="main" tabs={true}>
        TABS...
        <Scene key="tabMore" component={TabView} title="More"  icon={TabIcon} onPress={()=> Actions.refresh({key:"tabbar", open: true})}  />

I dont want the hamburger icon to show up in the navbar. Is there a way of doing this other than creating custom NavBars for the tabsgroups

Thanks in advance.

Most helpful comment

There COULD be a better way, but what I did to remove the hamburber navicon was add this to each/every scene:

renderLeftButton={()=>{}}

I am using tabs so it didn't seem to work when assigning to the tabbar or tab scene, only the individual component scenes. The back button still renders, though, when you go forward. If you want to disable the back button as well, you'll have to set:

renderBackButton={()=>{}}

If there's a better way, I'd love to know. All of the above suggestions didn't work in IOS.

All 7 comments

i have the same issues
could you solve it?

You should pass to the scene the drawerImage prop:

drawerImage={{uri: ''}}

just set the drawerImage to false

Setting the drawer image to either {{uri: ''}{ or {false} will throw a warning.
Instead use: drawerImage={{ uri: null }}.

Hi @activelogic

Setting the drawer image to either {{uri: ''}{ or {false} will throw a warning.
Instead use: drawerImage={{ uri: null }}.

This worked perfectly for me on my Android emulator but on iOS iPhone 6 emulator it is throwing a JSON value <null> error when I run it. Any ideas?

@WebStew - Sorry for the delay. I have not tested my solution on an iPhone emulator (only Android), so cannot confirm whether or not the error is thrown.

There COULD be a better way, but what I did to remove the hamburber navicon was add this to each/every scene:

renderLeftButton={()=>{}}

I am using tabs so it didn't seem to work when assigning to the tabbar or tab scene, only the individual component scenes. The back button still renders, though, when you go forward. If you want to disable the back button as well, you'll have to set:

renderBackButton={()=>{}}

If there's a better way, I'd love to know. All of the above suggestions didn't work in IOS.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

fgrs picture fgrs  路  3Comments

rafaelcorreiapoli picture rafaelcorreiapoli  路  3Comments

wootwoot1234 picture wootwoot1234  路  3Comments

YouYII picture YouYII  路  3Comments

sarovin picture sarovin  路  3Comments