Appcenter-sdk-react-native: Push notification listener not firing when app is opened from notification

[danielmilner]

Description

When receiving a push notification on iOS and the app is closed (not in the background), the push notification listener does not appear to fire when the notification is touched. The app opens, but that is all that happens. I have the push listener in my outer-most .js file.

Repro Steps

Please list the steps used to reproduce your issue.

1. Force close the app.
2. Receive a push notification and touch it to open the app.

If you first open the app, then go back and touch the notification, it will fire the notification listener.

Details

1. Which SDK version are you using?
   
   
   
   • appcenter-push v1.4.0
   
   
2. Which OS version did you experience the issue on?
   
   
   
   • iOS 11
   
   
3. What device version did you see this error on? Were you using an emulator or a physical device?
   
   
   
   • iPhone 7 Plus physical device
   
   
4. What third party libraries are you using?
   
   
   
   • n/a
   
   
5. Run the following command and paste the output below: react-native info

Environment:
OS: macOS High Sierra 10.13.3
Node: 7.10.1
Yarn: 1.1.0
npm: 4.2.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0

1. If you're developing for React Native iOS, run the following command and paste the output below: pod --version

1.4.0

[achocron]

Hi- thanks for the information and sorry about the delayed response. I'm looking into this and I'll let you know when I have useful information.

[achocron]

@danielmilner Would you mind sharing the code where you set the listener? I've tried to reproduce the scenario on my end, but the listener is actually fired for me, even if I force close the app then press the notification.

[danielmilner]

No problem. Here's everything from my index.js file.

import React from 'react';
import {
    AppRegistry,
    AppState,
    Alert,
    Platform,
    StyleSheet,
    View,
    StatusBar,
} from 'react-native';
import { Provider, connect } from 'react-redux';
import store from './redux';
import { addNotification } from './redux/actions/notifications';
import Push from 'appcenter-push';

import RootNav from './navigation/RootNav';
import MainTabNav from './navigation/MainTabNav';

export default class discovery extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <View style={styles.container}>
                    <StatusBar barStyle="default" />
                    <MainTabNav />
                </View>
            </Provider>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.2)',
    },
});

AppRegistry.registerComponent('discovery', () => discovery);

Push.setListener({
    onPushNotificationReceived: pushNotification => {
        let message = pushNotification.message;
        let title = pushNotification.title;
        let customProperties = [];
        let timestamp = Date.now();

        // Custom name/value pairs set in the App Center web portal are in customProperties
        if (
            pushNotification.customProperties &&
            Object.keys(pushNotification.customProperties).length > 0
        ) {
            customProperties = pushNotification.customProperties;
        }

        store.dispatch(
            addNotification(title, message, customProperties, timestamp),
        );
    },
});

[achocron]

Thanks for the code. I've been trying to reproduce the issue, but I still can't. I don't see anything wrong with your index.js, though. Are you able to reproduce this on your end in a smaller project?

Maybe in the push handler do Alert.alert(title, message); to verify that the handler gets called (that's how I have been doing it; I admittedly don't know much about react redux or how it works and I am not testing with it).

[danielmilner]

Thanks for looking in to this. I'll try that.

[danielmilner]

I verified that Alert.alert() does fire correctly. Apparently redux isn't available that early. I'll have to find another way to store the notification until later. Thanks for your help.

[chrisehlee]

Hello. I'm facing this same issue however in my case i'm trying to perform a deep-link(i'm using react-native-navigation) after the notification has been tapped.
It's working fine on android: iOS not so much. Please i'd appreciate if anyone is willing to point me in the right direction. Thanks

[iamclement]

Hello @chrisehlee, which version of the AppCenter RN SDK are you using?

[iamclement]

I am asking because the latest release (v1.10.0) is fixing a bug where the AppCenter push callback is missed on iOS when the app or another third party library is implementing a UNUserNotificationCenterDelegate.

[chrisehlee]

@clpolet Version 1.8.1. I eventually got it working as expected. I went back to the docs (on react-native appcenter-sdk for ios), modified the AppDelegate.m as suggested and in my index.js to below.

// Code removed for brevity
Push.setListener({
  onPushNotificationReceived(pushNotification) {
    ...
    if (message === null) {
      ...
      Navigation.handleDeepLink({
        link: props.screen,
        payload: props
      });
      // The above works fine on android and it turns out there's no way it'll work on iOS. So i duplicated the above code outside this function
    }
   ...
}

Thanks @clpolet for reaching out, i appreciate so much.