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;
- 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
- 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
Top comments (1)
Good work