Preventing hardware back button android for React Native

Question

I want to prevent the user from going back to the previous screen. So I added code, but this does not work. Are there any solutions for this? The alert pop up is seen but "return false" does not work.

componentDidMount() {    BackAndroid.addEventListener('hardwareBackPress', () => {      Alert.alert("alert","alert")        this.props.navigator.pop();         return false;    }); 

Answer 1

You need to return true, if you want to disable the default back button behavior.

Here is a sample component which will block the user from going back to previous screen.

import React, {Component,} from 'react'; import {     View,     Text,     BackHandler,     ToastAndroid, } from 'react-native';  class BackButtonDemo extends Component {     componentDidMount() {         BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);     }      componentWillUnmount() {         BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);     }      handleBackButton() {         ToastAndroid.show('Back button is pressed', ToastAndroid.SHORT);         return true;     }      render() {         return (             <View>                 <Text>Back button example</Text>             </View>         );     } }  module.exports = BackButtonDemo; 

Note:

Also remove this.props.navigator.pop(); from your solution.

Navigator pop function will take the user to the previous screen rendered by Navigator.