📱 Send Mobile Push Notifications with React Native (iOS)

Overview

Sending push notifications to iOS devices is exclusively handled by Apple’s Push Notification Service (APNs). Implementing this from scratch requires significant backend infrastructure to manage device tokens and communicate with APNs.

NotificationAPI simplifies this process by managing the entire backend complexity for you. Our React Native SDK handles permission prompts and device token registration, and our service sends the notifications through APNs on your behalf.

The setup process is as follows:

1. Set up APNs
2. Install and initialize the NotificationAPI React Native SDK
3. Configure your iOS project
4. Verify device registration
5. Send a notification

1. Set up APN & connect to NotificationAPI

To send push notifications to iOS devices, you need APNs credentials from your Apple Developer account. Then connect them in the NotificationAPI dashboard.

1. Ensure you have a paid Apple Developer account
2. In Apple Developer → Certificates, Identifiers & Profiles → Keys → click ”+”
3. Name the key (e.g., NotificationAPI) and enable Apple Push Notifications service (APNs)
4. Prefer enabling both Sandbox and Production; register and download the key file
5. Go to your NotificationAPI Dashboard and navigate to the settings/push and complete the Apple Push Notification form:
   • Key ID (from the Apple Keys page)
   • Team ID (from your Apple Developer account)
   • Topic (your app’s Bundle Identifier, e.g., com.example.reactnativeapp)
   • Key (paste the entire contents of the downloaded key file) ensuring to include the -----BEGIN PRIVATE KEY----- and -----END PRIVATE KEY----- and it’s contents.
6. Save the configuration

2. Install and initialize the NotificationAPI React Native SDK

Add the React Native SDK to your project:

npm install @notificationapi/react-native
# or
yarn add @notificationapi/react-native

Install CocoaPods dependencies:

cd ios && pod install && cd ..

Initialize the SDK after the user is identified/logged in:

import NotificationAPI from '@notificationapi/react-native';

// Initialize when your app starts
await NotificationAPI.setup({
  clientId: 'YOUR_CLIENT_ID', // from NotificationAPI dashboard
  userId: 'user123', // your app's user ID
  autoRequestPermission: true, // automatically request push permissions
  region: 'us' // 'us' (default), 'eu', or 'ca'
});

Parameters

Notes:

• For better UX, call setup() after login/registration rather than on first app open
• The first run will prompt for notification permissions; users should tap Allow

3. Configure your iOS project

Set up signing and capabilities in Xcode for your React Native app.

• Open ios/YourApp.xcworkspace in Xcode (⚠️ Important: Open .xcworkspace, NOT .xcodeproj)
• In your target → Signing & Capabilities:
  • Select your Team (paid Apple Developer account)
  • Set the Bundle Identifier (this must exactly match the APNs Topic you configured)
  • Ensure “Automatically manage signing” is enabled for development
• Click ”+ Capability” and add Push Notifications
• Update AppDelegate to handle APN token registration (if needed):

import UserNotifications

func application(_ application: UIApplication,
                 didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
  let token = deviceToken.map { String(format: "%02.2hhx", $0) }.joined()
  UserDefaults.standard.set(token, forKey: "apns_token")
}

• Deploy to a real iPhone; iOS Simulator does not support push notifications

4. Verify device registration

After running the app with NotificationAPI.setup(...) on a real device:

• Go to the NotificationAPI Dasboard and navigate to the EndUsers page
• Search for the userId you passed in the code
• Confirm Mobile Push is marked as with the apple icon (token synced)

5. Send a notification

With the SDK initialized, you can now trigger notifications from your backend. The userId must match the one used to initialize the SDK.

Here’s an example using cURL:

curl -X POST \
  -H "Authorization: Bearer <YOUR_AUTH_TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "new_comment",
    "to": {
      "id": "user123",
      "email": "test@example.com"
    },
    "parameters": {
      "comment": "This is a test comment"
    }
  }' \
  "https://api.notificationapi.com/<YOUR_CLIENT_ID>/sender"

Schematic Diagram

This diagram illustrates the entire flow, from app initialization to receiving a notification.

Frequently Asked Questions (FAQs)

Why are my notifications not arriving?

There can be several reasons:

• APNs Setup: Double-check Key ID, Team ID, Topic (Bundle Identifier), and that the APNs key contents were pasted correctly in the dashboard.
• User ID Mismatch: Ensure the userId in your React Native app is identical to the one you’re sending to in the backend API call.
• Real Device Requirement: iOS Simulator does not support push notifications. Test on a physical iPhone.
• Bundle Identifier: Ensure the Xcode Bundle Identifier exactly matches the Topic configured in NotificationAPI.
• App State: On iOS, delivery behavior can vary if the app is in the foreground, background, or terminated. See Apple’s documentation for details.

How are expiring APNs tokens handled?

NotificationAPI handles expiring APNs tokens automatically. Should tokens stop working for any reason, you’ll see the warnings in the logs in the dashboard. You do not need to handle any errors on your end, and this doesn’t count towards your usage.