Simplifying Push Notification Setup in React Native with OneSignal

Introduction:

Push notifications play a crucial role in engaging and retaining users in mobile applications. React Native, a popular framework for building cross-platform mobile apps, provides a seamless integration with OneSignal, a powerful push notification service. In this article, we will walk through the steps to set up push notifications using OneSignal in React Native, enabling you to effectively communicate with your app users.

Step 1: OneSignal Account Setup

Start by creating an account on the OneSignal website (onesignal.com) if you haven't already. Once logged in, navigate to the dashboard and create a new app project. Take note of the provided App ID and REST API Key as we'll need them later.

Step 2: React Native Project Configuration

Ensure you have a React Native project set up. Use the following command to install the OneSignal package:
npm install react-native-onesignal --save

Step 3: Platform-specific Configuration
For iOS:

Inside your React Native project, navigate to the iOS directory and open the AppDelegate.m file.
Import the OneSignal header by adding the following line at the top: #import <React/RCTOneSignal.h>
In the application:didFinishLaunchingWithOptions: method, add the following code: [OneSignal initWithLaunchOptions:launchOptions appId:@"YOUR_ONESIGNAL_APP_ID" handleNotificationAction:nil settings:@{kOSSettingsKeyAutoPrompt: @false}]; Replace "YOUR_ONESIGNAL_APP_ID" with your actual OneSignal App ID.

For Android:

Open the android/app/build.gradle file and add the following line in the dependencies block: implementation project(':react-native-onesignal')
Open the android/app/src/main/AndroidManifest.xml file and add the following lines inside the tag: <meta-dataandroid:name="com.onesignal.NotificationOpened.DEFAULT" android:value="DISABLE" /> <meta-data android:name="com.onesignal.NotificationOpened.PAYLOAD" android:value="DISABLE" />
Open the MainApplication.java file and add the following import statement: import com.geektime.rnonesignalandroid.ReactNativeOneSignalPackage;
Add the ReactNativeOneSignalPackage to the getPackages() method: new ReactNativeOneSignalPackage()

Step 4: Registering Devices and Handling Notifications

To register devices for push notifications and handle received notifications, we need to modify our React Native code. Import and initialize OneSignal by adding the following code in your main component file:

import OneSignal from 'react-native-onesignal';
class App extends Component { componentDidMount() { OneSignal.setAppId('YOUR_ONESIGNAL_APP_ID'); OneSignal.setNotificationOpenedHandler(this.handleNotificationOpen); }
handleNotificationOpen = (notification) => { // Handle the notification data }
// ... }

Remember to replace 'YOUR_ONESIGNAL_APP_ID' with your actual OneSignal App ID.

Step 5: Testing and Sending Notifications

You are now ready to test your push notification setup. Build and run your React Native app on a device or emulator. Ensure that you have granted the necessary permission to receive notifications. You can now send test notifications using the OneSignal dashboard or programmatically from your server using the OneSignal REST API.

Conclusion:
Congratulations! You have successfully set up push notifications in your React Native app using OneSignal. With this integration, you can now engage and inform your users through targeted push notifications, enhancing

Links you may refer to;