How can the default back navigation be avoided when utilizing expo-router?

edit

The default back navigation can be avoided when using Expo Router by either disabling the back button or by overriding the default back navigation behaviour.

To disable the back button, the developer can use the following code:

import { BackHandler } from 'react-native';

export default class MyComponent extends React.Component {
  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }

  handleBackButton = () => {
    // Do nothing to disable the back button
    return true;
  };

  render() {
    ...
  }
}

Alternatively, to override the default back navigation behaviour, the developer can use the NavigationActions API provided by React Navigation to navigate to a specific screen. For example:

import { NavigationActions } from 'react-navigation';

...

const navigateToScreen = (screenName: string) => {
  const navigateAction = NavigationActions.navigate({
    routeName: screenName,
  });

  this.props.navigation.dispatch(navigateAction);
}

...

// Call `navigateToScreen` to navigate to a different screen

With these techniques, the default back navigation behaviour can be avoided when using Expo Router.