@octopus-community/react-native 1.0.0 → 1.0.2

package/README.md

@@ -49,7 +49,18 @@ Due to a bug in XCode 15, you might need to set `ENABLE_USER_SCRIPT_SANDBOXING`
 
 ### Expo
 
-An expo plugin will be available shortly.
+Configure `use_frameworks` (static or dynamic) with `expo-build-properties`:
+
+```json
+[
+  "expo-build-properties",
+  {
+    "ios": {
+      "useFrameworks": "static"
+    }
+  }
+]
+```
 
 ## Usage
 
@@ -89,12 +100,23 @@ import {
   closeUI,
 } from '@octopus-community/react-native';
 
-// Initialize with SSO mode
+// Initialize with SSO mode and custom theme
 await initialize({
   apiKey: 'YOUR_OCTOPUS_API_KEY',
   connectionMode: {
     type: 'sso',
     appManagedFields: ['username', 'profilePicture', 'biography']
+  },
+  theme: {
+    colors: {
+      primary: '#FF6B35', // Your brand's primary color
+      primaryLowContrast: '#FF8C69', // Lighter variation
+      primaryHighContrast: '#CC4A1A', // Darker variation
+      onPrimary: '#FFFFFF', // Text color on primary background
+    },
+    logo: {
+      image: Image.resolveAssetSource(require('./assets/logo.png')), // Your custom logo
+    },
   }
 });
 
