How to call function when app in foreground or background in react native?

Question

I have a problem when react native app goes to background or foreground. I am trying to call my action in a set interval when app in background or foreground but unable to find any solution.

In my app when user click on start navigation button and it redirect user to the Default map application of phone. I need to update my Database in a time interval when app not active.

I have used Appstate to check when app is not active. And set setInterval function to call action in a set of time interval.

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._interval = setInterval( () => {
      console.log('check');
    }, 5000);

      if(global.routeName && global.routeName != '' && global.routeName == "OrderDetail"){
        this.props.navigation.navigate("OrderDetail",{orderId: global.orderId});
      }
    }else{
this._interval = setInterval( () => {
      console.log('check 2');
    }, 5000);
}
    this.setState({appState: nextAppState});
  };

I expected when app goes to background or foreground setInterval should be call in a set of interval, but the actual i'm unable to get my output.

Please refer to this. https://stackoverflow.com/questions/46662004/how-to-know-if-a-react-native-app-goes-to-background — Shreyak Upadhyay, May 05 '20 at 19:18

score 3 · Answer 1 · answered Aug 26 '19 at 14:02

when app is in background "setInterval" will not work . You can use react-native-background-timer

Sample code example

BackgroundTimer.runBackgroundTimer(() => { 
//code that will be called every 3 seconds 
}, 
3000);
//rest of code will be performing for iOS on background too

BackgroundTimer.stopBackgroundTimer(); //after this call all code on background stop run.

score 0 · Answer 2 · answered Aug 27 '19 at 05:21

You can listen to the appState event. From here

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

}

By the way, this will always say 'Current state is: active', because that is the only state in which the app will be visible for the user

How do you console.log() something when the app goes to the background? — Cole, May 18 '23 at 01:50

How to call function when app in foreground or background in react native?

2 Answers2

Linked