CODEWITHSUNDEEP
react-nativereact-navigation
Cup of Java
Cup of Java

Reputation: 1808

React Navigation navigate away from TabNavigator

I am using React Navigation for my react native application.

My root stack is as follows:

const AuthStack = createStackNavigator({
  Authentication: {
    screen: Authentication,
  },
  Login: {
    screen: Login,
  },
  Register: {
    screen: Register,
  },
});

const AppStack = createStackNavigator({
  Main: {
    screen: Main,
  },
});

export const RootNav = createSwitchNavigator(
  {
    AuthLoading: {
      screen: AuthLoadingScreen,
    },
    App: {
      screen: AppStack,
    },
    Auth: {
      screen: AuthStack,
    },
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

Main is a tab navigator with 3 stack navigators, as follows:

const FeedStack = createStackNavigator({
  Feed: {
    screen: Feed,
  },
});

const ExploreStack = createStackNavigator({
  Explore: {
    screen: Explore,
  },
});

const AccountStack = createStackNavigator({
  Account: {
    screen: Account,
  },
});

const NavBar = createBottomTabNavigator(
  {
    Feed: {
      screen: FeedStack,
    },
    Explore: {
      screen: ExploreStack,
    },
    Account: {
      screen: AccountStack,
    },
  }
}

My problem is with the Account Stack. The logout button in found under the Account screen, but when I call this.props.navigation.navigate('Auth') nothing happens.

I have tried used this.props.navigation.reset() and this.props.navigation.dispatch() but neither of them worked.

Does anyone know how I can switch back into the Authentication stack when the user is logged out?

Upvotes: 2

Views: 3039

Answers (2)

vibhu
vibhu

Reputation: 377

My situation was similar, with drawer when I try to navigate from nested navigation on the home screen directly. it stays on the same screen after pressing on the home button, how can I achieve this here

import bottomnavigation from 'bottomnavigation_file' //bottomtap file code in drawer index file 

    <Drawer.Navigator 
    drawerContent={props => <DrawerContain {...props} />} //DrawerContain 
    different file
       drawerContentOptions={
        {
        // activeTintColor: "#e91e63",
      // itemStyle: { marginVertical: 5 },
    }
    }>
     <Drawer.Screen name="Home" component={bottomnavigation} />

  <Drawer.Navigator >

 //DrawerContain file
 function DrawerContain (){
  const [homenavigation, sethomenavigation] = useState(false)

   const homeNavigation =  (homenavigation)=>{
    sethomenavigation(!homenavigation)
     console.log('navigation home state drawer fun????-------',!homenavigation)
    dispatch(bottom_navigation(!homenavigation))
  // props.navigation.jumpTo('Home')
      homenavigation ? props.navigation.jumpTo('Home') : 
 props.navigation.jumpTo('Home')
  }
  return(
  <DrawerContentScrollView {...props}>
      {/* <DrawerItemList {...props} /> */}
    <Drawer.Section>
    
    
      <Drawer.Item
        icon={home}
        label="Home"
        onPress={() => homeNavigation(homenavigation)}
      />
 </Drawer.Section>
  </DrawerContentScrollView>
 )
  }

 and finally in stack navigatore file where all navigation defined
// StackNavigatore file
 import Home from '../bottomNavigation/index'; //bottom tap define here
 import Home2 from '../bottomNavigation/index1'; // bottom tap duplicate file same

function StackNavigatore({ navigation }) {
  const Bottom_navigation = useSelector(state => state.user.bottom_navigation);

  return <>
     {!Bottom_navigation ? <Stack.Screen
      name="Manijment"
      component={Home} //bottom navigation file
      options={{
        title: '',
        headerShown: false,
      }}
    /> :
    <Stack.Screen
      name="Home2"
      component={Home2 } // duplicate file of bottom navigation render 
  conditionally 
      options={{
        title: '',
        headerShown: false,
      }}
    />}
  </>
 }

Upvotes: 0

tdous
tdous

Reputation: 1608

I think my situation was similar, and there was a recently documented feature which was in the code but the function wasn't being exported, and that was fixed just 5 days ago - it seems to work for me.

Import SwitchActions...

import { SwitchActions } from 'react-navigation;

...and use the jumpTo method:

this.props.navigation.dispatch(SwitchActions.jumpTo({ routeName: 'Auth' }));

I'm doing this in a component nested deep in a stack navigator to get back to a previous screen in a parent switch navigator so maybe it will work for you.

Referenced here: https://reactnavigation.org/docs/en/switch-actions.html#jumpto

Upvotes: 1

Related Questions