Skip to main content

📭 Push notifications example

Here's an example of how you can handle push notifications in your application (when in foreground) using Firebase Let's go then! 💪

💡 Setup​

Before we jump into setup proccess, make sure that you have created a new firebase project. You will need it later to send push notifications. If you haven't done it yet, you can do it here.

With a new firebase project created, it's time to proceed with installation of these two packages that will be necessary to handle push notifications:

info

Documentation clearly describes the whole process of installation, so I will not focus on it here. Before proceeding to the next step, make sure you have done all previous steps.

👀 Example Implementation​

App in Foreground​

To handle push notifications in foreground we have to create a listener which will subscribe for all incoming firebase push events. We can do this by using messaging().onMessage() from @react-native-firebase/messaging. Method onMessage() takes an asynchronous function as a parameter, with an argument which is the push notification payload. Now we can use this data to set our in-app notification with a notify():

// ** imports
import messaging from '@react-native-firebase/messaging'
import { useNotifications } from 'react-native-notificated'

export const App = () => {
  const { notify } = useNotifications()

  useEffect(() => {
    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
      notify('info', {
        params: {
          title: remoteMessage.notification?.title || 'defalut title',
          description: remoteMessage.notification?.body,
        },
      })
    })

    return unsubscribe
  }, [notify])

  return // Some JSX
}