CODEWITHSUNDEEP
react-nativepush-notificationexpo
Tiago Palmas
Tiago Palmas

Reputation: 153

Expo notification doesnt fire method when app is killed/closed

im using react native expo and push notification works fine when app is running or in background but with the app is close. it doesnt call the method to handle the notification. I need to redirect to detail page. I tried to use function compoents and class components, tried to migrade to legacy notification and the new one.

import React, {useState, useEffect, useRef} from 'react';
import {
    Image, ScrollView,
    StyleSheet, Text, TouchableOpacity, Platform,
    View, Linking,

} from 'react-native';
import * as Notifications from "expo-notifications";


const HomeScreen = (props) => {
  useEffect(() => {
        notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
        
            const {request, date} = notification ||{}
            const {content} = request ||{}
            const {data} = content ||{}
            const {annKey,type} = data ||{}
           
            if(annKey) {
              //  navigation.navigate('Detail', {annKey,  updateFeed: true, onSelect},)
            }
         

        });


        responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
           

            const {notification} = response ||{}
            console.log(notification);
            const {request, date} = notification ||{}
            const {content} = request ||{}
            const {data} = content ||{}
            const {annKey, type} = data ||{}


            if(annKey){
               navigation.navigate('Detail', {annKey,  updateFeed: true, onSelect},)
            }

          
        });

        return () => {
            Notifications.removeNotificationSubscription(notificationListener);
            Notifications.removeNotificationSubscription(responseListener);
        };
    }, []);

}

export default HomeScreen;

Upvotes: 3

Views: 8908

Answers (2)

JAKE
JAKE

Reputation: 547

You have to add this to your app.json file:

    "android": {
      "useNextNotificationsApi": true,
    },

Upvotes: 2

simokhalil
simokhalil

Reputation: 183

The problem is that the useEffect() get called too late after the app has finished initializing. Therefore the listener is not added before the system has abandoned the notification, and the handler not called.

Fortunately, since you are using the new expo-notifications library, it introduced the useLastNotificationResponse() React hook. It can replace the addNotificationResponseReceivedListener() listener and returns the last notification the user interacted with (i.e. tap). It can be safely used in a useEffect() hook.

You can find the documentation here : https://docs.expo.io/versions/latest/sdk/notifications/#uselastnotificationresponse-undefined--notificationresponse--null

Here is how to use it (it's better to implement it on your root component):

import * as Notifications from 'expo-notifications';

export default function App() {
  const lastNotificationResponse = Notifications.useLastNotificationResponse();
  
  React.useEffect(() => {
    if (
      lastNotificationResponse &&
      lastNotificationResponse.notification.request.content.data['someDataToCheck'] &&
      lastNotificationResponse.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER
    ) {
      // navigate to your desired screen
    }
  }, [lastNotificationResponse]);

  return (
    /*
     * your app
     */
  );
}

Upvotes: 11

Related Questions