Clear Interval when app is in background state in React Native - reactjs

Question

I would like to know how to clear an Interval whenever my app goes into Background State.
Sometimes when I click the Home button my application is being closed (willUnmount event is not fired) and then the interval is never cleared.

Answer 1

How did you know the interval is never cleared if app closed?(Just curious) If App is being closed, it should be not working at all, isn't it? Only if you have background timer maybe will run?
But I think it should be stopped if you close the app?
I think in your case, you can use AppState from react-native, to detect if app went back to foreground then reset the interval?
import React, {
Component
} from "react";
import {
AppState,
StyleSheet,
Text,
View
} from "react-native";
export default 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!"); //reset interval here
}
this.setState({
appState: nextAppState
});
};
render() {
return (
<View style = {
styles.container
} >
<Text>
Current state is: {
this.state.appState
}</Text>
</View >
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
});