Skip to content
react-native

React Native Push Notifications

Apr 14th, 2021Abhishek EH32 Min Read

In this tutorial, you will learn:

  • How to display a local notification when the app is both in background and foreground.
  • How to send push notifications in React Native using Expo.
  • How to send push notifications from one phone to another.
  • To build a back-end to send push notifications to your users.

Local Notifications

You might have come across apps which will display notification locally, such as a reminder app. These notifications are called local notifications since they are sent from within the app.

First, let's learn how to display a local notification in our app and later we will make use of these local notifications to display push notifications.

Creating the Project

Create a new Expo project using the following command. While creating the project, it would ask you to select a template. Choose "blank" template.

1expo init react-native-push-notifications

In order to show notifications, we need to install the package expo-notifications. Also, in iOS we need explicit permission from the user to display notifications. The package expo-permissions is used to handle permissions. So let's install both of them by running the following command:

1expo install expo-notifications expo-permissions

Now open app.json and add "useNextNotificationsApi": true for enabling notifications in Android:

app.json
1{
2 "expo": {
3 "name": "react-native-push-notifications",
4 "slug": "react-native-push-notifications",
5 "version": "1.0.0",
6 "orientation": "portrait",
7 "icon": "./assets/icon.png",
8 "splash": {
9 "image": "./assets/splash.png",
10 "resizeMode": "contain",
11 "backgroundColor": "#ffffff"
12 },
13 "updates": {
14 "fallbackToCacheTimeout": 0
15 },
16 "assetBundlePatterns": ["**/*"],
17 "ios": {
18 "supportsTablet": true
19 },
20 "android": {
21 "adaptiveIcon": {
22 "foregroundImage": "./assets/adaptive-icon.png",
23 "backgroundColor": "#FFFFFF"
24 },
25 "useNextNotificationsApi": true
26 },
27 "web": {
28 "favicon": "./assets/favicon.png"
29 }
30 }
31}

Update the App.js with the following code:

App.js
1import React, { useEffect } from "react"
2import { StyleSheet, View, Button } from "react-native"
3import * as Notifications from "expo-notifications"
4import * as Permissions from "expo-permissions"
5
6// Show notifications when the app is in the foreground
7Notifications.setNotificationHandler({
8 handleNotification: async () => {
9 return {
10 shouldShowAlert: true,
11 }
12 },
13})
14
15export default function App() {
16 useEffect(() => {
17 // Permission for iOS
18 Permissions.getAsync(Permissions.NOTIFICATIONS)
19 .then(statusObj => {
20 // Check if we already have permission
21 if (statusObj.status !== "granted") {
22 // If permission is not there, ask for the same
23 return Permissions.askAsync(Permissions.NOTIFICATIONS)
24 }
25 return statusObj
26 })
27 .then(statusObj => {
28 // If permission is still not given throw error
29 if (statusObj.status !== "granted") {
30 throw new Error("Permission not granted")
31 }
32 })
33 .catch(err => {
34 return null
35 })
36 }, [])
37
38 const triggerLocalNotificationHandler = () => {
39 Notifications.scheduleNotificationAsync({
40 content: {
41 title: "Local Notification",
42 body: "Hello this is a local notification!",
43 },
44 trigger: { seconds: 5 },
45 })
46 }
47
48 return (
49 <View style={styles.container}>
50 <Button
51 title="Trigger Local Notification"
52 onPress={triggerLocalNotificationHandler}
53 />
54 </View>
55 )
56}
57
58const styles = StyleSheet.create({
59 container: {
60 flex: 1,
61 backgroundColor: "#fff",
62 alignItems: "center",
63 justifyContent: "center",
64 },
65})

Displaying Notifications when the App is in the Foreground

By default, notifications will be displayed only when the app is running in the background. But there will be scenarios where you would want to show the notification when the app is running in the foreground, like informing the user about the completion of a task or reminding them to do something. To enable the notifications when the app is in the foreground, we call setNotificationHandler function with a handleNotification callback and pass shouldShowAlert as true

Requesting Permission in iOS

In iOS, you need explicit permission from the user to show the notification. For that, we call Permissions.getAsync(Permissions.NOTIFICATIONS) to check if we already have the permission. If we do not have the permission, then we call Permissions.askAsync(Permissions.NOTIFICATIONS) to get permission from the user. If the user does not provide the permission, then we throw an error. However, we are not handling the error in the catch block in our code. You may show an alert to the user telling them they need to provide the permission.

Scheduling the Notification

When the button is pressed, we call Notifications.scheduleNotificationAsync inside triggerLocalNotificationHandler function. It takes an object as an argument with properties content and trigger.

  • content - We can pass the notification title and body inside the content. You can check out the other properties here.
  • trigger - Tells when to show the notification. You can specify an absolute time or a relative time. In our case, we are specifying a relative time of 5 seconds from now. If you want the notification to be shown immediately, you can pass the trigger as null.

To repeat the notification, you can use the repeat property as shown below:

1Notifications.scheduleNotificationAsync({
2 content: {
3 title: 'Remember to drink water!,
4 },
5 trigger: {
6 seconds: 60 * 20,
7 repeats: true
8 },
9});

You can read about other ways of using the trigger input here.

Now if you run the app in iOS, you will be asked for permission:

iOS Permission

If you press the button, should be able to see the notification after 5 seconds: Local Notification

Handling Received Notifications

You can subscribe to the received notification by passing a callback to Notifications.addNotificationReceivedListener and add a function to be called when the notification is clicked by passing it to Notifications.addNotificationResponseReceivedListener as shown below:

1import React, { useEffect } from "react"
2import { StyleSheet, View, Button } from "react-native"
3import * as Notifications from "expo-notifications"
4import * as Permissions from "expo-permissions"
5
6// Show notifications when the app is in the foreground
7Notifications.setNotificationHandler({
8 handleNotification: async () => {
9 return {
10 shouldShowAlert: true,
11 }
12 },
13})
14
15export default function App() {
16 useEffect(() => {
17 // Permission for iOS
18 Permissions.getAsync(Permissions.NOTIFICATIONS)
19 .then(statusObj => {
20 // Check if we already have permission
21 if (statusObj.status !== "granted") {
22 // If permission is not there, ask for the same
23 return Permissions.askAsync(Permissions.NOTIFICATIONS)
24 }
25 return statusObj
26 })
27 .then(statusObj => {
28 // If permission is still not given throw error
29 if (statusObj.status !== "granted") {
30 throw new Error("Permission not granted")
31 }
32 })
33 .catch(err => {
34 return null
35 })
36 }, [])
37
38 useEffect(() => {
39 const receivedSubscription = Notifications.addNotificationReceivedListener(
40 notification => {
41 console.log("Notification Received!")
42 console.log(notification)
43 }
44 )
45
46 const responseSubscription = Notifications.addNotificationResponseReceivedListener(
47 response => {
48 console.log("Notification Clicked!")
49 console.log(response)
50 }
51 )
52 return () => {
53 receivedSubscription.remove()
54 responseSubscription.remove()
55 }
56 }, [])
57
58 const triggerLocalNotificationHandler = () => {
59 Notifications.scheduleNotificationAsync({
60 content: {
61 title: "Local Notification",
62 body: "Hello this is a local notification!",
63 },
64 trigger: { seconds: 5 },
65 })
66 }
67
68 return (
69 <View style={styles.container}>
70 <Button
71 title="Trigger Local Notification"
72 onPress={triggerLocalNotificationHandler}
73 />
74 </View>
75 )
76}
77
78const styles = StyleSheet.create({
79 container: {
80 flex: 1,
81 backgroundColor: "#fff",
82 alignItems: "center",
83 justifyContent: "center",
84 },
85})

Push Notification

To send push notification to a device through Expo, we need to know the push token of that device. We can fetch the push token by calling Notifications.getExpoPushTokenAsync function:

