React Native, the Android lifecycle and navigation

Question

We are building a React Native app that uses redux-persist to store the app state, including the navigation state. I would like for this app to behave like a native app in terms of navigation:

When a native Android app goes into the background, is eventually stopped by the OS and is then moved into the foreground, it will resume in the Activity where the user previously left off. If the same app is killed by the user (or a crash), it will open at the main Activity.

For a RN app, this means that redux-persist should persist and restore the navigation state in the componentWillMount of the app, but only if the app was not killed by the user.

The following code works:

componentWillMount() {
  if (global.isRelaunch) {
    // purge redux-persist navigation state
  }
  global.isRelaunch = true;
...

But it looks hackish and I also do not understand why the global scope survives.

What is the proper way to detect whether an RN app was re-opened from the background? (ideally with iOS support)

Answer 1

You should take a look to AppState which is an api that provided by react-native

check this example:

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>
    );
  }

}