CODEWITHSUNDEEP
reactjsreact-native
user3202758
user3202758

Reputation: 21

React Native BackHandler Not Work Properly

I used BackHandler form react native project . i used BackHandler.exitApp() from main page to exit the app when backbutton presed but form every other page when press back button directly exit the app .

Source the main page

export const Start = ({navigation}) => {
useEffect(() => {
    const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        ()=>{
            BackHandler.exitApp()
        }
      );
      return () => backHandler.remove();
},[])};

Source of other page

useEffect(() => {

        setInterval(()=>{
    const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        ()=>{
            navigation.navigate('Start');
        }
      );
       return () => backHandler.remove();


},[]);

Upvotes: 0

Views: 13410

Answers (5)

Jayesh karma
Jayesh karma

Reputation: 19

install npm install @react-native-community/hooks

usage

import { useBackHandler } from '@react-native-community/hooks'

useBackHandler(() => {
  if (shouldBeHandledHere) {
    // handle it
    return true
  }
  // let the default thing happen
  return false
})

this will solve remove method issue and other problems and the main thing

Upvotes: 2

shammi
shammi

Reputation: 1409

you should use like this

export const Start = ({navigation}) => {
  const backAction = () => {
if(navigation.isFocused())
{
  Alert.alert("Hold on!", "Are you sure you want to exit app?", [
    {
      text: "Cancel",
      onPress: () => null,
      style: "cancel"
    },
    { text: "YES", onPress: () => BackHandler.exitApp() }
  ]);
  return true;
}
};

useEffect(() => {
BackHandler.addEventListener("hardwareBackPress", backAction);

return () =>
  BackHandler.removeEventListener("hardwareBackPress", backAction);
 }, [handleBackPress]);
 ...
 ...
}

Upvotes: 1

amit pandya
amit pandya

Reputation: 1388

I am new to React js development, I am sending the answer to react native, surely you will get an idea for proper working.

import { BackHandler } from 'react-native';

componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}

componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}

onBackPress = () => {
    this.props.navigation.goBack();
    return true;
};

Or you can try with the navigation back button as well in the header:

static navigationOptions = ({ navigation }) => ({
    headerLeft: (
        <View style={styles.navIcon} >
            <Icon
                name='arrow-back'
                type='Ionicon'
                color='#01AAEF'
                onPress={() => { navigation.goBack() }}
                size={28} />
        </View>
    )
});

Upvotes: 0

Neelam Soni
Neelam Soni

Reputation: 1351

I was also facing the same issue after upgrading my project to react-navigation v5, then, I saw react-navigation's recommended sub module library react-navigation-backhandler, use it in your start screen, and don't write any back handler listners in other screens.. https://reactnavigation.org/docs/community-libraries-and-navigators/#react-navigation-backhandlerenter code here

import {AndroidBackHandler} from 'react-navigation-backhandler';
export const Start = ({navigation}) => {
useEffect(() => {
    const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        ()=>{
            BackHandler.exitApp()
        }
      );
      return () => backHandler.remove();
},[])

return (
<AndroidBackHandler>
{...elements}
</AndroidBackHandler>
)
};

Upvotes: 0

CevaComic
CevaComic

Reputation: 2104

This is because you're not cleaning the listener:

// main
export const Start = ({navigation}) => {
    const exitApp = () => BackHandler.exitApp()

    useEffect(() => {
    const backHandler = BackHandler.addEventListener("hardwareBackPress", exitApp);
    // cleanup 
    return () => backHandler.removeEventListener("hardwareBackPress", exitApp);
    },[])
};

// other
export const OtherPage = ({ navigation }) => {
    const goToStart = () => navigation.navigate('Start');

    useEffect(() => {
    const backHandler = BackHandler.addEventListener("hardwareBackPress", goToStart);
    // cleanup 
    return () => backHandler.removeEventListener("hardwareBackPress", goToStart);
    },[])
}

Upvotes: 0

Related Questions