1.4K If something real-time happens on your website, you want everyone to be alerted. It could be a new version, an announcement, or an update to a product. By utilizing Push Notifications, you can do that conveniently. The difference between a push notification and an SMS message is that a push notification does not cost anything to send. However, most free push notification services offer limited functionality and a limited number of subscribers. Therefore, in this article, we are discussing the Google Firebase platform, which allows you to configure push notifications for free. Here, we’ll show you step-by-step how to implement Push Notifications with Firebase. Are you excited? Let us begin by understanding why firebase. Table of Contents Firebase – Why use it?How to implement real-time alerts with react native push notifications?Conclusion Firebase – Why use it? Google’s Firebase is an application development platform. In addition to offering a host of easily integrated features and functionalities, it helps to create backends for applications quickly. Firebase offers analytics, remote configurations, social logins, performance monitoring, email authentication, ad mob, and cloud messaging. The use of messaging features can enhance user engagement. The Firebase notification integration service allows you to implement push notifications without hassle. With Firebase Cloud Messaging (FCM), you can implement messaging across multiple platforms simultaneously. In addition to iOS and Android, it is supported on the web, with Unity, and with C++ setups. Users can receive notifications or data messages using FCM. Additionally, it can segment users and send different messages to different groups of users. Firebase can also be used to implement toast messages and other acknowledgement notifications. Messages can be triggered manually through user interaction using cloud functions for remote push notifications. To send and receive messages using FCM, the following components are required: Sending messages with Firebase requires an application server or cloud functions environment. Platform-specific client applications to receive messages. As a result of using the notification tool, you can set up local notifications, remote notifications, test notifications, and React Native Push Notifications with ease. You can even go further by setting up an inbox to ensure messages are saved in a safe place. However, are you wondering how to implement real-time alerts with react native push notifications? Then keep reading! How to implement real-time alerts with react native push notifications? React Native is a Facebook library for building front-end applications across multiple platforms. Google Firebase is a backend-as-a-service solution. The React Native Firebase tool combines these tools to build a cross-platform application. These notifications will aid you in updating your customers in real-time. Here are the steps on how to implement push notifications with firebase. Step 1: Start a new Firebase project Note: To begin a new project, go to the Firebase console. Modify the prompts according to your needs. Step 2: Click on the Create a Project button. Step 3: Click continue to name your project and accept Firebase’s terms. Step 4: The final step is to choose a Google Analytics account to link with the project, select settings, and accept the terms. Click ‘create project’ to begin. Step 5: Develop a React Native application Additional Information: Follow the React documentation to create a React Native app. $ react-native in it push Notifications Example Here is a code snippet that you can use to run the Android application, $ react-native run-android Step 6: Push Notification Dependency You can add push notification dependency to your React application using multiple packages. React-native-firebase adds all Firebase functionality to React applications. As you can see, we are using react-native-push-notification here, which is only concerned with push notifications. In the case of NPM: $ npm install –save react-native-push-notification In the case of Yarn: yarn add react-native-push-notification Step 7: Make sure your application is registered Using the Firebase dashboard, register your Android and/or iOS application. Using this example, we will implement push notifications only for Android apps. Step 8: Create a name for your Android application Add the google-services.json file to your application module’s root directory. Then, add the following code to the build.gradle file at the project level (<project>/build.gradle): buildscript { repositories { // Check that you have the following line (if not, add it): google() // Google's Maven repository } dependencies { ... // Add this line classpath 'com.google.gms:google-services:4.3.8' } } allprojects { ... repositories { // Check that you have the following line (if not, add it): google() // Google's Maven repository ... } } With the following code snippet from the Firebase documentation, create the project-level build.gradle (#project>/#app-module#/#build.gradle) apply plugin: 'com.android.application' // Add this line apply plugin: 'com.google.gms.google-services' dependencies { // Import the Firebase BoM implementation platform('com.google.firebase:firebase-bom:28.2.1') // Add the dependencies for the desired Firebase products // https://firebase.google.com/docs/android/setup#available-libraries } The following code should be added to AndroidManifest.xml, <uses-permission android:name="android.permission.WAKE_LOCK" /> <permission android:name="${applicationId}.permission.C2D_MESSAGE" android:protectionLevel="signature" /> <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> <application .......> <meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name" android:value="YOUR NOTIFICATION CHANNEL NAME"/> <meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description" android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/> <meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@android:color/white"/> <receiver android:name="com.google.android.gms.gcm.GcmReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND" > <intent-filter> <action android:name="com.google.android.c2dm.intent.RECEIVE" /> <category android:name="${applicationId}" /> </intent-filter> </receiver> <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" /> <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver"> <intent-filter> <action android:name="android.intent.action.BOOT_COMPLETED" /> </intent-filter> </receiver> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" android:exported="false" > <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </intent-filter> </service> ... </application> Make sure the code is synchronized. Step 9: Implement the push functionality To configure PushNotification.configure, use the following code. The code must be written in a separate JS file and imported into App.js. import React, {Component} from "react"; import PushNotification from "react-native-push-notification"; // var PushNotification = require("react-native-push-notification"); export default class PushController extends Component{ componentDidMount(){ PushNotification.configure({ // (optional) Called when Token is generated (iOS and Android) onRegister: function(token) { console.log("TOKEN:", token); }, // (required) Called when a remote or local notification is opened or received onNotification: function(notification) { console.log("NOTIFICATION:", notification); // process the notification here // required on iOS only notification.finish(PushNotificationIOS.FetchResult.NoData); }, // Android only senderID: "1090501687137", // iOS only permissions: { alert: true, badge: true, sound: true }, popInitialNotification: true, requestPermissions: true }); } render(){ return null; } } This is what the App.js file looks like when you open it: import React, { Fragment } from 'react'; import PushController from './PushController'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, FlatList} from 'react-native'; import {Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions } from 'react-native/Libraries/NewAppScreen'; // Dummy data for list, we'll replace this with data received from push let pushData = [ { title: "First push", message: "First push message" }, { title: "Second push", message: "Second push message" } ] _renderItem = ({ item }) => ( <View key={item.title}> <Text style={styles.title}>{item.title}</Text> <Text style={styles.message}>{item.message}</Text> </View> ); const App = () => { return ( <Fragment> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}> <Header /> <View style={styles.listHeader}> <Text>Push Notifications</Text> </View> <View style={styles.body}> <FlatList data={pushData} renderItem={(item ) => this._renderItem(item)} keyExtractor={(item ) => item.title} /> {/* <LearnMoreLinks /> */} </View> </ScrollView> </SafeAreaView> <PushController/> </Fragment> ); }; const styles = StyleSheet.create({ scrollView: {backgroundColor: Colors.lighter,}, listHeader:{ backgroundColor: '#eee', color: "#222", height: 44, padding: 12}, title:{fontSize: 18, fontWeight: 'bold', paddingTop: 10}, message:{ fontSize: 14, paddingBottom: 15, borderBottomColor: "#ccc", borderBottomWidth: 1}, engine: { position: 'absolute', right: 0,}, body: { backgroundColor: Colors.white, paddingHorizontal: 20, paddingVertical: 10, }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', color: Colors.black}, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', color: Colors.dark,}, highlight: { fontWeight: '700'}, footer: { color: Colors.dark, fontSize: 12, fontWeight: '600', padding: 4, paddingRight: 12, textAlign: 'right',}, }); export default App; import React, { Fragment } from 'react'; import PushController from './PushController'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, FlatList} from 'react-native'; import {Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions } from 'react-native/Libraries/NewAppScreen'; // Dummy data for list, we'll replace this with data received from push let pushData = [ { title: "First push", message: "First push message" }, { title: "Second push", message: "Second push message" } ] _renderItem = ({ item }) => ( <View key={item.title}> <Text style={styles.title}>{item.title}</Text> <Text style={styles.message}>{item.message}</Text> </View> ); const App = () => { return ( <Fragment> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}> <Header /> <View style={styles.listHeader}> <Text>Push Notifications</Text> </View> <View style={styles.body}> <FlatList data={pushData} renderItem={(item ) => this._renderItem(item)} keyExtractor={(item ) => item.title} /> {/* <LearnMoreLinks /> */} </View> </ScrollView> </SafeAreaView> <PushController/> </Fragment> ); }; const styles = StyleSheet.create({ scrollView: {backgroundColor: Colors.lighter,}, listHeader:{ backgroundColor: '#eee', color: "#222", height: 44, padding: 12}, title:{fontSize: 18, fontWeight: 'bold', paddingTop: 10}, message:{ fontSize: 14, paddingBottom: 15, borderBottomColor: "#ccc", borderBottomWidth: 1}, engine: { position: 'absolute', right: 0,}, body: { backgroundColor: Colors.white, paddingHorizontal: 20, paddingVertical: 10, }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', color: Colors.black}, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', color: Colors.dark,}, highlight: { fontWeight: '700'}, footer: { color: Colors.dark, fontSize: 12, fontWeight: '600', padding: 4, paddingRight: 12, textAlign: 'right',}, }); export default App; You can find the Sender ID and other authentication details under the Cloud Messaging section of the project settings. Step 10. Install and run the Android app Using the following code snippet, you can run the Android application you built in the previous steps: $ react-native run-android Step 11: Make use of FCM to send push notifications Compose and select targets for the push notification by following the prompts. If you wish, you can schedule the message for a later time or send it right away. Step 12: You can modify additional options according to your needs. Click the review button. In the following popup, click the publish button to send the message according to your settings. A push notification will be sent to the application on the schedule based on the targeting criteria. For advanced push notification functionality, cloud functions can be used. Conclusion It is our hope that this article will help you create and send real-time alerts with React Native Push Notifications. The use of push notifications can enhance your customer experience. However, if all of this seems tiring to you, you can use WonderPush Push Notifications Provider. You will be able to create push notifications much more conveniently with this platform. 0 comments 0 FacebookTwitterPinterestEmail Team Techager Techager is the Leading Digital Media Publishing platform, covering various Trending topics related to Startups, Businesses, Digital Marketing, Gaming, Health, Cryptocurrency, and especially work on Tech related content/links, etc. previous post How to Delete Udemy Account Permanently? Step-By-Step Guide! next post The Cost of Magento Hosting: What to expect and how to budget for it Related Posts How to Use a Facebook Video and Reel... October 1, 2024 Migrate public folders from Exchange to Office 365... September 29, 2024 Understanding Solidflow and Preparing for the Upcoming CSRD September 21, 2024 Small Business Cyber Security Solutions: Protecting Your Digital... September 20, 2024 CMS Platforms to Start a Website in 2024 September 20, 2024 How to Run Linux on a Mac: A... September 14, 2024 Chrome Tips and Tricks: Supercharge Your Browsing Experience September 14, 2024 The SaaS Revolution: Balancing Innovation and Risk September 9, 2024 How Huntsville, Alabama Homeowners Can Protect Electronics from... September 5, 2024 Leuke USB Sticks: The Ultimate Expression of Personal... September 5, 2024