Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 43 additions & 130 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,147 +1,60 @@
<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

&emsp;
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.

# Requirements & Support
## Installation

<table>
<thead>
<tr>
<th width="920px" align="left">Requirements</th>
<th width="120px" align="center"></th>
</tr>
</thead>
<tbody>
<tr width="600px">
<td align="left">Courier Account</td>
<td align="center">
<a href="https://app.courier.com/channels/courier">
<code>Sign Up</code>
</a>
</td>
</tr>
<tr width="600px">
<td align="left">Minimum iOS SDK Version</td>
<td align="center">
<code>15.0</code>
</td>
</tr>
<tr width="600px">
<td align="left">Minimum Android SDK Version</td>
<td align="center">
<code>23</code>
</td>
</tr>
</tbody>
</table>

&emsp;

# Installation

## Using `npm`

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

## Using `yarn`

```sh
yarn add @trycourier/courier-react-native
```

&emsp;

## iOS

### 1. Support iOS 15.0+ in your Project
<img width="470" alt="Screenshot 2025-01-21 at 12 55 34 PM" src="https://github.com/user-attachments/assets/ee7722b2-ce6a-4dc4-8b30-94f42494d80a" />

### 2. Support iOS 15+ in your Podfile

```sh
# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p'..

# Courier React Native requires iOS 15+
platform :ios, '15.0' // Add this line
prepare_react_native_project!

..
```

### 3. Install the Cocoapods

From the root of your React Native project run

```sh
cd ios && pod install
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 }}
/>
```

&emsp;

## Android

### 1. Add the Jitpack repository

In your `android/build.gradle` make sure your build and repository values are as follows

```gradle
buildscript {

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

// Double check these values
buildToolsVersion = "33.0.0"
minSdkVersion = 23
compileSdkVersion = 33
targetSdkVersion = 33
..
}
## Documentation

repositories {
google()
mavenCentral()
maven { url 'https://www.jitpack.io' } // THIS LINE
}

..

}
```

### 2. Run Gradle Sync

Your app must support at least gradle `8.4`

&emsp;

### 3. Extend your `MainActivity` with `CourierReactNativeActivity`

This allows the Courier SDK to manage the current user between app sessions.

Java
```java
import com.courierreactnative.CourierReactNativeActivity;

public class MainActivity extends CourierReactNativeActivity {
..
}
```

Kotlin
```kotlin
import com.courierreactnative.CourierReactNativeActivity;

class MainActivity : CourierReactNativeActivity() {
..
}
```
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;
Expand Down
Loading