Disable going back in react-native using react-navigation

Question

I have been a lot of time searching and trying different stuff to disable going back once the "user" is logged in but it seams that NavigationActions does not work. This is the code:

import { NavigationActions } from 'react-navigation';

const actionToDispatch = NavigationActions.reset({
    index: 0,
    actions: [NavigationActions.navigate('DrawerNavigator')] // Array!
  })

export default class LoginScreen extends React.Component {
    constructor(props) {
        super(props);
      }


  render() {

    return (
        <RkAvoidKeyboard
        style={styles.screen}
        onStartShouldSetResponder={ (e) => true}
        onResponderRelease={ (e) => Keyboard.dismiss()}>
        <View style={styles.content}>
            <Button title="Complete Login" onPress={()=>this.props.navigation.dispatch(actionToDispatch)}/>
          </View>
      </RkAvoidKeyboard>
    );
  }
}

I shrinked a little bit the code. What happens is that the dispatch actions does not work. And also I get the error: undefined is not a function(evaluating '_reactNavigation.NavigationActions .......) so it does not even compile. I have the last version of React-navigation(2.12.0).

score 4 · Accepted Answer · answered Aug 27 '18 at 15:15

First of all, reset action is not inside NavigationActions, so you have to change your NavigationActions.reset to StackActions.reset (docs here).

What I do in that case is to StackActions.replace instead of NavigationActions.navigate. What replace do is like unmount current view and mount the given one, so when user wants to goBack() from first screen (logged in) it quits the app instead of navigating back to Login.

Disable going back in react-native using react-navigation

1 Answers1