React-native-router-flux: 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
```

tabs={true}
component={connect(state => ({account: state.account}))(Switch)}
selector={(props)=> props.account.get('connected') ? "tab_bar" : "login"}
>

[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.

[t-nabil]

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

[pvroosendaal]

renderBackButton & onBack are not working for me. I tried setting those in the Scene declaration:

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

Any other ideas?
I'd like to have a push animation, but no back button.

[luco]

@pvroosendaal Try this:

static navigationOptions = {
    headerLeft:null
  }

[pvroosendaal]

Yes, great! That works.
Thanks very much!

On Sun, Aug 13, 2017 at 10:11 PM, Lucas Veiga [e-mail]
wrote:

@pvroosendaal https://github.com/pvroosendaal Try this on you scene:

static navigationOptions = {
headerLeft:null
}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/1517#issuecomment-322064473,
or mute the thread
https://github.com/notifications/unsubscribe-auth/APyvgZvyh4-ThexshJ-qP5L55QfQ-6R-ks5sX1hqgaJpZM4LcV0Q
.

[y2k-shubham]

Sorry for the lame question, but where do I place the above code (static navigationOptions...)?
(I'm new to react-native as well as javascript)

[pvroosendaal]

In the Component class from the Scene, e.g.:

export default class SomeView extends Component {
    constructor(props) {
        super(props)
    }

    static navigationOptions = {
        headerLeft:null
    }
}

[y2k-shubham]

sorry @pvroosendaal, but that didn't work for me

[pvroosendaal]

You’re probably on another version then. Try one of the other solutions mentioned in this thread.

[y2k-shubham]

@pvroosendaal, just restarted the packager and re-ran the app, and it worked!
thanx

furthermore, following solution by @luco at https://github.com/aksonov/react-native-router-flux/issues/2219 also works fine

static navigationOptions = { headerLeft: (<View></View>) }

[pvroosendaal]

Cool! Something I often forget too :)

Btw, the link gives a 404 for me.

[miuel]

hey @pvroosendaal , @aksonov , @MichelKansou I tried whole the different options no one works for me i'm afraid. I'm using "react-native-router-flux": "^4.0.0-beta.22"

renderBackButton={null}
renderBackButton={()=>(null)}
onBack={()=>{}}

`const RouterComponent = () => {
return(

                <Scene key="login" component={LoginForm} hideNavBar />

                <Scene 
                    key="employeeList" 
                    component={EmployeeList} 
                    title={"Employees"} 
                    onBack={()=>{}}
                    renderBackButton={null}
                    renderBackButton={()=>(null)}
                /> 
        </Scene>
    </Router>
)

}

export default RouterComponent;`

Even this object I'm not able to make works on my const RouterComponent ..., any idea ?

static navigationOptions = { headerLeft:null }
thanks...

[shibbyy]

This worked for me Actions.tabBar({type: ActionConst.RESET})

[ghost]

type={ActionConst.RESET} in Scene