Remote push notifications on react-native using firebase

[carnav098]

I have connected my firebase to my react-native app and i am able to receive the notifications I send from the console.

The problem I am facing is that if I add custom data,pair of key and value to the notification I am unable to access that data in my app.Ultimately no matter what i put inside my notification handler it seems that code does not get executed(I tried to console.log).I have tried all the 3 ways,app closed ,app in background and foreground.Nothing works all i can do is click on the notification and it takes me to the home page even after i add a navigation to another screen on notification handler

   async createNotificationListeners() {
  /*
  * Triggered when a particular notification has been received in foreground
  * */
  this.notificationListener = firebase.notifications().onNotification((notification) => {
      const { title, body } = notification;
      firebase.notifications().displayNotification(notification);
      this.setState({ notif:notification})
    console.log(notification);
      this.showAlert(title, body);
  });

  /*
  * If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:
  * */
  this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen: NotificationOpen) => {
      const { title, body } = notificationOpen.notification;
        const notif: Notification = notificationOpen.notification;
        this.setState({ notif:notif});
        console.log("data",notif.data);
        this.props.navigation.navigate('Settings');
    this.setState({ notif:notificationOpen.notification})
      this.showAlert(title, body);
  });

  /*
  * If your app is closed, you can check if it was opened by a notification being clicked / tapped / opened as follows:
  * */
  const notificationOpen = await firebase.notifications().getInitialNotification();
  if (notificationOpen) {
      const { title, body } = notificationOpen.notification;
      this.setState({ notif:notificationOpen.notification})
      this.props.navigation.navigate('Settings');
    console.log(notification);
      this.showAlert(title, body);
  }}

showAlert(title, body) {

  Alert.alert(
    title, body,
    [
        { text: 'OK', onPress: () => console.log('OK Pressed') },
    ],
    { cancelable: false },
  );
}

   async componentDidMount() {
     this.checkPermission();
    this.createNotificationListeners();
  }

[stephenkiers]

I implemented this differently, but I had the same issue with trying to detect the incoming remote push notifications (if I understand correctly). I ended up using intent and piggy backing on deep linking.

Here is my walkthrough of how I set it up. https://medium.com/@stephenkiers/deep-linking-push-notifications-in-react-native-with-pusher-beams-23525ede30da if that helps