Setting up react native push notification with wix react native navigation v3 - problem when app is closed

Question

I am sending a notification that navigates the user to a specific screen when the notification is clicked. This works perfectly when the app is opened or running in the background, however, when the app is closed onNotification is not being called. I am using react native push notification and wix react native navigation V3.

I notice the problem by putting a console log inside on notification and it was never called.

In index.js I have the follwing code

import { start } from './App';

start();

In App.js

import React from 'react';
import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
import configureStore from './src/configureStore';
import { configurePush } from './src/utils/push-notifications';

import Login from './src/components/views/Login';
import Home from './src/components/views/Home';
import Cart from './src/components/views/Cart';
import CartDetail from './src/components/views/Cart/Detail';
import Orders from './src/components/views/Orders';
... the rest of the screens


const store = configureStore();
configurePush(store);

export function registerScreens() {
  Navigation.registerComponent('provi.Login', () => (props) => (
  <Provider store={store}>
    <Login {...props} />
  </Provider>
  ), () => Login);

  Navigation.registerComponent('provi.Home', () => (props) => (
  <Provider store={store}>
    <Home {...props} />
  </Provider>
  ), () => Home);

  Navigation.registerComponent('provi.Cart', () => (props) => (
  <Provider store={store}>
    <Cart {...props} />
  </Provider>
  ), () => Cart);
... the rest of the screens

}

export function start() {
  registerScreens();
  Navigation.events().registerAppLaunchedListener(async () => {
    Navigation.setRoot({
      root: {
        stack: {
          children: [{
            component: {
              name: 'provi.Login',
              options: {
                animations: {
                  setStackRoot: {
                    enabled: true
                  }
                },
                topBar: {
                  visible: false,
                  drawBehind: true,
                  background: {
                    color: '#30DD70'
                  },
                },
                bottomTabs: {
                  visible: false
                }
              }
            }
          }],
        }
      }
    });
  });
}

Then the configuration of the notification is the following:

import PushNotificationIOS from "@react-native-community/push-notification-ios";
import { Navigation } from 'react-native-navigation';
import PushNotification from 'react-native-push-notification';
import DeviceInfo from 'react-native-device-info';
import fetchApi from "../store/api";
import { addNotification } from '../store/notifications/actions';
import { SENDER_ID } from '../constants';

export const configurePush = (store) => {
  PushNotification.configure({
      onRegister: function(token) {
          if (token) {
            const registerData = {
              token: token.token,
              uid: DeviceInfo.getUniqueID(),
              platform: token.os
            }
            // console.log(registerData);
            fetchApi('/notificaciones/register', 'POST', registerData).catch(err => console.log(err))
          }
      },
      onNotification: function(notification) {
        if (notification) {
          store.dispatch(addNotification(notification)); // Almacena la notification
          const action = notification.data.click_action;
          if (action === 'oferta') {
            const remotePost = notification.data.data;
            Navigation.setRoot({
              root: {
                stack: {
                  children: [{
                    component: {
                      name: 'provi.Home',
                      options: {
                        animations: {
                          setStackRoot: {
                            enabled: true
                          }
                        },
                        topBar: {
                          visible: true,
                          drawBehind: false,
                        },
                        passProps: {
                          test: 'test',
                          notification: remotePost
                        }
                      }
                    }
                  }],
                }
              }
            });
          } else if (action === 'seller') {
            const remoteSeller = notification.data.data;
            Navigation.push('Home', {
              component: {
                name: 'provi.Seller',
                passProps: {
                  id: remoteSeller._id,
                  featureImage: remoteSeller.featureImage
                },
                options: {
                  topBar: {
                    title: {
                      text: 'Nueva Marca!'
                    }
                  },
                  bottomTabs: {
                    visible: false,
                    drawBehind: true
                  }
                }
              }
            });
          } else if (action === 'sellerClosingSoon') {
            const remoteSeller = notification.data.data;
            Navigation.push('Home', {
              component: {
                name: 'provi.ClosingSoon',
                passProps: {
                  id: remoteSeller._id,
                  featureImage: remoteSeller.featureImage
                },
                options: {
                  topBar: {
                    title: {
                      text: 'Marcas que cierran pronto'
                    }
                  },
                  bottomTabs: {
                    visible: false,
                    drawBehind: true
                  }
                }
              }
            });
          }
        }
        notification.finish(PushNotificationIOS.FetchResult.NoData);
      },
      senderID: SENDER_ID,
      popInitialNotification: true,
      requestPermissions: true
  });
}

I am expecting to see the console.log at least but it's not happening.

What is the correct setup for RNN V3 with RN push notification?

Answer 1

the notifications are two types: background and foreground.

You use foreground notifications. But when an app is closed and you receive a new notification your callback cannot be fired.

You should use something like getInitialNotification to get the notification data.

https://github.com/zo0r/react-native-push-notification/blob/master/component/index.android.js#L19

I hope that helps.

Thanks