@octopus-community/react-native 1.0.2 → 1.0.4

package/android/src/main/java/com/octopuscommunity/octopusreactnativesdk/OctopusUIActivity.kt

@@ -30,6 +30,13 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import com.octopuscommunity.sdk.ui.OctopusDrawablesDefaults
 import com.octopuscommunity.sdk.ui.OctopusTheme
+import com.octopuscommunity.sdk.ui.OctopusTypographyDefaults
+import com.octopuscommunity.sdk.ui.OctopusTypography
+import com.octopuscommunity.sdk.ui.components.OctopusNavigationHandler
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
 import com.octopuscommunity.sdk.ui.home.OctopusHomeScreen
 import com.octopuscommunity.sdk.ui.octopusComposables
 import com.octopuscommunity.sdk.ui.octopusDarkColorScheme
@@ -71,72 +78,134 @@ class OctopusUIActivity : ComponentActivity() {
 
 @Composable
 private fun OctopusUI(onBack: () -> Unit) {
-    val themeConfig = OctopusThemeManager.getThemeConfig()
     val context = LocalContext.current
+    
+    // Get theme config once when UI is created - no need for polling
+    val themeConfig = OctopusThemeManager.getThemeConfig()
 
     // Function to detect if system is in dark mode
     fun isSystemInDarkTheme(): Boolean {
         return (context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
     }
 
-    // Only apply custom theming if theme config is provided
-    if (themeConfig != null) {
-        // Create color scheme based on theme config
-        val colorScheme = if (isSystemInDarkTheme()) {
-            octopusDarkColorScheme()
-        } else {
-            octopusLightColorScheme()
-        }.let { octopusColorScheme ->
-            octopusColorScheme.copy(
-                primary = themeConfig.primaryColor?.let {
-                    Color(android.graphics.Color.parseColor(it))
-                } ?: octopusColorScheme.primary,
-                primaryLow = themeConfig.primaryLowContrastColor?.let {
-                    Color(android.graphics.Color.parseColor(it))
-                } ?: octopusColorScheme.primaryLow,
-                primaryHigh = themeConfig.primaryHighContrastColor?.let {
-                    Color(android.graphics.Color.parseColor(it))
-                } ?: octopusColorScheme.primaryHigh,
-                onPrimary = themeConfig.onPrimaryColor?.let {
-                    Color(android.graphics.Color.parseColor(it))
-                } ?: octopusColorScheme.onPrimary
-            )
-        }
+    // Determine base color scheme based on theme config or system theme
+    val baseColorScheme = if (themeConfig?.colorScheme == "dark") {
+        octopusDarkColorScheme()
+    } else if (themeConfig?.colorScheme == "light") {
+        octopusLightColorScheme()
+    } else if (isSystemInDarkTheme()) {
+        octopusDarkColorScheme()
+    } else {
+        octopusLightColorScheme()
+    }
+
+    // Apply custom colors if theme config is provided
+    val finalColorScheme = if (themeConfig != null) {
+        baseColorScheme.copy(
+            primary = themeConfig.primaryColor?.let {
+                Color(android.graphics.Color.parseColor(it))
+            } ?: baseColorScheme.primary,
+            primaryLow = themeConfig.primaryLowContrastColor?.let {
+                Color(android.graphics.Color.parseColor(it))
+            } ?: baseColorScheme.primaryLow,
+            primaryHigh = themeConfig.primaryHighContrastColor?.let {
+                Color(android.graphics.Color.parseColor(it))
+            } ?: baseColorScheme.primaryHigh,
+            onPrimary = themeConfig.onPrimaryColor?.let {
+                Color(android.graphics.Color.parseColor(it))
+            } ?: baseColorScheme.onPrimary
+        )
+    } else {
+        baseColorScheme
+    }
 
-        // Handle logo loading using built-in Android capabilities
-        var logoPainter by remember { mutableStateOf<Painter?>(null) }
+    // Handle logo loading using built-in Android capabilities
+    var logoPainter by remember { mutableStateOf<Painter?>(null) }
 
-        LaunchedEffect(themeConfig.logoSource) {
-            themeConfig.logoSource?.let { logoSource ->
-                val uri = logoSource.getString("uri")
-                if (uri != null) {
-                    logoPainter = loadImageFromUri(uri)
-                } else {
-                    logoPainter = null
-                }
+    LaunchedEffect(themeConfig) {
+        themeConfig?.logoSource?.let { logoSource ->
+            val uri = logoSource.getString("uri")
+            if (uri != null) {
+                logoPainter = loadImageFromUri(uri)
+            } else {
+                logoPainter = null
             }
+        } ?: run {
+            // No theme config or no logo source
+            logoPainter = null
         }
+    }
 
-        // Create drawables based on theme config
-        val drawables = if (logoPainter != null) {
-            OctopusDrawablesDefaults.drawables(logo = logoPainter)
-        } else {
-            OctopusDrawablesDefaults.drawables()
-        }
-
-        // Apply custom theme
-        OctopusTheme(
-            colorScheme = colorScheme,
-            drawables = drawables
-        ) {
-            OctopusUIContent(onBack = onBack)
-        }
+    // Create drawables based on theme config
+    val drawables = if (logoPainter != null) {
+        OctopusDrawablesDefaults.drawables(logo = logoPainter)
     } else {
-        // No theme config - let the native SDK inherit the React Native app's theme colors
+        OctopusDrawablesDefaults.drawables()
+    }
+
+    // Create typography based on theme config
+    val typography = createCustomTypography(themeConfig)
+
+    // Apply theme with custom colors, logo, and typography
+    OctopusTheme(
+        colorScheme = finalColorScheme,
+        drawables = drawables,
+        typography = typography
+    ) {
         OctopusUIContent(onBack = onBack)
     }
 }
 
+private fun createCustomTypography(themeConfig: OctopusThemeConfig?): OctopusTypography {
+    val defaultTypography = OctopusTypographyDefaults.typography()
+    
+    if (themeConfig?.fonts == null) {
+        return defaultTypography
+    }
+    
+    val fontsConfig = themeConfig.fonts!!
+    val textStyles = fontsConfig.textStyles
+    
+    // Create custom typography based on new unified font configuration
+    if (textStyles != null && textStyles.isNotEmpty()) {
+        return OctopusTypographyDefaults.typography(
+            title1 = createTextStyle(textStyles["title1"], defaultTypography.title1),
+            title2 = createTextStyle(textStyles["title2"], defaultTypography.title2),
+            body1 = createTextStyle(textStyles["body1"], defaultTypography.body1),
+            body2 = createTextStyle(textStyles["body2"], defaultTypography.body2),
+            caption1 = createTextStyle(textStyles["caption1"], defaultTypography.caption1),
+            caption2 = createTextStyle(textStyles["caption2"], defaultTypography.caption2)
+        )
+    }
+    
+    
+    return defaultTypography
+}
+
+private fun createTextStyle(textStyleConfig: OctopusTextStyleConfig?, defaultStyle: TextStyle): TextStyle {
+    if (textStyleConfig == null) {
+        return defaultStyle
+    }
+    
+    val fontFamily = when (textStyleConfig.fontType) {
+        "serif" -> FontFamily.Serif
+        "monospace" -> FontFamily.Monospace
+        "default" -> FontFamily.Default
+        else -> FontFamily.Default
+    }
+    
+    val fontSize = textStyleConfig.fontSize?.let { 
+        // Use points directly as sp (1 point ≈ 1 sp on Android)
+        it.sp
+    } ?: defaultStyle.fontSize
+    
+    return defaultStyle.copy(
+        fontFamily = fontFamily,
+        fontSize = fontSize
+    )
+}
+
+
 @Composable
 private fun OctopusUIContent(onBack: () -> Unit) {
     Box(modifier = Modifier.fillMaxSize()) {
@@ -147,11 +216,23 @@ private fun OctopusUIContent(onBack: () -> Unit) {
             startDestination = "OctopusHome"
         ) {
             composable(route = "OctopusHome") {
-                OctopusHomeScreen(
-                    navController = navController,
-                    backIcon = true,
-                    onBack = onBack
-                )
+                OctopusNavigationHandler(
+                    navigateToLogin = {
+                        OctopusEventEmitter.instance?.emitLoginRequired()
+                    },
+                    navigateToProfileEdit = { fieldToEdit ->
+                        OctopusEventEmitter.instance?.emitEditUser(fieldToEdit)
+                    },
+                    navigateToClientObject = {
+                        // TODO : Bridge Post react
+                    }
+                ) {
+                    OctopusHomeScreen(
+                        navController = navController,
+                        backIcon = true,
+                        onBack = onBack
+                    )
+                }
             }
             octopusComposables(
                 navController = navController,
@@ -177,11 +258,9 @@ private suspend fun loadImageFromUri(uri: String): Painter? {
             if (bitmap != null) {
                 BitmapPainter(bitmap.asImageBitmap())
             } else {
-                Log.w("OctopusUI", "Failed to decode bitmap from URI: $uri")
                 null
             }
         } catch (e: Exception) {
-            Log.e("OctopusUI", "Error loading image from URI: $uri", e)
             null
         }
     }

package/ios/OctopusReactNativeSdk.mm

@@ -29,6 +29,14 @@ RCT_EXTERN_METHOD(cancelUserTokenRequest:(NSString *)requestId
 RCT_EXTERN_METHOD(disconnectUser:(RCTPromiseResolveBlock)resolve
                   withRejecter:(RCTPromiseRejectBlock)reject)
 
+RCT_EXTERN_METHOD(updateColorScheme:(NSString *)colorScheme
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(updateTheme:(NSDictionary *)themeOptions
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
 + (BOOL)requiresMainQueueSetup
 {
   return NO;

package/ios/OctopusReactNativeSdk.swift

@@ -15,6 +15,7 @@ class OctopusReactNativeSdk: RCTEventEmitter {
   private var ssoAuthenticator: OctopusSSOAuthenticator?
   private var theme: OctopusTheme?
   private var logoSource: [String: Any]?
+  private var fontConfiguration: [String: Any]?
 
   // MARK: - Initialization
 
@@ -25,6 +26,7 @@ class OctopusReactNativeSdk: RCTEventEmitter {
       self.ssoAuthenticator = OctopusSSOAuthenticator(octopusSDK: self.octopusSDK!, eventManager: eventManager)
       self.theme = sdkInitializer.parseTheme(from: options)
       self.logoSource = sdkInitializer.getLogoSource(from: options)
+      self.fontConfiguration = sdkInitializer.getFontConfiguration(from: options)
       resolve(nil)
     } catch {
       reject("INITIALIZE_ERROR", "Failed to initialize Octopus SDK: \(error.localizedDescription)", error)
@@ -100,7 +102,7 @@ class OctopusReactNativeSdk: RCTEventEmitter {
 
     DispatchQueue.main.async {
       do {
-        try self.uiManager.openUI(octopus: octopus, theme: self.theme, logoSource: self.logoSource)
+        try self.uiManager.openUI(octopus: octopus, theme: self.theme, logoSource: self.logoSource, fontConfiguration: self.fontConfiguration)
         resolve(nil)
       } catch {
         reject("OPEN_UI_ERROR", error.localizedDescription, error)
@@ -120,6 +122,24 @@ class OctopusReactNativeSdk: RCTEventEmitter {
     }
   }
 
+  @objc(updateColorScheme:withResolver:withRejecter:)
+  func updateColorScheme(colorScheme: String?, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
+    // iOS uses adaptive colors that automatically respond to system appearance changes
+    // No manual updates needed - the theme is applied when UI opens
+    resolve(nil)
+  }
+
+  @objc(updateTheme:withResolver:withRejecter:)
+  func updateTheme(themeOptions: [String: Any], resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
+    do {
+      self.theme = sdkInitializer.parseTheme(from: themeOptions)
+      resolve(nil)
+    } catch {
+      reject("UPDATE_THEME_ERROR", "Failed to update theme: \(error.localizedDescription)", error)
+    }
+  }
+
+
   // MARK: - Lifecycle management
 
   deinit {

package/ios/OctopusSDKInitializer.swift

@@ -22,52 +22,123 @@ class OctopusSDKInitializer {
     }
     
     var colors: OctopusTheme.Colors?
+    var fonts: OctopusTheme.Fonts?
     
     // Parse colors
     if let colorsMap = themeMap["colors"] as? [String: Any] {
       var primarySet: OctopusTheme.Colors.ColorSet?
       
-      if let primary = colorsMap["primary"] as? String,
-         let primaryColor = OctopusColorUtility.color(fromHex: primary) {
-        let lowContrast = (colorsMap["primaryLowContrast"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? primaryColor
-        let highContrast = (colorsMap["primaryHighContrast"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? UIColor.black
-        let onPrimary = (colorsMap["onPrimary"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? UIColor.white
-        
-        primarySet = OctopusTheme.Colors.ColorSet(
-          main: Color(uiColor: primaryColor),
-          lowContrast: Color(uiColor: lowContrast),
-          highContrast: Color(uiColor: highContrast)
-        )
-        
-        colors = OctopusTheme.Colors(
-          primarySet: primarySet,
-          onPrimary: Color(uiColor: onPrimary)
-        )
+      // Check if this is a dual-mode theme (has light and dark properties)
+      if let lightColors = colorsMap["light"] as? [String: Any],
+         let darkColors = colorsMap["dark"] as? [String: Any] {
+        // Dual-mode theme - create adaptive colors that automatically respond to system appearance
+        if let lightPrimary = lightColors["primary"] as? String,
+           let darkPrimary = darkColors["primary"] as? String,
+           let lightPrimaryColor = OctopusColorUtility.color(fromHex: lightPrimary),
+           let darkPrimaryColor = OctopusColorUtility.color(fromHex: darkPrimary) {
+          
+          // Create adaptive colors using UIColor's dynamic color capabilities
+          let adaptivePrimary = UIColor { traitCollection in
+            traitCollection.userInterfaceStyle == .dark ? darkPrimaryColor : lightPrimaryColor
+          }
+          
+          let lightLowContrast = (lightColors["primaryLowContrast"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? lightPrimaryColor
+          let darkLowContrast = (darkColors["primaryLowContrast"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? darkPrimaryColor
+          let adaptiveLowContrast = UIColor { traitCollection in
+            traitCollection.userInterfaceStyle == .dark ? darkLowContrast : lightLowContrast
+          }
+          
+          let lightHighContrast = (lightColors["primaryHighContrast"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? UIColor.black
+          let darkHighContrast = (darkColors["primaryHighContrast"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? UIColor.black
+          let adaptiveHighContrast = UIColor { traitCollection in
+            traitCollection.userInterfaceStyle == .dark ? darkHighContrast : lightHighContrast
+          }
+          
+          let lightOnPrimary = (lightColors["onPrimary"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? UIColor.white
+          let darkOnPrimary = (darkColors["onPrimary"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? UIColor.black
+          let adaptiveOnPrimary = UIColor { traitCollection in
+            traitCollection.userInterfaceStyle == .dark ? darkOnPrimary : lightOnPrimary
+          }
+          
+          primarySet = OctopusTheme.Colors.ColorSet(
+            main: Color(uiColor: adaptivePrimary),
+            lowContrast: Color(uiColor: adaptiveLowContrast),
+            highContrast: Color(uiColor: adaptiveHighContrast)
+          )
+          
+          colors = OctopusTheme.Colors(
+            primarySet: primarySet,
+            onPrimary: Color(uiColor: adaptiveOnPrimary)
+          )
+        }
+      } else {
+        // Single-mode theme (backward compatibility)
+        if let primary = colorsMap["primary"] as? String,
+           let primaryColor = OctopusColorUtility.color(fromHex: primary) {
+          let lowContrast = (colorsMap["primaryLowContrast"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? primaryColor
+          let highContrast = (colorsMap["primaryHighContrast"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? UIColor.black
+          let onPrimary = (colorsMap["onPrimary"] as? String).flatMap(OctopusColorUtility.color(fromHex:)) ?? UIColor.white
+          
+          primarySet = OctopusTheme.Colors.ColorSet(
+            main: Color(uiColor: primaryColor),
+            lowContrast: Color(uiColor: lowContrast),
+            highContrast: Color(uiColor: highContrast)
+          )
+          
+          colors = OctopusTheme.Colors(
+            primarySet: primarySet,
+            onPrimary: Color(uiColor: onPrimary)
+          )
+        }
       }
     }
     
+    // Parse fonts
+    if let fontsMap = themeMap["fonts"] as? [String: Any] {
+      // Font customization will be applied through OctopusTypography
+      // This is parsed here but applied separately in the UI manager
+      fonts = OctopusTheme.Fonts()
+    }
+    
     // Note: Logo will be handled separately in UI manager due to async loading requirements
-    // Only create theme if we have colors, otherwise return nil
-    guard let colors = colors else {
+    // Only create theme if we have colors or fonts, otherwise return nil
+    guard colors != nil || fonts != nil else {
       return nil
     }
     
     return OctopusTheme(
-      colors: colors,
-      fonts: OctopusTheme.Fonts(),
+      colors: colors ?? OctopusTheme.Colors(),
+      fonts: fonts ?? OctopusTheme.Fonts(),
       assets: OctopusTheme.Assets()
     )
   }
   
   func getLogoSource(from options: [String: Any]) -> [String: Any]? {
+    // First try to get logo from theme
+    if let themeMap = options["theme"] as? [String: Any],
+       let logoMap = themeMap["logo"] as? [String: Any],
+       let imageSource = logoMap["image"] as? [String: Any] {
+      return imageSource
+    }
+    
+    // Fallback: try to get logo from root level (for backward compatibility)
+    if let logoMap = options["logo"] as? [String: Any],
+       let imageSource = logoMap["image"] as? [String: Any] {
+      return imageSource
+    }
+    
+    return nil
+  }
+  
+  func getFontConfiguration(from options: [String: Any]) -> [String: Any]? {
     guard let themeMap = options["theme"] as? [String: Any],
-          let logoMap = themeMap["logo"] as? [String: Any] else {
+          let fontsMap = themeMap["fonts"] as? [String: Any] else {
       return nil
     }
     
-    // Only support Image.resolveAssetSource() approach
-    if let imageSource = logoMap["image"] as? [String: Any] {
-      return imageSource
+    // Use pre-processed configuration from TypeScript layer
+    if let parsedConfig = fontsMap["parsedConfig"] as? [String: Any] {
+      return ["parsedConfig": parsedConfig]
     }
     
     return nil

package/ios/OctopusUIManager.swift

@@ -7,19 +7,24 @@ import React
 class OctopusUIManager {
   private weak var presentedViewController: UIViewController?
 
-  func openUI(octopus: OctopusSDK, theme: OctopusUI.OctopusTheme?, logoSource: [String: Any]?) throws {
+  func openUI(octopus: OctopusSDK, theme: OctopusUI.OctopusTheme?, logoSource: [String: Any]?, fontConfiguration: [String: Any]?) throws {
     guard let presentingViewController = RCTPresentedViewController() else {
       throw NSError(domain: "OPEN_UI_ERROR", code: 0, userInfo: [NSLocalizedDescriptionKey: "Could not find presenting view controller"])
     }
 
+    // Create custom theme with font configuration
+    let customTheme = createCustomTheme(baseTheme: theme, fontConfiguration: fontConfiguration)
+    
     let octopusHomeScreen = OctopusHomeScreen(octopus: octopus)
+      .environment(\.octopusTheme, customTheme)
+    
     let hostingController = UIHostingController(rootView: AnyView(octopusHomeScreen))
     hostingController.modalPresentationStyle = .fullScreen
 
     // Apply theme if provided
-    if let theme = theme {
+    if let _ = theme {
       // Apply theme immediately (without logo) to avoid delay
-      hostingController.rootView = AnyView(OctopusHomeScreen(octopus: octopus).environment(\.octopusTheme, theme))
+      hostingController.rootView = AnyView(OctopusHomeScreen(octopus: octopus).environment(\.octopusTheme, customTheme))
       
       // Then load logo asynchronously and update theme if logo loads
       if let logoSource = logoSource {
@@ -27,8 +32,8 @@ class OctopusUIManager {
           DispatchQueue.main.async {
             if let logoImage = logoImage {
               let updatedTheme = OctopusUI.OctopusTheme(
-                colors: theme.colors,
-                fonts: theme.fonts,
+                colors: customTheme.colors,
+                fonts: customTheme.fonts,
                 assets: OctopusUI.OctopusTheme.Assets(logo: logoImage)
               )
               hostingController?.rootView = AnyView(OctopusHomeScreen(octopus: octopus).environment(\.octopusTheme, updatedTheme))
@@ -38,6 +43,20 @@ class OctopusUIManager {
           }
         }
       }
+    } else if let logoSource = logoSource {
+      // No theme but there's a logo - load it and create a theme with just the logo
+      loadLogo(from: logoSource) { [weak hostingController] logoImage in
+        DispatchQueue.main.async {
+          if let logoImage = logoImage {
+            let logoTheme = OctopusUI.OctopusTheme(
+              colors: OctopusUI.OctopusTheme.Colors(),
+              fonts: OctopusUI.OctopusTheme.Fonts(),
+              assets: OctopusUI.OctopusTheme.Assets(logo: logoImage)
+            )
+            hostingController?.rootView = AnyView(OctopusHomeScreen(octopus: octopus).environment(\.octopusTheme, logoTheme))
+          }
+        }
+      }
     }
 
     presentedViewController = hostingController
@@ -70,18 +89,43 @@ class OctopusUIManager {
       }.resume()
     } else {
       // Local file path (from Image.resolveAssetSource)
-      if let image = UIImage(contentsOfFile: uri) {
+      if let image = loadImageFromLocalPath(uri) {
         completion(image)
       } else {
-        // Fallback: try to load from bundle using the filename
-        let filename = (uri as NSString).lastPathComponent
-        let nameWithoutExtension = (filename as NSString).deletingPathExtension
-        let image = UIImage(named: nameWithoutExtension)
-        completion(image)
+        completion(nil)
       }
     }
   }
 
+  private func loadImageFromLocalPath(_ path: String) -> UIImage? {
+    // Handle absolute file URLs (file://) first
+    if path.hasPrefix("file://"), let url = URL(string: path),
+       let image = UIImage(contentsOfFile: url.path) {
+        return image
+    }
+
+    // Try raw absolute path next
+    if path.hasPrefix("/"), FileManager.default.fileExists(atPath: path),
+      let image = UIImage(contentsOfFile: path) {
+      return image
+    }
+
+    // For React Native bundled assets the path is relative (e.g. assets/assets/logo.png)
+    let nsPath = path as NSString
+    let directory = nsPath.deletingLastPathComponent
+    let filename = nsPath.lastPathComponent
+    let nameWithoutExtension = (filename as NSString).deletingPathExtension
+    let fileExtension = (filename as NSString).pathExtension
+
+    if let bundlePath = Bundle.main.path(forResource: nameWithoutExtension, ofType: fileExtension.isEmpty ? nil : fileExtension, inDirectory: directory.isEmpty ? nil : directory) ,
+      let image = UIImage(contentsOfFile: bundlePath) {
+        return image
+    }
+
+    // Final fallback: let UIKit try to resolve it by name (works for assets catalog entries)
+    return UIImage(named: nameWithoutExtension)
+  }
+
   func closeUI() throws {
     guard let presentedVC = presentedViewController else {
       throw NSError(domain: "CLOSE_UI_ERROR", code: 0, userInfo: [NSLocalizedDescriptionKey: "No UI is currently presented"])
@@ -98,4 +142,55 @@ class OctopusUIManager {
       presentedViewController = nil
     }
   }
+  
+  private func createCustomTheme(baseTheme: OctopusUI.OctopusTheme?, fontConfiguration: [String: Any]?) -> OctopusUI.OctopusTheme {
+    // If no font configuration, return the base theme or default
+    guard let fontConfig = fontConfiguration else {
+      return baseTheme ?? OctopusUI.OctopusTheme()
+    }
+    
+    // Use pre-processed configuration from TypeScript layer
+    if let parsedConfig = fontConfig["parsedConfig"] as? [String: Any],
+       let textStyles = parsedConfig["textStyles"] as? [String: [String: Any]] {
+      
+      let customFonts = OctopusUI.OctopusTheme.Fonts(
+        title1: createFontFromPreProcessedStyle(textStyles["title1"], defaultSize: 28),
+        title2: createFontFromPreProcessedStyle(textStyles["title2"], defaultSize: 24),
+        body1: createFontFromPreProcessedStyle(textStyles["body1"], defaultSize: 18),
+        body2: createFontFromPreProcessedStyle(textStyles["body2"], defaultSize: 16),
+        caption1: createFontFromPreProcessedStyle(textStyles["caption1"], defaultSize: 12),
+        caption2: createFontFromPreProcessedStyle(textStyles["caption2"], defaultSize: 10),
+        navBarItem: createFontFromPreProcessedStyle(textStyles["body1"], defaultSize: 17) // Use body1 style for nav
+      )
+      
+      return OctopusUI.OctopusTheme(
+        colors: baseTheme?.colors ?? OctopusUI.OctopusTheme.Colors(),
+        fonts: customFonts,
+        assets: baseTheme?.assets ?? OctopusUI.OctopusTheme.Assets()
+      )
+    }
+    
+    return baseTheme ?? OctopusUI.OctopusTheme()
+  }
+  
+  private func createFontFromPreProcessedStyle(_ textStyle: [String: Any]?, defaultSize: CGFloat) -> Font {
+    guard let textStyle = textStyle else {
+      return Font.system(size: defaultSize)
+    }
+    
+    let fontType = textStyle["fontType"] as? String
+    let fontSize = textStyle["fontSize"] as? Double ?? Double(defaultSize)
+    
+    switch fontType {
+    case "serif":
+      return Font.system(size: CGFloat(fontSize), design: .serif)
+    case "monospace":
+      return Font.system(size: CGFloat(fontSize), design: .monospaced)
+    case "default":
+      return Font.system(size: CGFloat(fontSize))
+    default:
+      return Font.system(size: CGFloat(fontSize))
+    }
+  }
+
 }