@trycourier/courier-react-native 0.1.0 → 0.1.1

package/README.md

@@ -1,7 +1,9 @@
 # Courier React Native Overview
 
 ```ts
-await Courier.setIsDebugging(!isDebugging);
+import Courier, { CourierProvider } from '@trycourier/courier-react-native'
+
+await Courier.setIsDebugging(true);
 
 const userId = await Courier.userId;
 
@@ -17,10 +19,9 @@ await Courier.iOSForegroundPresentationOptions({
 });
 
 const currentPermissionStatus = await Courier.notificationPermissionStatus;
-const requestNotificationPermission =
-  await Courier.requestNotificationPermission();
+const requestNotificationPermission = await Courier.requestNotificationPermission();
 
-await Courier.shared.setFcmToken('asdf...');
+await Courier.setFcmToken('asdf...');
 
 const fcmToken = await Courier.fcmToken;
 const apnsToken = await Courier.apnsToken;
@@ -46,15 +47,11 @@ const messageId = await Courier.sendPush({
 
 # Requirements & Support
 
-| Operating System | Minimum SDK | Compile Target SDK |
-| :--------------- | ----------: | -----------------: |
-| `iOS`            |        `13` |                  — |
-| `Android`        |        `21` |               `32` |
 
-| Push Provider                            | Supported Platforms |
-| :--------------------------------------- | ------------------: |
-| `APNS (Apple Push Notification Service)` |               `iOS` |
-| `FCM (Firebase Cloud Messaging)`         |           `Android` |
+| Operating System | Min SDK | Compile SDK | Firebase Cloud Messaging | Apple Push Notification Service | Expo | OneSignal | Courier Inbox | Courier Toast |
+| :-- |     --: |         --: |                      --: |                             --: |  --: |       --: |           --: |           --: |
+| `iOS` |  `13` |           — |                       ❌ |                               ✅ |   ❌ |         ❌ |            ❌ |            ❌ |
+| `Android` | `21` |     `32` |                       ✅ |                               ❌ |   ❌ |         ❌ |            ❌ |            ❌ |
 
 > Most of this SDK depends on a Courier account: [`Create a Courier account here`](https://app.courier.com/signup)
 
@@ -64,17 +61,12 @@ const messageId = await Courier.sendPush({
 
 > Link to [`Example App`](https://github.com/trycourier/courier-react-native/tree/master/example)
 
-- [Courier React Native Overview](#courier-react-native-overview)
-- [Requirements & Support](#requirements--support)
-- [**Installation**](#installation)
-  - [**1. Install the package**](#1-install-the-package)
-  - [**2. iOS Setup**](#2-ios-setup)
-    - [**Add the Notification Service Extension (Recommended)**](#add-the-notification-service-extension-recommended)
-  - [**3. Android Setup**](#3-android-setup)
-  - [**4. Configure Push Provider**](#4-configure-push-provider)
-  - [**5. Managing User State**](#5-managing-user-state)
-  - [**Going to Production**](#going-to-production)
-  - [**Share feedback with Courier**](#share-feedback-with-courier)
+1. [`Install the package`](#1-install-the-package)
+2. [`iOS Setup`](#2-ios-setup)
+3. [`Android Setup`](#3-android-setup)
+4. [`Configure Push Provider`](#4-configure-push-provider)
+5. [`Managing User State`](#5-managing-user-state)
+6. [`Going to Production`](#going-to-production)
 
  
 
@@ -100,20 +92,40 @@ yarn add @trycourier/courier-react-native
 
 > If you don't need push notification support on iOS, you can skip this step.
 
-https://user-images.githubusercontent.com/6370613/198094477-40f22b1e-b3ad-4029-9120-0eee22de02e0.mov
+https://user-images.githubusercontent.com/6370613/199279392-1b376929-4a03-4acd-9d00-d170085d9791.mov
+
+### Written Tutorial 👇
+
+1. Open your iOS project and increase the min SDK target to iOS 13.0+
+2. Open your `Podfile` and increase the platform:
+
+```
+..
+platform :ios, '13'
+..
+```
 
-1. From your project's root directory, run: `cd ios && pod update`
-2. Open your iOS project and increase the min SDK target to iOS 13.0+
-3. Change your `AppDelegate` to extend the `CourierReactNativeDelegate`
-   - This automatically syncs APNS tokens to Courier
+3. From your React Native project's root directory, run: `cd ios && pod update`
+4. In Xcode, change your `AppDelegate.h` to use the snippet below:
+   - This automatically syncs APNS tokens to Courier token management
    - Allows the React Native SDK to handle when push notifications are delivered and clicked
+
+```objective-c
+#import <courier-react-native/CourierReactNativeDelegate.h>
+
+@interface AppDelegate : CourierReactNativeDelegate
+@end
+```
+
 4. Enable the "Push Notifications" capability
 
 ### **Add the Notification Service Extension (Recommended)**
 
 To make sure Courier can track when a notification is delivered to the device, you need to add a Notification Service Extension. Here is how to add one.
 
-https://user-images.githubusercontent.com/6370613/198336479-45aeec9e-0c94-4c29-b132-ea8c777b9da1.mov
+https://user-images.githubusercontent.com/6370613/199331562-5d16e02f-2878-4f60-bbe2-075ae119c6bc.mov
+
+### Written Tutorial 👇
 
 1. Download and Unzip the Courier Notification Service Extension: [`CourierNotificationServiceTemplate.zip`](https://github.com/trycourier/courier-notification-service-extension-template/archive/refs/heads/main.zip)
 2. Open the folder in terminal and run `sh make_template.sh`
@@ -128,12 +140,11 @@ https://user-images.githubusercontent.com/6370613/198336479-45aeec9e-0c94-4c29-b
 
 ```
 target 'CourierService' do
