I'm attempting to implement login/logout functionality with my app, using ex-navigation:

render() {
    return (
      <TabNavigation tabBarHeight={56} initialTab="devices">
        <TabNavigationItem
          id="devices"
          renderIcon={isSelected => this._renderIcon('hdd-o', isSelected)}>
          <StackNavigation initialRoute="devices" defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#B67075',
                                   tintColor: 'white',
                                 },
                               }}/>
        </TabNavigationItem>

        <TabNavigationItem
          id="rules"
          renderIcon={isSelected => this._renderIcon('book', isSelected)}>
          <StackNavigation initialRoute="rules" defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#B67075',
                                   tintColor: 'white',
                                 },
                               }}/>
        </TabNavigationItem>
        <TabNavigationItem
          id="settings"
          renderIcon={isSelected => this._renderIcon('cog', isSelected)}>
          <StackNavigation initialRoute="settings" defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#B67075',
                                   tintColor: 'white',
                                 },
                               }}/>
        </TabNavigationItem>
      </TabNavigation>

However, if I attempt to logout when on one of the TabNavigationItem Screens, the page WITHIN the tab navigation logs out, rather than the entire page. Basically, I have a logout button on the settings page (the third tab) and when I logout, that tab goes back to the login screen while the tab bar still remains. This is the function within that settings ponent:

logout = () => {
    firebase.auth().signOut().then(() => {
      this.props.navigator.push(Router.getRoute('goodbye'));
}).catch(function(error) {
  // An error happened.
});
  }

Is there a different navigator function to navigate from the entire tab view? Is there a listener or something I should add to the parent Tab Navigation ponent?

I'm attempting to implement login/logout functionality with my app, using ex-navigation:

render() {
    return (
      <TabNavigation tabBarHeight={56} initialTab="devices">
        <TabNavigationItem
          id="devices"
          renderIcon={isSelected => this._renderIcon('hdd-o', isSelected)}>
          <StackNavigation initialRoute="devices" defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#B67075',
                                   tintColor: 'white',
                                 },
                               }}/>
        </TabNavigationItem>

        <TabNavigationItem
          id="rules"
          renderIcon={isSelected => this._renderIcon('book', isSelected)}>
          <StackNavigation initialRoute="rules" defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#B67075',
                                   tintColor: 'white',
                                 },
                               }}/>
        </TabNavigationItem>
        <TabNavigationItem
          id="settings"
          renderIcon={isSelected => this._renderIcon('cog', isSelected)}>
          <StackNavigation initialRoute="settings" defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#B67075',
                                   tintColor: 'white',
                                 },
                               }}/>
        </TabNavigationItem>
      </TabNavigation>

However, if I attempt to logout when on one of the TabNavigationItem Screens, the page WITHIN the tab navigation logs out, rather than the entire page. Basically, I have a logout button on the settings page (the third tab) and when I logout, that tab goes back to the login screen while the tab bar still remains. This is the function within that settings ponent:

logout = () => {
    firebase.auth().signOut().then(() => {
      this.props.navigator.push(Router.getRoute('goodbye'));
}).catch(function(error) {
  // An error happened.
});
  }

Is there a different navigator function to navigate from the entire tab view? Is there a listener or something I should add to the parent Tab Navigation ponent?

• javascript
• firebase
• react-native
• firebase-authentication
• ex-navigation

2 Answers 2

This is how i deal with Logging IN/OUT of the app. In the Main.js or App.js i add this

signout(){
   AsyncStorage.clear(); // to clear the token 
   this.setState({loggedIn:false});
}

... in ponentWillMount

 AsyncStorage.getItem('token').then((token) => {
      if (token) {
        this.setState({loggedIn: true})
      } else {
        console.log('No user yet Created');
      }
  })

... in the render function add these

if (this.state.loggedIn) {
    // pass the signout function to where you want to signout from.
    return <MainNavigator signOut={this.signout.bind(this)} />;    
}
    return <AuthPage/>;
}

Hope this helps!

You should have the login page without the Tab Navigation, so from App.js / index.js you load the login page.

<NavigationProvider router={AppRouter}>
  <StackNavigation
    id="root"
    initialRoute={Router.getRoute('login')}
  />
</NavigationProvider>

Router.js

export const Router = createRouter(() => ({
  'login': () => Login,
  'main': () => Main,
})

Then if you want to go to main (page with tab navigation) from login, you should reset the page instead of push to handle back button in android (of course you wouldn't want back to go back to login page after yo log in)

add this to login function

this.props.navigator.immediatelyResetStack([Router.getRoute('main')], 0);

Then on setting page, instead of using push from the navigator you should reset the navigator

logout = () => {
  firebase.auth().signOut().then(() => {
    this.props.navigator.immediatelyResetStack([Router.getRoute('goodbye')], 0);
  }).catch(function(error) {
    // An error happened.
  });
}

This way you have your own stack navigator for tab item, and stack navigator for page navigation (login to tab navigation page, back to login, or to goodbye page)