Add data to componentDidAppear and componentDidDisappear events that let us know whether the component is appearing/disappearing because of navigation or because of app state changing #7405

🚀 Feature

In the following pull request:

#7177

Functionality was added to run componentDidAppear and componentDidDisappear when the appState changes on android. We are working on an application that was working under the assumption that the componentDidAppear and componentDidDisappear listeners on android did not run when appState changes. The feature I am proposing is that we send some data as part of the callback that informs us that the component is disappearing due to the appState going from 'active' to 'background'. This allows us to control better whether we want to run some logic when we are navigating to a new screen, and when appState is going from 'active' to 'background' (or both).

Motivation

The motivation is that we should have a way of knowing whether the component is disappearing because of navigation we are performing within the app, or whether the component is disappearing because the app is going into a background state.

Pitch

Currently, this is how you register a componentDidDisappear listener:

// Subscribe
const screenEventListener = Navigation.events().registerComponentDidDisappearListener(({ componentId, componentName }) => {

});
...
// Unsubscribe
screenEventListener.remove();

As you can see above, we get two arguments as part of the callback. One is componentId, and one is componentType. I think we should get another argument that represents whether this component is disappearing because of the app state changing. It could either be an argument that lets us know that appState has changed, or an argument that represents what is causing the event listener to run. So something along the lines of:

// Subscribe
const screenEventListener = Navigation.events().registerComponentDidDisappearListener(({ appStateChanged, componentId, componentName}) => {});
//  appStateChanged can be `true` or `false`

or something along the lines of

// Subscribe
const screenEventListener = Navigation.events().registerComponentDidDisappearListener(({ eventCause, componentId, componentName  }) => {});
//  values for eventCause can be `navigation` or `appState` (and more). The name can be improved.

Are you willing to resolve this issue by submitting a Pull Request?

• ✖️   Yes, I have the time, and I know how to start.
• ✅   Yes, I have the time, I do know where to start but I would need guidance.
• ✖️   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.