How can I navigate from login screen to a bottomtab screen?

michael collins 0
Viewed 37

How can I navigate to a bottomtab screen rather than a stack screen? The goal is to take the user to the main home page onPress of the sign in button. I initially created a Stack.Screen and added the homescreen component but that crashed the header and the bottom tab navigation and there was also the back button in the header which isn't supposed to be because the home screen is the main screen. Is there a way to navigate to the bottom tab screen from the sign in component? I'm a beginner by the way and also not so good at using stack overflow

react-native
2 Answers

if you're using react router than this may possible with useNavigate() and Link. Also you can add custom javascript window.location.href ="/pagename"

Usage of useNavigate() before return of function-

const navigate = useNavigate()
onClick = (e)=>(
e.preventDefault()
navigate('/home')
)

Usage of Link inside body-

<Link to="/home"></Link>

Usage of custom javascript inside body-

<button onClick = (()=>window.location.href="/home"))>Click me</button>

Hope you'll like the answer. But if you still face any issue just lemme know.

Varun Kaklia0

I suggest you to try an Authentication flow approch written by 'React-Navigator' API.

The main idea of that is using 2 Navigators.

  1. Stack Navigator for 'Login'
  2. Tab Navigator for pages which logged in users can see

However, to make this flow available, you need to add Global State Management library like Redux / React Context to handle which navigator is showing. Once the state is set, the app will auto select the navigator used. You don't need to call any function for navigation.

<NavigationContainer>
    <Stack.Navigator>
    {
        !redux.isLoggedIn ?
        <Stack.Group>
            <Stack.Screen 
               name="auth" 
               component={Auth}
            />
        </Stack.Group>
        :
        <Stack.Group>
            <Stack.Screen
               name="home"
               component={YourHomeTabNavigator}
            />
        </Stack.Group>
    }
    </Stack.Navigator>
</NavigationContainer>
Peter Tam0
Related