Simplifying Push Notification Setup in React Native with OneSignal
Published: 2023-05-16 11:19:16

**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 <application> 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;**

- iOS push certificate setup - https://documentation.onesignal.com/docs/react-native-sdk-setup#ios-requirements
- Generating .p12 certificate - https://documentation.onesignal.com/docs/generate-an-ios-push-certificate

NOTE: Need developer account with admin access [read here](https://documentation.onesignal.com/docs/generate-an-ios-push-certificate#step-1-requirements)

- Android requirements - https://documentation.onesignal.com/docs/react-native-sdk-setup#android-requirements
- Firebase API keys - https://documentation.onesignal.com/docs/generate-a-google-server-api-key
- Install for android using gradle - https://documentation.onesignal.com/docs/react-native-sdk-setup#step-3-install-for-android-using-gradle-for-android-apps
- Install for iOS using cocoapods - https://documentation.onesignal.com/docs/react-native-sdk-setup#step-4-install-for-ios-using-cocoapods-for-ios-apps
- Initialize OneSignal SDK - https://documentation.onesignal.com/docs/react-native-sdk-setup#step-5-initialize-the-onesignal-sdk
- Run and test - https://documentation.onesignal.com/docs/react-native-sdk-setup#step-5-initialize-the-onesignal-sdk