App.js
1import React, { useEffect } from "react"
2import { StyleSheet, View, Button } from "react-native"
3import * as Notifications from "expo-notifications"
4import * as Permissions from "expo-permissions"
5
6// Show notifications when the app is in the foreground
7Notifications.setNotificationHandler({
8 handleNotification: async () => {
9 return {
10 shouldShowAlert: true,
11 }
12 },
13})
14
15export default function App() {
16 useEffect(() => {
17 // Permission for iOS
18 Permissions.getAsync(Permissions.NOTIFICATIONS)
19 .then(statusObj => {
20 // Check if we already have permission
21 if (statusObj.status !== "granted") {
22 // If permission is not there, ask for the same
23 return Permissions.askAsync(Permissions.NOTIFICATIONS)
24 }
25 return statusObj
26 })
27 .then(statusObj => {
28 // If permission is still not given throw error
29 if (statusObj.status !== "granted") {
30 throw new Error("Permission not granted")
31 }
32 })
33 .then(() => {
34 return Notifications.getExpoPushTokenAsync()
35 })
36 .then(response => {
37 const deviceToken = response.data
38 console.log({ deviceToken })
39 })
40 .catch(err => {
41 return null
42 })
43 }, [])
44
45 useEffect(() => {
46 const receivedSubscription = Notifications.addNotificationReceivedListener(
47 notification => {
48 console.log("Notification Received!")
49 console.log(notification)
50 }
51 )
52
53 const responseSubscription = Notifications.addNotificationResponseReceivedListener(
54 response => {
55 console.log("Notification Clicked!")
56 console.log(response)
57 }
58 )
59 return () => {
60 receivedSubscription.remove()
61 responseSubscription.remove()
62 }
63 }, [])
64
65 const triggerLocalNotificationHandler = () => {
66 Notifications.scheduleNotificationAsync({
67 content: {
68 title: "Local Notification",
69 body: "Hello this is a local notification!",
70 },
71 trigger: { seconds: 5 },
72 })
73 }
74
75 return (
76 <View style={styles.container}>
77 <Button
78 title="Trigger Local Notification"
79 onPress={triggerLocalNotificationHandler}
80 />
81 </View>
82 )
83}
84
85const styles = StyleSheet.create({
86 container: {
87 flex: 1,
88 backgroundColor: "#fff",
89 alignItems: "center",
90 justifyContent: "center",
91 },
92})

If you run the application now in the emulator, you will be able to see the token printed in the terminal.

Now you can send push notifications to the emulator using the expo notifications tool, just by providing the title, message and Expo push token.

Notifications Tool Android

Push notifications are not supported in the iOS emulator. It needs to be tested in a real device.

Sending notification from one device to another

If you have to send notification from one device to another you can do so by posting it to the expo endpoint as shown in the code below:

