Push Notifications Badge Number


Regarding = Expo.Notifications.setBadgeNumberAsync(number)

Does anyone know how I would set that up in my code? We just want to show the (number) of new messages.

And, if possible - as message is “read” then it decrease by (x).

Here is my current code structure:

onSend = (message) => {
const notificationSetting = this.props.navigation.state.params.profile.notificationSetting
if (notificationSetting && notificationSetting.messagesPush) {
const { uid } = this.props.navigation.state.params.user
const profileUid = this.props.navigation.state.params.profileUid
firebase.database().ref(‘messages’).child(this.chatID).push({ …message[0], createdAt: firebase.database.ServerValue.TIMESTAMP, isRead:false})
.update({ [uid]: true })
.update({ [profileUid]: true })

_sendPush = (message) => {
const deviceToken = this.props.navigation.state.params.profile.deviceToken
const inAppSound = this.props.navigation.state.params.profile.notificationSetting.inAppSound
const { first_name, uid } = this.props.navigation.state.params.user
fetch(‘https://exp.host/--/api/v2/push/send’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
body: JSON.stringify({
to: deviceToken,
title: “new message”,
//body: message[0].text,
body: first_name + ’ sent you a new message’,
sound: inAppSound ? ‘default’ : null,
badge: 1,
uid: uid
.then((response) => {


Hi there! It seems like you need to do a few things with your firebase setup:

  1. Add a field to each message denoting its “read” status
  2. Each time a message is read, toggle its status from ‘unread’ to ‘read’
  3. When a new message is sent, default its status to ‘unread’
  4. Add a way to fetch the total number of unread messages for the given user
  5. Use an approach like setBadgeNumberAsync(fetchNumUnreadMessages())

Rather than decrement the number of read messages directly as each one is selected, just keep the state of read messages implicit within the combined ‘read’ status flags on each message. Then, use a computed property to query for the number of unread messages at any point, and always set the new badge number using that computed property. That’ll keep your app’s state to a minimum!

Also, if you like, you can use code formatting for code in your posts so that it’s easier for everyone to read! Just use three back-ticks (```) above and below your code to format it, or select text and click the </> button in the toolbar as you write your post:

function example() {
closed #3

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.