|
| 1 | +# Intercom React Native Push Notification Sandbox with New Architecture |
| 2 | + |
| 3 | +[Setup](#setup) |
| 4 | + |
| 5 | +[Running the app](#running-the-the-app) |
| 6 | + |
| 7 | +[Local notifications testing](#local-notifications-testing) |
| 8 | + |
| 9 | +[Deep Links Testing](#deep-links-testing) |
| 10 | + |
| 11 | +# Setup |
| 12 | + |
| 13 | +## Step 1: Install dependencies |
| 14 | + |
| 15 | +```shell |
| 16 | +# using npm |
| 17 | +npm install |
| 18 | + |
| 19 | +# OR using Yarn |
| 20 | +yarn install |
| 21 | +``` |
| 22 | + |
| 23 | +## Step 2: Rename to match your package name and bundle ID |
| 24 | + |
| 25 | +This should match the package name for the project in Firebase and Intercom configured apps. |
| 26 | + |
| 27 | +**Current identifiers:** |
| 28 | +- **Android Package**: `com.example.withnotifications` |
| 29 | +- **iOS Bundle ID**: `org.reactjs.native.example.withnotification` |
| 30 | + |
| 31 | +To customize for your own app, update the following files: |
| 32 | + |
| 33 | +**iOS**: Update bundle identifier in `ios/withnotification.xcodeproj` |
| 34 | + |
| 35 | +**Android**: Update package name in: |
| 36 | +- `android/app/src/main/AndroidManifest.xml` |
| 37 | +- `android/app/src/main/java/com/example/withnotifications/` directory name |
| 38 | +- `MainActivity.kt` and `MainApplication.kt` package declarations |
| 39 | + |
| 40 | +>**Note**: This package does not attempt to properly rename build artifacts such as ios/build or Cocoa Pod installation targets. After renaming your project you should clean, build, and reinstall third party dependencies to get it running properly with the new name. |
| 41 | +
|
| 42 | +## Step 3: Run pod install |
| 43 | + |
| 44 | +```shell |
| 45 | +# using npm |
| 46 | +pnpm run pod |
| 47 | + |
| 48 | +# OR directly |
| 49 | +cd ios && pod install && cd .. |
| 50 | +``` |
| 51 | + |
| 52 | +## Step 4: Initialize Intercom |
| 53 | + |
| 54 | +### Android |
| 55 | +>**MainApplication.kt** |
| 56 | +
|
| 57 | +```kotlin |
| 58 | +override fun onCreate() { |
| 59 | + super.onCreate() |
| 60 | + loadReactNative(this) |
| 61 | + |
| 62 | + IntercomModule.initialize(this, "YOUR_ANDROID_API_KEY", "YOUR_APP_ID"); // <-- Add your configuration here |
| 63 | +} |
| 64 | +``` |
| 65 | + |
| 66 | +### iOS |
| 67 | +>**AppDelegate.mm** |
| 68 | +
|
| 69 | +```objective-c |
| 70 | +- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions |
| 71 | +{ |
| 72 | + // ... |
| 73 | + [[UIApplication sharedApplication] registerForRemoteNotifications]; |
| 74 | + |
| 75 | + [IntercomModule initialize:@"YOUR_IOS_API_KEY" withAppId:@"YOUR_APP_ID"]; // <-- Add your Intercom configurations here |
| 76 | + |
| 77 | + return [super application:application didFinishLaunchingWithOptions:launchOptions]; |
| 78 | +} |
| 79 | +``` |
| 80 | + |
| 81 | +## Step 5: Setup Push Notifications |
| 82 | + |
| 83 | +### Android |
| 84 | +> Move your **google-services.json** file into the **android/app** directory |
| 85 | +
|
| 86 | +> You can find more details on how to configure firebase with Intercom [here](https://developers.intercom.com/installing-intercom/react-native/push-notifications). |
| 87 | +
|
| 88 | +# Running the the app |
| 89 | + |
| 90 | +>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. |
| 91 | +
|
| 92 | +``` |
| 93 | +cd ios && pod install |
| 94 | +``` |
| 95 | + |
| 96 | +## Step 1: Start the Metro Server |
| 97 | + |
| 98 | +First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. |
| 99 | + |
| 100 | +To start Metro, run the following command from the _root_ of your React Native project: |
| 101 | + |
| 102 | +```shell |
| 103 | +# using pnpm |
| 104 | +pnpm start |
| 105 | +``` |
| 106 | + |
| 107 | +## Step 2: Start your Application |
| 108 | + |
| 109 | +Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: |
| 110 | + |
| 111 | +### For Android |
| 112 | + |
| 113 | +```shell |
| 114 | +# using pnpm |
| 115 | +pnpm run android |
| 116 | +``` |
| 117 | + |
| 118 | +### For iOS |
| 119 | + |
| 120 | +>**Note**: Remote push notifications do not work on iOS Simulator. Run the app on a physical device. |
| 121 | +
|
| 122 | +```shell |
| 123 | +# using pnpm |
| 124 | +pnpm run ios |
| 125 | +``` |
| 126 | + |
| 127 | +# Local notifications testing |
| 128 | + |
| 129 | +>**Note**: We can use this method to test if notifications are working locally (e.g. debugging issue with notification permissions). |
| 130 | +
|
| 131 | +## Option 1: Drag payload.apns to the running simulator. |
| 132 | + |
| 133 | +Modify the bundle ID inside `payload.apns` to match yours (`org.reactjs.native.example.withnotification`). |
| 134 | + |
| 135 | +## Option 2: Terminal |
| 136 | +```shell |
| 137 | +xcrun simctl push booted org.reactjs.native.example.withnotification payload.json |
| 138 | +``` |
| 139 | + |
| 140 | +# (Local) Deep Links Testing |
| 141 | + |
| 142 | +By default, this sandbox is configured to handle the following links with React Navigation: |
| 143 | + |
| 144 | +``` |
| 145 | +**app://** for deep link |
| 146 | +
|
| 147 | +**app.fake** for iOS Universal Link and Android App Link (Only works when linked on a message from within the app.) |
| 148 | +``` |
| 149 | + |
| 150 | +``` |
| 151 | +Configured Paths: |
| 152 | + /settings |
| 153 | +``` |
| 154 | + |
| 155 | +>**Note:** Universal and App Links require setup in the server to work. |
| 156 | +
|
| 157 | +[Apple - Supporting Associated Domains](https://developer.apple.com/documentation/xcode/supporting-associated-domains) |
| 158 | + |
| 159 | +[Android - Verify App Links](https://developer.android.com/training/app-links/verify-android-applinks) |
| 160 | + |
| 161 | +[React Navigation Documentation - Setup Deep Links](https://reactnavigation.org/docs/deep-linking) |
| 162 | + |
| 163 | +[React Navigation Documentation - Configuring Links](https://reactnavigation.org/docs/configuring-links) |
| 164 | + |
| 165 | +## Option 1: uri-scheme |
| 166 | +The uri-scheme package can be used to test deep links on both Android and iOS. |
| 167 | + |
| 168 | +```shell |
| 169 | +npx uri-scheme open [your deep link] --[ios|android] |
| 170 | +``` |
| 171 | + |
| 172 | +Example: |
| 173 | +```shell |
| 174 | +npx uri-scheme open "app://settings" --ios |
| 175 | + |
| 176 | +npx uri-scheme open "https://app.fake/settings" --ios |
| 177 | +``` |
| 178 | + |
| 179 | +## Option 2: xcrun for iOS |
| 180 | +The xcrun command can be used to test deep links with the iOS simulator: |
| 181 | + |
| 182 | +```shell |
| 183 | +xcrun simctl openurl booted [your deep link] |
| 184 | +``` |
| 185 | + |
| 186 | +Example: |
| 187 | +```shell |
| 188 | +xcrun simctl openurl booted "app://settings" |
| 189 | + |
| 190 | +xcrun simctl openurl booted "https://app.fake/settings" |
| 191 | +``` |
| 192 | + |
| 193 | +## Option 3: adb for Android |
| 194 | +The adb command can be used to test deep links with the Android emulator or a connected device: |
| 195 | + |
| 196 | +```shell |
| 197 | +adb shell am start -W -a android.intent.action.VIEW -d [your deep link] [your android package name] |
| 198 | +``` |
| 199 | + |
| 200 | +Example: |
| 201 | +```shell |
| 202 | +adb shell am start -W -a android.intent.action.VIEW -d "app://settings" com.example.withnotifications |
| 203 | + |
| 204 | +adb shell am start -W -a android.intent.action.VIEW -d "https://app.fake/settings" com.example.withnotifications |
| 205 | +``` |
0 commit comments