Integrate real-time push notifications into your React Native app using Firebase Cloud Messaging (FCM) for Android and Apple Push Notification service (APNs) for iOS, ensuring users stay connected across both platforms.
React Native’s cross-platform nature allows unified push notification handling, but platform-specific configuration and certificates are still required.
Prerequisites
Before implementing push notifications, ensure you have:
Firebase Project Active Firebase project with FCM enabled for both platforms
Platform Certificates Android FCM service account JSON and iOS APNs .p12 certificate
social.plus SDK social.plus TypeScript SDK properly integrated
Development Setup React Native development environment configured for both platforms
Step 1: Install Dependencies
Core Firebase Dependencies
# Install React Native Firebase
npm install @react-native-firebase/app @react-native-firebase/messaging
# Optional: For enhanced notification handling
npm install @react-native-async-storage/async-storage
npm install react-native-permissions
# For iOS, install pods
cd ios && pod install && cd ..
Additional Utility Libraries
# For better permission handling
npm install react-native-permissions
# For local storage
npm install @react-native-async-storage/async-storage
# For device info (optional)
npm install react-native-device-info
Android Configuration
Add google-services.json to android/app/
Update build.gradle files :
// android/build.gradle
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.15'
}
}
// android/app/build.gradle
apply plugin: 'com.google.gms.google-services'
android {
compileSdkVersion 34
defaultConfig {
minSdkVersion 21
targetSdkVersion 34
}
}
Add permissions to AndroidManifest.xml :
<!-- android/app/src/main/AndroidManifest.xml -->
< manifest xmlns:android = "http://schemas.android.com/apk/res/android" >
<!-- Push notification permissions -->
< uses-permission android:name = "android.permission.INTERNET" />
< uses-permission android:name = "android.permission.RECEIVE_BOOT_COMPLETED" />
< uses-permission android:name = "android.permission.VIBRATE" />
< uses-permission android:name = "android.permission.POST_NOTIFICATIONS" />
< application >
<!-- Firebase messaging service -->
< service
android:name = "io.invertase.firebase.messaging.RNFirebaseMessagingService"
android:exported = "false" >
< intent-filter >
< action android:name = "com.google.firebase.MESSAGING_EVENT" />
</ intent-filter >
</ service >
<!-- Your activities -->
</ application >
</ manifest >
iOS Configuration
Add GoogleService-Info.plist to iOS project in Xcode
Enable Push Notifications capability in Xcode:
Select your target → Signing & Capabilities → + Capability → Push Notifications
Update AppDelegate for Firebase:
// ios/YourApp/AppDelegate.mm
#import <Firebase.h>
#import <UserNotifications/UserNotifications.h>
@interface AppDelegate () <UNUserNotificationCenterDelegate>
@end
@implementation AppDelegate
- ( BOOL ) application: (UIApplication * ) application didFinishLaunchingWithOptions: ( NSDictionary * ) launchOptions
{
// Configure Firebase
[FIRApp configure ];
// Set notification delegate
[UNUserNotificationCenter currentNotificationCenter ]. delegate = self ;
return [ super application: application didFinishLaunchingWithOptions: launchOptions];
}
// Handle notification when app is in foreground
- ( void ) userNotificationCenter: (UNUserNotificationCenter * ) center
willPresentNotification: (UNNotification * ) notification
withCompletionHandler: ( void ( ^ )(UNNotificationPresentationOptions)) completionHandler {
completionHandler (UNNotificationPresentationOptionAlert | UNNotificationPresentationOptionBadge | UNNotificationPresentationOptionSound);
}
@end
Update Info.plist for background modes:
<!-- ios/YourApp/Info.plist -->
< dict >
<!-- Existing keys -->
< key > UIBackgroundModes </ key >
< array >
< string > background-fetch </ string >
< string > remote-notification </ string >
</ array >
< key > FirebaseAppDelegateProxyEnabled </ key >
< false />
</ dict >
Step 3: Upload Certificates to social.plus Console
Android - FCM Service Account
Generate FCM service account JSON :
Go to Firebase Console → Project Settings → Service Accounts
Click “Generate new private key”
Download the JSON file
Upload to social.plus Console :
Navigate to Settings → Push Notifications
Upload the FCM service account JSON file
iOS - APNs Certificate
Generate .p12 certificate following the iOS setup guide
Upload to social.plus Console :
Navigate to Settings → Push Notifications
Upload the .p12 file with password
Best Practices
Cross-Platform Considerations
Strategic Permission Requests : Request permissions at meaningful moments, not app launch.// Good: Request when user joins a channel
const handleChannelJoin = async () => {
await joinChannel ();
// Now request notification permissions for channel updates
const hasPermission = await requestNotificationPermission ();
if ( hasPermission ) {
console . log ( 'User will receive channel notifications' );
}
};
// Bad: Request immediately on app launch
useEffect (() => {
// Don't do this immediately
// requestNotificationPermission();
}, []);
Token State Synchronization : Keep token state consistent across app lifecycle and updates.// Use context for app-wide token state
const NotificationContext = createContext ({
token: null ,
permissionStatus: 'not-determined' ,
refreshToken : () => {},
});
const NotificationProvider = ({ children }) => {
const [ token , setToken ] = useState ( null );
const [ permissionStatus , setPermissionStatus ] = useState ( 'not-determined' );
const refreshToken = useCallback ( async () => {
const newToken = await TokenManager . refreshTokenIfNeeded ();
setToken ( newToken );
}, []);
return (
< NotificationContext . Provider value = {{ token , permissionStatus , refreshToken }} >
{ children }
</ NotificationContext . Provider >
);
};
Robust Error Management : Implement comprehensive error handling for various failure scenarios.class NotificationErrorHandler {
static handleError ( error : any , context : string ) {
console . error ( `Notification error in ${ context } :` , error );
// Log to crash reporting service
// crashlytics().recordError(error);
// Handle specific error types
if ( error . code === 'messaging/unknown' ) {
this . handleUnknownError ( error );
} else if ( error . code === 'messaging/registration-token-not-registered' ) {
this . handleTokenNotRegistered ();
} else if ( error . code === 'messaging/invalid-registration-token' ) {
this . handleInvalidToken ();
}
}
static handleTokenNotRegistered () {
// Clear stored token and re-register
TokenManager . clearStoredData ();
// Re-initialize push notifications
}
static handleInvalidToken () {
// Get new token
TokenManager . refreshTokenIfNeeded ();
}
}
Testing Strategies
Firebase Console Testing
Use Firebase Console to send test messages:
Go to Firebase Console → Cloud Messaging → Send Test Message
Use the FCM token from your debug component
Test different message types and data payloads
Test Both Platforms :
iOS: Test with TestFlight builds (debug builds don’t receive push notifications)
Android: Test with both debug and release builds
Troubleshooting
Token Not Generated :
Firebase Configuration : Verify google-services.json (Android) and GoogleService-Info.plist (iOS) are correctly placed
Permissions : Ensure notification permissions are granted
Network Connectivity : Check internet connection
APNs Token (iOS) : Verify APNs token is available before requesting FCM token
// Debug token generation issues
const debugTokenIssues = async () => {
console . log ( '=== Token Debug ===' );
// Check permissions
const authStatus = await messaging (). hasPermission ();
console . log ( 'Permission status:' , authStatus );
// Check device registration
console . log ( 'Device registered:' , messaging . isDeviceRegisteredForRemoteMessages );
// For iOS, check APNs token
if ( Platform . OS === 'ios' ) {
const apnsToken = await messaging (). getAPNSToken ();
console . log ( 'APNs token available:' , !! apnsToken );
}
// Try to get token
try {
const token = await messaging (). getToken ();
console . log ( 'FCM token:' , token ? 'Available' : 'Not available' );
} catch ( error ) {
console . error ( 'Token generation error:' , error );
}
};
Testing Requirements : iOS push notifications require TestFlight or App Store builds. Android notifications work in both debug and release builds, but release builds are recommended for production testing.