AppState incorrectly says `active` when launched from a geofence in the background

[objectiveSee]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

My app will be launched in the background response to a geo-fence event. In the task handler for being launched, I log the app state of the app. What I've noticed is that the app state is active however the app is 100% running in the background.

I have provided some code to get you an insight, but in reality testing this with Geofencing takes some knowledge of geofencing. I'd be happy to share more code if we determine that this bug can be debugged :)

React Native version:

    OS: macOS 10.15.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 21.33 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.19.1 - ~/.nvm/versions/node/v12.13.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.13.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

Steps To Reproduce

EDIT: This issue was reproduced in a sample app which is posted in a comment below. See #28655 (comment) for Sample App that demonstrates the bug clearly. You should use that code and ignore my steps below (which are more complicated since they also use the geofencing API)

Provide a detailed list of steps that reproduce the issue.

1. Setup a geofence to wake up your app in the background
2. Kill the app and go to the home screen.
3. Trigger geofence (eg using simulator location).
4. App launches in the background and you'll see logs. Log the value of AppState and you will see it to be active

Expected Results

AppState should be backgrounded

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

TaskManager.defineTask(GEOFENCING_TASK, ({ data: { eventType, region }, error }) => {
    if (error) {
      // check `error.message` for more details.
      console.log(`TaskManager Error: ${error.message}`);
      return;
    }
    console.log(`App State is ${AppState.currentState}`)
  
});

Example to setup geofencing:

// add one more region!
  regions.push({
    identifier: `foo`,
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,
    radius: GEOFENCE_RADIUS,
    notifyOnEnter: true,
    notifyOnExit: true,
  });

  try {
    console.log(`[LOCATION MANAGER] Setting up geofencing. Count= ${regions.length}`);
    let result = await Location.startGeofencingAsync(GEOFENCING_TASK, regions);

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[safaiyeh]

Hi @objectiveSee a repro or a Snack that demonstrates the issue would be helpful! Especially since this happens in a specific use case.

[cHaLkdusT]

In react-native-website, AppState API, this code snippet is expected to log App has come to the foreground!, however, it is not printed even if the components looks fine. Seems like there's a bug in the event listener that always resets the 'appState' state to active value.

const [appState, setAppState] = useState(AppState.currentState);

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!"); // <-- this is isn't being logged :(
    }
    setAppState(nextAppState);
  };

[cHaLkdusT]

I've tested the class-based component version of the code snippet, it is working as expected. There seems an issue when using the functional component that uses useState hook.

[LaurenceRolandJames]

This issue isn't related to geofences. It happens in a newly created React Native app.

@safaiyeh

I've reproduced the issue in a new React Native app here: https://github.com/LaurenceRolandJames/AppStateActiveRepro/tree/master

[objectiveSee]

Hey @LaurenceRolandJames! Thank you for making a better sample code to demonstrate the bug! Also great that it sounds like you found the source problem as well as a workaround. I updated the initial comment with a link to your comment so that hopefully this issue gets picked up. 🐛🎶🚀

Thanks to @cHaLkdusT too!