app state goes on an infinite loop while listening for changes with appState on android

[codeamo]

Description

I have implemented AppState to listen for the app state and then do certain tasks when the app either goes foreground or background. Specifically, I am doing two actions on app state change.

1. When the app is in the foreground, I am checking if the user may have toggled permission back on so I can react properly.
2. When the app is in a background mode, I dispatch an action to turn a flag on so when the user opens the app they will be prompted by an authentication screen to verify themselves with biometrics.

The first option works pretty well, but when I added the dispatch action inside the handler to turn the flag on, the app state keeps changing again and again and the app state goes on an infinite loop.

React Native version:

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 114.68 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.6.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.6 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6821437
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 14.0.2 - /usr/bin/javac
    Python: 3.7.6 - /Users/amiinamo/.pyenv/shims/python
  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. Implemented AppState and subscribed to state changes with async function for handling app state change.
2. Added redux action to the handler.
3. Apps state keep changing and goes to an infinite loop which even forces the app to open and come back to the foreground while in the background.

Expected Results

I expected the app to only change the state when opening the app, leaving the app, or transitioning between foreground & background which only works for IOS.

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

  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);

  useEffect(() => {
    AppState.addEventListener('change', checkPermissions);

    return () => {
      AppState.removeEventListener('change', checkPermissions);
    };
  }, []);

  const checkPermissions = async nextAppState => {
    // just an async function that reacts to any permission changes while on background.
    await checkMultiplePermissions(saveMultiplePermissionAccess, permissions);

    if (nextAppState === 'background') {
      // an action to save the app state on redux store when the app goes background. this is the flag
      dispatch(saveAppState(true));
    }
    appState.current = nextAppState;
    setAppStateVisible(appState.current);
  };

[adam-ashored]

@codeamo I seem to be randomly stuck inside an app state loop - sometimes I'm stuck, sometimes I'm not - in release and debug react-native android builds. Curious, why did you close this ticket?

[shomatz]

@codeamo
how do you fix this?

[adam-ashored]

@shomatz not sure if it helps but for me it was because I was requesting app permissions on Android and every time AppState changed I requested them again. But I wasn’t aware that AppState changes to background while Android is requesting a permission (not the behaviour on iOS).

Once I accounted for this, I fixed my infinite loop.

[codeamo]

@adam-ashored @shomatz sorry for the late response, but I have closed the issue because of no response. plus I haven't solved this issue yet as I quickly jumped to different tasks. I have reopened the issue so maybe it could be answered and it would help someone in the future.

[info-bit]

This seems to be happening in our case as well.
The app goes in an infinite loop only on Android (specifically, it seems to happen only in Android 10), but we already took care of the permissions.
When we remove the event listener the loop never happens.
Also, it happens only when we dispatch a redux action after making a HTTP request inside the handler function.

We are using react-native 0.63.2. We already tried upgrading to the latest version but the issue is still present.

[DracotMolver]

I'm facing the a similar issue as @info-bit
I'm currently using my physical device with Android 10. In my case, when I show up a WebView, the change event is triggered. Then, after closing the app, the change event is triggered again, but this time in this infinite loop.

I'm using react-native: "0.63.4"
My code is something like this

 const _handleAppStateChange = (nextAppState) => {
  // Running some code... later without stopping
  };

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

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

My solution was to use the focus event. But, this won't be a solution for some other cases where we do need the change event

[intellimouseftw]

@DracotMolver I'm not sure if it's okay to do this, I have a question unrelated to this issue, but related to your previous reply.

Did you ever manage to get AppState.addEventListener('focus', _handleFocusChange) working on Android? If so would you mind sharing a code snippet of your implementation (ie. registration of the listener & implementation of the handler)? Can't seem to get it to work, tested with the latest release version (0.64.2) and 0.63

[DracotMolver]

@intellimouseftw yes, but actually it was caused by another thing away from this. In my case was that I was handle a useEffect with an async callback. fixing that, everything worked perfect. So I changed it back to the onChange event

[arshadazaad3]

@DracotMolver I'm not sure if it's okay to do this, I have a question unrelated to this issue, but related to your previous reply.

Did you ever manage to get AppState.addEventListener('focus', _handleFocusChange) working on Android? If so would you mind sharing a code snippet of your implementation (ie. registration of the listener & implementation of the handler)? Can't seem to get it to work, tested with the latest release version (0.64.2) and 0.63

const _handleAppStateChange = (nextAppState) => {
isDevEnv() && systemLog(App State - ${nextAppState});
};

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

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