android – How do I get onresume event from React-Native?-ThrowExceptions

Exception or error:

How do I get onresume event from React-Native?
I want to do some check when Android main activity resumed.
I check source code of RN, but it seems no event when app resumed.

How to solve:

React Native provides AppState to tell if the app is in the foreground or background, and notify us when the state changes.

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

    }

source: https://facebook.github.io/react-native/docs/appstate.html

###

you can use AppState
read this document
https://facebook.github.io/react-native/docs/appstate.html

###

This method is called every time the user comes back to this screen.

This method is same as the Android onResume() method.

 render() {
 this.props.navigation.addListener(
    'didFocus',
       payload => {
         console.log("Payload is called .....................")
        }
  );
}

###

AppState.addEventListener('change', (nextAppState) => {
    if (nextAppState.match(/inactive|background/) && nextAppState === 'active') {
        console.log('App has come to the foreground! (iOS and Android)')
    }
});

###

I ended up rolling my own solution for this. It’s really very simple to implement.

Make sure all of your activities extend the same class, and do this in it:

import com.facebook.react.bridge.Arguments
import com.facebook.react.modules.core.DeviceEventManagerModule

override fun onResume() {
    super.onResume()

    val params = Arguments.createMap()
    params.putInt("rootViewTag", reactRootView!!.rootViewTag)
    val reactContext = reactRootView!!.reactInstanceManager!!.currentReactContext!!
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java).emit("androidActivityResumed", params)
}

Then, do the following on the React side of things:

import {DeviceEventEmitter} from 'react-native'

class MyComp extends React.Component {
  componentDidMount() {
    DeviceEventEmitter.addListener('androidActivityResumed', this._onAndroidActivityResumed)
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeListener('androidActivityResumed', this._onAndroidActivityResumed)
  }

  _onAndroidActivityResumed = (e) => {
    if (e.rootViewTag === this.props.rootTag) {
      // Do whatever you want here
    }
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *