Remove back button for drawer page using react-native-router-flux

Question

I've been trying to create an app to learn react native, which has a login interface where upon successful authentication, the user gets redirected to a homepage with navigation drawer - the standard for most mobile apps today.

I've used react-native-router-flux and react-native-drawer-layout to implement this.

I got the drawer working but once I get to homepage (Recipes) from login page I can see a back button being shown, and I can't seem to set a drawer icon as stated in the react-native-drawer-layout API no matter what I try.

I think the problem is with my Router, the scenes defined for this particular scenario is as follows.

const App = () => {
  return (
    <Router navigationBarStyle={styles.navBar}
            titleStyle={styles.navTitle}
            sceneStyle={styles.routerScene}
            barButtonIconStyle={styles.barButton} >
      <Scene key="root">
        <Scene key="login"
          component={Login}
          title="Login"
          hideNavBar = {true}
          initial

        />
         <Scene
          key="recipes"
          component={Recipes}
          title="Recipes"
          hideNavBar = {false}
          hideBackImage = {false}
          //backButtonImage = {require('image!ui_nav_bar_hamburgher_icon')}
          onBack = {() =>{return null;}}
          rightTitle = "Bad Hombres"
          onRight = {() => { Alert.alert(
            'No puppet, No puppet',
            'You\'re the puppet!',)}}
          leftTitle ="Bigly"
          onLeft = {() => {Alert("Such a nasty woman..")}}
         // leftButtonImage={require('image!ui_login_email_icon')}

          panHandlers ={null}
        />
      </Scene>

    </Router>
  );
}

Can someone please help me figure out what I'm missing here? Appreciate it a lot.

```backButtonImage = {require('image!ui_nav_bar_hamburgher_icon')}``` doesn't work anymore. Try with ```backButtonImage = {require('../path/to/your/image')}``` — G. Hamaide, Oct 24 '16 at 13:14

score 0 · Answer 1 · answered Nov 16 '16 at 07:22

0

I was used renderLeftButton to render drawer menu. You should use renderBackButton= { null } to hide back button. Document here https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md

answered Nov 16 '16 at 07:22

Học Thiết kế OniVn

13
3

score 0 · Answer 2 · answered Jun 10 '17 at 01:30

0

use hideBackImage prop on Scene component

answered Jun 10 '17 at 01:30

Mohamed Khalil

3,036
1
20
26

Inamur Rahman · Answer 3 · 2020-03-11T09:09:58.610

I was trying to remove the back button and I finally found it. There are two scenario. First Import the View from react-native. If you want to remove the 'Back Text' title and want only arrow back button.

import { View } from 'react-native';

<Scene key="home" component={FooterMenu} title="User Home" renderBackButton={()=>null} />

If you want to remove everything.

<Scene key="home" component={FooterMenu} title="User Home" renderBackButton={()=><View/>} />

Remove back button for drawer page using react-native-router-flux

3 Answers3