App.js
1import React, { useEffect, useState } from "react"
2import { Button, StyleSheet, View, TextInput } from "react-native"
3import * as Notifications from "expo-notifications"
4import * as Permissions from "expo-permissions"
5
6// Show notifications when the app is in the foreground
7Notifications.setNotificationHandler({
8 handleNotification: async () => {
9 return {
10 shouldShowAlert: true,
11 }
12 },
13})
14
15export default function App() {
16 const [title, setTitle] = useState()
17 const [body, setBody] = useState()
18 const [token, setToken] = useState()
19
20 useEffect(() => {
21 // Permission for iOS
22 Permissions.getAsync(Permissions.NOTIFICATIONS)
23 .then(statusObj => {
24 // Check if we already have permission
25 if (statusObj.status !== "granted") {
26 // If permission is not there, ask for the same
27 return Permissions.askAsync(Permissions.NOTIFICATIONS)
28 }
29 return statusObj
30 })
31 .then(statusObj => {
32 // If permission is still not given throw error
33 if (statusObj.status !== "granted") {
34 throw new Error("Permission not granted")
35 }
36 })
37 .then(() => {
38 return Notifications.getExpoPushTokenAsync()
39 })
40 .then(response => {
41 const deviceToken = response.data
42 console.log({ deviceToken })
43 })
44 .catch(err => {
45 return null
46 })
47 }, [])
48
49 useEffect(() => {
50 const receivedSubscription = Notifications.addNotificationReceivedListener(
51 notification => {
52 console.log("Notification Received!")
53 console.log(notification)
54 }
55 )
56
57 const responseSubscription = Notifications.addNotificationResponseReceivedListener(
58 response => {
59 console.log("Notification Clicked!")
60 console.log(response)
61 }
62 )
63 return () => {
64 receivedSubscription.remove()
65 responseSubscription.remove()
66 }
67 }, [])
68
69 const triggerLocalNotificationHandler = () => {
70 Notifications.scheduleNotificationAsync({
71 content: {
72 title: "Local Notification",
73 body: "Hello this is a local notification!",
74 },
75 trigger: { seconds: 5 },
76 })
77 }
78
79 const triggerPushNotificationHandler = () => {
80 fetch("https://exp.host/--/api/v2/push/send", {
81 method: "POST",
82 headers: {
83 Accept: "application/json",
84 "Accept-Encoding": "gzip,deflate",
85 "Content-Type": "application/json",
86 },
87 body: JSON.stringify({
88 to: token,
89 title,
90 body,
91 }),
92 })
93 }
94
95 return (
96 <View style={styles.container}>
97 <Button
98 title="Trigger Local Notification"
99 onPress={triggerLocalNotificationHandler}
100 />
101 <TextInput
102 style={styles.textInput}
103 value={title}
104 placeholder="Title"
105 onChangeText={setTitle}
106 />
107 <TextInput
108 style={styles.textInput}
109 value={body}
110 placeholder="Body"
111 onChangeText={setBody}
112 />
113 <TextInput
114 style={styles.textInput}
115 value={token}
116 placeholder="Token"
117 onChangeText={setToken}
118 />
119 <Button
120 title="Trigger Push Notification"
121 onPress={triggerPushNotificationHandler}
122 />
123 </View>
124 )
125}
126
127const styles = StyleSheet.create({
128 container: {
129 flex: 1,
130 backgroundColor: "#fff",
131 alignItems: "center",
132 justifyContent: "center",
133 },
134 textInput: {
135 borderBottomWidth: 1,
136 padding: 5,
137 margin: 15,
138 width: "80%",
139 },
140})

Here we have added 3 input boxes for entering notification title, notification body, and device token and bound them with local states. When the button is pressed, the expo API is called with these details.

Building a custom notification tool

Since we require the device token of the user to send notifications, we need to store them somewhere so that we can use them in the future. So, let's build a back-end, to where we can post the user token to save it to the database and a UI to retrieve the tokens and send the notifications.

Notification API back-end

Create a Node.js project using the following command:

1npm init react-native-push-api

Update the package.json as shown below:

package.json
1{
2 "name": "react-native-push-api",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1",
8 "start": "node index.js"
9 },
10 "keywords": [],
11 "author": "",
12 "license": "ISC",
13 "dependencies": {
14 "body-parser": "^1.19.0",
15 "cors": "^2.8.5",
16 "dotenv": "^8.2.0",
17 "expo-server-sdk": "^3.6.0",
18 "express": "^4.17.1",
19 "mongoose": "^5.12.3"
20 }
21}

Run npm install to install the dependencies mentioned above. If you see, we are using expo-server-sdk to help in sending the notification to the expo server.

We are using MongoDB for storing the tokens. You may use either a local instance or connect to a cloud provider like MongoDB Atlas.

Now let's create a .env file and store the configurations there

.env
1MONGO_DB_CONNECTION_STRING = mongodb://127.0.0.1:27017/react_native_push
2WHITELISTED_DOMAINS = http://localhost:3000

WHITELISTED_DOMAINS will be used for CORS whitelisting of the client.

Now create a folder named utils and create a file called connectdb.js which helps in connect to the database:

connectdb.js
1const mongoose = require("mongoose")
2const url = process.env.MONGO_DB_CONNECTION_STRING
3const connect = mongoose.connect(url, {
4 useNewUrlParser: true,
5 useUnifiedTopology: true,
6 useCreateIndex: true,
7})
8connect
9 .then(db => {
10 console.log("connected to db")
11 })
12 .catch(err => {
13 console.log(err)
14 })

Create another file named expo.js with the following code. The code is taken as-is from the expo-server-sdk GitHub page.

