Silent iOS Push Notification with React Native when app is in background

I have a React Native app where I am trying to get a silent iOS push notification sent to a handler in JavaScript.

The behaviour I am seeing is that the didReceiveRemoteNotification function in AppDelegate gets called but my handler in JavaScript doesn’t get called unless the app is in the foreground or has only been closed recently.

  • Disable Debugging in Expo For React Native App
  • Can't send an event from main thread method with iOS and react native
  • Ignore errors for self-signed SSL certs using the fetch API in a ReactNative App?
  • ReactNative - Unhandled JS Exception: SyntaxError
  • How can I regenerate ios folder in React Native project?
  • making a multiline, expanding TextInput with React-Native
  • The thing I am confused about is clearly the app is being woken up and having it’s didReceiveRemoteNotification function called, but then the call to [RCTPushNotificationManager didReceiveRemoteNotification:notification] doesn’t seem to do anything.

    Also, if I open the app after a notification has been received, then I see the React Native handler is called at that point.

    My didReceiveRemoteNotification function looks like this:

    - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification
    {
      NSLog(@"didReceiveRemoteNotification");
    
      [RCTPushNotificationManager didReceiveRemoteNotification:notification];
    }
    

    In the Root component of my React Native app I have this:

    componentDidMount() {
        AppState.addEventListener('change', this.handleAppStateChange);
    
        PushNotificationIOS.addEventListener('notification', (notification) => {
            console.log("notification recieved");
        })
    }
    handleAppStateChange(currentAppState) {
        console.log(currentAppState);
    }
    

    I am sending a push notification using AWS SNS with the following message:

    {
    "APNS_SANDBOX":"{\"aps\":{\"content-available\":\"1\"}}"
    }
    

    Here is the log from XCode:

    2016-04-20 10:38:01.255 [info][tid:com.facebook.React.JavaScript] inactive
    2016-04-20 10:38:01.986 [info][tid:com.facebook.React.JavaScript] background
    2016-04-20 10:38:17.279 test[4056:1383261] didReceiveRemoteNotification
    2016-04-20 10:38:17.284 [info][tid:com.facebook.React.JavaScript] notification recieved
    2016-04-20 10:44:56.330 test[4056:1383261] didReceiveRemoteNotification
    2016-04-20 10:44:56.332 [info][tid:com.facebook.React.JavaScript] notification recieved
    2016-04-20 10:46:07.091 test[4056:1383261] didReceiveRemoteNotification
    2016-04-20 10:49:30.039 [info][tid:com.facebook.React.JavaScript] notification recieved
    2016-04-20 10:49:30.639 [info][tid:com.facebook.React.JavaScript] active
    

    In this log, 3 push notifications where sent. The ones received at 10:38 and 10:44 both called JavaScript correctly.
    However, the one received at 10:46 didn’t call the handler in JavaScript until I opened the app at 10:49.

    Is there anything I can do to ensure the call to my React Native code occurs even with app not running?

    Solutions Collect From Internet About “Silent iOS Push Notification with React Native when app is in background”

    In order for notifications to hit your app in the background you need to also define a fetchCompletionHandler, with a completion handler function like below. The aps:{content-available:1} payload should wake up you application and trigger this code in your AppDelegate, and in turn hit your JavaScript in RN.

    // fetch notifications in the background and foreground
    -(void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification 
    fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
    
    [RCTPushNotificationManager didReceiveRemoteNotification:notification];
    completionHandler(UIBackgroundFetchResultNewData);
    NSLog(@"Notification Body %@", notification);
    
    }