0.3.1 • Published 5 years ago

react-native-screen-listener v0.3.1

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

react-native-screen-listener

Build Status

This library was created to wrap previous and current pages under one callback. This library only works with react-native-navigation v1. You can find the original event listener if you search for ScreenVisibilityListener in the github repo For deeper understanding of the navigation behavior please refer to library github pages.

Getting started

$ npm install react-native-screen-listener --save

Usage

import ScreenListener from 'react-native-screen-listener';

const beforeCallback = screenData => {
  //TODO something with the previous and current screen before the update
}

const afterCallback = screenData => {
  //TODO something with the previous and current screen after update
}

//initialize reference
const listener = new ScreenListener({ beforeCallback, afterCallback });
//register event emitters
listener.register();

//unregister to avoid leaks
listener.unregister();

Adding event listeners

Event listener is a callback which is executed when a certain navigation event happens for a certain screen. For an example, lets say I want to print out message "Hello home_screen!" when ever home_screen appears.

listener.registerEventCallback(ScreenListener.AFTER, 'home_screen', data => {
  console.log(`Hello ${data.screen}!`)
});

ScreenData

Screen data returns an object with two keys: previous and current. Both these represent the screen data. They contain:

ValueDescription
commandTypeName of the command issued to get to this screen. Only at current.
endTimeTime when the new screen appeared/disappeared
screenName of the screen
startTimeTime when the screen started to initialize. Only at current.
statusWhat happen to the screen. This is only set when subscribing events.