Component recreated without call to componentWillUnmount - react-native

Question

I'm developing a react-native app. I'm currently testing in android and it appears that when the app loses focus and then the launch icon is pressed again that the components are recreated without a call to componentWillUnmount.
I can recreate this with a trivial react-native app:
react-native init MultipleComponents
And adding the following to the App class:
componentDidMount() {
clearInterval(this._interval);
this._interval = setInterval(() => {
console.log("Timeout");
}, 5000);
}
componentWillUnmount() {
console.log("Timeout");
clearInterval(this._interval);
}
Once this is done run it with:
react-native run-android
Then on the emulator you can end up with multiple timers running by pressing the home button and relaunching the app. Having multiple timers running is obviously not ideal.
Note that componentWillUnmount is not called.
Am I missing something? How is this meant to be handled?

Answer 1

The JavaScript thread is gone when the app is not in the foreground, so no React code is executed after your app loses focus and this includes componentWillUnmount and other lifecycle methods.
But if you end up having multiple timers when pressing the icon, you should probably check your AndroidManifest.xml file for launchMode. If the value for launchMode is either standard or singleTop, then multiple instances of your app can exist. If you change the setting to singleInstance or singleTask there will always be just one instance.
android/app/src/AndroidManifest.xml:
<manifest>
<application>
<activity
android:launchMode="singleTask">
</application>
</manifest>