feat: handle foreground push notifications (#161)

* Handle Android push notifications

* Add basic docs

* Cleanup

* Translate docs

* Cleanup

* Cleanup

* Cleanup

* Cleanup

* Update docs

* Cleanup

* Revert xcworkspace changes

* Apply code review changes

Co-authored-by: Maciej Szczepanski <[email protected]>

Author: woodrejs

docs/docs/intro/examples/push-notifications-example.md

@@ -0,0 +1,54 @@
+---
+sidebar_position: 7
+---
+
+# 📭 Push notifications example
+
+Here's an example of how you can handle push notifications in your application (when in foreground) using [Firebase](https://rnfirebase.io/)
+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](https://console.firebase.google.com/).
+
+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:
+
+- [@react-native-firebase](https://rnfirebase.io/#prerequisites)
+- [@react-native-firebase/messaging](https://rnfirebase.io/messaging/usage#installation)
+
+:::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()`:
+
+```jsx
+// ** 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
+}
+```

example/.gitignore

@@ -58,3 +58,5 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+#firebase
+android/app/google-services.json

example/App.tsx

@@ -1,9 +1,26 @@
 import 'react-native-gesture-handler'
-import React from 'react'
-import { NavigationContainer } from '@react-navigation/native'
+import React, { useEffect } from 'react'
+import messaging from '@react-native-firebase/messaging'
 import { AppNavigator } from './src/navigation'
+import { useNotifications } from 'react-native-notificated'
+import { NavigationContainer } from '@react-navigation/native'
 
 const App = () => {
+  const { notify } = useNotifications()
+
+  useEffect(() => {
+    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
+      notify('info', {
+        params: {
+          title: remoteMessage.notification?.title || '',
+          description: remoteMessage.notification?.body,
+        },
+      })
+    })
+
+    return unsubscribe
+  }, [notify])
+
   return (
     <NavigationContainer>
       <AppNavigator />

example/android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply plugin: 'com.google.gms.google-services'
 
 import com.android.build.OutputFile
 

example/android/build.gradle

@@ -14,6 +14,7 @@ buildscript {
     }
     dependencies {
         classpath("com.android.tools.build:gradle:4.2.2")
+        classpath 'com.google.gms:google-services:4.3.13'
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }

example/package.json

@@ -10,6 +10,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@react-native-firebase/app": "^15.2.0",
+    "@react-native-firebase/messaging": "^15.2.0",
     "@react-native-masked-view/masked-view": "^0.2.6",
     "@react-navigation/drawer": "^6.1.8",
     "@react-navigation/native": "^6.0.6",