Disable backButton from navigationBar on tabs

[matiasfha]

I have the following set.

• initial Scene a login screen
• second Scene is a tabbar
  • Accounts Scene
  • Pendings Scene

Use case:

• User will always need to go to login screen so login Scene is marked as initial and have a navigationBar only with title
• After login, user navigate (automatically) to Accounts tab.
• User should not be able to go back to login page.

With my current setup. the Accounts tab (and the other one too) shows a back button if I tap that, I get back to login screen.

How can I disable that behavior?

<Router>
    <Scene key="root">
      <Scene
        key="loginPage"
        component={LoginPage}
        title="Iniciar Sesión"
        initial
        navigationBarStyle={{ backgroundColor: primaryBlue }}
        titleStyle={{ color: white }}
        panHandlers={null}
      />
      <Scene
        key="tabbar"
        tabs
        tabBarStyle={{ backgroundColor: white,
          borderTopWidth: 0.5,
          borderColor: lightGray,
          opacity: 1 }}
        renderBackButton={null}
      >
        <Scene
          key="saldos"
          component={SaldosPage}
          title="Saldos"
          navigationBarStyle={{ backgroundColor: primaryBlue }}
          titleStyle={{ color: white }}
          icon={TabIcon}
        />
        <Scene
          key="other"
          component={SaldosPage}
          title="Other"
          navigationBarStyle={{ backgroundColor: primaryBlue }}
          titleStyle={{ color: white }}
          icon={TabIcon}
        />
      </Scene>
    </Scene>
  </Router>

Version

• react-native-router-flux v3.37.0
• react-native v0.39.2

[AndrewHenderson]

@msdark Put renderBackButton={()=>(null)} on the "saldos" Scene.

[MichelKansou]

@AndrewHenderson renderBackButton={null} not working for me

[MichelKansou]

@AndrewHenderson here's my rooter when I login in android it work fine but in iOS I always have the back button

            <RouterWithRedux>
                <Scene key="root"
                    tabs={true}
                    component={connect(state => ({account: state.account}))(Switch)}
                    selector={(props)=> props.account.get('connected') ? "tab_bar" : "login"}
                    >
                    <Scene key="login" component={Auth} hideNavBar={true}/>
                    <Scene key="tab_bar" tabs={true} tabBarStyle={(Platform.OS === 'android') ? styles.androidtabBarStyle : styles.iOSTabBarStyle}>
                        <Scene key="home" component={Home} title="Home" hideNavBar={(Platform.OS === 'android')} iconSource={images.icons.home} icon={TabIcon} renderBackButton={null}/>
                        <Scene key="profile" component={Profile} title="Profile" hideNavBar={(Platform.OS === 'android')} iconSource={images.icons.profile} icon={TabIcon}/>
                        <Scene key="settings" component={Profile} title="Settings" hideNavBar={(Platform.OS === 'android')} iconSource={images.icons.settings} icon={TabIcon}/>
                    </Scene>
                </Scene>
            </RouterWithRedux>

[AndrewHenderson]

@MichelKansou I believe the type should a function not an object. Try, renderBackButton={()=>(null)}.

[RobinJayaswal]

Just what I was looking for @AndrewHenderson, thank you!

[MichelKansou]

@AndrewHenderson it's working thank you 👍

[bishalshr]

renderBackButton is not working on v4. Are there any changes?

[aksonov]

@bishalshr It seems to be a bug, could you create an issue?

[bishalshr]

@aksonov is there any way to disable the action buttons? I want to disable the buttons when user saves the form.

[aksonov]

Maybe passing empty function ? onBack={()=>{}}

[bishalshr]

Great. It worked. Thank you.
But there are not mentions of onBack in the doc.

[aksonov]

Thanks for the feedback. Feel free to submit PR or we will do it later.

[tarek-hanna]

In RNRF v4.0 : you can use type={ActionConst.REPLACE} ... > Iam not sure if it will work on older versions.