> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sendrealm.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native Expo SDK

> Use Sendrealm with Expo development builds, prebuild, and EAS.

Use the Sendrealm React Native SDK in Expo apps that can include native code. That means Expo prebuild, `expo run`, EAS development builds, and production builds.

Expo Go is not supported because mobile push requires native code.

If your React Native app already owns native `android` and `ios` projects without Expo prebuild, use [React Native Bare SDK](/sdks/react-native-bare).

## Requirements

* Expo project using development builds or prebuild.
* Android device or emulator with Google Play services.
* Physical iOS device for APNs testing.
* A Sendrealm app ID from the dashboard.
* Firebase credentials uploaded for Android delivery.
* APNs credentials uploaded for iOS delivery.
* Push Notifications enabled for the iOS Bundle ID in Apple Developer.

## Setup Order

1. Upload Firebase and APNs credentials in Sendrealm.
2. Install `@sendrealm/react-native`.
3. Add the Sendrealm Expo plugin to `app.json` or `app.config.js`.
4. Add Android `google-services.json`.
5. Configure iOS push capabilities.
6. Run Expo prebuild or create an EAS build.
7. Initialize Sendrealm from JavaScript.
8. Ask for notification permission after explaining the value to the user.
9. Call `login` when the user signs in.
10. Send test pushes on Android and iOS.

## Install

```bash theme={null}
npx expo install @sendrealm/react-native
```

## Configure The Plugin

Add the Sendrealm plugin to `app.json` or `app.config.js`:

```json theme={null}
{
  "expo": {
    "plugins": [
      [
        "@sendrealm/react-native",
        {
          "android": {
            "googleServicesFile": "./google-services.json",
            "notificationIcon": "ic_stat_sendrealm",
            "notificationColor": "#111827"
          },
          "ios": {
            "apnsEnvironment": "sandbox",
            "enableBackgroundRemoteNotifications": true,
            "notificationServiceExtension": true
          }
        }
      ]
    ],
    "extra": {
      "sendrealmAppId": "YOUR_SENDREALM_APP_ID",
      "sendrealmPushEnvironment": "development",
      "sendrealmApnsEnvironment": "sandbox"
    }
  }
}
```

Do not put Sendrealm API keys, Firebase service account JSON, or APNs `.p8` files in Expo config. Provider private keys belong in the Sendrealm dashboard.

## Android Setup

Generate `google-services.json` from Firebase and save it in your Expo project. Point the plugin at the file:

```json theme={null}
{
  "android": {
    "googleServicesFile": "./google-services.json"
  }
}
```

During prebuild, the plugin copies it into the Android app.

Make sure the Firebase Android package name matches the package Expo builds, usually `expo.android.package`.

## iOS Setup

In Apple Developer:

1. Open Certificates, Identifiers & Profiles.
2. Open Identifiers.
3. Select the App ID for the Bundle ID in your Expo config.
4. Enable Push Notifications.
5. Save the App ID changes.

In Expo config:

* Set `ios.apnsEnvironment` to `sandbox` for development builds or `production` for TestFlight and App Store builds.
* Set `ios.enableBackgroundRemoteNotifications` to `true` only if you send silent/background pushes.
* Set `ios.notificationServiceExtension` to `true` if you send rich image notifications.

Then rerun prebuild or create a new EAS build.

See [Mobile Push Credentials](/tutorials/mobile-push-credentials) for Firebase and APNs setup.

## Prebuild And Run

Generate native projects and run locally:

```bash theme={null}
npx expo prebuild --platform android
npx expo run:android

npx expo prebuild --platform ios
npx expo run:ios --device
```

Use `--device` for iOS push testing.

## Build With EAS

Build development clients with EAS:

```bash theme={null}
npx eas build --profile development --platform android
npx eas build --profile development --platform ios
```

## Initialize

Read values from Expo config and initialize once:

```tsx theme={null}
import Constants from "expo-constants";
import { useEffect } from "react";
import Sendrealm from "@sendrealm/react-native";

export default function App() {
  useEffect(() => {
    const extra = Constants.expoConfig?.extra ?? {};

    void Sendrealm.initialize({
      appId: extra.sendrealmAppId,
      environment: extra.sendrealmPushEnvironment ?? "development",
      autoRequestPermission: false,
      apnsEnvironment: extra.sendrealmApnsEnvironment ?? "sandbox",
    });
  }, []);

  return null;
}
```

Use `production` for production-targeted app builds.

Most apps should keep `autoRequestPermission: false` and ask permission after an in-app explanation.

## Ask For Permission

```tsx theme={null}
await Sendrealm.requestPermission();
```

Check status:

```tsx theme={null}
const status = await Sendrealm.getPermissionStatus();
const allowed = await Sendrealm.hasNotificationPermission();
```

## Link A Signed-In User

```tsx theme={null}
await Sendrealm.login("user-123", "user@example.com");
```

## Tags And Events

Use tags for app-observed preferences, state, and behavior:

```tsx theme={null}
await Sendrealm.addTags({
  plan: "pro",
  onboardingComplete: true,
});
```

Track app events:

```tsx theme={null}
await Sendrealm.trackEvent("checkout_started", {
  product_id: "sku_123",
  price: 29,
});
```

Call `login` before setting user tags.

## Rich iOS Media

Rich image notifications require a Notification Service Extension. Enable it in the plugin:

```json theme={null}
{
  "ios": {
    "notificationServiceExtension": true
  }
}
```

Then rerun prebuild or create a new EAS build.

## Android Notification Icons

Android status bar icons should be simple drawable resources, usually monochrome. If you set:

```json theme={null}
{
  "android": {
    "notificationIcon": "ic_stat_sendrealm"
  }
}
```

The native Android project must contain a matching drawable resource such as `res/drawable/ic_stat_sendrealm.xml`.

## Diagnostics

Use support diagnostics while testing:

```tsx theme={null}
const diagnostics = await Sendrealm.getSupportDiagnostics();
console.log(JSON.stringify(diagnostics, null, 2));
```

Confirm diagnostics show:

* A device ID.
* Token presence.
* Expected permission status.
* Subscribed state unless the user opted out.
* SDK version.
* No unexpected SDK error.

## Troubleshooting

| Symptom                        | What to check                                                                                                  |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| Expo Go does not work          | Build a development client or production app because native code is required.                                  |
| Android token is missing       | Use a Google Play device or emulator and verify the Firebase Android package name.                             |
| iOS push does not arrive       | Use a physical device and verify APNs environment, Bundle ID, Team ID, Key ID, and `.p8` key in Sendrealm.     |
| iOS entitlement is missing     | Enable Push Notifications on the Apple Developer App ID, rerun prebuild, and rebuild the app.                  |
| Plugin changes do not appear   | Rerun `expo prebuild` or create a fresh EAS build.                                                             |
| Notifications are delayed      | Check Android power management, FCM priority, iOS APNs priority, Focus settings, and notification permissions. |
| Some pushes are missing        | Check stale tokens, disabled channels, offline devices, and provider diagnostics.                              |
| Rich images do not attach      | Confirm `notificationServiceExtension` is enabled and the app has been rebuilt.                                |
| Tags return `ContactNotLinked` | Call `login(userId, email)` before tags.                                                                       |

## Related Pages

* [React Native Bare SDK](/sdks/react-native-bare)
* [Mobile Push Credentials](/tutorials/mobile-push-credentials)
* [Send Push Notification API](/api-reference/endpoint/send-push-notification)
