React Native SDK Quickstart

Add push notifications to your React Native app on iOS and Android in minutes using @hoberhq/react-native-sdk.

Prerequisites

• An active Hober account and SDK key
• React Native 0.71 or later
• For iOS: Xcode 14+, CocoaPods, an Apple Developer account with APNs entitlement enabled
• For Android: Android Studio, a Firebase project with google-services.json

Installation

Install the package from npm:

npm install @hoberhq/react-native-sdk

Then complete the platform-specific setup below before calling any SDK methods.

---

iOS Setup

1. Install native dependencies via CocoaPods

cd ios && pod install

This installs the underlying react-native-push-notification-ios dependency and links it to your project.

2. Enable APNs entitlement

In Xcode, open your project target and navigate to Signing & Capabilities. Click + Capability and add Push Notifications. This creates the required APNs entitlement in your .entitlements file.

Also enable Background Modes and check Remote notifications so your app can wake in the background to process incoming pushes.

3. Update AppDelegate

In ios/<YourApp>/AppDelegate.mm (or AppDelegate.swift), register for remote notifications:

// AppDelegate.mm
#import <UserNotifications/UserNotifications.h>
#import <RNCPushNotificationIOS.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ... existing setup ...

  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;

  return YES;
}

// Required for receiving remote notifications
- (void)application:(UIApplication *)application
    didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication *)application
    didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
  [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}

- (void)application:(UIApplication *)application
    didReceiveRemoteNotification:(NSDictionary *)userInfo
    fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

@end

---

Android Setup

1. Add google-services.json

Download google-services.json from the Firebase console and place it in android/app/google-services.json.

2. Update build.gradle files

In android/build.gradle (project-level), add the Google Services plugin to the classpath:

buildscript {
  dependencies {
    // ...existing dependencies...
    classpath 'com.google.gms:google-services:4.4.0'
  }
}

In android/app/build.gradle (app-level), apply the plugin and add the Firebase Messaging dependency:

apply plugin: 'com.google.gms.google-services'

dependencies {
  // ...existing dependencies...
  implementation 'com.google.firebase:firebase-messaging:23.4.0'
}

3. Update AndroidManifest.xml

In android/app/src/main/AndroidManifest.xml, declare the Hober Firebase messaging service and the notification permissions:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <!-- Required on Android 13+ -->
  <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

  <application ...>

    <!-- Hober FCM message handler -->
    <service
      android:name="io.hober.rn.HoberFirebaseMessagingService"
      android:exported="false">
      <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
      </intent-filter>
    </service>

  </application>
</manifest>

---

Initialize with HoberProvider

Wrap your root component with HoberProvider and supply your SDK key. This initializes the SDK and makes the useHober() hook available throughout your component tree.

// App.js
import React from 'react';
import { HoberProvider } from '@hoberhq/react-native-sdk';
import MainNavigator from './MainNavigator';

export default function App() {
  return (
    <HoberProvider sdkKey="YOUR_SDK_KEY" channelId="default">
      <MainNavigator />
    </HoberProvider>
  );
}

Prop	Type	Required	Description
sdkKey	string	Yes	Your Hober SDK key from the dashboard
channelId	string	No	Notification channel ID (Android). Defaults to "default"

---

Using the useHober() Hook

The useHober() hook exposes all SDK methods inside any functional component:

import { useHober } from '@hoberhq/react-native-sdk';

function NotificationSetup() {
  const { requestPermission, identifySubscriber, registerDevice } = useHober();

  const enableNotifications = async () => {
    const granted = await requestPermission();
    if (!granted) return;

    await identifySubscriber({ externalId: 'user-123', email: 'user@example.com' });
    await registerDevice();
  };

  return <Button title="Enable Notifications" onPress={enableNotifications} />;
}

---

Request Permission

Call requestPermission() in response to a user action. On iOS this displays the system permission dialog; on Android 13+ it also requests the POST_NOTIFICATIONS runtime permission.

const { requestPermission } = useHober();

const granted = await requestPermission();

