From 7ad21d8f2df3e3eb63a6935195d473729a676aab Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Mon, 23 Jan 2017 23:45:15 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/appstate.html | 50 ++++++++++++++++++++------------ 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/releases/next/docs/appstate.html b/releases/next/docs/appstate.html index b4fe9dcc40a..22be2fb4303 100644 --- a/releases/next/docs/appstate.html +++ b/releases/next/docs/appstate.html @@ -6,25 +6,37 @@ handling push notifications.

App entering the Multitasking view or in the event of an incoming call

For more information, see Apple's documentation

Basic Usage #

To 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.

getInitialState: function() { - return { - currentAppState: AppState.currentState, - }; -}, -componentDidMount: function() { - AppState.addEventListener('change', this._handleAppStateChange); -}, -componentWillUnmount: function() { - AppState.removeEventListener('change', this._handleAppStateChange); -}, -_handleAppStateChange: function(currentAppState) { - this.setState({ currentAppState, }); -}, -render: function() { - return ( - <Text>Current state is: {this.state.currentAppState}</Text> - ); -},

This example will only ever appear to say "Current state is: active" because +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.

Methods #

constructor(0) #

addEventListener(type, handler) #

Add a handler to AppState changes by listening to the change event type and providing the handler

TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate