Respond to native AppState does not have an “inactive" state on Android

Question

I am trying to change the user interface before the user leaves the application (the user is in multitasking mode or switches to another application). To be more specific, when the user leaves the application, I want to add a full-screen view with the application logo.

I am using AppState for this.

In iOS, it works as expected: in an application with a multitasking view, the application becomes inactive and after switching to another state of the application goes into the background. When the state is inactive, I can still change the interface.

However, on Android, the state is either active or background. The problem is that in the background, I can no longer change the interface.

Is this a bug on Android? If not, what are my options for getting it to work on Android.

Thanks.

Answer 1

If you need to, you can simulate the same states as iOS by adding some code to MainActivity.java to listen to its life events.

//onResume = 'active' //onPause = 'inactive' //onStop = 'background' @Override public void onResume() { super.onResume(); ReactContext reactContext = getReactInstanceManager().getCurrentReactContext(); WritableMap params = Arguments.createMap(); params.putString("event", "active"); // when app starts reactContext will be null initially until bridge between Native and React Native is established if(reactContext != null) { getReactInstanceManager().getCurrentReactContext() .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit("ActivityStateChange", params); } } @Override public void onPause() { super.onPause(); ReactContext reactContext = getReactInstanceManager().getCurrentReactContext(); WritableMap params = Arguments.createMap(); params.putString("event", "inactive"); if(reactContext != null) { getReactInstanceManager().getCurrentReactContext() .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit("ActivityStateChange", params); } } @Override public void onStop() { super.onStop(); ReactContext reactContext = getReactInstanceManager().getCurrentReactContext(); WritableMap params = Arguments.createMap(); params.putString("event", "background"); if(reactContext != null) { getReactInstanceManager().getCurrentReactContext() .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit("ActivityStateChange", params); } } 

Then in JS, listen to these life cycle changes with DeviceEventEmitter

 const nativeEventListener = DeviceEventEmitter.addListener('ActivityStateChange', (e)=>{ console.log(e.event); })