How to listen App launch and close in React Native?

Question

I need to track some logs event(only once) when App launch and close.

First I do this in Home screen componentDiMount(), but it will be instantiated several times in some case, causing repetitive launch event log.

=============== Edit =================

AppState can only listen background and active event.

When closing app on Android (press back key or close in recents app menu), it actually back to background. It takes the app back to active from background when reopen the app. Which is the same as toggle app between background and active(not close)

So I can't determine whether it is first launch or toggling app status using AppState

Answer 1

On App Launch

In general, useEffect with an empty dependency array is what you're looking for.

In React Native, code can be running when app state is not active, but useEffect with an empty dependency array will be running on first app launch.

If you're using dependency values, you can use useRef to track if it's handled in first app launch.

const onLaunchRef = React.useRef<boolean>();

useEffect(() => {
  if (onLaunchRef.current) {
    return;
  }
  doSomething(state1, state2);
  onLaunchRef.current = true;
}, [state1, state2]);

You can combine this with useAppState:

import { useAppState } from '@react-native-community/hooks'

const onLaunchRef = React.useRef<boolean>();
const appState = useAppState();

useEffect(() => {
  if (onLaunchRef.current) {
    return;
  }
  if (appState !== 'active') {
    return;
  }
  doSomething(state1, state2);
  onLaunchRef.current = true;
}, [state1, state2, appState]);

On App Close

You can use the following:

useEffect(() => {
  return () => {
    doSomething(state1, state2);
  };
}, [state1, state2]);

Or use useAppState:

const appState = useAppState();
useEffect(() => {
  if (appState !== 'active') {
    doSomething();
  }
}, [appState]);

However, actual close event does not exist in React Native. This is somewhat tricky problem to handle.

Answer 2

Note: Following answer was written when OP didn't edit the question to add info about the limitations of AppState.

Using AppState.

From Official Docs:

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

}