-  use_frameworks!
   pod 'Courier-iOS'
 end
 ```
 
-1. From the root of your React Native app, run: `cd ios && pod install`
+8. From the root of your React Native app, run: `cd ios && pod install`
 
 &emsp;
 
@@ -141,75 +152,109 @@ end
 
 > If you don't need push notification support on Android, you can skip this step.
 
-https://user-images.githubusercontent.com/6370613/198111372-09a29aba-6507-4cf7-a59d-87e8df2ba492.mov
+https://user-images.githubusercontent.com/6370613/199335432-aa52028a-f7ae-48bb-abec-427795baa6f4.mov
+
+### Written Tutorial 👇
 
 1. Open Android project
-2. Add support for Jitpack to `android/build.gradle`
-   - This is needed because the Courier Android SDK is hosted using Jitpack
-   - Maven support will be coming later
+2. Register your app in Firebase and download your `google-services.json` file
+3. Add the `google-services.json` file to your `yourApp/app/src` directory
+4. Make sure your `yourApp/android/build.gradle` file supports Jitpack:
 
-```gradle
+```groovy
 allprojects {
     repositories {
-        google()
-        mavenCentral()
-        maven { url 'https://jitpack.io' } // Add this line
+        ..
+        maven { url 'https://www.jitpack.io' } // This line is needed
     }
 }
 ```
 
-3. Update your `app/build.gradle` to support the min and compile SDKs
-   - `minSdkVersion 21`
-   - `compileSdkVersion 33`
-4. Run Gradle sync
-5. add the `google-services` plugin as a dependency inside of your `/android/build.gradle` file:
+3. Update your `yourApp/android/build.gradle` to support the following SDK versions
+    - This is needed to support newer Android Notification APIs
+
+```groovy
+buildscript {
+    ext {
+        buildToolsVersion = "32.0.0"
+        minSdkVersion = 21
+        compileSdkVersion = 32
+        targetSdkVersion = 32
+        ..
+    }
+    ..
+}
+```
+
+4. Add the `google-services` dependency to your `yourApp/android/build.gradle` file: 
 
 ```groovy
 buildscript {
   dependencies {
-    // ... other dependencies
-    classpath 'com.google.gms:google-services:4.3.14'
-    // Add me --- /\
+    ..
+    classpath("com.google.gms:google-services:4.3.14") // Add this line
   }
 }
 ```
 
-6. execute the plugin by adding the following to your `/android/app/build.gradle` file:
+5. Add this following line to the top of your `/android/app/build.gradle` file:
 
 ```groovy
-apply plugin: 'com.android.application'
-apply plugin: 'com.google.gms.google-services' // <- Add this line
+apply plugin: "com.android.application"
+apply plugin: "com.google.gms.google-services" // Add this line
 ```
 
-7. Change your `MainActivity` to extend the `CourierReactNativeActivity`
+6. Run Gradle Sync
+
+### **Update Activity and Register Service**
+
+https://user-images.githubusercontent.com/6370613/199335233-0880209b-5aec-4584-9726-eaa1077bf80d.mov
+
+### Written Tutorial 👇
+
+1. Change your `MainActivity` to extend the `CourierReactNativeActivity`
    - This allows Courier to handle when push notifications are delivered and clicked
