@trycourier/courier-react-native/README.md

Inbox, Push Notifications, and Preferences for React Native

<img width="1040" alt="banner-react-native" src="https://github.com/user-attachments/assets/c38f52d8-792f-4b51-a423-f1c5dd9f996b">

<!-- AUTO-GENERATED-OVERVIEW:START — Do not edit this section. It is synced from mintlify-docs. -->
# Courier React Native SDK

The Courier React Native SDK provides prebuilt components and TypeScript APIs for adding in-app notifications, push notifications, and notification preferences to your React Native app. It handles authentication, token management, and real-time message delivery across iOS and Android from a single codebase.

## Installation

```bash
npm install @trycourier/courier-react-native
```

Also available via `yarn add @trycourier/courier-react-native`.

Requires iOS 15.0+, Android SDK 23+, and Gradle 8.4+. Run `cd ios && pod install` after installing.

## Quick Start

```jsx
import Courier, {
  CourierInboxView,
  CourierPreferencesView,
} from "@trycourier/courier-react-native";

// Sign in the user (JWT generated by your backend)
await Courier.shared.signIn({
    userId: "user_123",
    accessToken: jwt,
});

// Add a prebuilt Inbox component
<CourierInboxView
  onClickInboxMessageAtIndex={(message, index) => {
    message.read
      ? Courier.shared.unreadMessage({ messageId: message.messageId })
      : Courier.shared.readMessage({ messageId: message.messageId });
  }}
  style={{ flex: 1 }}
/>

// Add a prebuilt Preferences component
<CourierPreferencesView
  mode={{ type: "topic" }}
  style={{ flex: 1 }}
/>
```

For Expo projects, see the [Expo setup guide](https://github.com/trycourier/courier-react-native/blob/master/Docs/6_Expo.md).

## Documentation

Full documentation: **[courier.com/docs/sdk-libraries/react-native](https://www.courier.com/docs/sdk-libraries/react-native/)**

- [Inbox Overview](https://www.courier.com/docs/platform/inbox/inbox-overview/)
- [Authentication](https://www.courier.com/docs/platform/inbox/authentication/)
- [Push Integrations](https://www.courier.com/docs/external-integrations/push/intro-to-push/)
<!-- AUTO-GENERATED-OVERVIEW:END -->

&emsp;

# Getting Started

These are all the available features of the SDK.

<table>
    <thead>
        <tr>
            <th width="25px"></th>
            <th width="250px" align="left">Feature</th>
            <th width="725px" align="left">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr width="600px">
            <td align="center">
                1
            </td>
            <td align="left">
                <a href="https://www.courier.com/docs/sdk-libraries/react-native/#authentication">
                    <code>Authentication</code>
                </a>
            </td>
            <td align="left">
                Manages user credentials between app sessions. Required if you would like to use <a href="https://www.courier.com/docs/sdk-libraries/react-native/#inbox"><code>Courier Inbox</code></a> and <a href="https://www.courier.com/docs/sdk-libraries/react-native/#push-notifications"><code>Push Notifications</code></a>.
            </td>
        </tr>
        <tr width="600px">
            <td align="center">
                2
            </td>
            <td align="left">
                <a href="https://www.courier.com/docs/sdk-libraries/react-native/#inbox">
                    <code>Inbox</code>
                </a>
            </td>
            <td align="left">
                An in-app notification center you can use to notify your users. Comes with a prebuilt UI and also supports fully custom UIs.
            </td>
        </tr>
        <tr width="600px">
            <td align="center">
                3
            </td>
            <td align="left">
                <a href="https://www.courier.com/docs/sdk-libraries/react-native/#push-notifications">
                    <code>Push Notifications</code>
                </a>
            </td>
            <td align="left">
                Automatically manages push notification device tokens and gives convenient functions for handling push notification receiving and clicking.
            </td>
        </tr>
        <tr width="600px">
            <td align="center">
                4
            </td>
            <td align="left">
                <a href="https://www.courier.com/docs/sdk-libraries/react-native/#preferences">
                    <code>Preferences</code>
                </a>
            </td>
            <td align="left">
                Allow users to update which types of notifications they would like to receive.
            </td>
        </tr>
        <tr width="600px">
            <td align="center">
                5
            </td>
            <td align="left">
                <a href="https://www.courier.com/docs/sdk-libraries/react-native/#courierclient">
                    <code>CourierClient</code>
                </a>
            </td>
            <td align="left">
                The base level API wrapper around the Courier endpoints. Useful if you have a highly customized user experience or codebase requirements.
            </td>
        </tr>
    </tbody>
</table>

&emsp;

# Expo

If you are using Expo, you should check out the [Expo Docs](https://www.courier.com/docs/sdk-libraries/react-native/#expo) for all the details.

&emsp;

# Example Projects

Starter projects using this SDK.

<table>
    <thead>
        <tr>
            <th width="1000px" align="left">Project Link</th>
        </tr>
    </thead>
    <tbody>
        <tr width="1000px">
            <td align="left">
                <a href="https://github.com/trycourier/courier-react-native/tree/master/example-085">
                    <code>Example (React Native 0.85+, New Architecture)</code>
                </a>
            </td>
        </tr>
    </tbody>
</table>

&emsp;

# **Share feedback with Courier**

We want to make this the best SDK for managing notifications! Have an idea or feedback about our SDKs? Let us know!

[Courier React Native Issues](https://github.com/trycourier/courier-react-native/issues)

## EU endpoints

If your workspace uses EU-hosted Courier endpoints, pass the built-in EU preset through `apiUrls`.

```tsx
import Courier, { getCourierApiUrlsForRegion } from "@trycourier/courier-react-native";

await Courier.shared.signIn({
  userId: "your_user_id",
  accessToken: jwt,
  apiUrls: getCourierApiUrlsForRegion("eu")
});
```