1const { Expo } = require("expo-server-sdk")
2module.exports = (pushTokens, title, body, data) => {
3 // Create a new Expo SDK client
4 // optionally providing an access token if you have enabled push security
5 let expo = new Expo({ accessToken: process.env.EXPO_ACCESS_TOKEN })
6
7 // Create the messages that you want to send to clients
8 let messages = []
9 for (let pushToken of pushTokens) {
10 // Each push token looks like ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]
11
12 // Check that all your push tokens appear to be valid Expo push tokens
13 if (!Expo.isExpoPushToken(pushToken)) {
14 console.error(`Push token ${pushToken} is not a valid Expo push token`)
15 continue
16 }
17
18 // Construct a message (see https://docs.expo.io/push-notifications/sending-notifications/)
19 messages.push({
20 to: pushToken,
21 sound: "default",
22 title,
23 body,
24 data,
25 })
26 }
27
28 // The Expo push notification service accepts batches of notifications so
29 // that you don't need to send 1000 requests to send 1000 notifications. We
30 // recommend you batch your notifications to reduce the number of requests
31 // and to compress them (notifications with similar content will get
32 // compressed).
33 let chunks = expo.chunkPushNotifications(messages)
34 let tickets = []
35 ;(async () => {
36 // Send the chunks to the Expo push notification service. There are
37 // different strategies you could use. A simple one is to send one chunk at a
38 // time, which nicely spreads the load out over time:
39 for (let chunk of chunks) {
40 try {
41 let ticketChunk = await expo.sendPushNotificationsAsync(chunk)
42 console.log(ticketChunk)
43 tickets.push(...ticketChunk)
44 // NOTE: If a ticket contains an error code in ticket.details.error, you
45 // must handle it appropriately. The error codes are listed in the Expo
46 // documentation:
47 // https://docs.expo.io/push-notifications/sending-notifications/#individual-errors
48 } catch (error) {
49 console.error(error)
50 }
51 }
52 })()
53
54 // Later, after the Expo push notification service has delivered the
55 // notifications to Apple or Google (usually quickly, but allow the the service
56 // up to 30 minutes when under load), a "receipt" for each notification is
57 // created. The receipts will be available for at least a day; stale receipts
58 // are deleted.
59 //
60 // The ID of each receipt is sent back in the response "ticket" for each
61 // notification. In summary, sending a notification produces a ticket, which
62 // contains a receipt ID you later use to get the receipt.
63 //
64 // The receipts may contain error codes to which you must respond. In
65 // particular, Apple or Google may block apps that continue to send
66 // notifications to devices that have blocked notifications or have uninstalled
67 // your app. Expo does not control this policy and sends back the feedback from
68 // Apple and Google so you can handle it appropriately.
69 let receiptIds = []
70 for (let ticket of tickets) {
71 // NOTE: Not all tickets have IDs; for example, tickets for notifications
72 // that could not be enqueued will have error information and no receipt ID.
73 if (ticket.id) {
74 receiptIds.push(ticket.id)
75 }
76 }
77
78 let receiptIdChunks = expo.chunkPushNotificationReceiptIds(receiptIds)
79 ;(async () => {
80 // Like sending notifications, there are different strategies you could use
81 // to retrieve batches of receipts from the Expo service.
82 for (let chunk of receiptIdChunks) {
83 try {
84 let receipts = await expo.getPushNotificationReceiptsAsync(chunk)
85 console.log(receipts)
86
87 // The receipts specify whether Apple or Google successfully received the
88 // notification and information about an error, if one occurred.
89 for (let receiptId in receipts) {
90 let { status, message, details } = receipts[receiptId]
91 if (status === "ok") {
92 continue
93 } else if (status === "error") {
94 console.error(
95 `There was an error sending a notification: ${message}`
96 )
97 if (details && details.error) {
98 // The error codes are listed in the Expo documentation:
99 // https://docs.expo.io/push-notifications/sending-notifications/#individual-errors
100 // You must handle the errors appropriately.
101 console.error(`The error code is ${details.error}`)
102 }
103 }
104 }
105 } catch (error) {
106 console.error(error)
107 }
108 }
109 })()
110}

Now create a folder named models and create a file called token.js inside it:

token.js
1const mongoose = require("mongoose")
2const Schema = mongoose.Schema
3const Token = new Schema({
4 tokenValue: {
5 type: String,
6 default: "",
7 },
8})
9
10module.exports = mongoose.model("Token", Token)

