App exit on back click on android in react native?

Question

on Android Mi Note 3, hardware back button is not fire the handleBackPress , when I will click on back the app exit.

I have do the following code but the handleBackPress is not called.

 componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

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

  handleBackPress = () => {
    this.goBack(); // works best when the goBack is async
    return true;
  }

Navigation Code :

const ModalSignUp = createStackNavigator(
  {
    Signup: { screen: Signup, key: 'Signup' },
    PartyList: { screen: PartyList, key: 'PartyList' },
    StatesList: { screen: StatesList, key: 'StatesList' },

  },
  {
    initialRouteName: 'Signup',
    headerMode: 'none',
    mode: 'card',
  }
);

Navigate :

this.props.navigation.push("StatesList")

Expected :

back click on hardware button, go to previous screen.

do you want to disable the hardware back button functionality ? — Piyush Govil, Mar 18 '19 at 10:35
No. I don't want to disable. But go for previous screen when tap on hardware back. — Kirit Modi, Mar 18 '19 at 10:38
Have you tested that in other phones? This happens only in Mi Note 3 or others too? — Vencovsky, Mar 18 '19 at 11:18
Yes. I use react navigation. in older version it's. Working. In my oldest App it's fine. — Kirit Modi, Mar 18 '19 at 12:27

score 3 · Answer 1 · edited Dec 10 '19 at 10:46

3

Your error can be in the way you get the next view of react-navigation.

You need to use .push to create a new view on the stack and when you click the back button, the .goBack() will be triggered.

By default, back button will always make the navigation to go back on the stack, but if you have only one view in the stack (this happens when you only use .navigate) the app will exit.

Not sure how you are navigating through the views, but this can be a solution.

Edit: To solve this problem, when navigating through views, use navigation.push('viewname') instead of navigation.navigate('viewname'). You don't need any other method (like the one you put in the question).

Also check the docs to understand the how navigating works or this question

edited Dec 10 '19 at 10:46

Pavel Lint

3,252
1
18
18

answered Mar 18 '19 at 12:35

Vencovsky

28,550
17
109
176

In stacknavigation have four view and I will navigate at the end view. I have added all view back button also. In which goBack() function is implementation. So the design back is fine. But if click on hardware back app is exit. – Kirit Modi Mar 18 '19 at 12:40
but you use `.push` or `.navigate` ? – Vencovsky Mar 18 '19 at 12:45
navigate is used – Kirit Modi Mar 18 '19 at 13:11
@KiritModi please check my anwser, if you want to go back on the back button, use `.push()` instead of `.navigate()`, this is why the app exit instead of going back to the previous view – Vencovsky Mar 18 '19 at 13:14
please show what you changed, the places where you navigate through views – Vencovsky Mar 18 '19 at 14:03
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190247/discussion-between-vencovsky-and-kirit-modi). – Vencovsky Mar 18 '19 at 14:05
1

Thanks for help, finally got the solution. I will answer of it. – Kirit Modi Mar 18 '19 at 14:17
See my answer it's helpful. – Kirit Modi Mar 18 '19 at 14:22

score 2 · Answer 2 · answered Mar 18 '19 at 11:07

2

Try using return false instead of return true.

answered Mar 18 '19 at 11:07

Piyush Govil

358
3
13

This does work on some occasion if you have handled the event well – Charles Dec 10 '19 at 11:39

score 1 · Accepted Answer · answered Mar 18 '19 at 14:21

1. Import

import { BackHandler, DeviceEventEmitter } from 'react-native'

2. constructor

constructor(props) {
    super(props)
    this.backPressSubscriptions = new Set()
  }

3. Add and Remove Listeners

componentDidMount() {
    DeviceEventEmitter.removeAllListeners('hardwareBackPress')
    DeviceEventEmitter.addListener('hardwareBackPress', () => {
        let invokeDefault = true
        const subscriptions = []

        this.backPressSubscriptions.forEach(sub => subscriptions.push(sub))

        for (let i = 0; i < subscriptions.reverse().length; i += 1) {
            if (subscriptions[i]()) {
                invokeDefault = false
                break
            }
        }

        if (invokeDefault) {
            BackHandler.exitApp()
        }
    })

    this.backPressSubscriptions.add(this.handleHardwareBack)
}

componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners('hardwareBackPress')
    this.backPressSubscriptions.clear()
}

4. Handle back

handleHardwareBack = () => {
    this.props.navigation.goBack(null)
    console.log(" ********** This is called ************ ");
    return true;
}

I don't think that you need to do this if you use `.push()` in all of your views. I have an app that use `react-navigation` and it works as you want without doing this. You said it happens in all devices, but i think is something only on specific devices. — Vencovsky, Mar 18 '19 at 14:44

score 0 · Answer 4 · answered Mar 18 '19 at 09:28

Try this:

import {BackHandler} from 'react-native';

export default class Component extends Component {
     _didFocusSubscription;
     _willBlurSubscription;
     constructor(props) {
         super(props);
         this._didFocusSubscription = props.navigation.addListener('didFocus',payload =>
            BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
         ); 
     }
  }
componentDidMount() {
        this._willBlurSubscription = this.props.navigation.addListener('willBlur', payload =>
            BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
        );
 }
componentWillUnmount() {
        this._didFocusSubscription && this._didFocusSubscription.remove();
        this._willBlurSubscription && this._willBlurSubscription.remove();
    }
onBackButtonPressAndroid = () => {
    //code when you press the back button
 };

Yes, I also do same from react-navigation code. but not working also. — Kirit Modi, Mar 18 '19 at 09:51

Hend El-Sahli · Answer 5 · 2019-03-18T13:14:03.370

0

Give it a try... this one works for me: in componentWillUnmount

BackHandler.removeEventListener('hardwareBackPress', () => {});

Also, make sure in each case you check in your this.goBack(); it return something

goback = () => {
   if (condition2) 
     // handling
    return something;

  if (condition2)
   // handling
   return something;

  // default:
  return true;
};

edited Mar 18 '19 at 13:14

answered Mar 18 '19 at 13:08

Hend El-Sahli

6,268
2
25
42

App exit on back click on android in react native?

5 Answers5