Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AppState change listener don't work when the app starts in [email protected] but work in [email protected] #25204

Closed
Koppel-Zhou opened this issue Jun 10, 2019 · 7 comments
Labels
API: AppState Bug Resolution: Locked This issue was locked by the bot.

Comments

@Koppel-Zhou
Copy link

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

In [email protected], I got the nextAppState is 'active' when the app starts, but in [email protected], I got nothing.

React Native version:

App1 use [email protected]

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 [email protected]

...
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 [email protected], is that a bug?

@zcgit
Copy link

zcgit commented Jun 10, 2019

I'm using 0.59.4, and it's fine.

@Koppel-Zhou
Copy link
Author

I'm using 0.59.4, and it's fine.

It's not work on my phone. What brand is your mobile phone and what model?

@zcgit
Copy link

zcgit commented Jun 11, 2019

I'm using 0.59.4, and it's fine.

It's not work on my phone. What brand is your mobile phone and what model?
both fine on my test devices, samsung/xiaomi/huawei and iphone 6 Plus, but I'm using 0.59.4, not 0.59.9.

@Koppel-Zhou
Copy link
Author

Koppel-Zhou commented Jun 11, 2019

I'm using 0.59.4, and it's fine.

It's not work on my phone. What brand is your mobile phone and what model?
both fine on my test devices, samsung/xiaomi/huawei and iphone 6 Plus, but I'm using 0.59.4, not 0.59.9.

I test it on my phone used 0.59.4, it's also not work. I mean to say AppState change listener only don't work when the app starts. It's work well when the app at background state or active state. If I kill the App and restart the App, the AppState change listener no feedback. I hope that I have already made it clear.

@clarkkentzh
Copy link

What happened

@OlivierFreyssinet-old
Copy link

OlivierFreyssinet-old commented Jun 21, 2019

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

@dulmandakh
Copy link
Contributor

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

@facebook facebook locked as resolved and limited conversation to collaborators Jun 25, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jun 25, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
API: AppState Bug Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

6 participants