Here we are creating Token model to store the token value in the database.

Finally, create the index.js file and update it with the following code:

index.js
1const express = require("express")
2const cors = require("cors")
3const bodyParser = require("body-parser")
4const sendPushNotification = require("./utils/expo")
5
6if (process.env.NODE_ENV !== "production") {
7 // Load environment variables from .env file in non prod environments
8 require("dotenv").config()
9}
10
11require("./utils/connectdb")
12
13const Token = require("./models/token")
14
15const app = express()
16app.use(bodyParser.json())
17
18// Add the client URL to the CORS policy
19const whitelist = process.env.WHITELISTED_DOMAINS
20 ? process.env.WHITELISTED_DOMAINS.split(",")
21 : []
22const corsOptions = {
23 origin: function (origin, callback) {
24 if (!origin || whitelist.indexOf(origin) !== -1) {
25 callback(null, true)
26 } else {
27 callback(new Error("Not allowed by CORS"))
28 }
29 },
30 credentials: true,
31}
32
33app.use(cors(corsOptions))
34
35app.get("/", function (req, res) {
36 res.send({ status: "success" })
37})
38
39app.post("/send_notification", function (req, res) {
40 const { title, body, data, to } = req.body
41 if (to === "all") {
42 Token.find({}, (err, allTokens) => {
43 if (err) {
44 res.statusCode = 500
45 res.send(err)
46 }
47
48 const tokens = allTokens.map(token => {
49 return token.tokenValue
50 })
51
52 sendPushNotification(tokens, title, body, data)
53 res.send({ status: "success" })
54 })
55 } else {
56 sendPushNotification([to], title, body, data)
57 res.send({ status: "success" })
58 }
59})
60app.post("/save_token", function (req, res) {
61 const token = req.body.token
62
63 if (token) {
64 Token.find({ tokenValue: token }, (err, existingToken) => {
65 if (err) {
66 res.statusCode = 500
67 res.send(err)
68 }
69 if (!err && existingToken.length === 0) {
70 const newToken = new Token({ tokenValue: req.body.token })
71
72 newToken.save(function (err, savedToken) {
73 if (err) {
74 res.statusCode = 500
75 res.send(err)
76 }
77
78 res.send({ status: "success" })
79 })
80 } else {
81 res.send({ status: "success" })
82 }
83 })
84 } else {
85 res.statusCode = 400
86 res.send({ message: "token not passed!" })
87 }
88})
89
90app.get("/all_tokens", function (req, res) {
91 Token.find({}, (err, allTokens) => {
92 if (err) {
93 res.statusCode = 500
94 res.send(err)
95 }
96 res.send(
97 allTokens.map(token => {
98 // remove unnecessary fields
99 return { value: token.tokenValue }
100 })
101 )
102 })
103})
104
105// Start the server in port 8081
106const server = app.listen(process.env.PORT || 8081, function () {
107 const port = server.address().port
108 console.log("App started at port:", port)
109})

Here we are having 3 routes:

  1. To send a notification to all the devices or a single device
  2. To save the device token to the database
  3. To fetch all the tokens from the database.

You may test it using postman. I have deployed it to Heroku and will be using that endpoint when we build the UI.

Building the notification console UI

Let's now go ahead and create a React Project to have a UI to send notifications using the API we have built.

Run the following command to create a new React project:

1npx create-react-app push-api-client

Install BlueprintJS to style the page:

1yarn add @blueprintjs/core

Now import BlueprintJS css in index.css

index.css
1@import "~normalize.css";
2@import "~@blueprintjs/core/lib/css/blueprint.css";
3@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
4
5body {
6 margin: 0 auto;
7 max-width: 400px;
8}

Now update the App.js with the following code:

