Push Notification (Expo)¶
Settings for FCM (Android)¶
Refer to Settings for FCM (Android) to set up your Firebase project.
Settings for APNs Certificate (iOS)¶
Refer to Settings for APNs Certificate (iOS) to register the APNs certificate to the Repro management screen.
Install React Native Firebase (Android)¶
Repro uses Firebase Cloud Messaging in the Android environment for receiving push notifications. Please install React Native Firebase for this use.
npm install @react-native-firebase/app
npm install @react-native-firebase/messaging
Please refer to the following for details on how to install the system.
React Native Firebase configuration (if including iOS project)¶
Please make the following settings only if you are developing Android and iOS projects at the same time.
Install expo-build-properties
.
npx expo install expo-build-properties
Also, add the following items in app.json
.
{
"expo": {
"plugins": [
[
"expo-build-properties",
{
"ios": {
"useFrameworks": "static"
}
}
],
]
}
}
Adding channel settings (Android)¶
Refer to edit app.json file and add the push notification channel settings to the app.json
file.
Also set other items as needed.
Place google-services.json file (Android)¶
Refer to Settings for FCM (Android) and download the google-services.json
file from Firebase Console.
Next, copy the downloaded google-services.json
file into the assets
directory of your project.
Then, in app.json
in the project expo.android
, add "googleServicesFile": "./assets/google-services.json"
.
{
"expo": {
"android": {
"googleServicesFile": "./assets/google-services.json"
}
}
}
Install Expo Notifications (iOS/Android)¶
Install Expo Notifications for your project as follows
npx expo install expo-notifications
Configure Entitlements settings (iOS)¶
Add \“entitlements\”:\“aps-environment\”
to expo.ios
in app.json
in your project.
The value of aps-environment
should be changed according to your environment.
{
"expo": {
"ios": {
"entitlements": {
"aps-environment": "development"
}
}
}
}
Implement the process of sending push tokens to Repro (iOS/Android)¶
Send Push token to Repro to use push notification.
Add a process to retrieve the device token and set the value using Repro.setPushToken
.
import { useEffect } from 'react';
import * as Notifications from 'expo-notifications';
import Repro from 'react-native-repro';
...
useEffect(() => {
Notifications.getDevicePushTokenAsync().then(token => {
Repro.setPushToken(token.data);
})
.catch((e) => {
...
});
...
});
Generate native code for your application (iOS/Android)¶
Execute the following command to build the application.
npx expo prebuild --clean
For other implementations, see the Development Guide for React Native.