How to detect when a React Native app is opened?

Question

My React Native app wants to synchronize its local data with an API when the user opens the app. This should happen whenever the user returns to the app, not just when it first starts. Essentially, what I would like is the equivalent of AppDelegate's applicationDidBecomeActive callback, so that I can run synchronization code there. Obviously, I would like to do this in React Native instead.

As far as I can tell, the componentWillMount / componentDidMount callbacks on the root component only run when the app is initially loaded, not after the user leaves the app and comes back later (without explicitly quitting the app).

I thought that the AppState API would provide this functionality, but its change listeners don't fire in this case, either.

This seems like obvious functionality to have, so I must be missing something glaringly obvious. Help!

Answer 1

I fixed this by using the AppStateIOS API instead of AppState. The later works as expected on iOS devices: when the app goes to the background the "change" event fires, and again when it comes back to the foreground. The AppState API doesn't seem to fire the "change" event at all on an iOS device, as of React Native v0.18, as far as I can tell. The project's conventions suggest that AppState should be a cross-platform wrapper around AppStateIOS, but that doesn't seem to be the case here.

The following example should demonstrate the issue:

React.createClass({    componentDidMount() {     AppStateIOS.addEventListener('change', state =>       console.log('AppStateIOS changed to', state)     )      AppState.addEventListener('change', state =>       console.log('AppState changed to', state)     )   },    render() {     return <View/>   }  }) 

When this component is mounted into a React Native app, you will see "AppStateIOS changed to ..." when closing and opening the app. You will never see "AppState changed to ..." as far as I'm aware.

Update

It appears that this was fixed in React Native recently (as of v26). You can now use AppState as advertised on iOS and Android.