feat: inline in-app messages (#453)

Author: mrehan27

android/build.gradle

@@ -24,12 +24,32 @@ def getExtOrIntegerDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties['customerio.reactnative.' + name]).toInteger()
 }
 
+def isNewArchitectureEnabled() {
+  // Allow customers to override new architecture setting specifically for Customer.io SDK.
+  // This is useful as a workaround for apps where the new architecture has issues.
+  // Customers can add 'customerioNewArchEnabled=false' in their gradle.properties
+  // to force the SDK to use old architecture even when their app has newArchEnabled=true.
+  // This can be helpful for customers who are using the new architecture in their app, but are on older
+  // versions of React Native than the one used by the SDK to generate the codegen files.
+  if (project.hasProperty("customerioNewArchEnabled")) {
+    return project.customerioNewArchEnabled == "true"
+  }
+  // Otherwise, use react-native's newArchEnabled property.
+  return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
 android {
   namespace = 'io.customer.reactnative.sdk'
   compileSdkVersion getExtOrIntegerDefault('compileSdkVersion')
   defaultConfig {
+    def isNewArchEnabled = isNewArchitectureEnabled()
     minSdkVersion getExtOrIntegerDefault('minSdkVersion')
     targetSdkVersion getExtOrIntegerDefault('targetSdkVersion')
+    buildConfigField("boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchEnabled.toString())
   }
 
   buildTypes {
@@ -44,6 +64,16 @@ android {
     sourceCompatibility JavaVersion.VERSION_17
     targetCompatibility JavaVersion.VERSION_17
   }
+  sourceSets {
+    main {
+      if (isNewArchitectureEnabled()) {
+        // Include both new architecture source directories and codegen generated files
+        java.srcDirs += ['src/newarch']
+      } else {
+        java.srcDirs += ['src/oldarch']
+      }
+    }
+  }
 }
 
 repositories {

android/gradle.properties

@@ -2,4 +2,4 @@ customerio.reactnative.kotlinVersion=1.7.21
 customerio.reactnative.compileSdkVersion=33
 customerio.reactnative.targetSdkVersion=33
 customerio.reactnative.minSdkVersion=21
-customerio.reactnative.cioSDKVersionAndroid=4.6.1
+customerio.reactnative.cioSDKVersionAndroid=4.6.3

android/src/main/java/io/customer/reactnative/sdk/CustomerIOReactNativeModule.kt

@@ -24,7 +24,7 @@ class CustomerIOReactNativeModule(
     private val pushMessagingModule: RNCIOPushMessaging,
     private val inAppMessagingModule: RNCIOInAppMessaging,
 ) : ReactContextBaseJavaModule(reactContext) {
-    override fun getName(): String = "NativeCustomerIO"
+    override fun getName(): String = NAME
 
     private val logger: Logger = SDKComponent.logger
     private fun customerIO(): CustomerIO? = runCatching {
@@ -146,4 +146,8 @@ class CustomerIOReactNativeModule(
     fun showPromptForPushNotifications(pushConfigurationOptions: ReadableMap?, promise: Promise) {
         pushMessagingModule.showPromptForPushNotifications(pushConfigurationOptions, promise)
     }
+
+    companion object {
+        const val NAME = "NativeCustomerIO"
+    }
 }

android/src/main/java/io/customer/reactnative/sdk/CustomerIOReactNativePackage.kt

@@ -0,0 +1,75 @@
+package io.customer.reactnative.sdk
+
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+import io.customer.reactnative.sdk.logging.RNCIOConsoleLoggerModule
+import io.customer.reactnative.sdk.messaginginapp.InlineInAppMessageViewManager
+import io.customer.reactnative.sdk.messaginginapp.RNCIOInAppMessaging
+import io.customer.reactnative.sdk.messagingpush.RNCIOPushMessaging
+
+/**
+ * Shared implementation of the [CustomerIOReactNativePackage] for common functionality in
+ * both the new and old architecture.
+ */
+object CustomerIOReactNativePackageImpl {
+    /**
+     * Creates and initializes all native modules for the Customer.io React Native SDK.
+     */
+    private fun createAndInitializeModules(
+        reactContext: ReactApplicationContext,
+        nativeModules: MutableMap<String, NativeModule>? = null
+    ): Map<String, NativeModule> {
+        val modules = nativeModules ?: mutableMapOf()
+
+        val loggerModule = modules.getOrPut(RNCIOConsoleLoggerModule.NAME) {
+            RNCIOConsoleLoggerModule(reactContext)
+        }
+        val pushMessagingModule = modules.getOrPut(RNCIOPushMessaging.NAME) {
+            RNCIOPushMessaging(reactContext)
+        } as RNCIOPushMessaging
+        val inAppMessagingModule = modules.getOrPut(RNCIOInAppMessaging.NAME) {
+            RNCIOInAppMessaging(reactContext)
+        } as RNCIOInAppMessaging
+        val mainModule = modules.getOrPut(CustomerIOReactNativeModule.NAME) {
+            CustomerIOReactNativeModule(
+                reactContext = reactContext,
+                pushMessagingModule = pushMessagingModule,
+                inAppMessagingModule = inAppMessagingModule,
+            )
+        }
+
+        return mapOf(
+            RNCIOConsoleLoggerModule.NAME to loggerModule,
+            RNCIOPushMessaging.NAME to pushMessagingModule,
+            RNCIOInAppMessaging.NAME to inAppMessagingModule,
+            CustomerIOReactNativeModule.NAME to mainModule
+        )
+    }
+
+    /**
+     * Creates the list of native modules for the Customer.io React Native SDK.
+     */
+    fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        // Since order does not matter, we can just return the values of the map
+        return createAndInitializeModules(reactContext).values.toList()
+    }
+
+    /**
+     * Creates the list of view managers for the Customer.io React Native SDK.
+     */
+    fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(InlineInAppMessageViewManager())
+    }
+
+    /**
+     * Initializes native modules with caching to avoid re-creating them multiple times.
+     * This should be removed in the future when we switch to TurboModules.
+     */
+    fun initializeNativeModules(
+        reactContext: ReactApplicationContext,
+        nativeModules: MutableMap<String, NativeModule>
+    ) {
+        createAndInitializeModules(reactContext, nativeModules)
+    }
+}

android/src/main/java/io/customer/reactnative/sdk/CustomerIOReactNativePackageImpl.kt

@@ -0,0 +1,11 @@
+package io.customer.reactnative.sdk.extension
+
+import android.view.View
+import com.facebook.react.bridge.ReactContext
+
+/**
+ * Extension property to get [ReactContext] from a View.
+ * Casts the view's context to ReactContext for React Native integration.
+ */
+internal val View.reactContext: ReactContext
+    get() = context as ReactContext

android/src/main/java/io/customer/reactnative/sdk/extension/ReactExtensions.kt

@@ -12,7 +12,7 @@ import java.lang.ref.WeakReference
 class RNCIOConsoleLoggerModule(
     reactContext: ReactApplicationContext,
 ) : ReactContextBaseJavaModule(reactContext) {
-    override fun getName(): String = "CioLoggingEmitter"
+    override fun getName(): String = NAME
 
     // Hold weak reference to ReactContext to avoid memory leaks
     // As loggers are long-lived objects, they might hold references to log dispatchers
@@ -54,4 +54,8 @@ class RNCIOConsoleLoggerModule(
             .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
             .emit("CioLogEvent", params)
     }
+
+    companion object {
+        const val NAME = "CioLoggingEmitter"
+    }
 }

android/src/main/java/io/customer/reactnative/sdk/logging/RNCIOConsoleLoggerModule.kt

@@ -0,0 +1,47 @@
+package io.customer.reactnative.sdk.messaginginapp
+
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import io.customer.messaginginapp.ui.bridge.WrapperPlatformDelegate
+
+/**
+ * Base view manager for inline in-app message components.
+ *
+ * Provides common functionality for both old and new React Native architecture
+ * implementations, including view creation, event handling, and property management.
+ */
+abstract class BaseInlineInAppMessageViewManager :
+    SimpleViewManager<ReactInlineInAppMessageView>() {
+    override fun getName() = NAME
+
+    override fun createViewInstance(context: ThemedReactContext): ReactInlineInAppMessageView {
+        return ReactInlineInAppMessageView(context)
+    }
+
+    /**
+     * This method exports custom direct event types for the inline message view.
+     * It registers two custom events:
+     * - onSizeChange: Triggered when the size of the inline message changes.
+     * - onStateChange: Triggered when the state of the inline message changes.
+     */
+    override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? {
+        val customEvents = super.getExportedCustomDirectEventTypeConstants() ?: mutableMapOf()
+        val registerCustomEvent = { eventName: String ->
+            customEvents.put(eventName, mapOf("registrationName" to eventName))
+        }
+        registerCustomEvent(WrapperPlatformDelegate.ON_SIZE_CHANGE)
+        registerCustomEvent(WrapperPlatformDelegate.ON_STATE_CHANGE)
+        registerCustomEvent(ReactInAppPlatformDelegate.ON_ACTION_CLICK)
+        return customEvents
+    }
+
+    @ReactProp(name = "elementId")
+    fun setElementId(view: ReactInlineInAppMessageView, elementId: String?) {
+        view.elementId = elementId
+    }
+
+    companion object {
+        const val NAME = "InlineMessageNative"
+    }
+}

android/src/main/java/io/customer/reactnative/sdk/messaginginapp/BaseInlineInAppMessageViewManager.kt

@@ -23,7 +23,7 @@ import io.customer.sdk.data.model.Region
 class RNCIOInAppMessaging(
     private val reactContext: ReactApplicationContext,
 ) : ReactContextBaseJavaModule(reactContext), InAppEventListener {
-    override fun getName(): String = "CioRctInAppMessaging"
+    override fun getName(): String = NAME
 
     private val inAppMessagingModule: ModuleMessagingInApp?
         get() = kotlin.runCatching { CustomerIO.instance().inAppMessaging() }.getOrNull()
@@ -122,4 +122,8 @@ class RNCIOInAppMessaging(
         eventType = "messageShown",
         message = message,
     )
+
+    companion object {
+        const val NAME = "CioRctInAppMessaging"
+    }
 }

android/src/main/java/io/customer/reactnative/sdk/messaginginapp/RNCIOInAppMessaging.kt

@@ -0,0 +1,37 @@
+package io.customer.reactnative.sdk.messaginginapp
+
+import android.view.View
+import com.facebook.react.bridge.Arguments
+import io.customer.messaginginapp.ui.bridge.WrapperPlatformDelegate
+import io.customer.reactnative.sdk.extension.sendUIEventToReactJS
+
+/**
+ * React Native platform delegate for in-app messaging.
+ * Bridges native in-app message events to React Native components.
+ *
+ * @param view The native Android view hosting the in-app message
+ */
+class ReactInAppPlatformDelegate(
+    view: View,
+) : WrapperPlatformDelegate(view) {
+    /**
+     * Dispatches in-app message events from native Android to React Native components.
+     * Converts native events to React Native UI events using the provided event name and payload.
+     */
+    override fun dispatchEvent(eventName: String, payload: Map<String, Any?>) {
+        view.sendUIEventToReactJS(
+            eventName = eventName,
+            payload = Arguments.makeNativeMap(payload),
+        )
+    }
+
+    // Internal helper method for dispatching events within the SDK.
+    internal fun dispatchEventInternal(eventName: String, payload: Map<String, Any?>) {
+        dispatchEvent(eventName, payload)
+    }
+
+    companion object {
+        // Event name constant for in-app message action clicks
+        const val ON_ACTION_CLICK = "onActionClick"
+    }
+}