-8. Setup a new Notification Service by creating a new file and pasting the code below in it
-   - This allows you to present a notification to your user when a new notification arrives
+2. Setup a new Notification Service by creating a new java file and paste the code below in it
+   - This allows you to present a notification to your user when a new notification arrives and will automatically sync new fcm tokens to Courier token management
 
 ```java
-import androidx.annotation.NonNull;
+// Your project import
 
+import android.annotation.SuppressLint;
+import androidx.annotation.NonNull;
 import com.courier.android.notifications.RemoteMessageExtensionsKt;
 import com.courier.android.service.CourierService;
 import com.google.firebase.messaging.RemoteMessage;
 
-public class YourNotificationService extends CourierService {
-  @Override
-  public void showNotification(@NonNull RemoteMessage message) {
-    super.showNotification(message);
-
-    RemoteMessageExtensionsKt.presentNotification(
-      message,
-      this,
-      MainActivity.class,
-      android.R.drawable.ic_dialog_info,
-      "Notification Service"
-    );
-  }
+// This is safe. `CourierService` will automatically handle token refreshes.
+@SuppressLint("MissingFirebaseInstanceTokenRefresh")
+public class YourExampleService extends CourierService {
+    
+    @Override
+    public void showNotification(@NonNull RemoteMessage message) {
+        super.showNotification(message);
+
+        // TODO: This is where you will customize the notification that is shown to your users
+        // The function below is used to get started quickly.
+        // You likely do not want to use `message.presentNotification(...)`
+        // For React Native, you likely do not want to change RemoteMessageExtensionsKt.presentNotification.handlingClass
+        // More information on how to customize an Android notification here:
+        // https://developer.android.com/develop/ui/views/notifications/build-notification
+
+        RemoteMessageExtensionsKt.presentNotification(
+                message,
+                this,
+                MainActivity.class,
+                android.R.drawable.ic_dialog_info,
+                "Notification Service"
+        );
+
+    }
+    
 }
 ```
 
-7. Add the Notification Service entry in your `AndroidManifest.xml` file
+3. Add the Notification Service entry in your `AndroidManifest.xml` file
 
 ```xml
 <manifest>
@@ -221,7 +266,7 @@ public class YourNotificationService extends CourierService {
 
         // Add this 👇
         <service
-            android:name=".YourNotificationService"
+            android:name=".YourExampleService"
             android:exported="false">
             <intent-filter>
                 <action android:name="com.google.firebase.MESSAGING_EVENT" />
@@ -243,8 +288,8 @@ public class YourNotificationService extends CourierService {
 
 To get push notification to appear in your app, add support for the provider you would like to use:
 
-- [`APNS (Apple Push Notification Service)`](https://www.courier.com/docs/guides/providers/push/apple-push-notification)
-- [`FCM (Firebase Cloud Messaging)`](https://www.courier.com/docs/guides/providers/push/firebase-fcm/)
+- [`APNS (Apple Push Notification Service)`](https://app.courier.com/channels/apn)
+- [`FCM (Firebase Cloud Messaging)`](https://app.courier.com/channels/firebase-fcm)
 
 &emsp;
 
@@ -262,12 +307,12 @@ Place these functions where you normally manage your user's state:
 ```dart
 // Saves accessToken and userId to native level local storage
 // This will persist between app sessions
-await Courier.shared.signIn(
-    accessToken: accessToken,
-    userId: userId,
-);
+await Courier.signIn({
+  accessToken: accessToken,
+  userId: userId,
+});
 
-await Courier.shared.signOut();
+await Courier.signOut();
 ```
 
 If you followed the steps above:
@@ -303,47 +348,48 @@ FirebaseMessaging.instance.onTokenRefresh.listen((fcmToken) {
 Courier allows you to send a push notification directly from the SDK to a user id. No tokens juggling or backend needed!
 
 ```typescript
-const notificationPermission = await Courier.notificationPermissionStatus;;
-print(notificationPermission);
+const notificationPermission = await Courier.notificationPermissionStatus;
+console.log(notificationPermission);
 
 // Notification permissions must be `authorized` on iOS to receive pushes
 
 const requestedNotificationPermission = await Courier.requestNotificationPermission();
-print(requestedNotificationPermission);
+console.log(requestedNotificationPermission);
 
 // This is how iOS will show the notification when the app is in the foreground
 // Passing [] will not present anything
-// `Courier.shared.onPushNotificationDelivered` will still get called
+// `onPushNotificationDelivered` will still get called
 await Courier.iOSForegroundPresentationOptions({
   options: ['badge', 'banner', 'list', 'sound'],
 });
 
 
-// the function returns an unsubscribe function
-// call the function to stop listening to notifications
+// This function returns an unsubscribe function
+// Call `unsibscribe();` to stop listening to notifications
 // Recommended to call the function while component mounts and unsubscribe when the component unmounts
 const unsubscribe = Courier.registerPushNotificationListeners({
 
   // Will be called if the app is in the foreground and a push notification arrives
   onPushNotificationClicked(push) {
-    ...
+    console.log(push.title)
   },
 
   // Will be called when a user clicks a push notification
   onPushNotificationDelivered(push) {
-    ...
-  },
+    console.log(push.title)
+  }
+  
 });
 
 // Sends a test push
