AppState change listener don't work when the app starts in react-native@0.59.x but work in react-native@0.56.0

...
class App extends Component {
    ...
    componentDidMount(){
        AppState.addEventListener('change', (nextAppState) => console.log(nextAppState));
    }
    componentWillUnmount() {
        AppState.removeEventListener('change');
    }
}
...

In react-native@0.56.0, I got the nextAppState is ‘active’ when the app starts, but in react-native@0.59.9, I got nothing.

React Native version:

App1 use react-native@0.59.9

React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
      Memory: 18.66 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.7.0 - ~/.nvm/versions/node/v11.12.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 22, 23, 24, 25, 26, 27, 28
        Build Tools: 27.0.3, 28.0.0, 28.0.3
        System Images: android-19 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 At
om, android-Q | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.5429.30.34.5452501
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.8.6 => 16.8.6 
      react-native: ^0.59.9 => 0.59.9

App2 use react-native@0.56.0

...
npmPackages:
      react: ^16.4.1 => 16.4.1 
      react-native: ^0.56.0 => 0.56.0

Why the AppState change listener don’t work when the app starts in react-native@0.59.9, is that a bug?

[dulmandakh]

Please read https://facebook.github.io/react-native/docs/appstate carefully, and there is a solution to your issue.

[OlivierFreyssinet]

It doesn’t work for me either on app start. (on Android, RN 0.59.8, I didn’t test on iOS)

Until there’s a fix, the quick workaround I found was to directly call the AppState native module:

...
import {NativeModules} from 'react-native'
const AppStateNativeModule = NativeModules.AppState

class YourComponent extends React.Component {
  componentDidMount() {
    this.initAppStateListener()
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppState)
  }

  initAppStateListener = () => {
    try {
      // HERE call the NativeModule to get the current App state
      AppStateNativeModule.getCurrentAppState(
        res => {
          this.handleAppState(res.app_state)
        },
        () => {} // error callback is needed in the getCurrentAppState function signature
      )
    } catch (e) {}
    AppState.addEventListener('change', this.handleAppState)
  }

  handleAppState = nextAppState => {
   //...
  }
  //...
}

EDIT: (simpler solution)

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.

This is what’s written in the docs, I think it’s way simpler & safer to use than my solution above haha, I didn’t try it though

EDIT: it works:

initAppStateListener = () => {
  const {currentState} = AppState
  this.handleAppState(currentState)
  AppState.addEventListener('change', this.handleAppState)
}