Search code examples
react-native-navigationwix-react-native-navigation

How to use a global ScreenVisibilityListener class?


I'm referring to this page of the official doc: https://wix.github.io/react-native-navigation/#/screen-api?id=listen-to-visibility-events-globally

After I create this class, how I tell navigator to use it?


Solution

  • ScreenVisibilityListener listens to global events fired on the native side through react-native eventDispatcher, the navigator doesn't need to know about it.

    Example usage:

    import {ScreenVisibilityListener} from 'react-native-navigation';
    
    new ScreenVisibilityListener({
      willAppear: ({screen}) => {
        console.log(`Displaying screen ${screen}`) 
      },
      didAppear: ({screen, startTime, endTime, commandType}) => {
        console.log('screenVisibility', `Screen ${screen} displayed in ${endTime - startTime} millis [${commandType}]`)
      },
      willDisappear: ({screen}) => {
        console.log(`Screen will disappear ${screen}`) 
      },
      didDisappear: ({screen}) => {
        console.log(`Screen disappeared ${screen}`)
      }
    }).register();