{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/push-notification-in-react-native-with-firebase/", "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"52705409-b4e8-54e0-8eff-9a29593793f8","excerpt":"In this article i will guide you step by step how you can implement firebase push notification in react native, android application Step 1: Create a new…","html":"

In this article i will guide you step by step how you can implement firebase push notification in react native, android application

\n

Step 1: Create a new firebase project

\n

Go to https://firebase.google.com/ and login to your firebase account and click on Add project

\n

\"addproject\"

\n

Step 2: Add Android app on firebase project created previously

\n\n

\"add-app-to-firebase\"

\n\n
keytool -list -v -keystore ./android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android\n
\n

You will get your SHA-1 key just copy and paste it in the field where it is required

\n

\"add-sha1\"

\n\n

\"download-google-service.json\"

\n

Step 3: Install and add dependencies for Recieving Push notification in Android

\n\n
npm install --save @react-native-firebase/app\nnpm install --save @react-native-firebase/messaging\n
\n\n
buildscript {\n  repositories {\n    // Make sure that you have the following two repositories\n    google()  // Google's Maven repository\n\n    mavenCentral()  // Maven Central repository\n\n  }\n  dependencies {\n    ...\n    // Add the dependency for the Google services Gradle plugin\n    classpath 'com.google.gms:google-services:4.3.13'\n\n  }\n}\n\nallprojects {\n  ...\n  repositories {\n    // Make sure that you have the following two repositories\n    google()  // Google's Maven repository\n\n    mavenCentral()  // Maven Central repository\n\n  }\n}\n
\n\n
plugins {\n  id 'com.android.application'\n\n  // Add the Google services Gradle plugin\n  id 'com.google.gms.google-services'\n\n  ...\n}\n\ndependencies {\n  // Import the Firebase BoM\n  implementation platform('com.google.firebase:firebase-bom:30.4.1')\n\n\n  // TODO: Add the dependencies for Firebase products you want to use\n  // When using the BoM, don't specify versions in Firebase dependencies\n  // https://firebase.google.com/docs/android/setup#available-libraries\n}\n
\n

Step 4: Adding push notification code to listen notification in Foreground, Background

\n
import messaging from \"@react-native-firebase/messaging\";\n\nconst App = () => {\n  useEffect(() => {\n    //To handle background messaging\n    messaging().setBackgroundMessageHandler(async (remoteMessage) => {\n      let message_body = remoteMessage.notification.body;\n      let message_title = remoteMessage.notification.title;\n      let avatar = remoteMessage.notification.android.imageUrl;\n      Alert.alert(message_title, message_body);\n    });\n\n    //To handle foreground messaging\n    const subscribe = messaging().onMessage(async (remoteMessage) => {\n      let message_body = remoteMessage.notification.body;\n      let message_title = remoteMessage.notification.title;\n      let avatar = remoteMessage.notification.android.imageUrl;\n      Alert.alert(message_title, message_body);\n    });\n    return subscribe;\n  }, []);\n};\n
\n

Step 5: Testing the notification from firebase

\n

To test this, go to the Firebase console of the application you created in the previous step. On the left sidebar, under Engage, click Cloud messaging. Then click the button Send your first message.

\n

On the form:

\n\n

Now, under Target, click Select an app and then select your app. Click Next on the next step and then Review. On the resulting popup, click Publish.

\n

Step6: Sending notification from your react native android application

\n\n
import messaging from \"@react-native-firebase/messaging\";\n\nconst App = () => {\n  const getFCMToken = async () => {\n    try {\n      const token = await messaging().getToken();\n      console.log(token);\n    } catch (e) {\n      console.log(error);\n    }\n  };\n\n  useEffect(() => {\n    getFCMToken();\n  }, []);\n\n  useEffect(() => {\n    //To handle background messaging\n    messaging().setBackgroundMessageHandler(async (remoteMessage) => {\n      let message_body = remoteMessage.notification.body;\n      let message_title = remoteMessage.notification.title;\n      let avatar = remoteMessage.notification.android.imageUrl;\n      Alert.alert(message_title, message_body);\n    });\n\n    //To handle foreground messaging\n    const subscribe = messaging().onMessage(async (remoteMessage) => {\n      let message_body = remoteMessage.notification.body;\n      let message_title = remoteMessage.notification.title;\n      let avatar = remoteMessage.notification.android.imageUrl;\n      Alert.alert(message_title, message_body);\n    });\n    return subscribe;\n  }, []);\n};\n
","fields":{"slug":"/push-notification-in-react-native-with-firebase/"},"frontmatter":{"title":"Firebase push notification in react native android application","date":"December 25, 2022","description":"In this article i will explain you can implement firebase push notification in react native, android application","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/firebase-push.jpeg"}},"previous":{"fields":{"slug":"/package-nodejs-application-using-webpack/"},"frontmatter":{"title":"How to package nodejs application using webpack","date":"December 15, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/nodejs-webpack.jpeg"}},"next":{"fields":{"slug":"/python-opencv-tutorial-croping-resizing-facedetection-captureimagefromvideo/"},"frontmatter":{"title":"Python tutorial, reading and croping image, face detection, capturing image from video","date":"December 31, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/python.jpg"}}},"pageContext":{"id":"52705409-b4e8-54e0-8eff-9a29593793f8","previousPostId":"7702ffd3-33a4-5338-b1b1-356a66dc22c8","nextPostId":"2196f990-5637-5dd3-9a77-6eae13f365a9"}}, "staticQueryHashes": ["3860684146"]}