if (granted) {
  console.log('Notification permission granted');
} else {
  console.warn('Notification permission denied');
}

requestPermission() returns a Promise<boolean> — true when the user grants permission, false when they deny.

---

Identify a Subscriber

Associate the current user with a Hober subscriber record. Call this after the user logs in:

const { identifySubscriber } = useHober();

await identifySubscriber({
  externalId: 'user-123',
  email: 'user@example.com',
});

Parameter	Type	Required	Description
externalId	string	Yes	Your internal user ID
email	string	No	User email for segmentation

---

Register the Device

Subscribe the device to push notifications. Call this after permission has been granted:

const { registerDevice } = useHober();

await registerDevice();

registerDevice() obtains the platform token (APNs on iOS, FCM on Android), sends it to Hober, and activates the device for push delivery.

---

Expo Compatibility

@hoberhq/react-native-sdk is compatible with Expo bare workflow (ejected). It is not compatible with Expo managed workflow because it requires native module linking and AppDelegate modifications that are not supported in managed workflow without custom config plugins.

If you are using Expo managed workflow, eject to bare workflow first:

npx expo eject

For Expo users who cannot eject, consider using the Hober REST API directly or waiting for a future Expo config plugin.

---

Complete Example

// App.js
import React from 'react';
import { View, Button, Text } from 'react-native';
import { HoberProvider, useHober } from '@hoberhq/react-native-sdk';

function PushSetup() {
  const { requestPermission, identifySubscriber, registerDevice } = useHober();
  const [status, setStatus] = React.useState('idle');

  const setup = async () => {
    setStatus('requesting...');
    const granted = await requestPermission();
    if (!granted) { setStatus('denied'); return; }

    await identifySubscriber({ externalId: 'user-123' });
    await registerDevice();
    setStatus('registered');
  };

  return (
    <View>
      <Button title="Enable Push Notifications" onPress={setup} />
      <Text>Status: {status}</Text>
    </View>
  );
}

export default function App() {
  return (
    <HoberProvider sdkKey="YOUR_SDK_KEY">
      <PushSetup />
    </HoberProvider>
  );
}

---

Troubleshooting

iOS — pod install fails or modules not found

Symptom: After running pod install, you see errors like Unable to find a specification for RNCPushNotificationIOS.

Fix:

1. Ensure your Podfile targets iOS 13 or later: platform :ios, '13.0'
2. Run pod repo update then pod install again.
3. If using React Native 0.73+, confirm your Podfile includes use_frameworks! :linkage => :static if required by other pods.

iOS — APNs entitlement missing

Symptom: Device token is never received; didRegisterForRemoteNotificationsWithDeviceToken is never called.

Fix:

1. Verify Push Notifications capability is added in Xcode under Signing & Capabilities.
2. Confirm your provisioning profile includes the aps-environment entitlement (production or development).
3. APNs does not work on iOS Simulator — test on a physical device.

Android — google-services.json not found or misplaced

Symptom: Build error: File google-services.json is missing.

Fix: Place google-services.json directly inside android/app/ (not in android/ or the project root).

Android — Gradle build fails after adding Firebase dependency

Symptom: Gradle sync fails with a conflict or version mismatch.

Fix:

1. Check that the com.google.gms:google-services plugin version in android/build.gradle is compatible with your Firebase BoM version.
2. Use the Firebase Android BoM to manage versions: implementation platform('com.google.firebase:firebase-bom:32.7.0').
3. Run ./gradlew clean before rebuilding.

Android — AndroidManifest.xml permission missing on Android 13+

Symptom: Notifications are silently dropped on Android 13+ devices; requestPermission() returns false immediately without a dialog.

Fix: Add <uses-permission android:name="android.permission.POST_NOTIFICATIONS" /> to your AndroidManifest.xml as shown in the Android Setup section above.

---

Next Steps

• React Native SDK API Reference
• React Native SDK Configuration
• Migrating from this SDK to the Native SDKs? See the iOS SDK Quickstart and Android SDK Quickstart for platform-native alternatives.