In both android & iOS mobile devices the applications runs on 2 modes. First mode is Foreground known as front active mode on which the application remains open on mobile screen. Second mode is Background mode in which the app is in background and user is accessing other apps on that time. The AppState component in react native is used to notify the user whether the app is in background or foreground and returns a string. So in this tutorial we would Detect App is in Background or Foreground using AppState in react native android iOS application.
Contents in this project Detect App is in Background or Foreground using AppState in React Native Android iOS App:
1. Import StyleSheet, Text, View & AppState component in your project’s App.js file.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, AppState } from ‘react-native’;
|
2. Create constructor() function in your project’s class and make a State named as appState. We would assign the AppState.currentState object to appState state.
|
1
2
3
4
5
6
|
constructor() {
super();
this.state = {
appState: AppState.currentState,
}
}
|
3. Create componentDidMount() inbuilt function in your main class & call the AppState.addEventListener() function here. We would call the _handleAppStateChange() function here. This method would call when app starts or app comes in foreground mode.
|
1
2
3
|
componentDidMount() {
AppState.addEventListener(‘change’, this._handleAppStateChange);
}
|
4. Creating componentWillUnmount() inbuilt method. Now we would call the AppState.removeEventListener() function here. This method will calls when app goes to background mode.
|
1
2
3
|
componentWillUnmount() {
AppState.removeEventListener(‘change’, this._handleAppStateChange);
}
|
5. Create _handleAppStateChange() function with nextAppState parameter. This is our main function in this project. In this function we would check the appState value.
App States values definition:
- active : The application is running in active foreground mode.
- background: The application is in background mode or minimize.
- inactive: The application is in inactive mode. This mode occurs when transitioning between foreground and background mode.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
_handleAppStateChange = (nextAppState) => {
this.setState({ appState: nextAppState });
if (nextAppState === ‘background’) {
// Do something here on app background.
console.log(“App is in Background Mode.”)
}
if (nextAppState === ‘active’) {
// Do something here on app active foreground mode.
console.log(“App is in Active Foreground Mode.”)
}
if (nextAppState === ‘inactive’) {
// Do something here on app inactive mode.
console.log(“App is in inactive Mode.”)
}
};
|
6. Create a Text component in render’s return block and show the State value.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>Current state is: {this.state.appState}</Text>
</View>
);
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
text: {
fontSize: 20,
color: ‘#000’
}
});
|
8. Complete source code for App.js file class.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, AppState } from ‘react-native’;
export default class App extends Component<> {
constructor() {
super();
this.state = {
appState: AppState.currentState,
}
}
componentDidMount() {
AppState.addEventListener(‘change’, this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener(‘change’, this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
this.setState({ appState: nextAppState });
if (nextAppState === ‘background’) {
// Do something here on app background.
console.log(“App is in Background Mode.”)
}
if (nextAppState === ‘active’) {
// Do something here on app active foreground mode.
console.log(“App is in Active Foreground Mode.”)
}
if (nextAppState === ‘inactive’) {
// Do something here on app inactive mode.
console.log(“App is in inactive Mode.”)
}
};
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>Current state is: {this.state.appState}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
text: {
fontSize: 20,
color: ‘#000’
}
});
|
Screenshots:
The below screen of Command prompt window after executing
react–native log–android command. 
Also Read :
React Native Insert Text Input Data To MySQL Server Android iOS Tutorial
React Native Create Custom Alert Dialog Box in Android iOS App Tutorial
React Native Screen Overlay ActivityIndicator Progress Bar Example Tutorial
React Native Change Button Upper Title Text Using State Dynamically
React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial
