Sending multiple push notifications using Expo on React Native

Question

I am trying to setup push notifications for my app. I am using the Expo push-functionality

It works pretty well so far but now I want to send push notifications to multiple people. In that case Expo tells me to send the HTTP-Body like this:

[{
  "to": "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
  "sound": "default",
  "body": "Hello world!"
}, {
  "to": "ExponentPushToken[yyyyyyyyyyyyyyyyyyyyyy]",
  "badge": 1,
  "body": "You've got mail"
}]

I am struggling here a bit. In my app I set it up like this:

fetch('https://exp.host/--/api/v2/push/send', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Accept-encoding': 'gzip, deflate',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({tokenArray})
    });

tokenArray comes from a firebase call:

firebase.database().ref(`users/${user.uid}/`).once('value', snapshot => {
          const token = snapshot.val().token;
            tokenArray.push({
              to: token,
              title: 'Check out and Entvag!',
              body: `Help ${creator} to decide!`
            })

I get the array with the tokens and send it to the HTTP

This is the Response (Error) I get from the server:

Response: Response {
  "_bodyInit": "{\"errors\":[{\"code\":\"API_ERROR\",\"message\":\"child \\\"to\\\" fails because [\\\"to\\\" is required], \\\"value\\\" must be an array.\"}]}",
  "_bodyText": "{\"errors\":[{\"code\":\"API_ERROR\",\"message\":\"child \\\"to\\\" fails because [\\\"to\\\" is required], \\\"value\\\" must be an array.\"}]}",
  "headers": Headers {
    "map": Object {
      "cache-control": Array [
        "public, max-age=0",
      ],
      "content-length": Array [
        "122",
      ],
      "content-type": Array [
        "application/json; charset=utf-8",
      ],
      "date": Array [
        "Wed, 31 Jan 2018 02:19:39 GMT",
      ],
      "server": Array [
        "nginx/1.11.3",
      ],
      "strict-transport-security": Array [
        "max-age=15724800; preload",
      ],
      "vary": Array [
        "Accept-Encoding, Origin",
      ],
      "x-content-type-options": Array [
        "nosniff",
      ],
    },
  },
  "ok": false,
  "status": 400,
  "statusText": undefined,
  "type": "default",
  "url": "https://exp.host/--/api/v2/push/send",
}

I think it has to do with the way the array is structured (Or gets structured by JSON.stringify???) On console.log the Array (after JSON.stringify) looks like this:

{"tokenArray":[{"to":"ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]","title":"Check out and Entvag!","body":"Help  to decide: thisVal or thatVal}"}]}

How can I structure the array that it looks like Expo wants it (First code-snippet)? Or do you guys have any other idea what I'm doing wrong? Thank you all in advance!

I have the same issue -> @Zander how did you solve this problem ? — Laurent Roger
I don't have access to the working code right now but I still remember that it was just one small problem with curly braces. I sent an object instead of an array (at least I guess). I think changing "body: JSON.stringify({tokenArray})" to "body: JSON.stringify(tokenArray)" solved the issue for me. — Zander
thank you @Zander. I also found the typo error on my side as I used HTTP.post (meteor server side instead of fetch at client side : docs.meteor.com/api/http.html), body key is replaced by « content » or « data »,works like a charm after this correction. — Laurent Roger

Zander Zander · Accepted Answer · 2018-07-02T17:18:22

I solved this error a long time ago but forgot to update it here on Stackoverflow. The error was here:

fetch('https://exp.host/--/api/v2/push/send', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Accept-encoding': 'gzip, deflate',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({tokenArray})
    });

I passed in tokenArray as an object by using {} to wrap it. This is the working code snippet:

fetch('https://exp.host/--/api/v2/push/send', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Accept-encoding': 'gzip, deflate',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(tokenArray)
});

Sending multiple push notifications using Expo on React Native

1 Answers