Introduction
Businesses and users have become increasingly dependent on push notifications when building apps for business and personal use. Push notifications are similar to SMS messages, but they don’t cost anything to send. Consequently, many businesses now use push notifications to send information and alerts to their app users. React Native Push Notifications will be discussed in this article.
Push Notifications: What are they?
It is a message or alert sent by the makers of an application to the user. Notifications fall into two main categories: foreground and background.
Foreground notifications are sent when the app is open and running, whereas background notifications are sent regardless of whether the app is open. In the world of mobile app development, push notifications are popular for a variety of reasons, including:
- Reducing the cost of advertising products and offers
- Enhancing the overall user experience
- Increasing conversions
- Offline messages are always delivered when users turn on their phones
React-Native: What is it?
React Native is a JavaScript framework for developing natively rendered mobile applications. In this application, React is used to build user interfaces, but instead of targeting web browsers, it targets mobile platforms. As most of the code you write can be shared between Android and iOS, React Native makes it easy to develop for both platforms simultaneously.
A React Native application renders using real mobile UI components, not webviews, and has the same look and feel as a native mobile app. React Native exposes JavaScript interfaces for platform APIs, so your React Native apps can access features like the phone camera or the user’s location. It is already used in production for user-facing applications by Facebook, Palantir, TaskRabbit, etc.
React Native (RN) apps are more “native” than webview apps made with Cordova/ Ionic.
How To Set Up React Native Push Notifications For Android?
The local notifications are sent from a React Native application, but the remote push notifications are sent by a server or a notification service. Cloud Messaging Service from Google.
The Prerequisites
You must adhere to some basic prerequisites to establish React Native Push Notifications. Make sure you have access to the below-listed services on your local development console by downloading and installing some elements.
- Install NodeJS (>=10.x.x) with npm/yarn.
- Command-line interface for React Native.
- A USB-connected Android emulator or a similar device must be installed on Windows or Linux.
- It is necessary to have an active Firebase project.
Set up react-native-push-notifications
Developers can repress and consume local or remote notifications for different mobile operating systems with the library to help them configure React native push notifications. Install the library after creating a new React Native project.
react-native int RNnotifications
cd RNnotifications
yarn add react-native-push-notification
In the case of Apple devices, the push notification library must be manually installed. Using the react-native-community’s API, developers can get guidance on PushNotificationIOS.
There are some changes that Android developers need to make to the relevant files. By making these adjustments, developers can improve their native skills. As a first step, a developer needs to open android/build.gradle and enter the code described below.
buildscript {
ext {
// add the following two lines
googlePlayServicesVersion = “16.1.0” // default: “+”
firebaseVersion = “17.3.4” // default: “+”
}
repositories {
google()
jcenter()
}
dependencies {
// add the following dependency
classpath ‘com.google.gms:google-services:4.3.2’
}
}
Next, open android/settings.gradle and add the following code before including ‘: app’.
include ‘:react-native-push-notification’
project(‘:react-native-push-notification’).projectDir = file(‘../node_modules/react-native-push-notification/android’)
As you see in the preceding step, you are attaching native bindings to implement the Firebase backend to receive notifications without being active. If you do not intend to use remote notifications, you do not have to perform the above step.
Rather, choose this particular step since it helps both types of notifications work. To launch AndroidManifest.xml, navigate to android/app/src/main/AndroidManifest.xml.
This code should be added to the application tag.
<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” />
<!– < Only if you’re using GCM or localNotificationSchedule() > –>
<uses-permission android_name=”android.permission.VIBRATE” />
<uses-permission android_name=”android.permission.RECEIVE_BOOT_COMPLETED”/>
The Android app will vibrate when a new notification is received using these codes. The application tag should remain unchanged, and the following should be added:
<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”/>
<!– Change the resource name to your App’s accent color – or any other color you want –>
<meta-data android:name=”com.dieam.reactnativepushnotification.notification_color”
android:resource=”@android:color/white”/>
<!– < Only if you’re using GCM or localNotificationSchedule() > –>
<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>
<!– < Only if you’re using GCM or localNotificationSchedule() > →
<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”/>
<!– < Only if you’re using GCM or localNotificationSchedule() > →
<service
android:name=”com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm”
android:exported=”false” >
<intent-filter>
<action android_name=”com.google.android.c2dm.intent.RECEIVE” />
</intent-filter>
</service>
<!– </ Only if you’re using GCM or localNotificationSchedule() > –>
<!– < Else > →
<service android:name=”com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService”
android:exported=”false” >
<intent-filter>
<action android_name=”com.google.firebase.MESSAGING_EVENT” />
</intent-filter>
</service>
The final step is to proceed to android/app/src/res/values/colors.xml. Whenever you receive an error message about a file not being found, create a new file. Your Android device’s notification blinking light can be customized with this file.
How to configure local push notifications?
Are you interested in learning how to configure local React Native Push Notifications for Android? Please read on.
Creating a new file src/services/LocalPushController.js is the first step. Make sure PushNotification is imported.
import PushNotification from ‘react-native-push-notification’
The data should be annexed to PushNotification.configure(). A method called on notification is provided to the target in the file. During a local or remote notification, it is summoned as a necessary method.
Developers have deployed the local notification object in the demonstration application, and the default application summons a console statement mentioning its characteristics.
As soon as that is done, we need to export LocalNotification in the fragment so that it is invoked when the onPress attribute is pressed.
PushNotification.configure({
// (required) Called when a remote or local notification is opened or received
onNotification: function(notification) {
console.log(‘LOCAL NOTIFICATION ==>’, notification)
},
popInitialNotification: true,
requestPermissions: true
})
A variety of mobile operating systems are supported by localNotification. Android-specific properties include vibration, biggest, and subText. You can build features such as actions, titles, messages, play sounds, and sound names on any platform.
Include the aforementioned method in App.js.
Calculate the LocalNotification using the LocalPushController.js file from src/services. The next step would be to add a handler method handleButtonPress to the functional App segment. When the knob is pressed, it is called to action.
import React from ‘react’
import { Text, View, Button, StyleSheet } from ‘react-native’
import { LocalNotification } from ‘./src/services/LocalPushController’
const App = () => {
const handleButtonPress = () => {
LocalNotification()
}
return (
<View style={styles.container}>
<Text>Press a button to trigger the notification</Text>
<View style={{ marginTop: 20 }}>
<Button title={‘Local Push Notification’} onPress={handleButtonPress} />
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
buttonContainer: {
marginTop: 20
}
})
export default App
Last but not least, run react-native run-android from a concluding window. A device must be joined via USB with active USB debugging in order to be executed.
Conclusion
You can boost your marketing efforts with React Native push notifications. You can use WonderPush to deliver unique push notifications regardless of your budget.
