refactor(expo): align iOS native components with Expo Modules (#8976)

Co-authored-by: Robert Soriano <sorianorobertc@gmail.com>

Author: mikepitre

.changeset/quiet-buttons-align.md

@@ -0,0 +1,5 @@
+---
+"@clerk/expo": minor
+---
+
+Align the iOS native Clerk module and native views with Android by registering them through Expo Modules.

packages/expo/app.plugin.js

@@ -6,8 +6,7 @@
  * 1. iOS is configured with the required deployment target and metadata
  * 2. Android is configured with packaging exclusions for dependencies
  *
- * Native modules are registered via Expo Modules autolinking on Android and
- * React Native autolinking on iOS (RCTViewManager).
+ * Native modules and views are registered via Expo Modules autolinking.
  */
 const {
   withXcodeProject,
@@ -187,8 +186,7 @@ const withClerkGoogleSignIn = config => {
  * 2. Android gets packaging exclusions for dependency conflicts
  * 3. Google Sign-In URL scheme is configured (if env var is set)
  *
- * Native modules are registered via Expo Modules autolinking on Android and
- * React Native autolinking on iOS (RCTViewManager).
+ * Native modules and views are registered via Expo Modules autolinking.
  */
 /**
  * Write ClerkKeychainService to Info.plist when keychainService is provided.

packages/expo/expo-module.config.json

@@ -1,7 +1,13 @@
 {
   "platforms": ["apple", "android"],
   "apple": {
-    "modules": ["ClerkGoogleSignInModule"]
+    "modules": [
+      "ClerkExpoModule",
+      "ClerkAuthViewModule",
+      "ClerkUserProfileViewModule",
+      "ClerkUserButtonViewModule",
+      "ClerkGoogleSignInModule"
+    ]
   },
   "android": {
     "modules": [

packages/expo/ios/ClerkAuthNativeView.swift

@@ -1,33 +1,29 @@
-import React
+import ExpoModulesCore
 import UIKit
 
 public class ClerkAuthNativeView: ClerkNativeViewHost {
   private var currentMode: String = "signInOrUp"
   private var currentDismissible: Bool = true
   private var didSendDismiss = false
 
-  @objc var onAuthEvent: RCTBubblingEventBlock?
+  let onAuthEvent = EventDispatcher()
 
-  @objc var mode: NSString? {
-    didSet {
-      let newMode = (mode as String?) ?? "signInOrUp"
-      guard newMode != currentMode else { return }
-      currentMode = newMode
-      setNeedsHostedViewUpdate()
-    }
+  func setMode(_ mode: String?) {
+    let newMode = mode ?? "signInOrUp"
+    guard newMode != currentMode else { return }
+    currentMode = newMode
+    setNeedsHostedViewUpdate()
   }
 
-  @objc var isDismissible: NSNumber? {
-    didSet {
-      let newDismissible = isDismissible?.boolValue ?? true
-      guard newDismissible != currentDismissible else { return }
-      currentDismissible = newDismissible
-      setNeedsHostedViewUpdate()
-    }
+  func setDismissible(_ isDismissible: Bool?) {
+    let newDismissible = isDismissible ?? true
+    guard newDismissible != currentDismissible else { return }
+    currentDismissible = newDismissible
+    setNeedsHostedViewUpdate()
   }
 
   private func sendAuthEvent(type: ClerkNativeViewEvent) {
-    onAuthEvent?(["type": type.rawValue])
+    onAuthEvent(["type": type.rawValue])
   }
 
   private func sendDismissIfNeeded() {
@@ -58,14 +54,20 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
   }
 }
 
-@objc(ClerkAuthViewManager)
-class ClerkAuthViewManager: RCTViewManager {
+public class ClerkAuthViewModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ClerkAuthView")
 
-  override static func requiresMainQueueSetup() -> Bool {
-    return true
-  }
+    View(ClerkAuthNativeView.self) {
+      Events("onAuthEvent")
 
-  override func view() -> UIView! {
-    return ClerkAuthNativeView()
+      Prop("mode") { (view: ClerkAuthNativeView, mode: String?) in
+        view.setMode(mode)
+      }
+
+      Prop("isDismissible") { (view: ClerkAuthNativeView, isDismissible: Bool?) in
+        view.setDismissible(isDismissible)
+      }
+    }
   }
 }

packages/expo/ios/ClerkAuthViewManager.m

@@ -33,6 +33,8 @@ Pod::Spec.new do |s|
   s.source         = { git: 'https://github.com/clerk/javascript' }
   s.static_framework = true
 
+  s.dependency 'ExpoModulesCore'
+
   s.pod_target_xcconfig = {
     'DEFINES_MODULE' => 'YES',
     'SWIFT_COMPILATION_MODE' => 'wholemodule'
@@ -50,14 +52,11 @@ Pod::Spec.new do |s|
   end
 
   s.source_files = "ClerkNativeBridge.swift",
-                   "ClerkExpoModule.swift", "ClerkExpoModule.m",
+                   "ClerkExpoModule.swift",
                    "ClerkNativeViewHost.swift",
                    "ClerkAuthNativeView.swift",
-                   "ClerkAuthViewManager.m",
                    "ClerkUserProfileNativeView.swift",
-                   "ClerkUserProfileViewManager.m",
-                   "ClerkUserButtonNativeView.swift",
-                   "ClerkUserButtonViewManager.m"
+                   "ClerkUserButtonNativeView.swift"
 
   install_modules_dependencies(s)
 end

packages/expo/ios/ClerkExpo.podspec

@@ -2,113 +2,114 @@
 // This module provides the configure function, client sync, and native view bridges.
 // SwiftUI Clerk views are created by ClerkNativeBridge through the Clerk iOS SPM dependency.
 
-import UIKit
-import React
+import ExpoModulesCore
+import Foundation
 
 // MARK: - Module
 
-@objc(ClerkExpo)
-class ClerkExpoModule: RCTEventEmitter {
-
-  private static var _hasListeners = false
-  private static weak var sharedInstance: ClerkExpoModule?
-
-  override init() {
-    super.init()
-    ClerkExpoModule.sharedInstance = self
-    ClerkNativeBridge.setClientChangedEmitter { body in
-      Self.emitClientChanged(body)
-    }
-  }
-
-  @objc override static func requiresMainQueueSetup() -> Bool {
-    return false
-  }
-
+public class ClerkExpoModule: Module {
   private static let nativeClientChangedEvent = "clerkNativeClientChanged"
 
-  override func supportedEvents() -> [String]! {
-    return [Self.nativeClientChangedEvent]
-  }
+  private static weak var sharedInstance: ClerkExpoModule?
 
-  override func startObserving() {
-    ClerkExpoModule._hasListeners = true
-  }
+  public func definition() -> ModuleDefinition {
+    Name("ClerkExpo")
 
-  override func stopObserving() {
-    ClerkExpoModule._hasListeners = false
-  }
+    Events(Self.nativeClientChangedEvent)
 
-  /// Emits a native client change event to JS from anywhere in the native layer.
-  /// Used by native views to ask ClerkProvider to reload JS client state.
-  static func emitClientChanged(_ body: [String: Any]? = nil) {
-    let eventBody = body ?? [:]
+    OnCreate {
+      Self.sharedInstance = self
+      ClerkNativeBridge.setClientChangedEmitter { body in
+        Self.emitClientChanged(body)
+      }
+    }
 
-    guard let instance = sharedInstance else {
-      return
+    OnDestroy {
+      if Self.sharedInstance === self {
+        Self.sharedInstance = nil
+        ClerkNativeBridge.setClientChangedEmitter(nil)
+      }
     }
 
-    if let bridge = instance.bridge {
-      bridge.enqueueJSCall("RCTDeviceEventEmitter", method: "emit", args: [nativeClientChangedEvent, eventBody], completion: nil)
-      return
+    AsyncFunction("configure") { (publishableKey: String, bearerToken: String?, promise: Promise) in
+      self.configure(publishableKey, bearerToken: bearerToken, promise: promise)
     }
 
-    guard _hasListeners else {
-      return
+    AsyncFunction("getClientToken") { (promise: Promise) in
+      self.getClientToken(promise: promise)
     }
 
-    instance.sendEvent(withName: nativeClientChangedEvent, body: eventBody)
+    AsyncFunction("syncClientStateFromJs") {
+      (deviceToken: String?,
+       sourceId: String?,
+       didChangeClient: Bool,
+       didChangeDeviceToken: Bool,
+       promise: Promise) in
+      self.syncClientStateFromJs(
+        deviceToken,
+        sourceId: sourceId,
+        didChangeClient: didChangeClient,
+        didChangeDeviceToken: didChangeDeviceToken,
+        promise: promise
+      )
+    }
   }
 
   // MARK: - configure
 
-  @objc func configure(_ publishableKey: String,
-                        bearerToken: String?,
-                        resolve: @escaping RCTPromiseResolveBlock,
-                        reject: @escaping RCTPromiseRejectBlock) {
+  private func configure(_ publishableKey: String, bearerToken: String?, promise: Promise) {
     Task {
       do {
         try await ClerkNativeBridge.shared.configure(publishableKey: publishableKey, bearerToken: bearerToken)
-        resolve(nil)
+        promise.resolve()
       } catch {
-        reject("E_CONFIGURE_FAILED", error.localizedDescription, error)
+        promise.reject("E_CONFIGURE_FAILED", error.localizedDescription)
       }
     }
   }
 
   // MARK: - getClientToken
 
-  @objc func getClientToken(_ resolve: @escaping RCTPromiseResolveBlock,
-                              reject: @escaping RCTPromiseRejectBlock) {
+  private func getClientToken(promise: Promise) {
     Task {
       let token = await ClerkNativeBridge.shared.getClientToken()
-      resolve(token)
+      promise.resolve(token)
     }
   }
 
   // MARK: - syncClientStateFromJs
 
-  @objc func syncClientStateFromJs(_ deviceToken: Any?,
-                                   sourceId: Any?,
-                                   didChangeClient: Bool,
-                                   didChangeDeviceToken: Bool,
-                                   resolve: @escaping RCTPromiseResolveBlock,
-                                   reject: @escaping RCTPromiseRejectBlock) {
-    let normalizedDeviceToken = deviceToken as? String
-    let normalizedSourceId = sourceId as? String
+  private func syncClientStateFromJs(_ deviceToken: String?,
+                                     sourceId: String?,
+                                     didChangeClient: Bool,
+                                     didChangeDeviceToken: Bool,
+                                     promise: Promise) {
     Task {
       do {
         try await ClerkNativeBridge.shared.syncClientStateFromJs(
-          deviceToken: normalizedDeviceToken,
-          sourceId: normalizedSourceId,
+          deviceToken: deviceToken,
+          sourceId: sourceId,
           didChangeClient: didChangeClient,
           didChangeDeviceToken: didChangeDeviceToken
         )
-        resolve(nil)
+        promise.resolve()
       } catch {
-        reject("E_SYNC_FROM_JS_FAILED", error.localizedDescription, error)
+        promise.reject("E_SYNC_FROM_JS_FAILED", error.localizedDescription)
       }
     }
   }
 
+  /// Emits a native client change event to JS from anywhere in the native layer.
+  /// Used by native views to ask ClerkProvider to reload JS client state.
+  static func emitClientChanged(_ body: [String: Any]? = nil) {
+    let eventBody = body ?? [:]
+
+    guard let instance = sharedInstance else {
+      return
+    }
+
+    DispatchQueue.main.async { [weak instance] in
+      instance?.sendEvent(Self.nativeClientChangedEvent, eventBody)
+    }
+  }
 }

packages/expo/ios/ClerkExpoModule.m

@@ -1,14 +1,16 @@
+import ExpoModulesCore
 import UIKit
 
-public class ClerkNativeViewHost: UIView {
+public class ClerkNativeViewHost: ExpoView {
   private lazy var hostingCoordinator = ClerkNativeHostingCoordinator(containerView: self)
   private var hasInitialized: Bool = false
   private var configuredObserver: NSObjectProtocol?
 
-  override public init(frame: CGRect) {
-    super.init(frame: frame)
+  public required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
   }
 
+  @available(*, unavailable)
   public required init?(coder: NSCoder) {
     fatalError("init(coder:) has not been implemented")
   }

packages/expo/ios/ClerkExpoModule.swift

@@ -1,4 +1,4 @@
-import React
+import ExpoModulesCore
 import UIKit
 
 public class ClerkUserButtonNativeView: ClerkNativeViewHost {
@@ -7,14 +7,10 @@ public class ClerkUserButtonNativeView: ClerkNativeViewHost {
   }
 }
 
-@objc(ClerkUserButtonViewManager)
-class ClerkUserButtonViewManager: RCTViewManager {
+public class ClerkUserButtonViewModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ClerkUserButtonView")
 
-  override static func requiresMainQueueSetup() -> Bool {
-    return true
-  }
-
-  override func view() -> UIView! {
-    return ClerkUserButtonNativeView()
+    View(ClerkUserButtonNativeView.self) {}
   }
 }