@@ -144,6 +166,44 @@ Show the Octopus home screen with the [`openUI()`](./docs/api/functions/openUI.m
 
 Future versions of this React Native module will let you show the UI in your React components. Please reach out if you need this prioritized.
 
+### Theme Customization
+
+You can customize the Octopus UI to match your app's branding by providing a theme configuration during initialization:
+
+```ts
+import { Image } from 'react-native';
+
+await initialize({
+  apiKey: 'YOUR_OCTOPUS_API_KEY',
+  connectionMode: { type: 'octopus' },
+  theme: {
+    colors: {
+      primary: '#FF6B35', // Main brand color
+      primaryLowContrast: '#FF8C69', // Lighter variation of primary
+      primaryHighContrast: '#CC4A1A', // Darker variation for high contrast
+      onPrimary: '#FFFFFF', // Text color on primary background
+    },
+    logo: {
+      // Use Image.resolveAssetSource() for bundled image assets
+      image: Image.resolveAssetSource(require('./assets/logo.png')),
+    },
+  }
+});
+```
+
+**Supported customizations:**
+- **Colors**: Primary, low contrast, high contrast, and text colors (iOS & Android)
+- **Logo**: Custom logo using bundled images (iOS & Android)
+- **Color Format**: Hex strings with or without # prefix (e.g., `#FF6B35` or `FF6B35`)
+- **Supported Hex Formats**: 3-digit (`#F63`), 6-digit (`#FF6633`), 8-digit (`#FF6633FF`)
+- **Zero Dependencies**: Implementation uses only built-in native APIs
+
+**Logo Options:**
+- **Bundled Images**: Use `Image.resolveAssetSource(require('./assets/logo.png'))` for local assets
+- **Platform Support**: Both iOS and Android support local image resources
+
+**Note**: All theme properties are optional. If not provided, the default Octopus theme will be used.
+
 ### API docs
 
 For details about the Typescript API, head to the [API docs](./docs/api/README.md).

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

@@ -5,6 +5,7 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableMap
 import com.octopuscommunity.sdk.OctopusSDK
 import com.octopuscommunity.sdk.domain.model.ConnectionMode
+import android.graphics.Color
 
 class OctopusSDKInitializer {
 
@@ -17,6 +18,11 @@ class OctopusSDKInitializer {
 
     try {
       val connectionMode = parseConnectionMode(options)
+      
+      // Store theme configuration for later use in UI
+      val themeConfig = parseThemeConfig(options)
+      OctopusThemeManager.setThemeConfig(themeConfig)
+      
       OctopusSDK.initialize(
         context = context,
         apiKey = apiKey,
@@ -29,6 +35,72 @@ class OctopusSDKInitializer {
       promise.reject("INITIALIZE_ERROR", "Failed to initialize Octopus SDK", e)
     }
   }
+  
+  private fun parseThemeConfig(options: ReadableMap): OctopusThemeConfig? {
+    val themeMap = options.getMap("theme") ?: return null
+    
+    val colorsMap = themeMap.getMap("colors")
+    val logoMap = themeMap.getMap("logo")
+    
+    var primaryColor: String? = null
+    var primaryLowContrastColor: String? = null
+    var primaryHighContrastColor: String? = null
+    var onPrimaryColor: String? = null
+    var logoSource: ReadableMap? = null
+    
+    colorsMap?.let { colors ->
+      primaryColor = parseColor(colors.getString("primary"))
+      primaryLowContrastColor = parseColor(colors.getString("primaryLowContrast"))
+      primaryHighContrastColor = parseColor(colors.getString("primaryHighContrast"))
+      onPrimaryColor = parseColor(colors.getString("onPrimary"))
+    }
+    
+    // Handle logo - only support Image.resolveAssetSource() approach
+    logoMap?.let { logo ->
+      val imageSource = logo.getMap("image")
+      if (imageSource != null) {
+        logoSource = imageSource
+      }
+    }
+    
+    // Only create theme config if we have at least one customization
+    if (primaryColor != null || logoSource != null) {
+      return OctopusThemeConfig(
+        primaryColor = primaryColor,
+        primaryLowContrastColor = primaryLowContrastColor,
+        primaryHighContrastColor = primaryHighContrastColor,
+        onPrimaryColor = onPrimaryColor,
+        logoSource = logoSource
+      )
+    }
+    
+    return null
+  }
+  
+  private fun extractResourceNameFromUri(uri: String): String? {
+    // Extract resource name from React Native image URI
+    // Examples: "logo.png" -> "logo", "images/logo.png" -> "logo"
+    return try {
+      val fileName = uri.substringAfterLast("/")
+      fileName.substringBeforeLast(".")
+    } catch (e: Exception) {
+      null
+    }
+  }
+  
+  private fun parseColor(colorString: String?): String? {
+    if (colorString == null) return null
+    
+    return try {
+      // Validate that the color string is a valid hex color
+      Color.parseColor(colorString)
+      // Return the original string if parsing succeeds
+      colorString
+    } catch (e: IllegalArgumentException) {
+      // Invalid color format - return null to skip this color
+      null
+    }
+  }
 
   private fun parseConnectionMode(options: ReadableMap): ConnectionMode {
     val connectionModeMap = options.getMap("connectionMode")

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

@@ -0,0 +1,11 @@
+package com.octopuscommunity.octopusreactnativesdk
+
+import com.facebook.react.bridge.ReadableMap
+
+data class OctopusThemeConfig(
+  val primaryColor: String?,
+  val primaryLowContrastColor: String?,
+  val primaryHighContrastColor: String?,
+  val onPrimaryColor: String?,
+  val logoSource: ReadableMap?
+)

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

@@ -0,0 +1,11 @@
+package com.octopuscommunity.octopusreactnativesdk
+
+object OctopusThemeManager {
+  private var themeConfig: OctopusThemeConfig? = null
+  
+  fun setThemeConfig(config: OctopusThemeConfig?) {
+    themeConfig = config
+  }
+  
+  fun getThemeConfig(): OctopusThemeConfig? = themeConfig
+}

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

@@ -4,68 +4,185 @@ import android.content.BroadcastReceiver
 import android.content.Context
 import android.content.Intent
 import android.content.IntentFilter
+import android.content.res.Configuration
+import android.graphics.BitmapFactory
 import android.os.Build
 import android.os.Bundle
+import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.graphics.painter.BitmapPainter
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.platform.LocalContext
 import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
-import com.octopuscommunity.sdk.ui.OctopusDestination
+import com.octopuscommunity.sdk.ui.OctopusDrawablesDefaults
+import com.octopuscommunity.sdk.ui.OctopusTheme
+import com.octopuscommunity.sdk.ui.home.OctopusHomeScreen
 import com.octopuscommunity.sdk.ui.octopusComposables
+import com.octopuscommunity.sdk.ui.octopusDarkColorScheme
+import com.octopuscommunity.sdk.ui.octopusLightColorScheme
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import java.net.URL
 
 class OctopusUIActivity : ComponentActivity() {
-  private val closeUIReceiver = object : BroadcastReceiver() {
-    override fun onReceive(context: Context?, intent: Intent?) {
-      finish()
+    private val closeUIReceiver = object : BroadcastReceiver() {
+        override fun onReceive(context: Context?, intent: Intent?) {
+            finish()
+        }
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        registerCloseUIReceiver()
+        setContent {
+            OctopusUI(onBack = { finish() })
+        }
+    }
+
+    override fun onDestroy() {
+        super.onDestroy()
+        unregisterReceiver(closeUIReceiver)
     }
-  }
 
-  override fun onCreate(savedInstanceState: Bundle?) {
-    super.onCreate(savedInstanceState)
-    registerCloseUIReceiver()
-    setContent {
-      OctopusUI()
+    private fun registerCloseUIReceiver() {
+        val intentFilter = IntentFilter(OctopusUIController.CLOSE_UI_ACTION)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+            registerReceiver(closeUIReceiver, intentFilter, Context.RECEIVER_NOT_EXPORTED)
+        } else {
+            @Suppress("UnspecifiedRegisterReceiverFlag")
+            registerReceiver(closeUIReceiver, intentFilter)
+        }
+    }
+}
+
+@Composable
+private fun OctopusUI(onBack: () -> Unit) {
+    val themeConfig = OctopusThemeManager.getThemeConfig()
+    val context = LocalContext.current
+
+    // 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
     }
-  }
 
-  override fun onDestroy() {
-    super.onDestroy()
-    unregisterReceiver(closeUIReceiver)
-  }
+    // 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
+            )
+        }
+
+        // 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
+                }
+            }
+        }
+
+        // Create drawables based on theme config
+        val drawables = if (logoPainter != null) {
+            OctopusDrawablesDefaults.drawables(logo = logoPainter)
+        } else {
+            OctopusDrawablesDefaults.drawables()
+        }
 
-  private fun registerCloseUIReceiver() {
-    val intentFilter = IntentFilter(OctopusUIController.CLOSE_UI_ACTION)
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
-      registerReceiver(closeUIReceiver, intentFilter, Context.RECEIVER_NOT_EXPORTED)
+        // Apply custom theme
+        OctopusTheme(
+            colorScheme = colorScheme,
+            drawables = drawables
+        ) {
+            OctopusUIContent(onBack = onBack)
+        }
     } else {
-      @Suppress("UnspecifiedRegisterReceiverFlag")
-      registerReceiver(closeUIReceiver, intentFilter)
+        // No theme config - let the native SDK inherit the React Native app's theme colors
+        OctopusUIContent(onBack = onBack)
     }
-  }
 }
 
 @Composable
