Authentication

[salisuabubakar]

Hi @grahammendick,
As part of my migration from RNN and The Navigation Router, I have a login system where i have a stack which show the login screen and another screen which show all my tabs after login success. I have a logout screen inside one of the tabs screen.

How do I navigate back to the login screen when the user logged out.

wirh RNN you specify the root navigation all I have to do is to navigate back to the room which has the login screen.

Please help me get it done with clear example.

Thanks very much for the wonderful library.

[grahammendick]

Hey there. I'm always happy to help.

Can you provide a bit more info, please? After a successful login do you have a stack with 2 scenes, Login → Tabs? Or do you have a stack with just the Tabs scene?

[salisuabubakar]

Hi @grahammendick ,
Below is my example.

const stateNavigator = new StateNavigator([
  { key: 'loginscreen' },
  { key: 'tabs' }
]);

  return (
    <>
      <NavigationHandler stateNavigator={stateNavigator}>
        <NavigationStack>
          <Scene
            backgroundColor={() => Platform.OS === 'android' ? 'black' : 'white '}
            stateKey="loginscreen">
            <LoginScreen />
          </Scene>
          <Scene
            stateKey="tabs">
            <Tabs />
          </Scene>
        </NavigationStack>
      </NavigationHandler>
    </>
  );

My tabs looks like this

  return (
    <>
      <NavigationBar
        hidden={true}
      />
      <TabBar
        primary={true}
        bottomTabs={true}
        labelVisibilityMode='labeled'
        activeIndicatorColor="transparent"
        barTintColor={'rgb(54,53,75)'}
        selectedTintColor={"white"}
        unselectedTintColor={Platform.OS == "android" ? "gray" : ""}
        rippleColor="#000000"
      >

        <TabBarItem title="Home" image={require('../../assets/images/home.png')} onPress={() => console.log("Home Navigated")}>
          <NavigationHandler stateNavigator={stateNavigatorHomeScreen}>
            <NavigationStack>
              <Scene stateKey="homeScreen" backgroundColor={() => Platform.OS === 'android' ? 'black' : 'black'}>
                <HomeScreen />
              </Scene>
              <Scene
                stateKey="watchmovDetScreen1"
                backgroundColor={() => Platform.OS === 'android' ? 'black' : 'black'}
                unmountStyle={from => from ? 'slide_in' : 'slide_out'}
                crumbStyle={from => from ? '' : 'empty'}
              >
                <WatchmovieDetailsScreen />
              </Scene>
            </NavigationStack>
          </NavigationHandler>
        </TabBarItem>

        <TabBarItem title="Search" image={require('../../assets/images/search.png')}>
          <NavigationHandler stateNavigator={stateNavigatorSeasrchScreen}>
            <NavigationStack>
              <Scene stateKey="searchScreen" backgroundColor={() => Platform.OS === 'android' ? 'black' : 'black'}>
                <SearchScreen />
              </Scene>
              <Scene
                stateKey="watchmovDetScreen1"
                backgroundColor={() => Platform.OS === 'android' ? 'black' : 'black'}
                unmountStyle={from => from ? 'slide_in' : 'slide_out'}
                crumbStyle={from => from ? '' : 'empty'}
              >
                <WatchmovieDetailsScreen />
              </Scene>
            </NavigationStack>
          </NavigationHandler>
        </TabBarItem>

        <TabBarItem title="Downloads" image={require('../../assets/images/downloads.png')}>
          <NavigationHandler stateNavigator={stateNavigatorDownloadsScreen}>
            <NavigationStack>
              <Scene stateKey="downloadsScreen" backgroundColor={() => Platform.OS === 'android' ? 'black' : 'black'}>
                <DownloadsScreen />
              </Scene>
              <Scene
                stateKey="watchmovDetScreen1"
                backgroundColor={() => Platform.OS === 'android' ? 'black' : 'black'}
                unmountStyle={from => from ? 'slide_in' : 'slide_out'}
                crumbStyle={from => from ? '' : 'empty'}
              >
                <WatchmovieDetailsScreen />
              </Scene>
            </NavigationStack>
          </NavigationHandler>
        </TabBarItem>

        <TabBarItem title="Profile" image={require('../../assets/images/profile.png')}>
          <NavigationHandler stateNavigator={stateNavigatorProfileScreen}>
            <NavigationStack>
              <Scene stateKey="profileScreen" backgroundColor={() => Platform.OS === 'android' ? 'white' : 'white'}>
                <ProfileScreen />
              </Scene>
            </NavigationStack>
          </NavigationHandler>
        </TabBarItem>
      </TabBar>
    </>
  )

Now am doing this

useEffect(() => {
    hasUserToken ? stateNavigator.navigate('tabs') : stateNavigator.navigate('loginscreen');
  }, [stateNavigator]);

One one of my tabs has profile scene which has a function to logout and after loggin out i want to navigate to the loginScreen. Example of my below :

function ProfileScreen() {
  const { stateNavigator } = useContext(NavigationContext);
  const { crumbs } = stateNavigator.stateContext;


  const callNow = () => {
    Linking.openURL("tel:233551692222")
  }


  const logoutUser = () => {
    stateNavigator.navigateBack(crumbs.length)
  }


function ProfileScreen() {
  const { crumbs } = stateNavigator.stateContext;


  const logoutUser = () => {
    stateNavigator.navigateBack(crumbs.length)
  }
  return (
    <>

      <NavigationBar
        title="Profile"
        titleColor={Platform.OS == "android" ? "white" : "black"}
        barTintColor={Platform.OS == "android" ? "black" : "transparent"}
        navigationAccessibilityLabel="Back"
        tintColor={() => "white"}
        onNavigationPress={() => { stateNavigator.navigateBack(1) }}>
        <StatusBar tintStyle={Platform.OS == "android" ? 'light' : 'dark'} barTintColor={Platform.OS == "android" ? "black" : 'black'} />
      </NavigationBar>

        <View>
        <Pressable
          android_ripple={{ color: '#121212', borderless: false }}
          onPress={logoutUser}
        >
          <Text>
            Logout
          </Text>
        </Pressable>
</View>
         


    </>
  )
}

}

[grahammendick]

Ok, then this will work

const logoutUser = () => {
  stateNavigator.navigate('loginscreen')
}

[salisuabubakar]

Hi,
I get this screen when i logout

[grahammendick]

Oh gotcha. You need to do the navigation in the top level stack. So use your favourite approach to call a function at the top of the tree from a component lower down (React Context, props or a 3rd party state library). Here's an example, using React Context.

const TopContext = React.createContext();

<TopContext.Provider value={{ logout: () => stateNavigator.navigate('loginscreen') }}>
  <NavigationHandler stateNavigator={stateNavigator}>
    ...

Then in the profile screen

const { logout } = useContext(TopContext);

const logoutUser = () => {
  logout();
}

[salisuabubakar]

Hi,
Thanks for your quick responce. Its working perfectly now. Thanks soo much

[see2ever]

just share the root stateNavigator to do this

export const rootStateNavigator = new StateNavigator([
  { key: 'loginscreen' },
  { key: 'tabs' }
]);

rootStateNavigator.navigation('loginscreen')

[grahammendick]

Thanks for suggesting this neat solution.

There’s a subtle but important difference between sharing a stateNavigator and using the one from React Context (NavigationContext).

• Sharing means you navigate first and update React State second
• React Context means you update React State first and navigate second

If the React State update happens second then you can't use React Suspense, for example. With Suspense, React might throw away the render so the navigation mustn't happen until React flushes the changes.

[see2ever]

gotcha, thanks for the explain