0

i learning react native now, and i have case how to hide the buttom nav if their already login and cant back to login activity ? i make some logic before but always error , how i can solve it ? thank you

this my code

 const Icon = async () => {
    if (label === "Home") return isFocused ? <HomeActive /> : <HomeDeactive />
    if (label === "Posts") return isFocused ? <PostActive /> : <Post />
    if (await isAuthenticated() !== null) {
        return isFocused ? <HomeActive /> : <HomeDeactive />
    }
    if (label === "Accounts") return isFocused ? <AccountActive /> : <Account />
    if (label === "Remas") return isFocused ? <MosqueActive /> : <Mosque />
    return <HomeDeactive />
}
werich1
  • 9
  • 4
  • Please add error message – Vasyl Nahuliak Jun 24 '21 at 04:32
  • Because you have not configured navigation correctly auth navigation and your after login navigation should be separate and based on auth state one of them should be active. – Javascript Hupp Technologies Jun 24 '21 at 04:42
  • this the error message i make function "isAuthenticated()" to handle check the token is on asyncstorage or not Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead. – werich1 Jun 24 '21 at 04:44

1 Answers1

0

My answer is going to be based on what I think you are asking, as your questions seems not be clear at the moment.

So, login flow in React Native is like

  1. First, you maintain a state as isUserlogged: false which is false initially.
  2. The user enters the login page of your app by clicking login button or whatever, and you only allow the user to enter the login page if isUserLogged is false by checking the Redux state or async storage, wherever you have stored the state.
  3. User enters their credentials and are logged in
  4. Now, you route them to a different screen and reset this screen, i.e, the login screen from stack. So that, they cannot press the back button in their phone and come back to the login screen.

In react navigation you can do that by following this link: Reset stack

You can use the state isUserLogged to hide the bottom tab.

Blatzo
  • 126
  • 2
  • 7
  • 1
    thank you @Blatzo because of you maybe i didnt using your step but you open my mind to have a driffrent think – werich1 Jun 24 '21 at 05:26