sometimes it works, sometimes it doesn't

[NorseGaud]

appstate-bug.mov

Simple use-case on android emulator using Contacts app

  React.useEffect(() => {
    const listener = AppLifecycle.addEventListener('change', (state) => {
      console.log('main state', state)
      if (state === 'active') {
        console.log('active')
        dispatch(getAndSetContactsSaga())
      }
    });

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

It seems to work for a bit, then stop triggering the "main state" log messages.

[NorseGaud]

Ok it seems to work if I don't do anything in the Contacts app. If I just forground the contacts app, then load my app again, it's fine. If I click on a contact for example, it seems to break the listener.

[NorseGaud]

Looks like other stuff causes it to break too. Really perplexing 🤔

[NorseGaud]

Ok, figured I'd test this out a bit more.

In my main _layout.tsx (expo app) I have the stuff that runs on first load. Here is what I've done:

React.useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      if (session) {
        dispatch(setAuthSessionReducer(session))
      }
    })
    supabase.auth.onAuthStateChange((event, session) => {
      dispatch(setAuthSessionReducer(session))
    })
    // Listener for foregrounding the app and getting latest data
    // Note: infinite loops could happen if the function brings anything to the foreground like a permissison request dialogue, etc. Use the lastFetchTime to avoid this.
    const subscription = AppLifecycle.addEventListener('change', state => {
      console.log(`AppLifecycle has come to the ${state}!`, random);
      if (
        appState.current.match(/inactive|background/) &&
        state === 'active'
      ) {
        const now = Date.now();
        // Only fetch if it's been more than 5 seconds since last fetch
        if (now - lastFetchTime.current > 5000) {
          lastFetchTime.current = now;
          dispatch(getAndSetContactsSaga())
        }
      }
      appState.current = state;
      appStateVisible.current = appState.current;
      // console.log('AppState', appState.current, random);
    });
  
    return () => {
      subscription?.remove();
    };
    
  }, [])

After a few runs, I see it stop working (never comes back to active):

 LOG  [AppContent]
 LOG  AppLifecycle has come to the background! 0.5690594242924534
 LOG  AppLifecycle has come to the active! 0.5690594242924534
 LOG  [getAndSetContacts]
 LOG  AppLifecycle has come to the background! 0.5690594242924534
 LOG  AppLifecycle has come to the active! 0.5690594242924534
 LOG  AppLifecycle has come to the background! 0.5690594242924534

I then change it to AppState instead with the same exact code and it also has the problem. After interactions with anything outside of the app when it's backgrounded, the listener seems to just poof and disappear. Seems like a react-native issue and not this package specifically.

[NorseGaud]

Opened react/react-native#52447

[NorseGaud]

Seems like a metro/development build issue: react/metro#1526

[douglasjunior]

Great investigation, let's follow it, thanks.

[NorseGaud]

From the react native team:

yeah unfortunately backgrounding the app on some platforms will close any open WebSocket connections, which will disconnect DevTools, since the JS engine and debugger server run on the target device. This is a bit of a limitation, pretty much only for the use case you are testing 😅