App.js
1import {
2 Card,
3 Button,
4 FormGroup,
5 InputGroup,
6 H2,
7 TextArea,
8 Intent,
9 HTMLSelect,
10 Toaster,
11 Position,
12} from "@blueprintjs/core"
13import React, { useEffect, useRef, useState } from "react"
14const allOption = [{ value: "all", label: "All" }]
15
16// Replace it with your own endpoint
17const API_ENDPOINT = "https://react-native-push-api.herokuapp.com/"
18
19function App() {
20 const [title, setTitle] = useState("")
21 const [body, setBody] = useState("")
22 const [data, setData] = useState()
23 const [recipients, setRecipients] = useState(allOption)
24 const [to, setTo] = useState("all")
25 const [isSubmitting, setIsSubmitting] = useState(false)
26 const toastRef = useRef()
27
28 useEffect(() => {
29 fetch(API_ENDPOINT + "all_tokens").then(async response => {
30 if (response.ok) {
31 const tokens = await response.json()
32 setRecipients(allOption.concat(tokens))
33 }
34 })
35 }, [])
36
37 const formSubmitHandler = e => {
38 let parsedData = {}
39 try {
40 parsedData = data ? JSON.parse(data) : {}
41 } catch (err) {
42 console.log(err)
43 }
44
45 e.preventDefault()
46
47 setIsSubmitting(true)
48 fetch(API_ENDPOINT + "send_notification", {
49 method: "POST",
50 headers: { "Content-Type": "application/json" },
51 body: JSON.stringify({
52 to,
53 title,
54 body,
55 data: parsedData,
56 }),
57 })
58 .then(async response => {
59 setIsSubmitting(false)
60
61 if (response.ok) {
62 toastRef.current.show({
63 icon: "tick",
64 intent: Intent.SUCCESS,
65 message: "Notification sent successfully.",
66 })
67 } else {
68 toastRef.current.show({
69 icon: "warning-sign",
70 intent: Intent.DANGER,
71 message: "Something went wrong.",
72 })
73 }
74 })
75 .catch(err => {
76 setIsSubmitting(false)
77 toastRef.current.show({
78 icon: "warning-sign",
79 intent: Intent.DANGER,
80 message: "Something went wrong.",
81 })
82 })
83 }
84 return (
85 <Card elevation="1">
86 <Toaster
87 ref={toastRef}
88 autoFocus={false}
89 canEscapeKeyClear={true}
90 position={Position.TOP}
91 usePortal={true}
92 />
93 <H2>Send Push Notification</H2>
94 <form className="notification-form" onSubmit={formSubmitHandler}>
95 <FormGroup label="Notification Title" labelFor="title">
96 <InputGroup
97 id="title"
98 placeholder="Notification Title"
99 type="text"
100 value={title}
101 onChange={e => setTitle(e.target.value)}
102 />
103 </FormGroup>
104 <FormGroup label="Notification Body" labelFor="body">
105 <InputGroup
106 id="body"
107 placeholder="Notification Body"
108 type="text"
109 value={body}
110 onChange={e => setBody(e.target.value)}
111 />
112 </FormGroup>
113 <FormGroup label="Additional Data" labelFor="data">
114 <TextArea
115 growVertically={true}
116 large={true}
117 placeholder="Additional data in JSON"
118 id="data"
119 value={data}
120 onChange={e => setData(e.target.value)}
121 className="bp3-fill"
122 />
123 </FormGroup>
124 <FormGroup label="Send To" labelFor="data">
125 <HTMLSelect
126 fill
127 options={recipients}
128 value={to}
129 onChange={e => setTo(e.target.value)}
130 />
131 </FormGroup>
132 <Button
133 intent="primary"
134 fill
135 type="submit"
136 text={isSubmitting ? "Sending" : "Send"}
137 />
138 </form>
139 </Card>
140 )
141}
142export default App

Now if you run the application, you should see a page as shown below:

Notifications Console

Before testing the console, let's add code to send the device token from the App to the backend API. In the Expo project, update the App.js as shown below:

