App state does not show state going from 'background' to 'active'

[jaworek]

Description

I'm trying to use AppState to detect if app is going from 'background' to 'active'
In docs it appears that it should be easily detectable:
https://reactnative.dev/docs/appstate
When trying it in my app it never runs console.log in the if statement that checks state going from 'background' to 'active'
In logs there is only 'active' -> 'background' and when going back to app it log 'active' -> 'active'.

React Native version:

react-native: 0.62.2
It does not work on web previews, as well as on android devices.

System:
OS: Windows 10 10.0.18362
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 3.56 GB / 15.89 GB
Binaries:
Node: 12.18.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Version 3.0.0.0 AI-171.4443003
Languages:
Java: Not Found
Python: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Open provided reproduction
2. You should see 'Current state is: active A'
3. Click on square button on Android navigation bar.
4. You should see 'Current state is: background A'
5. Go back to the app.
6. You should see 'Current state is: active B', but what you will get is 'Current state is: active A'

Expected Results

I expect to see AppState to show that app is going 'active' -> 'background', when leaving app, and 'background' -> 'active', when going back.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/MOOwV9_Nh8

import React, { useEffect, useState } from "react";
import { AppState, StyleSheet, Text, View } from "react-native";

const AppStateExample = () => {
  const [appState, setAppState] = useState(AppState.currentState);
  const [a, setA] = useState("A");

  useEffect(() => {
    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  const _handleAppStateChange = nextAppState => {
    if (appState.match(/inactive|background/) && nextAppState === "active") {
      console.log("App has come to the foreground!");
      setA("B");
    }
    setAppState(nextAppState);
  };

  return (
    <View style={styles.container}>
      <Text>Current state is: {appState} {a}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default AppStateExample;

[jaworek]

Rewriting this to class fixed the issue. It seems that the problem exists only in function component.

These issues seem to be related to my problem:
#28639
#28655

[cHaLkdusT]

Hi @jaworek,

Using react-native v0.62.2, I've retested this issue and seems working now. See reference for function component example here. Let me know if it works on your end so we can now close this issue.

[jaworek]

@cHaLkdusT I'm currently using react-native 0.63.2 and react 16.13.1. I'm still having this problem on iOS. When leaving the app state goes to 'background', but then in logs I can see that it changes to 'active', even though I have not returned to the app. Thus, when I come back to the app, current and next state are both 'active', which prevents me from detecting that user opened app again from the background.

[chrisglein]

Verified your repro in the Snack. It shows going to background the first time... but then doesn't any time after that. It just gets stuck as 'active'. Was that also what you were seeing?
You said rewriting as a class component fixed this. Do you have that as a Snack to share? I'm not sure if this is a bug in how the functional component is handling the event or in something deeper.

[jaworek]

If I remember correctly, Snack with class component implementation provided in the official React Native documentation works as intended.

[rlems]

I was experiencing this issue as well. I fixed it by using a ref instead of state for the appState. I found that it's actually the way described in the documentation (https://reactnative.dev/docs/appstate)
I changed your example:

import React, { useEffect, useState } from "react";
import { AppState, StyleSheet, Text, View } from "react-native";

const AppStateExample = () => {
  const appState = useRef(AppState.currentState);
  const [activeAppState, setActiveAppState] = useState(AppState.currentState);

  useEffect(() => {
    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  const _handleAppStateChange = nextAppState => {
    if (appState.current.match(/inactive|background/) && nextAppState === "active") {
      console.log("App has come to the foreground!");
    }
    appState.current = nextAppState;
    setActiveAppState(appState.current);
  };

  return (
    <View style={styles.container}>
      <Text>Current state is: {activeAppState} {a}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default AppStateExample;

[jaworek]

Thanks. I did not notice it before. It seems that it was updated in this commit:
facebook/react-native-website@d2e222e#diff-a24fd2a2978333c82a6cbbed3ad6b1994fb425bf2604bf98ad81ef3770b9ec63

[cHaLkdusT]

Hey @jaworek, I've attached the link 4 months ago. It seems like you didn't check the link for the new code snippet reference. 😁

[jaworek]

@cHaLkdusT From what I see, this commit with updated documentation was made over a week after I you posted a link to the same documentation page that I did in my first comment. Previously it had the same buggy implementation as I provide in the snack and code example. I'm glad that it was fixed :D

[plvenkatesh92]

Thanks, it works.