-const messageId = await Courier.shared.sendPush(
-    authKey: 'a_courier_auth_key_that_should_only_be_used_for_testing',
-    userId: 'example_user',
-    title: 'Chirp Chrip!',
-    body: 'Hello from Courier 🐣',
-    isProduction: false, // This only affects APNS pushes. false == sandbox / true == production
-    providers: [CourierProvider.APNS, CourierProvider.FCM],
-);
+const messageId = await Courier.sendPush({
+  authKey: 'your_courier_auth_key_that_should_only_be_used_for_testing',
+  userId: 'example_user',
+  title: 'Chirp Chrip!',
+  body: 'Hello from Courier 🐣',
+  isProduction: false, // This only affects APNS pushes. false == sandbox / true == production
+  providers: [CourierProvider.APNS, CourierProvider.FCM],
+});
 ```
 
 &emsp;
@@ -367,8 +413,7 @@ curl --request POST \
   }'
 ```
 
-Or generate one here:
-[`Issue Courier Access Token`](https://www.courier.com/docs/reference/auth/issue-token/)
+Or generate one here: [`Issue Courier Access Token`](https://www.courier.com/docs/reference/auth/issue-token/)
 
 > This request to issue a token should likely exist in a separate endpoint served on your backend.
 
@@ -379,4 +424,4 @@ Or generate one here:
 We want to make this the best SDK for managing notifications! Have an idea or feedback about our SDKs? Here are some links to contact us:
 
 - [Courier Feedback](https://feedback.courier.com/)
-- [Courier React native Issues](https://github.com/trycourier/courier-react-native/issues)
+- [Courier React Native Issues](https://github.com/trycourier/courier-react-native/issues)

package/android/src/main/java/com/courierreactnative/CourierReactNativeModule.kt

@@ -184,6 +184,16 @@ class CourierReactNativeModule(reactContext: ReactApplicationContext) : ReactCon
       .emit(eventName, params)
   }
 
+  @ReactMethod
+  fun addListener(eventName: String?) {
+    // Empty
+  }
+
+  @ReactMethod
+  fun removeListeners(count: Int?) {
+    // Empty
+  }
+
   private fun ReadableArray.toCourierProviders(): List<CourierProvider> {
     val providers: MutableList<CourierProvider> = mutableListOf()
     for (provider in toArrayList()) {

package/ios/CourierReactNative.swift

@@ -7,7 +7,9 @@ class CourierReactNative: RCTEventEmitter {
     internal static let COURIER_PUSH_NOTIFICATION_CLICKED_EVENT = "pushNotificationClicked"
     internal static let COURIER_PUSH_NOTIFICATION_DELIVERED_EVENT = "pushNotificationDelivered"
     private static let COURIER_PUSH_NOTIFICATION_DEBUG_LOG_EVENT = "courierDebugEvent"
-
+    
+    private var isDebugListenerRegistered = false
+    
     private var lastClickedMessage: [AnyHashable: Any]? = nil
     private var notificationCenter: NotificationCenter {
         get {
@@ -24,12 +26,7 @@ class CourierReactNative: RCTEventEmitter {
         
         // Attach the listeners
         attachObservers()
-        
-        // Send notification to react native side
-        Courier.shared.logListener = {log in
-            self.sendEvent(withName: CourierReactNative.COURIER_PUSH_NOTIFICATION_DEBUG_LOG_EVENT, body: log)
-        }
-        
+                
     }
     
     private func attachObservers() {
@@ -220,10 +217,19 @@ class CourierReactNative: RCTEventEmitter {
     }
     
     @objc(setDebugMode: withResolver: withRejecter:)
-    func setDebugMode(isDebugging: Bool,resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock){
+    func setDebugMode(isDebugging: Bool,resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+        
+        // Send notification to react native side
+        if (isDebugging && !isDebugListenerRegistered) {
+            isDebugListenerRegistered = true
+            Courier.shared.logListener = { log in
+                self.sendEvent(withName: CourierReactNative.COURIER_PUSH_NOTIFICATION_DEBUG_LOG_EVENT, body: log)
+            }
+        }
+        
         Courier.shared.isDebugging = isDebugging
-        print("setIsDebugging", isDebugging);
         resolve(Courier.shared.isDebugging)
+        
     }
 
     override func supportedEvents() -> [String]! {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/courier-react-native",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",