Add support for Theme Mode & update iOS SDK version to 19.1.2 (#313)

* Update Intercom SDK version to 19.1.2

* add support for theme modes

Author: jasonpraful

android/build.gradle

@@ -70,4 +70,5 @@ dependencies {
   implementation "com.facebook.react:react-native:+"  // From node_modules
   implementation "com.google.firebase:firebase-messaging:${safeExtGet('firebaseMessagingVersion', '20.2.+')}"
   implementation 'io.intercom.android:intercom-sdk:17.1.0'
+  implementation 'io.intercom.android:intercom-sdk-ui:17.1.0'
 }

android/src/main/java/com/intercom/reactnative/IntercomErrorCodes.java

@@ -17,6 +17,7 @@ public class IntercomErrorCodes {
   public static final String HIDE_INTERCOM = "206";
   public static final String SET_LAUNCHER_VISIBILITY = "208";
   public static final String SET_BOTTOM_PADDING = "209";
+  public static final String SET_THEME_MODE = "210";
   public static final String HANDLE_PUSH_MESSAGE = "301";
   public static final String SEND_TOKEN_TO_INTERCOM = "302";
   public static final String FETCH_HELP_CENTER_COLLECTIONS = "901";

android/src/main/java/com/intercom/reactnative/IntercomModule.java

@@ -38,6 +38,7 @@
 import io.intercom.android.sdk.helpcenter.sections.HelpCenterCollectionContent;
 import io.intercom.android.sdk.identity.Registration;
 import io.intercom.android.sdk.push.IntercomPushClient;
+import io.intercom.android.sdk.ui.theme.ThemeMode;
 import android.app.TaskStackBuilder;
 
 @ReactModule(name = IntercomModule.NAME)
@@ -530,6 +531,42 @@ public void setBottomPadding(int paddingBottom, Promise promise) {
     }
   }
 
+  @ReactMethod
+  public void setThemeMode(String themeMode, Promise promise) {
+    try {
+      ThemeMode themeModeEnum = null;
+
+      if (themeMode == null || themeMode.trim().isEmpty()) {
+        promise.reject(IntercomErrorCodes.SET_THEME_MODE,
+            "Theme mode cannot be null or empty. Use 'LIGHT', 'DARK', or 'SYSTEM'.");
+        return;
+      }
+
+      switch (themeMode) {
+        case "SYSTEM":
+          themeModeEnum = ThemeMode.SYSTEM;
+          break;
+        case "LIGHT":
+          themeModeEnum = ThemeMode.LIGHT;
+          break;
+        case "DARK":
+          themeModeEnum = ThemeMode.DARK;
+          break;
+        default:
+          promise.reject(IntercomErrorCodes.SET_THEME_MODE,
+              "Invalid theme mode: '" + themeMode + "'. Use 'LIGHT', 'DARK', or 'SYSTEM'.");
+          return;
+      }
+
+      Intercom.client().setThemeMode(themeModeEnum);
+      promise.resolve(true);
+    } catch (Exception err) {
+      Log.e(NAME, "setThemeMode error:");
+      Log.e(NAME, err.toString());
+      promise.reject(IntercomErrorCodes.SET_THEME_MODE, "Error in setThemeMode: " + err.toString());
+    }
+  }
+
   @ReactMethod
   public void setUserJwt(String jwt, Promise promise) {
     try {

example/ios/Podfile.lock

@@ -4,9 +4,9 @@ PODS:
   - FBLazyVector (0.74.0)
   - fmt (9.1.0)
   - glog (0.3.5)
-  - Intercom (18.7.3)
-  - intercom-react-native (8.5.0):
-    - Intercom (~> 18.7.3)
+  - Intercom (19.1.2)
+  - intercom-react-native (8.8.0):
+    - Intercom (~> 19.1.2)
     - React-Core
   - RCT-Folly (2024.01.01.00):
     - boost
@@ -911,9 +911,9 @@ PODS:
   - React-Mapbuffer (0.74.0):
     - glog
     - React-debug
-  - react-native-config (1.5.5):
-    - react-native-config/App (= 1.5.5)
-  - react-native-config/App (1.5.5):
+  - react-native-config (1.5.7):
+    - react-native-config/App (= 1.5.7)
+  - react-native-config/App (1.5.7):
     - React-Core
   - React-nativeconfig (0.74.0)
   - React-NativeModulesApple (0.74.0):
@@ -1313,56 +1313,56 @@ SPEC CHECKSUMS:
   FBLazyVector: 026c8f4ae67b06e088ae01baa2271ef8a26c0e8c
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
-  Intercom: 93c6f5d9815b34bf2a7e5f03bcf7b6e08c1a4788
-  intercom-react-native: 985eb561fd1eb0765f86a3332a89a4f31ce3dfaa
-  RCT-Folly: 045d6ecaa59d826c5736dfba0b2f4083ff8d79df
+  Intercom: 0643528ea72515fb47096ad38fe455780441881b
+  intercom-react-native: 15a322d6032f91058563a02e049f4d7246aad1a0
+  RCT-Folly: 5f972de9f7d384c7d0e7380dd7da506228e568f5
   RCTDeprecation: 3ca8b6c36bfb302e1895b72cfe7db0de0c92cd47
   RCTRequired: 9fc183af555fd0c89a366c34c1ae70b7e03b1dc5
   RCTTypeSafety: db1dd5ad1081a5e160d30bb29ef922693d5ac4b1
   React: 8650d592d90b99097504b8dcfebab883972aed71
   React-callinvoker: 6bb8b399ab8cec59e52458c3a592aa1fca130b68
-  React-Codegen: 0c5fb82424bc21119c79da38b93ab8a62bcf5f9f
-  React-Core: 6dc6cccf86dd6eb53e5f689211ceb2037d65d3a6
-  React-CoreModules: 087c24b785afc79d29d23bffe7b02f79bb00cf76
-  React-cxxreact: 8b5a860f8c673ba4f98a3e30b41d4a2ae20f3a31
+  React-Codegen: fbad87d0dc7c5bc1536b25bc5cf2f19a1449e438
+  React-Core: ab1b60c382b7b79c374b68918f856826ec7f02a9
+  React-CoreModules: c5791800e490979b15b819e13ceaee42aa4a2672
+  React-cxxreact: 7a5de9c31527a3a36b02caa3540ab55080a6448a
   React-debug: 41175f3e30dfa8af6eab2631261e1eac26307f9f
-  React-Fabric: 109d6c97fb4856f3edd848d5d896b71dedeaa361
-  React-FabricImage: de46a64a0ca4b0409a0acfb2f5ccdf1195f2d8e2
+  React-Fabric: c96fe05717ffb9ab37f7533e9697e68932a621d4
+  React-FabricImage: 837a4d681f01084888c7ed55df848eb3611c5691
   React-featureflags: 5e7e78c607661fe7f72bc38c6f03736e0876753a
-  React-graphics: 354adf8693bf849e696bf5096abc8cdc22c78ab4
-  React-ImageManager: 74e0898e24b12c45c40019b8558a1310d0b2a47c
+  React-graphics: ea6e3c3f77683565552986548ba6a2938cb83251
+  React-ImageManager: 49a461cd14ed15749fe7371afb1924e8a72aecc1
   React-jsc: 8c066d00deacb809aba74cbe3fc94b76d5ae6b7e
-  React-jserrorhandler: 33cb327f5c6e1571b362f1a9c762ff839a5adb15
-  React-jsi: 9ab5aa12ce6d9238a150e81f43c99b97e53a48a7
-  React-jsiexecutor: c30f9dda4147c7339cffc64d6ad596c6faddddb9
-  React-jsinspector: 50cfdab96549beab8d6554e39f3d36ed2ba23078
-  React-jsitracing: 36a2bbc272300313653d980de5ab700ec86c534a
-  React-logger: 03f2f7b955cfe24593a2b8c9705c23e142d1ad24
-  React-Mapbuffer: 5e05d78fe6505f4a054b86f415733d4ad02dd314
-  react-native-config: 3367df9c1f25bb96197007ec531c7087ed4554c3
+  React-jserrorhandler: bccc0691bf5195f4da1292a4d2fbaa13fa895f89
+  React-jsi: 20c796a75f92a22b083ebe78005b50fecfe025bd
+  React-jsiexecutor: 2ac1b518e12547c6389d6b314f4d17b283feab7a
+  React-jsinspector: 1cdd1dbae4aa9c455da2fec9ecda2381dda54695
+  React-jsitracing: d30048b056e8c9673dfbe67813bdb874c03558a5
+  React-logger: 5ae0978955199c132e71e8cf7797f619a6d17164
+  React-Mapbuffer: 3b85b3778e447cd1f06d353b8e967af50f272829
+  react-native-config: 963b5efabc864cf69412e54b5de49b6a23e4af03
   React-nativeconfig: 951ec32f632e81cbd7d40aebb3211313251c092e
-  React-NativeModulesApple: add06f130d91f3ca13b92d35861fdd6fdb9157e6
+  React-NativeModulesApple: 612f931b1e79736f2d59353979042a424fb314c8
   React-perflogger: 271f1111779fef70f9502d1d38da5132e5585230
   React-RCTActionSheet: 5d6fb9adb11ab1bfbce6695a2b785767e4658c53
-  React-RCTAnimation: 86ace32c56e69b3822e7e5184ea83a79d47fc7b9
-  React-RCTAppDelegate: 6379a11a49fd0be615dc2e23da0c8a84c52ec65c
-  React-RCTBlob: 558daf7c11715ef24d97a0be5ccc3b209753682c
-  React-RCTFabric: eb4b1fc3718040717f17114b7782a519987bd7c4
-  React-RCTImage: b482f07cfdbe8e413edbf9d85953cecdb569472c
-  React-RCTLinking: fbd73a66cab34df69b2389c17f200e4722890fd9
-  React-RCTNetwork: fbdd716fbd6e53feb6d8e00eeb85e8184ad42ac8
-  React-RCTSettings: 11c3051b965593988298a3f5fb39e23bf6f7df9f
-  React-RCTText: f240b4d39c36c295204d29e7634a2fac450b6d29
-  React-RCTVibration: 1750f80b39e1ad9b4f509f4fdf19a803f7ab0d38
-  React-rendererdebug: a89ffa25c7670de8f22e0b322dfdd8333bc0d126
+  React-RCTAnimation: 0d11291f869c8a15cff4fd21dca031a83f9e8527
+  React-RCTAppDelegate: 77a7b9a27f10aa55da5a44132be281a15cc0848c
+  React-RCTBlob: 72759b7acf86de079c87a1562a440612c57da1b0
+  React-RCTFabric: a0345a090221724893e0ea20ffab73324f4b6520
+  React-RCTImage: 80ba9b23ecf87536b14c5eb38bd76f9d2b842c8a
+  React-RCTLinking: afd22b0854eba28eb277baad45c37ada5ef77bc3
+  React-RCTNetwork: ffe5a1021f5a0bcbdf7944665dc44856493ab5bd
+  React-RCTSettings: f8472ee7998de8d186c198e820c40fcaf9ce4571
+  React-RCTText: f556484bf1ba49a7c9b1ce1138608657d80e0bcb
+  React-RCTVibration: 236755b4231073ebac6cabc3864edb4cd6308d89
+  React-rendererdebug: c1dac9f04b12f05929b6113a50aec5fcd5132b94
   React-rncore: a3ab9e7271a5c692918e2a483beb900ff0a51169
-  React-RuntimeApple: dbaeec3eb503510c93e91d49e92fc39c0ccf7e3a
-  React-RuntimeCore: 67e737df40b8815f65671fbaf8f75440e7fba96e
+  React-RuntimeApple: 7fae2c2c7aa890e78830465f5ca7bd13b91939ed
+  React-RuntimeCore: 38f46aedbab24c4887cf763b8d0c676a059f95e6
   React-runtimeexecutor: 4471221991b6e518466a0422fbeb2158c07c36e1
-  React-runtimescheduler: 203e25504974651c4472ad00e035658d32002305
-  React-utils: 67c666fd04996cdb6bba26590586753d3e8ff7ed
-  ReactCommon: 53dbd9a55e29188ded016078708d1da8de2db19d
-  RNCAsyncStorage: ec53e44dc3e75b44aa2a9f37618a49c3bc080a7a
+  React-runtimescheduler: 1b7a5ce47ba798252278727248a3f50e991e2631
+  React-utils: 5eded69fc2a3be3f1823a64c6aa7b202e8e5dd94
+  ReactCommon: 649ff2cbfc22342f119b43af78ee85bad61e8919
+  RNCAsyncStorage: b6410dead2732b5c72a7fdb1ecb5651bbcf4674b
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 56f906bf6c11c931588191dde1229fd3e4e3d557
 

example/src/App.tsx

@@ -18,6 +18,7 @@ import Intercom, {
   type UserAttributes,
   Visibility,
   IntercomContent,
+  ThemeMode,
 } from '@intercom/intercom-react-native';
 
 import {
@@ -48,6 +49,7 @@ export default function App() {
     useState<boolean>(true);
   const [launcherVisibility, setLauncherVisibility] = useState<boolean>(false);
   const [user, setUser] = useState<UserAttributes>({ email: '' });
+  const [currentTheme, setCurrentTheme] = useState<ThemeMode>(ThemeMode.SYSTEM);
 
   const [conversationId, setConversationId] = useState<string | undefined>(
     CONVERSATION_ID
@@ -582,6 +584,54 @@ export default function App() {
             resetAttributes();
           }}
         />
+        <Button
+          intercom_accessibilityLabel="set-theme-light"
+          intercom_title={`Set Theme: Light ${
+            currentTheme === 'LIGHT' ? '✓' : ''
+          }`}
+          intercom_onPress={() => {
+            Intercom.setThemeMode(ThemeMode.LIGHT)
+              .then(() => {
+                setCurrentTheme(ThemeMode.LIGHT);
+              })
+              .catch((e) => {
+                showErrorAlert(e);
+                console.error(e);
+              });
+          }}
+        />
+        <Button
+          intercom_accessibilityLabel="set-theme-dark"
+          intercom_title={`Set Theme: Dark ${
+            currentTheme === 'DARK' ? '✓' : ''
+          }`}
+          intercom_onPress={() => {
+            Intercom.setThemeMode(ThemeMode.DARK)
+              .then(() => {
+                setCurrentTheme(ThemeMode.DARK);
+              })
+              .catch((e) => {
+                showErrorAlert(e);
+                console.error(e);
+              });
+          }}
+        />
+        <Button
+          intercom_accessibilityLabel="set-theme-system"
+          intercom_title={`Set Theme: System ${
+            currentTheme === 'SYSTEM' ? '✓' : ''
+          }`}
+          intercom_onPress={() => {
+            Intercom.setThemeMode(ThemeMode.SYSTEM)
+              .then(() => {
+                setCurrentTheme(ThemeMode.SYSTEM);
+              })
+              .catch((e) => {
+                showErrorAlert(e);
+                console.error(e);
+              });
+          }}
+        />
         <Button
           intercom_accessibilityLabel="logout"
           intercom_disabled={!loggedUser}

intercom-react-native.podspec

@@ -20,5 +20,5 @@ Pod::Spec.new do |s|
   s.pod_target_xcconfig = { "DEFINES_MODULE" => "YES" }
 
   s.dependency "React-Core"
-  s.dependency "Intercom", '~> 18.7.3'
+  s.dependency "Intercom", '~> 19.1.2'
 end

ios/IntercomModule.m

@@ -365,6 +365,35 @@ - (NSData *)dataFromHexString:(NSString *)string {
     resolve(@(YES));
 };
 
+RCT_EXPORT_METHOD(setThemeMode:(NSString *)themeMode
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject) {
+    @try {
+        if (themeMode == nil || [themeMode isKindOfClass:[NSNull class]] || [themeMode length] == 0) {
+            reject(@"SET_THEME_MODE", @"Theme mode cannot be null or empty. Use 'LIGHT', 'DARK', or 'SYSTEM'.", nil);
+            return;
+        }
+
+        ICMThemeOverride themeOverride;
+
+        if ([themeMode isEqualToString:@"LIGHT"]) {
+            themeOverride = ICMThemeOverrideLight;
+        } else if ([themeMode isEqualToString:@"DARK"]) {
+            themeOverride = ICMThemeOverrideDark;
+        } else if ([themeMode isEqualToString:@"SYSTEM"]) {
+            themeOverride = ICMThemeOverrideSystem;
+        } else {
+            reject(@"SET_THEME_MODE", [NSString stringWithFormat:@"Invalid theme mode: '%@'. Use 'LIGHT', 'DARK', or 'SYSTEM'.", themeMode], nil);
+            return;
+        }
+
+        [Intercom setThemeOverride:themeOverride];
+        resolve(@(YES));
+    } @catch (NSException *exception) {
+        reject(@"SET_THEME_MODE", @"Error in setThemeMode", [self exceptionToError:exception :@"SET_THEME_MODE" :@"setThemeMode"]);
+    }
+};
+
 - (NSError *)exceptionToError:(NSException *)exception :(NSString *)code :(NSString *)domain {
     NSMutableDictionary *info = [NSMutableDictionary dictionary];
     [info setValue:exception.name forKey:@"ExceptionName"];

src/index.tsx

@@ -26,6 +26,14 @@ export enum LogLevel {
 
 type LogLevelType = keyof typeof LogLevel;
 
+export enum ThemeMode {
+  LIGHT = 'LIGHT',
+  DARK = 'DARK',
+  SYSTEM = 'SYSTEM',
+}
+
+type ThemeModeType = keyof typeof ThemeMode;
+
 export const IntercomEvents = {
   IntercomUnreadCountDidChange:
     IntercomEventEmitter.UNREAD_COUNT_CHANGE_NOTIFICATION,
@@ -290,6 +298,17 @@ export type IntercomType = {
    */
   setLogLevel(logLevel: LogLevelType): Promise<boolean>;
 
+  /**
+   * Sets the theme mode for the Intercom SDK.
+   *
+   * This allows you to override the server-provided theme setting for the current session only.
+   * The theme mode controls whether the SDK displays in light mode, dark mode, or follows the system theme.
+   * The theme selection will be reset when the app restarts.
+   *
+   * @param themeMode The theme mode to set (LIGHT, DARK, or SYSTEM).
+   */
+  setThemeMode(themeMode: ThemeModeType): Promise<boolean>;
+
   /**
    Sets a JWT token for the user, necessary for using the Messenger
    when Messenger Security is enforced. This is an improvement to Identity Verification.
@@ -358,6 +377,7 @@ const Intercom: IntercomType = {
 
   sendTokenToIntercom: (token) => IntercomModule.sendTokenToIntercom(token),
   setLogLevel: (logLevel) => IntercomModule.setLogLevel(logLevel),
+  setThemeMode: (themeMode) => IntercomModule.setThemeMode(themeMode),
   setUserJwt: (jwt) => IntercomModule.setUserJwt(jwt),
   addEventListener: (event, callback) => {
     event === IntercomEvents.IntercomUnreadCountDidChange &&