react-native: push notifications + parse

Question

I am currently working on a small app project to learn and try out react-native on iOS. I have some experience with parse (parse.com) and would love to integreate parse in the new app. Currently, I have no problems including parse js into react-native. I am able to log in with accounts etc. Now I need to send push notifications to a certain number of users (not all users).

What I don't understand is how push notifications should work with react-native and parse. Usually, I would connect a device installation with a user ID and then send a push to a certain number of users (which means to the devices with the corresponding installation). The react-native guide (https://facebook.github.io/react-native/docs/pushnotificationios.html#content) doesn't mention anything like that. And even though it gives the parse guide as a reference, I fail to see how I should be able to send pushes via parse. The guide leaves a lot of information to be desired too. To what source do these "Listeners" subscribe to? From which server am I going to send notifications etc?

As I understand, parse js is not able to read the current installation. I hesitate to add Parse iOS to the project too. This feels unnatural and shouldn't be a required thing to do although it would allow me to read the current installation. (but still parse js is not able to register that installation in order to subscribe to push notifications).

At this point, I feel a little bit lost. This piece of information (https://news.ycombinator.com/item?id=9271687) tells me that it should be possible somehow. I just can't figure out how :(

Hope someone can help me with that. Some advice would be truely appreciated.

Answer 1

EDIT: react-native implements this behavior by default now. The interesting part is the event listener for the register event which now returns the device token. Procedure is pretty straight forward now. Just have a look at the docs Also check out the answer by JWindey. Has some very important points in them that are needed to actually trigger the events.

After a while and a lot of trying things out, we came up with an answer today. This is our solution and it seems to be working pretty good.

We use the following resources:

• react-native
• parse-js
• Parse Rest API
• react-native-remote-push (https://github.com/darylrowland/react-native-remote-push)

Follow the parse guide for push notifications (https://parse.com/tutorials/ios-push-notifications) and get everything set up correctly (profiles, certificates etc.). Using the react-native-remote-push component later on, you don't have to follow the steps 5 and 6.

Now add react-native-remote-push to you project. We had to make some minor adjustments to the code (mainly dealing with legacy objC code), but that may depend on your own project.

Our project has some kind of "starting page" that is shown every time the app is opened. On this page, we deal with push notification permissions as well as with the registration of the device token and the listener for push notifications. Our goal is to mimic the same behavior that we would receive with the parse iOS SDK.

We need to register the device and subscribe to a push channel first. react-native-remote-push allows us to handle the permissions and receive a device token. We then proceed to use this device token to register this installation via the Rest API. This code is part of our componentDidMount() call.

var PushManager = require('./RemotePushIOS');
var registerInstallation = require('./Installation');

componentDidMount() {
    PushManager.requestPermissions(function(err, data) {
        if (err) {
            console.log("Could not register for push");
        } else {
            registerInstallation({
                "deviceType": "ios",
                "deviceToken": data.token,
                "channels": ["global"]
            });
         }
    });

    PushManager.setListenerForNotifications(this.receiveRemoteNotification);
}

PushManager is the required component from react-native-remote-push and registerInstallation is the function containing the Rest API call.

/**
* registers an installation
* data should look like the following:
* {
*  "deviceType": "ios", // or "android"
*  // if android is targeted set
*  // "pushType": "gcm",
*  // "GCMSenderId": "56712320625545", // whatever the later means
*  "deviceToken": "29e32a686fd09d053e1616cb48",
*  "channels": [
*       ""
*   ]
* };
* for more information visit:
* https://www.parse.com/docs/rest#installations-uploading
*/
var registerInstallation = function(data) {
    var url = "https://api.parse.com";
    url += "/1/installations";
    fetch(url, {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'X-Parse-Application-Id': PARSE_APP_ID,
            'X-Parse-REST-API-Key': PARSE_REST_KEY,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(processStatus)
    .then(parseJson)
    .catch(error);
};

module.exports = registerInstallation;

"processStatus", "parseJson" and "error" are just some small functions that handle the result of the API call. I can provide more details if necessary. This function allows us to add a lot of information via the "data" object, such as userid, app version, parse version etc., just as you're used to from the iOS SDK. We only have a basic example working right now, but it should be easy to extend on this basis. This step was very important for us, because we need to associate every installation with a certain user.

You should be able to receive push notifications by now. You can handle them in a "receiveRemoteNotification" function that acts as a listener. A basic function is provided on the website of the react-native-remote-push component.

I hope I could share some insight about this topic. If I should go into more detail on certain parts, I'll gladly add some more information.

Answer 2

I did some investigation with the Parse + react-native combination and have it working.

You have to add the Parse SDK (follow the guide) to your project, and link all the necessary libraries.

Don't forget to add the steps on point 5: https://parse.com/tutorials/ios-push-notifications.

Then add RCTPushNotificationManager.h + m (from react-native/Libraries) to your project. After that, add the following in AppDelegate.m:

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {
[[NSNotificationCenter defaultCenter] postNotificationName:@"RemoteNotificationReceived"
                                                    object:self
                                                  userInfo:userInfo];
}

That should do it.