React Native - How to detect home button is pressed or not?

Question

I can know when the scene is on screen using following code:

this.subs = [
   this.props.navigation.addListener('didFocus', this.loadOfflineData)
];

But , if I want to detect when scene is out of focus. I 'm wondering what should I do .

Basically I want to detect if the user press home button and then I want to perform some action.

Any suggestions.

You can use [AppState](https://facebook.github.io/react-native/docs/appstate) to determine whether the app is in the background. — Andrew, Mar 04 '19 at 10:26

score 2 · Answer 1 · answered Mar 04 '19 at 10:36

2

You can use AppState to know when an app is put into the background.

AppState can tell you if the app is in the foreground or background, and notify you when the state changes.

Here is a simple example of using AppState:

import React, {Component} from 'react';
import {AppState, Text} from 'react-native';

class AppStateExample extends Component {
  state = {
    appState: AppState.currentState,
  };

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    if ( this.state.appState.match(/inactive|background/) && nextAppState === 'active' ) {
      console.log('App has come to the foreground!');
    } else {
      console.log('App has gone to the background!');
      // start your background task here
    }
    this.setState({appState: nextAppState});
  };

  render() {
    return <Text>Current state is: {this.state.appState}</Text>;
  }
}

answered Mar 04 '19 at 10:36

Andrew

26,706
9
85
101

The above solution is not working on Android when clicked on home button. According to documentation the inactive won't call for Android. Any ideas on how to achieve this on Android? – Sri Aug 21 '20 at 16:58
You are correct that cannot get `inactive` for Android, as `inactive` is an iOS state. You probably won't be able to replicate an iOS method in Android. You can see the java code used for AppState [here](https://github.com/facebook/react-native/blob/c4806fada6532894e2242cf31f7145d2992e3a2b/ReactAndroid/src/main/java/com/facebook/react/modules/appstate/AppStateModule.java#L73), onPause causes the background notification to be sent. I don't see where the inactive would/could be sent. – Andrew Aug 21 '20 at 17:28
on Android when I clicked on home button, it minimizes the app to background and home screen appears on the front, in this case the change event listener is not getting invoked. How to capture that event of home button click on android? – Sri Aug 21 '20 at 18:27

Daan Seuntjens · Answer 2 · 2019-03-04T13:08:20.790

I've done this with android and java using the android lifecycle. This should work in React Native (see EDIT down below). the developer.android.com forum: this page

In short:

onCreate(): a user opens your app for the first time
onStart(): app restarts
onResume(): a user opens your app while it was active in the background
onPause(): app goes out of focus
onStop(): app is no longer visible
onDestroy(): activity will be destroyed

In your case you should use onPause()

So a little code snippet for in java:

@Override
public void onPause() {
    super.onPause();

//do something

}

EDIT:

This answer tells you how to detect onPause and onResume in Reacte Native.

Code in that answer:

 import React, {Component} from 'react'
 import {AppState, Text} from 'react-native'

 class AppStateExample extends Component {

   state = {
     appState: AppState.currentState
   }

   componentDidMount() {
     AppState.addEventListener('change', this._handleAppStateChange);
   }

   componentWillUnmount() {
     AppState.removeEventListener('change', this._handleAppStateChange);
   }

   _handleAppStateChange = (nextAppState) => {
      if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
       console.log('App has come to the foreground!')
     }
     this.setState({appState: nextAppState});
   }

   render() {
     return (
       <Text>Current state is: {this.state.appState}</Text>
     );
   }

 }

React Native - How to detect home button is pressed or not?

2 Answers2

Linked