App.js
1import React, { useEffect, useState } from "react"
2import { Button, StyleSheet, View, TextInput } from "react-native"
3import * as Notifications from "expo-notifications"
4import * as Permissions from "expo-permissions"
5
6// Show notifications when the app is in the foreground
7Notifications.setNotificationHandler({
8 handleNotification: async () => {
9 return {
10 shouldShowAlert: true,
11 }
12 },
13})
14
15export default function App() {
16 const [title, setTitle] = useState()
17 const [body, setBody] = useState()
18 const [token, setToken] = useState()
19
20 useEffect(() => {
21 // Permission for iOS
22 Permissions.getAsync(Permissions.NOTIFICATIONS)
23 .then(statusObj => {
24 // Check if we already have permission
25 if (statusObj.status !== "granted") {
26 // If permission is not there, ask for the same
27 return Permissions.askAsync(Permissions.NOTIFICATIONS)
28 }
29 return statusObj
30 })
31 .then(statusObj => {
32 // If permission is still not given throw error
33 if (statusObj.status !== "granted") {
34 throw new Error("Permission not granted")
35 }
36 })
37 .then(() => {
38 return Notifications.getExpoPushTokenAsync()
39 })
40 .then(response => {
41 const deviceToken = response.data
42 fetch("https://react-native-push-api.herokuapp.com/save_token", {
43 method: "POST",
44 headers: {
45 Accept: "application/json",
46 "Content-Type": "application/json",
47 },
48 body: JSON.stringify({
49 token: deviceToken,
50 }),
51 })
52 .then(() => {
53 console.log("Token saved!")
54 })
55 .catch(err => {
56 console.log(err)
57 })
58 })
59 .catch(err => {
60 return null
61 })
62 }, [])
63
64 useEffect(() => {
65 const receivedSubscription = Notifications.addNotificationReceivedListener(
66 notification => {
67 console.log("Notification Received!")
68 console.log(notification)
69 }
70 )
71
72 const responseSubscription = Notifications.addNotificationResponseReceivedListener(
73 response => {
74 console.log("Notification Clicked!")
75 console.log(response)
76 }
77 )
78 return () => {
79 receivedSubscription.remove()
80 responseSubscription.remove()
81 }
82 }, [])
83
84 const triggerLocalNotificationHandler = () => {
85 Notifications.scheduleNotificationAsync({
86 content: {
87 title: "Local Notification",
88 body: "Hello this is a local notification!",
89 },
90 trigger: { seconds: 5 },
91 })
92 }
93
94 const triggerPushNotificationHandler = () => {
95 fetch("https://exp.host/--/api/v2/push/send", {
96 method: "POST",
97 headers: {
98 Accept: "application/json",
99 "Accept-Encoding": "gzip,deflate",
100 "Content-Type": "application/json",
101 },
102 body: JSON.stringify({
103 to: token,
104 title,
105 body,
106 }),
107 })
108 }
109
110 return (
111 <View style={styles.container}>
112 <Button
113 title="Trigger Local Notification"
114 onPress={triggerLocalNotificationHandler}
115 />
116 <TextInput
117 style={styles.textInput}
118 value={title}
119 placeholder="Title"
120 onChangeText={setTitle}
121 />
122 <TextInput
123 style={styles.textInput}
124 value={body}
125 placeholder="Body"
126 onChangeText={setBody}
127 />
128 <TextInput
129 style={styles.textInput}
130 value={token}
131 placeholder="Token"
132 onChangeText={setToken}
133 />
134 <Button
135 title="Trigger Push Notification"
136 onPress={triggerPushNotificationHandler}
137 />
138 </View>
139 )
140}
141
142const styles = StyleSheet.create({
143 container: {
144 flex: 1,
145 backgroundColor: "#fff",
146 alignItems: "center",
147 justifyContent: "center",
148 },
149 textInput: {
150 borderBottomWidth: 1,
151 padding: 5,
152 margin: 15,
153 width: "80%",
154 },
155})

Now if you run the App on few devices, you will see the tokens being saved to the database and displayed in the dropdown:

Notification Console Tokens

Now if you test the console and send the notification, you will see the devices getting the notification:

Android and iOS from Console

We are not having any authentication in place for the API endpoint. When you implement it in production, you should have authentication of some kind so that the endpoint is not spammed or misused.

You could use additional security by enabling Access Tokens so that even if the device token is stolen, it wouldn't be possible to send notifications without the access token.

Demo and Source code

You can see a demo of the Console here, the source code of the UI here, and the back-end API here.

App demo

Do follow me on twitter where I post developer insights more often!

Leave a Comment

© 2021 CodingDeft.Com