React Navigation logout button on TabNavigator

user_7038190 0
Viewed 7289

i have a TabNavigator inside a StackNavigator (in the StackNavigator I have the login view and the TabNavigator, wich contains the other screens). The problem is that I have to make something like a 'Logout' button on a Tab that just redirect to the Login view. If I try to simply redirect to the LoginView, the TabBar still appearing on the bottom of the screen and that's not what I want. Is there any way to click on the TabBar button and return to the initial StackNavigator? (Like an OnPress property or something like that).

Here is my router

const tab_bar = TabNavigator({
      Home: {
        screen: HomeScreen
      },
      Logout: {
        screen: LoginView  // this just show the view but the tabBar still appearing
      },
    });

const Login = StackNavigator({
  login: {
    screen: LoginView,
  },
  List: {
    screen: tab_bar
    ,navigationOptions: {header:null}
  }
},
{
  initialRouteName: 'login'
});
tabnavigator react-navigation react-native
1 Answers

Done! Using the tabBarOnPress property and the Navigation Actions.

const tab_bar = TabNavigator({  // This tabNavigator is inside a stackNavigator, wich contains the 'login' view
   Home: {
     screen: Home
   },
   Logout: {
     screen: Logout     // Empty screen, useless in this specific case
       ,navigationOptions: ({navigation}) => ({
           tabBarOnPress: (scene, jumpToIndex) => {
               return Alert.alert(   // Shows up the alert without redirecting anywhere
                   'Confirmation required'
                   ,'Do you really want to logout?'
                   ,[
                     {text: 'Accept', onPress: () => { navigation.dispatch(NavigationActions.navigate({ routeName: 'login' }))}},
                     {text: 'Cancel'}
                    ]
               );
           },
       })
    },
});

When the user clicks the logout button on the tabBar displays an Alert to confirm the action, then if the user accepts redirect to the login view.

NOTE (22/09/2017): To use the tabBarOnPress property download the master branch version (not the version from NPM yet).

user_70381900
Related