AppState change multiple times when app opened on Android

[kjd9xhp]

React Native version:
System:
OS: macOS High Sierra 10.13.6
CPU: (8) x64 Intel(R) Core(TM) i7-2635QM CPU @ 2.00GHz
Memory: 76.34 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.4.1 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 15, 21, 22, 23, 24, 26, 27, 28, 29, 8
Build Tools: 26.0.2, 27.0.0, 27.0.2, 28.0.3
System Images: android-23 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.0 AI-171.4408382
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.3.1 => 16.3.1
react-native: ^0.57.8 => 0.57.8
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

constructor(props) {
    super(props);
    this.state = {
      appState: AppState.currentState
    };
  }

componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    willUnmount();
    AppState.removeEventListener('change', this._handleAppStateChange);
  }
  componentWillMount() {
    WillMount();
  }
  _handleAppStateChange = nextAppState => {
    console.log('appState',this.state.appState)
    console.log('nextAppState',nextAppState)
    if (
      this.state.appState.match(/inactive|background/) &&
      nextAppState === 'active'
    ) {
      this.props.updateUserToken(
        {
          email: this.props.email
        },
        this.props.token
      );
    }
    this.setState({ appState: nextAppState });
  };

Describe what you expected to happen: i do nothing and appState change every single time
07-31 13:55:17.285 11867 13128 I ReactNativeJS: 'appState', 'active'
07-31 13:55:17.285 11867 13128 I ReactNativeJS: 'nextAppState', 'background'
07-31 13:55:17.381 11867 13128 I ReactNativeJS: 'appState', 'background'
07-31 13:55:17.382 11867 13128 I ReactNativeJS: 'nextAppState', 'active'
07-31 13:55:17.993 11867 13128 I ReactNativeJS: 'appState', 'active'
07-31 13:55:17.993 11867 13128 I ReactNativeJS: 'nextAppState', 'background'
07-31 13:55:18.123 11867 13128 I ReactNativeJS: 'appState', 'background'
07-31 13:55:18.123 11867 13128 I ReactNativeJS: 'nextAppState', 'active'
07-31 13:55:22.418 11867 13128 I ReactNativeJS: 'appState', 'active'
07-31 13:55:22.418 11867 13128 I ReactNativeJS: 'nextAppState', 'background'

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.60 and verify if the issue still exists.

Details

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[jeromediaz]

React-native 0.63.3 the issue is still present

[adam-ashored]

@jeromediaz YES! It seems sporadic. I lost a full day figuring out the perf issue in my app was due to an infinite app state loop for no good reason. And when I finally figured it out, the issue magically fixed itself. An hour later, and the issue has returned. No freaking clue what's going on.

[adam-ashored]

@jeromediaz So I lost about two days to this issue, but I just figured out that on Android, the app goes into background state when requesting permissions on Android only. Something that isn't documented in as clear a way as it should be - found an issue here by someone who was bitten by the same bug. A very common pattern is to re-check permissions whenever the AppState changes (as the user may have changed permissions while they were outside of the app). You can easily get stuck into an infinite loop, by doing this, I fixed it by doing something like this:

const [status,setStatus] = useState('needs-checking');
const [permission,setPermission] = useState();

useEffect(() => {

  if(appState !== 'active') return;
  if(status !== 'needs-checking') return;
  const check = async () => {
     try {
        setStatus('checking');
        setPermission(await somePermissionCheckFn());
     } finally {
        setStatus('idle');
    }
 }
 check();
}, [appState, status]);

useEffect(() => {
  // check status in here - if the app is in the background, it may be because the permission is currently being checked
  if(appState !== 'active' && status !== 'checking') setStatus('needs-checking');
}, [appState, status]);