Notifications.js

import { AsyncStorage, InteractionManager, Vibration } from "react-native";

import { NavigationActions } from "react-navigation";

import { Notifications } from "expo";

import _ from "lodash";

const appIcon = require("../../assets/icon.png");

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  if (!_navigator) return;
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

export const NavigationServices = {
  setTopLevelNavigator,
  navigate,
};

class NotificationsHandler {
  pendingNotification = null;
  appReady = false;
  _popup = null;

  setup() {
    this.notificationSubscription = Notifications.addListener(
      this.onNotification.bind(this)
    );
  }

  constructor() {
    this.appReady = false;
    this.pendingNotification = null;
    this.token = null;

    this.showPopup = _.throttle(this.showPopup.bind(this), 5000);
  }

  onNotification(notification) {
    if (!this.appReady) {
      this.pendingNotification = notification;
      return;
    }

    this.handleNotification(notification);
  }

  handleOpenNotification = async (notification) => {
    if (notification.data && notification.data.vista) {
      const params = notification.data.parametrosVista || {};
      NavigationServices.navigate(notification.data.vista, params);
    } else {
      const isLoggedIn = await isLoggedInAsync();
      NavigationServices.navigate(isLoggedIn ? "Notificaciones": "NotificacionesInvitado");
    }
  };

  handleNotification = (notification) => {
    console.log({ notification });
    if (notification.origin === "received") {
      this.showPopup({
        title: notification.title || _.get(notification, "data.title"),
        body: notification.body || _.get(notification, "data.body"),
        onPress: () => {
          this.handleOpenNotification(notification);
        }
      })
    } else if (notification.origin === "selected") {
      requestAnimationFrame(() => {
        this.handleOpenNotification(notification);
      });
    }
  };

  notifyAppReady() {
    if (this.appReady) return;
    this.appReady = true;

    console.log("app ready!");

    this.processPendingNotification();

/*     this.showPopup({
      title: "Hello World",
      body: "This is a sample message.\nTesting emoji 😀",
    }); */
  }

  setPopupComponet = (popupRef) => {
    this._popup = popupRef;
  };

  showPopup = (data={}, vibrate = true) => {
    if (vibrate) Vibration.vibrate(100, false);
    if (!this._popup) {
      setTimeout(() => this.showPopup(data, false), 3000);
      return;
    }

    this._popup.show({
      appIconSource: appIcon,
      appTitle: "App Name",
      timeText: "Now",
      // title: "Hello World",
      // body: "This is a sample message.\nTesting emoji 😀",
      ...data,
    });
  };

  async processPendingNotification() {
    if (this.pendingNotification) {
      console.log("pending notification", this.pendingNotification);
      setTimeout(() => {
        InteractionManager.runAfterInteractions(() => {
          this.onNotification(this.pendingNotification);
        });
      });
    }
  }
}

export const NotificationManager = new NotificationsHandler();

class App extends React.Component {

...

componentDidMount() {
NotificationManager.setup();
}

render () {
const notificationsPopUpProps = {
duration: 7500,
};
return (<>
<Navigator
ref={(nav) => {
this.navigator = nav;
NavigationServices.setTopLevelNavigator(nav);
}}
/>
<View
style={[
StyleSheet.absoluteFillObject,
{ zIndex: 9000, marginLeft: 0, marginTop: 0, marginRight: 8 },
]}
pointerEvents={"box-none"}
>
<NotificationPopup
{...notificationsPopUpProps}
ref={(ref) => {
NotificationManager.setPopupComponet(ref)
}}
/>

</>
);
}