AppState
AppState
can tell you if the app is in the foreground or background, and notify you when the state changes.
AppState is frequently used to determine the intent and proper behavior when handling push notifications.
#
App Statesactive
- The app is running in the foregroundbackground
- The app is running in the background. The user is either:- in another app
- on the home screen
- [Android] on another
Activity
(even if it was launched by your app)
- [iOS]
inactive
- This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the Multitasking view or in the event of an incoming call
For more information, see Apple's documentation
#
Basic UsageTo see the current state, you can check AppState.currentState
, which will be kept up-to-date. However, currentState
will be null at launch while AppState
retrieves it over the bridge.
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>; }}
This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the active
state, and the null state will happen only momentarily.
Reference
#
Eventschange
#
This even is received when the app state has changed. The listener is called with one of the current app state values.
focus
#
[Android only] Received when the app gains focus (the user is interacting with the app).
blur
#
[Android only] Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the notification drawer. AppState
won't change but the blur
event will get fired.
#
MethodsaddEventListener()
#
addEventListener(type, handler);
Add a handler to AppState changes by listening to the change
event type and providing the handler
removeEventListener()
#
removeEventListener(type, handler);
Remove a handler by passing the change
event type and the handler
#
PropertiescurrentState
#
AppState.currentState;