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.
Asked: 2022-09-21 11:00:00 +0000
Seen: 14 times
Last updated: Jun 27 '22