-private fun OctopusUI() {
-  Box(modifier = Modifier.fillMaxSize()) {
-    val navController = rememberNavController()
-
-    NavHost(
-      navController = navController,
-      startDestination = OctopusDestination.Home
-    ) {
-      octopusComposables(
-        navController = navController,
-        onNavigateToLogin = {
-          OctopusEventEmitter.instance?.emitLoginRequired()
-        },
-        onNavigateToProfileEdit = { fieldToEdit ->
-          OctopusEventEmitter.instance?.emitEditUser(fieldToEdit)
+private fun OctopusUIContent(onBack: () -> Unit) {
+    Box(modifier = Modifier.fillMaxSize()) {
+        val navController = rememberNavController()
+
+        NavHost(
+            navController = navController,
+            startDestination = "OctopusHome"
+        ) {
+            composable(route = "OctopusHome") {
+                OctopusHomeScreen(
+                    navController = navController,
+                    backIcon = true,
+                    onBack = onBack
+                )
+            }
+            octopusComposables(
+                navController = navController,
+                onNavigateToLogin = {
+                    OctopusEventEmitter.instance?.emitLoginRequired()
+                },
+                onNavigateToProfileEdit = { fieldToEdit ->
+                    OctopusEventEmitter.instance?.emitEditUser(fieldToEdit)
+                }
+            )
         }
-      )
     }
-  }
 }
+
+private suspend fun loadImageFromUri(uri: String): Painter? {
+    return withContext(Dispatchers.IO) {
+        try {
+            val url = URL(uri)
+            val inputStream = url.openStream()
+            val bitmap = BitmapFactory.decodeStream(inputStream)
+            inputStream.close()
+
+            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/OctopusColorUtility.swift

@@ -0,0 +1,44 @@
+import UIKit
+
+/// A utility class for creating UIColor instances from hex strings.
+/// This avoids conflicts with other modules that might also extend UIColor.
+internal class OctopusColorUtility {
+  
+  /// Creates a UIColor from a hex string.
+  /// - Parameter hex: A hex color string (e.g., "#FF0000", "FF0000", "#FFF", etc.)
+  /// - Returns: A UIColor instance, or nil if the hex string is invalid
+  static func color(fromHex hex: String) -> UIColor? {
+    // Remove any whitespace and convert to lowercase
+    let hex = hex.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+    
+    // Remove # prefix if present
+    let cleanHex = hex.hasPrefix("#") ? String(hex.dropFirst()) : hex
+    
+    // Validate hex string contains only valid characters
+    guard cleanHex.range(of: "^[0-9a-f]+$", options: .regularExpression) != nil else {
+      return nil
+    }
+    
+    var int: UInt64 = 0
+    Scanner(string: cleanHex).scanHexInt64(&int)
+    
+    let a, r, g, b: UInt64
+    switch cleanHex.count {
+    case 3: // RGB (12-bit)
+      (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
+    case 6: // RGB (24-bit)
+      (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
+    case 8: // ARGB (32-bit)
+      (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
+    default:
+      return nil
+    }
+
+    return UIColor(
+      red: CGFloat(r) / 255,
+      green: CGFloat(g) / 255,
+      blue: CGFloat(b) / 255,
+      alpha: CGFloat(a) / 255
+    )
+  }
+}

package/ios/OctopusReactNativeSdk.swift

@@ -5,37 +5,41 @@ import UIKit
 
 @objc(OctopusReactNativeSdk)
 class OctopusReactNativeSdk: RCTEventEmitter {
-  
+
   // MARK: - Properties
-  
+
   private var octopusSDK: OctopusSDK?
   private lazy var uiManager = OctopusUIManager()
   private lazy var eventManager = OctopusEventManager(eventEmitter: self)
   private let sdkInitializer = OctopusSDKInitializer()
   private var ssoAuthenticator: OctopusSSOAuthenticator?
-  
+  private var theme: OctopusTheme?
+  private var logoSource: [String: Any]?
+
   // MARK: - Initialization
-  
+
   @objc(initialize:withResolver:withRejecter:)
   func initialize(options: [String: Any], resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     do {
       self.octopusSDK = try sdkInitializer.initialize(options: options, eventManager: eventManager)
       self.ssoAuthenticator = OctopusSSOAuthenticator(octopusSDK: self.octopusSDK!, eventManager: eventManager)
+      self.theme = sdkInitializer.parseTheme(from: options)
+      self.logoSource = sdkInitializer.getLogoSource(from: options)
       resolve(nil)
     } catch {
       reject("INITIALIZE_ERROR", "Failed to initialize Octopus SDK: \(error.localizedDescription)", error)
     }
   }
-  
+
   // MARK: - User authentication
-  
+
   @objc(connectUser:withResolver:withRejecter:)
   func connectUser(params: [String: Any], resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let authenticator = ssoAuthenticator else {
       reject("CONNECT_USER_ERROR", "SDK not initialized. Call initialize() first.", nil)
       return
     }
-    
+
     Task {
       do {
         try await authenticator.connectUser(params: params)
@@ -44,66 +48,66 @@ class OctopusReactNativeSdk: RCTEventEmitter {
         reject("CONNECT_USER_ERROR", "Failed to connect user: \(error.localizedDescription)", error)
       }
     }
-    
+
   }
-  
+
   @objc(completeUserTokenRequest:withToken:withResolver:withRejecter:)
   func completeUserTokenRequest(requestId: String, token: String, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let authenticator = ssoAuthenticator else {
       reject("PROVIDE_TOKEN_ERROR", "SDK not initialized", nil)
       return
     }
-    
+
     authenticator.completeTokenRequest(requestId: requestId, token: token)
     resolve(nil)
   }
-  
+
   @objc(cancelUserTokenRequest:withResolver:withRejecter:)
   func cancelUserTokenRequest(requestId: String, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let authenticator = ssoAuthenticator else {
       reject("PROVIDE_TOKEN_ERROR", "SDK not initialized", nil)
       return
     }
-    
+
     authenticator.cancelTokenRequest(requestId: requestId)
     resolve(nil)
   }
-  
+
   @objc(disconnectUser:withRejecter:)
   func disconnectUser(resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let authenticator = ssoAuthenticator else {
       reject("DISCONNECT_USER_ERROR", "SDK not initialized. Call initialize() first.", nil)
       return
     }
-    
+
     do {
       try authenticator.disconnectUser()
       resolve(nil)
     } catch {
       reject("DISCONNECT_USER_ERROR", "Failed to disconnect user: \(error.localizedDescription)", error)
     }
-    
+
   }
-  
+
   // MARK: - UI management
-  
+
   @objc(openUI:withRejecter:)
   func openUI(resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let octopus = octopusSDK else {
       reject("OPEN_UI_ERROR", "SDK not initialized. Call initialize() first.", nil)
       return
     }
-    
+
     DispatchQueue.main.async {
       do {
-        try self.uiManager.openUI(octopus: octopus)
+        try self.uiManager.openUI(octopus: octopus, theme: self.theme, logoSource: self.logoSource)
         resolve(nil)
       } catch {
         reject("OPEN_UI_ERROR", error.localizedDescription, error)
       }
     }
   }
-  
+
   @objc(closeUI:withRejecter:)
   func closeUI(resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     DispatchQueue.main.async {
@@ -115,33 +119,33 @@ class OctopusReactNativeSdk: RCTEventEmitter {
       }
     }
   }
-  
+
   // MARK: - Lifecycle management
-  
+
   deinit {
     cleanup()
   }
-  
+
   private func cleanup() {
     uiManager.cleanup()
     octopusSDK = nil
   }
-  
+
   @objc override func invalidate() {
     cleanup()
     super.invalidate()
   }
-  
+
   // MARK: - RCTEventEmitter overrides
-  
+
   @objc override func supportedEvents() -> [String]! {
     return eventManager.supportedEvents()
   }
-  
+
   @objc override func startObserving() {
     eventManager.startObserving()
   }
-  
+
   @objc override func stopObserving() {
     eventManager.stopObserving()
   }

package/ios/OctopusSDKInitializer.swift

@@ -1,22 +1,81 @@
 import Octopus
+import OctopusUI
+import SwiftUI
 
 class OctopusSDKInitializer {
   func initialize(options: [String: Any], eventManager: OctopusEventManager) throws -> OctopusSDK {
     guard let apiKey = options["apiKey"] as? String else {
       throw InitializationError.missingAPIKey
     }
-    
+
     guard let connectionModeMap = options["connectionMode"] as? [String: Any] else {
       throw InitializationError.missingConnectionMode
     }
-    
+
     let connectionMode = try parseConnectionMode(from: connectionModeMap, eventManager: eventManager)
     return try OctopusSDK(apiKey: apiKey, connectionMode: connectionMode)
   }
   
+  func parseTheme(from options: [String: Any]) -> OctopusTheme? {
+    guard let themeMap = options["theme"] as? [String: Any] else {
+      return nil
+    }
+    
+    var colors: OctopusTheme.Colors?
+    
+    // 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)
+        )
+      }
+    }
+    
+    // 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 {
+      return nil
+    }
+    
+    return OctopusTheme(
+      colors: colors,
+      fonts: OctopusTheme.Fonts(),
+      assets: OctopusTheme.Assets()
+    )
+  }
+  
+  func getLogoSource(from options: [String: Any]) -> [String: Any]? {
+    guard let themeMap = options["theme"] as? [String: Any],
+          let logoMap = themeMap["logo"] as? [String: Any] else {
+      return nil
+    }
+    
+    // Only support Image.resolveAssetSource() approach
+    if let imageSource = logoMap["image"] as? [String: Any] {
+      return imageSource
+    }
+    
+    return nil
+  }
+
   private func parseConnectionMode(from connectionModeMap: [String: Any], eventManager: OctopusEventManager) throws -> ConnectionMode {
     let connectionModeType = connectionModeMap["type"] as? String
-    
+
     switch connectionModeType {
     case "sso":
       return try createSSOConnectionMode(from: connectionModeMap, eventManager: eventManager)
@@ -26,10 +85,10 @@ class OctopusSDKInitializer {
       throw InitializationError.invalidConnectionModeType
     }
   }
-  
+
   private func createSSOConnectionMode(from connectionModeMap: [String: Any], eventManager: OctopusEventManager) throws -> ConnectionMode {
     let appManagedFields = ProfileFieldMapper.fromReactNativeArray(connectionModeMap["appManagedFields"] as? [String])
-    
+
     return .sso(
       .init(
         appManagedFields: appManagedFields,
@@ -48,7 +107,7 @@ enum InitializationError: Error, LocalizedError {
   case missingAPIKey
   case missingConnectionMode
   case invalidConnectionModeType
-  
+
   var errorDescription: String? {
     switch self {
     case .missingAPIKey:

package/ios/OctopusUIManager.swift

@@ -6,31 +6,92 @@ import React
 
 class OctopusUIManager {
   private weak var presentedViewController: UIViewController?
-  
-  func openUI(octopus: OctopusSDK) throws {
+
+  func openUI(octopus: OctopusSDK, theme: OctopusUI.OctopusTheme?, logoSource: [String: Any]?) throws {
     guard let presentingViewController = RCTPresentedViewController() else {
       throw NSError(domain: "OPEN_UI_ERROR", code: 0, userInfo: [NSLocalizedDescriptionKey: "Could not find presenting view controller"])
     }
-    
+
     let octopusHomeScreen = OctopusHomeScreen(octopus: octopus)
-    let hostingController = UIHostingController(rootView: octopusHomeScreen)
+    let hostingController = UIHostingController(rootView: AnyView(octopusHomeScreen))
     hostingController.modalPresentationStyle = .fullScreen
-    
+
+    // Apply theme if provided
+    if let theme = theme {
+      // Apply theme immediately (without logo) to avoid delay
+      hostingController.rootView = AnyView(OctopusHomeScreen(octopus: octopus).environment(\.octopusTheme, theme))
+      
+      // Then load logo asynchronously and update theme if logo loads
+      if let logoSource = logoSource {
+        loadLogo(from: logoSource) { [weak hostingController] logoImage in
+          DispatchQueue.main.async {
+            if let logoImage = logoImage {
+              let updatedTheme = OctopusUI.OctopusTheme(
+                colors: theme.colors,
+                fonts: theme.fonts,
+                assets: OctopusUI.OctopusTheme.Assets(logo: logoImage)
+              )
+              hostingController?.rootView = AnyView(OctopusHomeScreen(octopus: octopus).environment(\.octopusTheme, updatedTheme))
+            } else {
+              // Theme is already applied, no need to do anything
+            }
+          }
+        }
+      }
+    }
+
     presentedViewController = hostingController
-    
+
     presentingViewController.present(hostingController, animated: true)
   }
   
+  private func loadLogo(from source: [String: Any], completion: @escaping (UIImage?) -> Void) {
+    // Handle React Native image source with URI (from Image.resolveAssetSource)
+    guard let uri = source["uri"] as? String else {
+      completion(nil)
+      return
+    }
+    
+    // Remote URL
+    if uri.hasPrefix("http") {
+      guard let url = URL(string: uri) else {
+        completion(nil)
+        return
+      }
+      
+      URLSession.shared.dataTask(with: url) { data, response, error in
+        guard let data = data, error == nil else {
+          completion(nil)
+          return
+        }
+        
+        let image = UIImage(data: data)
+        completion(image)
+      }.resume()
+    } else {
+      // Local file path (from Image.resolveAssetSource)
+      if let image = UIImage(contentsOfFile: 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)
+      }
+    }
+  }
+
   func closeUI() throws {
     guard let presentedVC = presentedViewController else {
       throw NSError(domain: "CLOSE_UI_ERROR", code: 0, userInfo: [NSLocalizedDescriptionKey: "No UI is currently presented"])
     }
-    
+
     presentedVC.dismiss(animated: true) {
       self.presentedViewController = nil
     }
   }
-  
+
   func cleanup() {
     if let presentedVC = presentedViewController {
       presentedVC.dismiss(animated: false, completion: nil)

package/lib/module/initialize.js

@@ -2,6 +2,10 @@
 
 import { OctopusReactNativeSdk } from "./internals/nativeModule.js";
 
+/**
+ * Theme configuration for customizing the Octopus UI appearance.
+ */
+
 /**
  * Configuration params for initializing the Octopus SDK.
  */

package/lib/module/initialize.js.map

@@ -1 +1 @@
-{"version":3,"names":["OctopusReactNativeSdk","initialize","params"],"sourceRoot":"../../src","sources":["initialize.ts"],"mappings":";;AAAA,SAASA,qBAAqB,QAAQ,6BAA0B;;AAGhE;AACA;AACA;;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAACC,MAAwB,EAAiB;EAClE,OAAOF,qBAAqB,CAACC,UAAU,CAACC,MAAM,CAAC;AACjD","ignoreList":[]}
+{"version":3,"names":["OctopusReactNativeSdk","initialize","params"],"sourceRoot":"../../src","sources":["initialize.ts"],"mappings":";;AAAA,SAASA,qBAAqB,QAAQ,6BAA0B;;AAIhE;AACA;AACA;;AAoBA;AACA;AACA;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAACC,MAAwB,EAAiB;EAClE,OAAOF,qBAAqB,CAACC,UAAU,CAACC,MAAM,CAAC;AACjD","ignoreList":[]}

package/lib/typescript/src/initialize.d.ts

@@ -1,4 +1,26 @@
 import type { UserProfileField } from './types/userProfileField';
+import type { ImageResolvedAssetSource } from 'react-native';
+/**
+ * Theme configuration for customizing the Octopus UI appearance.
+ */
+export interface OctopusTheme {
+    /** Color customization options */
+    colors?: {
+        /** Primary color set for branding (hex format: #FF6B35 or FF6B35) */
+        primary?: string;
+        /** Primary low contrast color (lighter variation of primary) (hex format: #FF6B35 or FF6B35) */
+        primaryLowContrast?: string;
+        /** High contrast variation of primary color (hex format: #FF6B35 or FF6B35) */
+        primaryHighContrast?: string;
+        /** Color for content displayed over the primary color (hex format: #FF6B35 or FF6B35) */
+        onPrimary?: string;
+    };
+    /** Logo customization */
+    logo?: {
+        /** Local image resource - use Image.resolveAssetSource(require('./path/to/image.png')) */
+        image?: ImageResolvedAssetSource;
+    };
+}
 /**
  * Configuration params for initializing the Octopus SDK.
  */
@@ -19,6 +41,8 @@ export interface InitializeParams {
         /** Octopus-managed authentication mode */
         type: 'octopus';
     };
+    /** Optional theme customization for the Octopus UI */
+    theme?: OctopusTheme;
 }
 /**
  * Initializes the Octopus SDK with the provided configuration.

package/lib/typescript/src/initialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../../../src/initialize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EACV;QACE,6BAA6B;QAC7B,IAAI,EAAE,KAAK,CAAC;QACZ,iEAAiE;QACjE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;KACtC,GACD;QACE,0CAA0C;QAC1C,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;CACP;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAElE"}
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../../../src/initialize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,qEAAqE;QACrE,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,gGAAgG;QAChG,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,+EAA+E;QAC/E,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,yFAAyF;QACzF,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,yBAAyB;IACzB,IAAI,CAAC,EAAE;QACL,0FAA0F;QAC1F,KAAK,CAAC,EAAE,wBAAwB,CAAC;KAClC,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EACV;QACE,6BAA6B;QAC7B,IAAI,EAAE,KAAK,CAAC;QACZ,iEAAiE;QACjE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;KACtC,GACD;QACE,0CAA0C;QAC1C,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACN,sDAAsD;IACtD,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAElE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octopus-community/react-native",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React Native module for the Octopus Community SDK",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",

package/src/initialize.ts

@@ -1,5 +1,28 @@
 import { OctopusReactNativeSdk } from './internals/nativeModule';
 import type { UserProfileField } from './types/userProfileField';
+import type { ImageResolvedAssetSource } from 'react-native';
+
+/**
+ * Theme configuration for customizing the Octopus UI appearance.
+ */
+export interface OctopusTheme {
+  /** Color customization options */
+  colors?: {
+    /** Primary color set for branding (hex format: #FF6B35 or FF6B35) */
+    primary?: string;
+    /** Primary low contrast color (lighter variation of primary) (hex format: #FF6B35 or FF6B35) */
+    primaryLowContrast?: string;
+    /** High contrast variation of primary color (hex format: #FF6B35 or FF6B35) */
+    primaryHighContrast?: string;
+    /** Color for content displayed over the primary color (hex format: #FF6B35 or FF6B35) */
+    onPrimary?: string;
+  };
+  /** Logo customization */
+  logo?: {
+    /** Local image resource - use Image.resolveAssetSource(require('./path/to/image.png')) */
+    image?: ImageResolvedAssetSource;
+  };
+}
 
 /**
  * Configuration params for initializing the Octopus SDK.
@@ -23,6 +46,8 @@ export interface InitializeParams {
         /** Octopus-managed authentication mode */
         type: 'octopus';
       };
+  /** Optional theme customization for the Octopus UI */
+  theme?: OctopusTheme;
 }
 
 /**