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)

score 3 · Answer 1 · answered Oct 26 '17 at 12:15

3

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

}

answered Oct 26 '17 at 12:15

semirturgay

4,151
3
30
50

I don't see how the AppState will help here. How would I use this code to detect if the app was re-opened from the background? If Android kills the app (in the background) and the user then reopens it the following happens: `_handleAppStateChange` fires and `nextAppState` is `active`. However, `this.state.appState` is undefined (because the app was killed). If the app is started from scratch, the exact same thing happens. – sAm_vdP Oct 26 '17 at 13:36
You are answering your own question. If previous state was background or inactive and now it comes to the foreground, you need to reset the natigation state. If the previous is undefined, just start from scratch because the app was killed (does not matter by who) – sebastianf182 Nov 05 '17 at 21:47
3

It does matter who killed the process! If the user explicitly killed the app, I want to reset the navigation state. But if the Android OS killed the process I do NOT want to reset the state - on a native app one would use savedInstanceState to restore the state in this case. – sAm_vdP Nov 08 '17 at 05:19
@sAm_vdP did you find a solution ? – Maxim Toyberman Mar 22 '22 at 09:52

score 0 · Answer 2 · answered Feb 25 '18 at 14:49

@semirturgay's answer is one way to do detect leaving the app. For Android, it is way better to detect home or recent app button clicks. This is because fragments within your app from other apps like social media or photos will also trigger background state, which you don't want because they are still in the app adding a photo to a profile from the camera etc. You can easily detect home and recent app button clicks on Android with react-native-home-pressed. This library simply exposes the android button events.

First install the library with npm i react-native-home-pressed --save and then link it react-native link. Then rebuild your app and add the following snippet.

import { DeviceEventEmitter } from 'react-native'

class ExampleComponent extends Component {
  componentDidMount() {
    this.onHomeButtonPressSub = DeviceEventEmitter.addListener(
     'ON_HOME_BUTTON_PRESSED',
     () => {
       console.log('You tapped the home button!')
    })
    this.onRecentButtonPressSub = DeviceEventEmitter.addListener(
     'ON_RECENT_APP_BUTTON_PRESSED',
     () => {
       console.log('You tapped the recent app button!')
    })
  }
   componentWillUnmount(): void {
    if (this.onRecentButtonPressSub)   this.onRecentButtonPressSub.remove()
    if (this.onHomeButtonPressSub) this.onHomeButtonPressSub.remove()
  }
}

React Native, the Android lifecycle and navigation

2 Answers2