Back Button React native exit app
We can add subscriptions for didfocus inside our main App Container.We can add our logic to check for button tapped with a static variable.
import { Alert, BackHandler, ToastAndroid } from 'react-native';
import { StackActions } from 'react-navigation';
import { Toast } from 'native-base';
// common statless class variable.
let backHandlerClickCount = 0;
class App extends React.Component {
constructor(props) {
super(props);
// add listener to didFocus
this._didFocusSubscription = props.navigation.addListener('didFocus', payload =>
BackHandler.addEventListener('hardwareBackPress', () => this.onBackButtonPressAndroid(payload)));
}
// remove listener on unmount
componentWillUnmount() {
if (this._didFocusSubscription) {
this._didFocusSubscription.remove();
}
}
onBackButtonPressAndroid = () => {
const shortToast = message => {
// ToastAndroid.showWithGravityAndOffset(
// message,
// ToastAndroid.SHORT,
// ToastAndroid.BOTTOM,
// 25,
// 50
// );
// ios & android
Toast.show({
text: message,
type: 'warning',
position: 'top',
duration: 3000,
});
}
const {
clickedPosition
} = this.state;
backHandlerClickCount += 1;
if ((clickedPosition !== 1)) {
if ((backHandlerClickCount < 2)) {
shortToast('Press again to quit the application!');
} else {
BackHandler.exitApp();
}
}
// timeout for fade and exit
setTimeout(() => {
backHandlerClickCount = 0;
}, 2000);
if (((clickedPosition === 1) &&
(this.props.navigation.isFocused()))) {
Alert.alert(
'Exit Application',
'Do you want to quit application?', [{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
}, {
text: 'OK',
onPress: () => BackHandler.exitApp()
}], {
cancelable: false
}
);
} else {
this.props.navigation.dispatch(StackActions.pop({
n: 1
}));
}
return true;
}
}
If your HomeScreen is still mounted when you navigate to other screens or while unmounting the HomeScreen
if you don't remove the EventListener it will be still called.
You should clear the EventListener on navigate or unmount,
onButtonPress = () => {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
// then navigate
navigate('NewScreen');
}
handleBackButton = () => {
Alert.alert(
'Exit App',
'Exiting the application?', [{
text: 'Cancel',
onPress: () = > console.log('Cancel Pressed'),
style: 'cancel'
}, {
text: 'OK',
onPress: () = > BackHandler.exitApp()
}, ], {
cancelable: false
}
)
return true;
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
If you don't want the Alert message to appear in other component/screen but only in one specific component/screen, you can follow this.
import { withNavigationFocus } from 'react-navigation';
class TestComponent extends Component {
componentWillMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
handleBackButton = () => {
if (this.props.isFocused) {
Alert.alert(
'Exit App',
'Exiting the application?',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
},
{
text: 'OK',
onPress: () => BackHandler.exitApp()
}
],
{
cancelable: false
}
);
return true;
}
};
}
export default withNavigationFocus(TestComponent );
The BackHandler that will show an Alert message will only work in TestComponent