react-native: app state goes on an infinite loop while listening for changes with appState on android

@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.

I fixed the problem with this source code below;

const isPermissionFetching = useRef(false);
...
const handlerAppStateChange = async (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active' && !isPermissionFetching.current) {
      console.log('App has come to the foreground!');
      isPermissionFetching.current = true;
      await checkApplicationPermissions();
      isPermissionFetching.current = false;
    }
  };

  useEffect(() => {
    const subscription = AppState.addEventListener(
      'change',
      handlerAppStateChange,
    );

    return () => {
      subscription.remove();
    };
  }, []);
...

@anastasia-iteric if your AppState is “close” to a permissions request eg. check for location permission everytime the app comes to the foreground via AppState then the underlying native request for permissions will put the app in the background for a fraction of a second and then bring it back to the foreground. As you can see, we get an infinite loop here.

Had the same issue, as others have said, Android devices go to background when requesting permission. With the help of this comment request permission always returns denied I was able to solve the infinite loop, here is my code, hope it helps someone:

const [permissionResponse, setPermissionResponse] = useState<Location.LocationPermissionResponse>();
	const appState = useRef(AppState.currentState);

	useEffect(() => {
		requestPermissionAndExecute(passMethodToBeExecuted);
		const appStateSubscription = AppState.addEventListener('change', handleAppStateChange);

		return () => {
			appStateSubscription.remove();
		}
	}, []);

	const requestPermissionAndExecute = async (callback: () => void) => {
		const permissionResponse = await Location.requestForegroundPermissionsAsync();
		setPermissionResponse(permissionResponse);
		if (permissionResponse.granted) {
			callback();
		}
	}

	const handleAppStateChange = async (nextAppState: AppStateStatus) => {
		if (nextAppState === appState.current) return;

		const isTransitioningToForeground = appState.current.match(/inactive|background/) && nextAppState === 'active';

		if (isTransitioningToForeground) {
			await requestPermissionAndExecute(passMethodToBeExecuted);
		} else {
			// App went to background
		}

		appState.current = nextAppState;
	}

The main problem for me was that I wasn’t checking for this conditional appState.current.match(/inactive|background/), but was doing only this nextAppState === 'active'

Also I had to do await when calling requestPermissionAndExecute(passMethodToBeExecuted) inside handleAppStateChange method.

That fixed it for me

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.