React native - prevent user from going back to login screen

Question

I've created a Login button using Facebook SDK. Once the user is logged in, the app navigates to the second screen (NavigatorIOS). From that second screen the user can go back to the login screen using the navigation (back button).

How can I prevent the user from going back to the Login screen if he is already logged in?

index.ios.js

import React, { Component } from 'react'

import {
  AppRegistry,
  StyleSheet,
  NavigatorIOS
} from 'react-native'

import LoginView from './src/login-view'

class MyApp extends Component {
  render() {
    return (
      <Provider store={store}>
        <NavigatorIOS
          initialRoute={{
            component: LoginView,
            title: 'MyApp',
            index: 0
          }}
        />
      </Provider>
    );
  }
}
AppRegistry.registerComponent('MyApp', () => MyApp);

LoginView

import React, {Component} from 'react'
import {
    View,
    Text,
    StyleSheet,
    TouchableHighlight,
} from 'react-native'

import CategoryView from './category-view'

import {LoginButton, AccessToken, GraphRequest, GraphRequestManager} from 'react-native-fbsdk'

class LoginView extends Component {
    goToCategoryView = () =>
        this.props.navigator.push({
            title: 'Categories',
            component: CategoryView,
        })

    render(){
        return(
            <View style={styles.container}>
                <LoginButton
                    readPermissions={['public_profile','email']}
                    onLoginFinished={
                        (error, result) => {
                            if (error) {
                                console.log('login has error: ', result.error)
                            } else if (result.isCancelled) {
                                console.log('login is cancelled.')
                            } else {
                                AccessToken.getCurrentAccessToken().then((data) => {    
                                    this.goToCategoryView()
                                })
                            }
                        }
                    }
                    onLogoutFinished={() => {console.log('logged out')}} />
            </View>
        )
    }
}

export default LoginView

Answer 1

Using Navigator, you can use resetTo(startingRoute) method to reset the stack and start a new one from the route you past as a parameter. Doing this you will prevent to navigate back in the stack.

If I'm not misunderstanding your component, you should use something like this:

goToCategoryView = () => {
    //Replace here push with resetTo
    this.props.navigator.resetTo({
        title: 'Categories',
        component: CategoryView,
    })
}

Facebook Docs

Answer 2

navigation.reset({
  index: 0,
  routes: [{ name: 'SCREEN_NAME' }],
});

This is as of August 28, 2020, and react Navigation 5,

You can read more about it here => https://reactnavigation.org/docs/navigation-prop/#reset

Answer 3

Like you said "One last question on the topic - once user is logged in, if I refresh the simulator, it goes back to Login screen showing Facebook continue button. Is it possible to also prevent going back to that screen on refresh/reload?"

If you are using token based auth, then store user token in AsyncStorage by AsyncStorage.setItem("jwtToken", token) then check it using AsyncStorage.getItem('jwtToken') if token exist redirect user to main screen else login screen

// Fetch the token from storage then navigate to our appropriate place
const userToken = await AsyncStorage.getItem('jwtToken');


//set auth token header auth 
setAuthToken(userToken);
// // decode token and get user and experire
const decoded = jwt_decode(userToken);

// set user and isAuthenticated
// this will help you to login as current user
store.dispatch(setCurrentUser(decoded)); 

// This will switch to the App screen or Auth screen and this loading
//check if token is there or not

if (userToken === null) {

  //else logout to login page
  Actions.login()
  console.log(userToken)


} else {

  //if token then redirect to main screen
Actions.main()
console.log(userToken)

}

Answer 4

How about pop() the login screen off first, then push() the new screen on or try replace()? [https://facebook.github.io/react-native/docs/navigator.html]

One more thing, you should do a check on the login screen to see if the user is logged in and show sign out instead of login. (If you are using redux to store the user token, you can check if the token exists and still valid)