clox-picker 0.1.1 → 0.1.3

package/android/src/main/java/expo/modules/cloxpicker/CloxPickerModule.kt

@@ -24,6 +24,9 @@ class CloxPickerModule : Module() {
       Prop("useLiquidGlass") { view: CloxPickerView, _: Boolean ->
         // Android: no-op (always non–liquid-glass look)
       }
+      Prop("selectedColor") { view: CloxPickerView, color: String? ->
+        view.setSelectedColor(color)
+      }
       Events("onTabChange")
     }
   }

package/android/src/main/java/expo/modules/cloxpicker/CloxPickerView.kt

@@ -2,26 +2,38 @@ package expo.modules.cloxpicker
 
 import android.animation.ValueAnimator
 import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.graphics.Color
+import android.graphics.PorterDuff
 import android.graphics.drawable.GradientDrawable
+import android.os.Handler
+import android.os.Looper
 import android.util.TypedValue
 import android.view.Gravity
 import android.view.View
-import android.widget.FrameLayout
+import android.widget.ImageView
 import android.widget.LinearLayout
 import android.widget.TextView
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
+import java.io.File
+import java.io.InputStream
+import java.net.HttpURLConnection
+import java.net.URL
+import java.util.concurrent.Executors
 
-data class TabItem(val id: Int, val name: String, val iconUri: String?)
+data class TabItem(val id: Int, val name: String, val iconUri: String?, val iconWidth: Int?, val iconHeight: Int?)
 
 class CloxPickerView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
 
   private val onTabChange by EventDispatcher()
 
-  private var tabs: List<TabItem> = listOf(TabItem(0, "Tab", null))
+  private var tabs: List<TabItem> = listOf(TabItem(0, "Tab", null, null, null))
   private var pickerHeight: Int = dp(44)
   private var selectedIndex: Int = 0
+  private var selectedColor: Int = 0xFF007AFF.toInt() // Default iOS blue
   private var thumbWidth: Int = 0
   private var thumbHeight: Int = 0
   private var thumbTop: Int = 0
@@ -29,20 +41,33 @@ class CloxPickerView(context: Context, appContext: AppContext) : ExpoView(contex
   private val trackBackground: View
   private val thumb: View
   private val segmentsContainer: LinearLayout
+  
+  private val executor = Executors.newCachedThreadPool()
+  private val mainHandler = Handler(Looper.getMainLooper())
 
   init {
     setBackgroundColor(0)
 
+    // Track background (pill-shaped)
     trackBackground = View(context).apply {
-      setBackgroundColor(0xFFEBEBEB.toInt())
+      background = GradientDrawable().apply {
+        setColor(0xFFEBEBEB.toInt())
+        cornerRadius = (pickerHeight / 2).toFloat()
+      }
     }
     addView(trackBackground)
 
+    // Thumb (selected indicator)
     thumb = View(context).apply {
-      setBackgroundColor(0xFFFFFFFF.toInt() and 0x00FFFFFF or (0.65 * 255).toInt().shl(24))
+      background = GradientDrawable().apply {
+        setColor(0xFFFFFFFF.toInt())
+        cornerRadius = (pickerHeight / 2).toFloat()
+      }
+      elevation = 2f // Material Design elevation
     }
     addView(thumb)
 
+    // Segments container (text + icons)
     segmentsContainer = LinearLayout(context).apply {
       orientation = LinearLayout.HORIZONTAL
       gravity = Gravity.CENTER_VERTICAL
@@ -54,14 +79,55 @@ class CloxPickerView(context: Context, appContext: AppContext) : ExpoView(contex
     return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value.toFloat(), resources.displayMetrics).toInt()
   }
 
+  private fun parseColor(colorString: String?): Int? {
+    if (colorString == null) return null
+    
+    return try {
+      when (colorString.lowercase()) {
+        "red" -> 0xFFFF3B30.toInt()
+        "blue" -> 0xFF007AFF.toInt()
+        "green" -> 0xFF34C759.toInt()
+        "orange" -> 0xFFFF9500.toInt()
+        "purple" -> 0xFFAF52DE.toInt()
+        "pink" -> 0xFFFF2D55.toInt()
+        "yellow" -> 0xFFFFCC00.toInt()
+        "teal" -> 0xFF5AC8FA.toInt()
+        "indigo" -> 0xFF5856D6.toInt()
+        else -> {
+          // Try parsing as hex
+          var hex = colorString.trim().replace("#", "")
+          if (hex.length == 6) {
+            Color.parseColor("#$hex")
+          } else if (hex.length == 8) {
+            // ARGB format
+            val alpha = hex.substring(0, 2).toInt(16)
+            val rgb = hex.substring(2, 8)
+            Color.parseColor("#$rgb").let { Color.argb(alpha, Color.red(it), Color.green(it), Color.blue(it)) }
+          } else {
+            Color.parseColor(colorString)
+          }
+        }
+      }
+    } catch (e: Exception) {
+      null
+    }
+  }
+
   fun setTabs(tabsList: List<Map<String, Any>>) {
     tabs = tabsList.mapNotNull { dict ->
       val name = dict["name"] as? String ?: return@mapNotNull null
       val id = (dict["id"] as? Number)?.toInt() ?: return@mapNotNull null
-      val icon = (dict["icon"] as? Map<*, *>)?.get("uri") as? String
-      TabItem(id, name, icon)
+      val iconDict = dict["icon"] as? Map<*, *>
+      val iconUri = iconDict?.get("uri") as? String
+      val iconWidth = (iconDict?.get("width") as? Number)?.toInt()
+      val iconHeight = (iconDict?.get("height") as? Number)?.toInt()
+      TabItem(id, name, iconUri, iconWidth, iconHeight)
+    }
+    if (tabs.isEmpty()) tabs = listOf(TabItem(0, "Tab", null, null, null))
+    // Re-validate selectedIndex against the new tabs count
+    if (tabs.isNotEmpty()) {
+      selectedIndex = selectedIndex.coerceIn(0, tabs.size - 1)
     }
-    if (tabs.isEmpty()) tabs = listOf(TabItem(0, "Tab", null))
     buildSegments()
   }
 
@@ -71,25 +137,91 @@ class CloxPickerView(context: Context, appContext: AppContext) : ExpoView(contex
   }
 
   fun setValue(value: Int) {
-    val newIndex = value.coerceIn(0, (tabs.size - 1).coerceAtLeast(0))
+    // If tabs haven't been set yet, store the value as-is (will be validated when tabs are set)
+    // Otherwise, clamp to valid range
+    val newIndex = if (tabs.isEmpty()) {
+      value
+    } else {
+      value.coerceIn(0, tabs.size - 1)
+    }
+    
     if (newIndex != selectedIndex) {
       selectedIndex = newIndex
       animateThumbTo(selectedIndex)
       buildSegments()
+      requestLayout()
+    }
+  }
+
+  fun setSelectedColor(colorString: String?) {
+    val color = parseColor(colorString) ?: 0xFF007AFF.toInt()
+    if (selectedColor != color) {
+      selectedColor = color
+      updateThumbColor()
+      buildSegments()
+    }
+  }
+
+  private fun updateThumbColor() {
+    (thumb.background as? GradientDrawable)?.setColor(selectedColor)
+    thumb.invalidate()
+  }
+
+  private fun loadImage(uri: String?, callback: (Bitmap?) -> Unit) {
+    if (uri == null) {
+      callback(null)
+      return
+    }
+
+    executor.execute {
+      try {
+        val bitmap = when {
+          uri.startsWith("http://") || uri.startsWith("https://") -> {
+            // Load from URL
+            val url = URL(uri)
+            val connection = url.openConnection() as HttpURLConnection
+            connection.connectTimeout = 5000
+            connection.readTimeout = 5000
+            connection.doInput = true
+            connection.connect()
+            
+            val inputStream: InputStream = connection.inputStream
+            val bitmap = BitmapFactory.decodeStream(inputStream)
+            inputStream.close()
+            connection.disconnect()
+            bitmap
+          }
+          uri.startsWith("/") -> {
+            // Local file
+            BitmapFactory.decodeFile(uri)
+          }
+          else -> null
+        }
+        
+        mainHandler.post {
+          callback(bitmap)
+        }
+      } catch (e: Exception) {
+        mainHandler.post {
+          callback(null)
+        }
+      }
     }
   }
 
   private fun buildSegments() {
     segmentsContainer.removeAllViews()
     val count = tabs.size.coerceAtLeast(1)
+    val iconMargin = dp(4)
+    
     for ((index, tab) in tabs.withIndex()) {
-      val textView = TextView(context).apply {
-        text = tab.name
-        setTextSize(TypedValue.COMPLEX_UNIT_SP, 15f)
-        setTextColor(if (index == selectedIndex) 0xFF000000.toInt() else 0xFF8E8E93.toInt())
-        setTypeface(null, if (index == selectedIndex) android.graphics.Typeface.BOLD else android.graphics.Typeface.NORMAL)
+      val isSelected = index == selectedIndex
+      
+      // Container for icon + text
+      val segmentContainer = LinearLayout(context).apply {
+        orientation = LinearLayout.VERTICAL
         gravity = Gravity.CENTER
-            layoutParams = LinearLayout.LayoutParams(0, pickerHeight, 1f)
+        layoutParams = LinearLayout.LayoutParams(0, pickerHeight, 1f)
         setOnClickListener {
           if (index != selectedIndex) {
             selectedIndex = index
@@ -99,7 +231,56 @@ class CloxPickerView(context: Context, appContext: AppContext) : ExpoView(contex
           }
         }
       }
-      segmentsContainer.addView(textView)
+
+      // Icon (if provided)
+      if (tab.iconUri != null) {
+        val iconWidth = tab.iconWidth?.let { dp(it) } ?: dp(20)
+        val iconHeight = tab.iconHeight?.let { dp(it) } ?: dp(20)
+        
+        val iconView = ImageView(context).apply {
+          layoutParams = LinearLayout.LayoutParams(iconWidth, iconHeight).apply {
+            gravity = Gravity.CENTER_HORIZONTAL
+            bottomMargin = iconMargin
+          }
+          scaleType = ImageView.ScaleType.FIT_CENTER
+          // Set tint color based on selection
+          setColorFilter(
+            if (isSelected) selectedColor else 0xFF8E8E93.toInt(),
+            PorterDuff.Mode.SRC_IN
+          )
+        }
+        
+        loadImage(tab.iconUri) { bitmap ->
+          if (bitmap != null) {
+            iconView.setImageBitmap(bitmap)
+            // Reapply color filter after image loads
+            iconView.setColorFilter(
+              if (isSelected) selectedColor else 0xFF8E8E93.toInt(),
+              PorterDuff.Mode.SRC_IN
+            )
+          }
+        }
+        
+        segmentContainer.addView(iconView)
+      }
+
+      // Text label
+      val textView = TextView(context).apply {
+        text = tab.name
+        setTextSize(TypedValue.COMPLEX_UNIT_SP, 13f)
+        setTextColor(if (isSelected) selectedColor else 0xFF8E8E93.toInt())
+        setTypeface(null, if (isSelected) android.graphics.Typeface.BOLD else android.graphics.Typeface.NORMAL)
+        gravity = Gravity.CENTER
+        layoutParams = LinearLayout.LayoutParams(
+          LinearLayout.LayoutParams.WRAP_CONTENT,
+          LinearLayout.LayoutParams.WRAP_CONTENT
+        ).apply {
+          gravity = Gravity.CENTER_HORIZONTAL
+        }
+      }
+      segmentContainer.addView(textView)
+      
+      segmentsContainer.addView(segmentContainer)
     }
   }
 
@@ -138,24 +319,32 @@ class CloxPickerView(context: Context, appContext: AppContext) : ExpoView(contex
     val thumbHeight = pickerHeight - padding * 2
     val topOffset = (h - pickerHeight) / 2
 
-    // Track (pill background)
-    (trackBackground.background as? GradientDrawable)?.cornerRadius = (pickerHeight / 2).toFloat()
+    // Track (pill background) - adapt to dark/light mode
+    val trackColor = if (isDarkMode()) 0xFF2C2C2E.toInt() else 0xFFEBEBEB.toInt()
+    (trackBackground.background as? GradientDrawable)?.apply {
+      setColor(trackColor)
+      cornerRadius = (pickerHeight / 2).toFloat()
+    }
     if (trackBackground.background !is GradientDrawable) {
       trackBackground.background = GradientDrawable().apply {
-        setColor(0xFFEBEBEB.toInt())
+        setColor(trackColor)
         cornerRadius = (pickerHeight / 2).toFloat()
       }
     }
     trackBackground.layout(0, topOffset, w, topOffset + pickerHeight)
 
-    // Thumb (rounded rect)
+    // Thumb (rounded rect with selected color)
     this.thumbWidth = thumbWidth
     this.thumbHeight = thumbHeight
     this.thumbTop = topOffset + padding
     val thumbLeft = padding + selectedIndex * segmentWidth + (segmentWidth - thumbWidth) / 2
+    (thumb.background as? GradientDrawable)?.apply {
+      setColor(selectedColor)
+      cornerRadius = (thumbHeight / 2).toFloat()
+    }
     if (thumb.background !is GradientDrawable) {
       thumb.background = GradientDrawable().apply {
-        setColor(0xFFFFFFFF.toInt() and 0x00FFFFFF or (0.65 * 255).toInt().shl(24))
+        setColor(selectedColor)
         cornerRadius = (thumbHeight / 2).toFloat()
       }
     }
@@ -165,6 +354,11 @@ class CloxPickerView(context: Context, appContext: AppContext) : ExpoView(contex
     segmentsContainer.layout(0, topOffset, w, topOffset + pickerHeight)
   }
 
+  private fun isDarkMode(): Boolean {
+    val nightModeFlags = resources.configuration.uiMode and android.content.res.Configuration.UI_MODE_NIGHT_MASK
+    return nightModeFlags == android.content.res.Configuration.UI_MODE_NIGHT_YES
+  }
+
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
     val h = View.resolveSize(pickerHeight, heightMeasureSpec)
     val w = View.getDefaultSize(suggestedMinimumWidth, widthMeasureSpec)

package/build/CloxPicker.types.d.ts

@@ -5,6 +5,10 @@ export interface CloxPickerTab {
     /** Optional icon (local file or remote URL) */
     icon?: {
         uri: string;
+        /** Icon width in points/dp (default: 20) */
+        width?: number;
+        /** Icon height in points/dp (default: 20) */
+        height?: number;
     };
     /** Display label */
     name: string;

package/build/CloxPicker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloxPicker.types.d.ts","sourceRoot":"","sources":["../src/CloxPicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAExC,+CAA+C;AAC/C,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACvB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,0CAA0C;IAC1C,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}
+{"version":3,"file":"CloxPicker.types.d.ts","sourceRoot":"","sources":["../src/CloxPicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAExC,+CAA+C;AAC/C,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE;QACL,GAAG,EAAE,MAAM,CAAC;QACZ,4CAA4C;QAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,6CAA6C;QAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,0CAA0C;IAC1C,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}

package/build/CloxPicker.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloxPicker.types.js","sourceRoot":"","sources":["../src/CloxPicker.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nexport type CloxPickerModuleEvents = {};\n\n/** Single tab item for the segmented picker */\nexport interface CloxPickerTab {\n  /** Optional icon (local file or remote URL) */\n  icon?: { uri: string };\n  /** Display label */\n  name: string;\n  /** Stable id (used as key; can match index) */\n  id: number;\n}\n\nexport interface CloxPickerViewProps {\n  /** Tab items (icon optional, name, id) */\n  tabs: CloxPickerTab[];\n  /** Height of the picker in points/dp */\n  height: number;\n  /** Current selected tab index */\n  value: number;\n  /** Called when user selects a different tab (passes tab index) */\n  onTabChange?: (event: { tabIndex: number }) => void;\n  /**\n   * iOS only: use Liquid Glass effect when available (iOS 26+).\n   * When false, uses the same non–liquid-glass look on all iOS versions.\n   * Default: true.\n   */\n  useLiquidGlass?: boolean;\n  /** Color for selected tab (hex string, e.g., \"#007AFF\" or \"blue\") */\n  selectedColor?: string;\n  style?: StyleProp<ViewStyle>;\n}\n"]}
+{"version":3,"file":"CloxPicker.types.js","sourceRoot":"","sources":["../src/CloxPicker.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nexport type CloxPickerModuleEvents = {};\n\n/** Single tab item for the segmented picker */\nexport interface CloxPickerTab {\n  /** Optional icon (local file or remote URL) */\n  icon?: { \n    uri: string;\n    /** Icon width in points/dp (default: 20) */\n    width?: number;\n    /** Icon height in points/dp (default: 20) */\n    height?: number;\n  };\n  /** Display label */\n  name: string;\n  /** Stable id (used as key; can match index) */\n  id: number;\n}\n\nexport interface CloxPickerViewProps {\n  /** Tab items (icon optional, name, id) */\n  tabs: CloxPickerTab[];\n  /** Height of the picker in points/dp */\n  height: number;\n  /** Current selected tab index */\n  value: number;\n  /** Called when user selects a different tab (passes tab index) */\n  onTabChange?: (event: { tabIndex: number }) => void;\n  /**\n   * iOS only: use Liquid Glass effect when available (iOS 26+).\n   * When false, uses the same non–liquid-glass look on all iOS versions.\n   * Default: true.\n   */\n  useLiquidGlass?: boolean;\n  /** Color for selected tab (hex string, e.g., \"#007AFF\" or \"blue\") */\n  selectedColor?: string;\n  style?: StyleProp<ViewStyle>;\n}\n"]}

package/build/CloxPickerView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloxPickerView.d.ts","sourceRoot":"","sources":["../src/CloxPickerView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAI9D,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAExD;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CloxPickerView.d.ts","sourceRoot":"","sources":["../src/CloxPickerView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAI9D,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAiBxD;AAED,eAAe,cAAc,CAAC"}

package/build/CloxPickerView.js

@@ -2,7 +2,19 @@ import { requireNativeView } from 'expo';
 import * as React from 'react';
 const NativeCloxPickerView = requireNativeView('CloxPicker');
 export function CloxPickerView(props) {
-    return <NativeCloxPickerView {...props}/>;
+    const { onTabChange, ...restProps } = props;
+    const handleTabChange = React.useCallback((event) => {
+        if (!onTabChange)
+            return;
+        // Extract tabIndex from nativeEvent (React Native wraps native events)
+        // The event structure is: { nativeEvent: { tabIndex: number } }
+        const tabIndex = event?.nativeEvent?.tabIndex ?? event?.tabIndex;
+        if (typeof tabIndex === 'number') {
+            // Call the user's callback with the cleaned format
+            onTabChange({ tabIndex });
+        }
+    }, [onTabChange]);
+    return <NativeCloxPickerView {...restProps} onTabChange={handleTabChange}/>;
 }
 export default CloxPickerView;
 //# sourceMappingURL=CloxPickerView.js.map

package/build/CloxPickerView.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloxPickerView.js","sourceRoot":"","sources":["../src/CloxPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,oBAAoB,GAAG,iBAAiB,CAAsB,YAAY,CAAC,CAAC;AAElF,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,OAAO,CAAC,oBAAoB,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC7C,CAAC;AAED,eAAe,cAAc,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\n\nimport type { CloxPickerViewProps } from './CloxPicker.types';\n\nconst NativeCloxPickerView = requireNativeView<CloxPickerViewProps>('CloxPicker');\n\nexport function CloxPickerView(props: CloxPickerViewProps) {\n  return <NativeCloxPickerView {...props} />;\n}\n\nexport default CloxPickerView;\n"]}
+{"version":3,"file":"CloxPickerView.js","sourceRoot":"","sources":["../src/CloxPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,oBAAoB,GAAG,iBAAiB,CAAsB,YAAY,CAAC,CAAC;AAElF,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5C,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAU,EAAE,EAAE;QACvD,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,uEAAuE;QACvE,gEAAgE;QAChE,MAAM,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,QAAQ,IAAI,KAAK,EAAE,QAAQ,CAAC;QAEjE,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACjC,mDAAmD;YACnD,WAAW,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CAAC,oBAAoB,CAAC,IAAI,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC,eAAe,CAAC,EAAG,CAAC;AAC/E,CAAC;AAED,eAAe,cAAc,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\n\nimport type { CloxPickerViewProps } from './CloxPicker.types';\n\nconst NativeCloxPickerView = requireNativeView<CloxPickerViewProps>('CloxPicker');\n\nexport function CloxPickerView(props: CloxPickerViewProps) {\n  const { onTabChange, ...restProps } = props;\n  \n  const handleTabChange = React.useCallback((event: any) => {\n    if (!onTabChange) return;\n    \n    // Extract tabIndex from nativeEvent (React Native wraps native events)\n    // The event structure is: { nativeEvent: { tabIndex: number } }\n    const tabIndex = event?.nativeEvent?.tabIndex ?? event?.tabIndex;\n    \n    if (typeof tabIndex === 'number') {\n      // Call the user's callback with the cleaned format\n      onTabChange({ tabIndex });\n    }\n  }, [onTabChange]);\n  \n  return <NativeCloxPickerView {...restProps} onTabChange={handleTabChange} />;\n}\n\nexport default CloxPickerView;\n"]}

package/example/App.tsx

@@ -18,10 +18,10 @@ import {
 } from 'react-native';
 
 const DEFAULT_TABS: CloxPickerTab[] = [
-  { id: 0, name: 'All', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/play.png' } },
-  { id: 1, name: 'Calendar', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/upload.png' } },
-  { id: 2, name: 'Planning', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/male.png' } },
-  { id: 3, name: 'Explore', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/female.png' } },
+  { id: 0, name: 'All', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/play.png', width: 20, height: 20 } },
+  { id: 1, name: 'Calendar', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/upload.png', width: 20, height: 20 } },
+  { id: 2, name: 'Planning', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/male.png', width: 15, height: 20 } },
+  { id: 3, name: 'Explore', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/female.png', width: 20, height: 20 } },
 ];
 
 const PICKER_HEIGHT = 90;
@@ -29,7 +29,7 @@ const PICKER_HEIGHT = 90;
 export default function App() {
   const {width, height} = useWindowDimensions();
   const colorScheme = useColorScheme();
-  const [liquidIndex, setLiquidIndex] = useState(0);
+  const [liquidIndex, setLiquidIndex] = useState(2);
   const [standardIndex, setStandardIndex] = useState(0);
   const [androidIndex, setAndroidIndex] = useState(0);
   const [currentScheme, setCurrentScheme] = useState<'light' | 'dark' | null>(null);
@@ -84,7 +84,9 @@ export default function App() {
                 value={liquidIndex}
                 useLiquidGlass={true}
                 selectedColor="#FF6B6B"
-                onTabChange={({ tabIndex }) => setLiquidIndex(tabIndex)}
+                onTabChange={({ tabIndex }) => {
+                  setLiquidIndex(tabIndex);
+                }}
                 style={styles.picker}
               />
             </View>
@@ -97,7 +99,9 @@ export default function App() {
                 value={standardIndex}
                 useLiquidGlass={false}
                 selectedColor="#4ECDC4"
-                onTabChange={({ tabIndex }) => setStandardIndex(tabIndex)}
+                onTabChange={({ tabIndex }) => {
+                  setStandardIndex(tabIndex);
+                }}
                 style={styles.picker}
               />
             </View>
@@ -106,13 +110,16 @@ export default function App() {
 
         {Platform.OS === 'android' && (
           <>
-            <Text style={styles.title}>Segmented Picker</Text>
+            <Text style={styles.title}>Segmented Picker (Android)</Text>
             <View style={styles.pickerWrap}>
               <CloxPickerView
                 tabs={DEFAULT_TABS}
                 height={PICKER_HEIGHT}
                 value={androidIndex}
-                onTabChange={({ tabIndex }) => setAndroidIndex(tabIndex)}
+                selectedColor="#9B59B6"
+                onTabChange={({ tabIndex }) => {
+                  setAndroidIndex(tabIndex);
+                }}
                 style={styles.picker}
               />
             </View>

package/example/ios/Podfile.lock

@@ -1,5 +1,5 @@
 PODS:
-  - CloxPicker (0.1.0):
+  - CloxPicker (0.1.2):
     - ExpoModulesCore
   - EXConstants (18.0.13):
     - ExpoModulesCore
@@ -2123,7 +2123,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  CloxPicker: ff3ee606156dc339341ef71eecbb35fa0a3eea73
+  CloxPicker: 2230a7a323a09d77ac86c4a61fab545554f1838f
   EXConstants: 3feb66fd1d94202fc1f0946d74e029d8b224b60e
   EXJSONUtils: 1d3e4590438c3ee593684186007028a14b3686cd
   EXManifests: 83ef0844fcf06d6099b12a7bdbd7d36fc0e1dd16

package/example/ios/cloxpickerexample.xcodeproj/project.pbxproj

@@ -7,12 +7,12 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
-		10E2FBE821ED63804F093245 /* libPods-cloxpickerexample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F2F4AF4CDFC07432659197DB /* libPods-cloxpickerexample.a */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };
-		6FE7D70859D7CF3D7E0FE935 /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = A3E0A7701F08CCAAD7CC3316 /* ExpoModulesProvider.swift */; };
-		B5580A65D519E4D823FDB38E /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = DDD4E5B6438E6C7F4E265A19 /* PrivacyInfo.xcprivacy */; };
+		6D60B6DE6807345550D89DB0 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 515D0E48D4C6FB6251E34D77 /* PrivacyInfo.xcprivacy */; };
+		9E00A3C2E448C751E924C5B6 /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = ECD77C7F2F5414CA8425C4F9 /* ExpoModulesProvider.swift */; };
 		BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
+		E7390BD80697FEB360F986A7 /* libPods-cloxpickerexample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = DACA0C66768CDB757B10EDDD /* libPods-cloxpickerexample.a */; };
 		F11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F11748412D0307B40044C1D9 /* AppDelegate.swift */; };
 /* End PBXBuildFile section */
 
@@ -20,16 +20,16 @@
 		13B07F961A680F5B00A75B9A /* cloxpickerexample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = cloxpickerexample.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = cloxpickerexample/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = cloxpickerexample/Info.plist; sourceTree = "<group>"; };
-		3AB073BD8706BB4BEB67E225 /* Pods-cloxpickerexample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-cloxpickerexample.debug.xcconfig"; path = "Target Support Files/Pods-cloxpickerexample/Pods-cloxpickerexample.debug.xcconfig"; sourceTree = "<group>"; };
-		5363FF98F65652078EA56E87 /* Pods-cloxpickerexample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-cloxpickerexample.release.xcconfig"; path = "Target Support Files/Pods-cloxpickerexample/Pods-cloxpickerexample.release.xcconfig"; sourceTree = "<group>"; };
-		A3E0A7701F08CCAAD7CC3316 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-cloxpickerexample/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
+		3E28B125BC2D19E6432E207C /* Pods-cloxpickerexample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-cloxpickerexample.release.xcconfig"; path = "Target Support Files/Pods-cloxpickerexample/Pods-cloxpickerexample.release.xcconfig"; sourceTree = "<group>"; };
+		515D0E48D4C6FB6251E34D77 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = cloxpickerexample/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = cloxpickerexample/SplashScreen.storyboard; sourceTree = "<group>"; };
 		BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
-		DDD4E5B6438E6C7F4E265A19 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = cloxpickerexample/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
+		DA3650119D47B51A62404F45 /* Pods-cloxpickerexample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-cloxpickerexample.debug.xcconfig"; path = "Target Support Files/Pods-cloxpickerexample/Pods-cloxpickerexample.debug.xcconfig"; sourceTree = "<group>"; };
+		DACA0C66768CDB757B10EDDD /* libPods-cloxpickerexample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-cloxpickerexample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		ECD77C7F2F5414CA8425C4F9 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-cloxpickerexample/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		F11748412D0307B40044C1D9 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = cloxpickerexample/AppDelegate.swift; sourceTree = "<group>"; };
 		F11748442D0722820044C1D9 /* cloxpickerexample-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = "cloxpickerexample-Bridging-Header.h"; path = "cloxpickerexample/cloxpickerexample-Bridging-Header.h"; sourceTree = "<group>"; };
-		F2F4AF4CDFC07432659197DB /* libPods-cloxpickerexample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-cloxpickerexample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -37,21 +37,13 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				10E2FBE821ED63804F093245 /* libPods-cloxpickerexample.a in Frameworks */,
+				E7390BD80697FEB360F986A7 /* libPods-cloxpickerexample.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
-		0DD178F290DBF00252BD8B0E /* ExpoModulesProviders */ = {
-			isa = PBXGroup;
-			children = (
-				839C7BEB5F056EB94BBBB9C8 /* cloxpickerexample */,
-			);
-			name = ExpoModulesProviders;
-			sourceTree = "<group>";
-		};
 		13B07FAE1A68108700A75B9A /* cloxpickerexample */ = {
 			isa = PBXGroup;
 			children = (
@@ -61,7 +53,7 @@
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */,
-				DDD4E5B6438E6C7F4E265A19 /* PrivacyInfo.xcprivacy */,
+				515D0E48D4C6FB6251E34D77 /* PrivacyInfo.xcprivacy */,
 			);
 			name = cloxpickerexample;
 			sourceTree = "<group>";
@@ -70,16 +62,16 @@
 			isa = PBXGroup;
 			children = (
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
-				F2F4AF4CDFC07432659197DB /* libPods-cloxpickerexample.a */,
+				DACA0C66768CDB757B10EDDD /* libPods-cloxpickerexample.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
 		};
-		62F14DA2B93074519377E87C /* Pods */ = {
+		4BB04C227EE42226DB6018D2 /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				3AB073BD8706BB4BEB67E225 /* Pods-cloxpickerexample.debug.xcconfig */,
-				5363FF98F65652078EA56E87 /* Pods-cloxpickerexample.release.xcconfig */,
+				DA3650119D47B51A62404F45 /* Pods-cloxpickerexample.debug.xcconfig */,
+				3E28B125BC2D19E6432E207C /* Pods-cloxpickerexample.release.xcconfig */,
 			);
 			name = Pods;
 			path = Pods;
@@ -92,14 +84,6 @@
 			name = Libraries;
 			sourceTree = "<group>";
 		};
-		839C7BEB5F056EB94BBBB9C8 /* cloxpickerexample */ = {
-			isa = PBXGroup;
-			children = (
-				A3E0A7701F08CCAAD7CC3316 /* ExpoModulesProvider.swift */,
-			);
-			name = cloxpickerexample;
-			sourceTree = "<group>";
-		};
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
@@ -107,8 +91,8 @@
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
-				62F14DA2B93074519377E87C /* Pods */,
-				0DD178F290DBF00252BD8B0E /* ExpoModulesProviders */,
+				4BB04C227EE42226DB6018D2 /* Pods */,
+				D6AE54B70D5F7EF429EC83E1 /* ExpoModulesProviders */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -123,6 +107,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		95E4A94D9637BA1B96DDF31A /* cloxpickerexample */ = {
+			isa = PBXGroup;
+			children = (
+				ECD77C7F2F5414CA8425C4F9 /* ExpoModulesProvider.swift */,
+			);
+			name = cloxpickerexample;
+			sourceTree = "<group>";
+		};
 		BB2F792B24A3F905000567C9 /* Supporting */ = {
 			isa = PBXGroup;
 			children = (
@@ -132,6 +124,14 @@
 			path = cloxpickerexample/Supporting;
 			sourceTree = "<group>";
 		};
+		D6AE54B70D5F7EF429EC83E1 /* ExpoModulesProviders */ = {
+			isa = PBXGroup;
+			children = (
+				95E4A94D9637BA1B96DDF31A /* cloxpickerexample */,
+			);
+			name = ExpoModulesProviders;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -140,13 +140,13 @@
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "cloxpickerexample" */;
 			buildPhases = (
 				08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */,
-				26179FA961D47EAF929A4703 /* [Expo] Configure project */,
+				E9EEC3F2A013D05DDDABD8F7 /* [Expo] Configure project */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */,
-				C8E1FEBD83DC50D9800C4D33 /* [CP] Embed Pods Frameworks */,
+				D0BCA59BDC991A129B60063A /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -198,7 +198,7 @@
 				BB2F792D24A3F905000567C9 /* Expo.plist in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */,
-				B5580A65D519E4D823FDB38E /* PrivacyInfo.xcprivacy in Resources */,
+				6D60B6DE6807345550D89DB0 /* PrivacyInfo.xcprivacy in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -244,30 +244,6 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		26179FA961D47EAF929A4703 /* [Expo] Configure project */ = {
-			isa = PBXShellScriptBuildPhase;
-			alwaysOutOfDate = 1;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-			);
-			inputPaths = (
-				"$(SRCROOT)/.xcode.env",
-				"$(SRCROOT)/.xcode.env.local",
-				"$(SRCROOT)/cloxpickerexample/cloxpickerexample.entitlements",
-				"$(SRCROOT)/Pods/Target Support Files/Pods-cloxpickerexample/expo-configure-project.sh",
-			);
-			name = "[Expo] Configure project";
-			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(SRCROOT)/Pods/Target Support Files/Pods-cloxpickerexample/ExpoModulesProvider.swift",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "# This script configures Expo modules and generates the modules provider file.\nbash -l -c \"./Pods/Target\\ Support\\ Files/Pods-cloxpickerexample/expo-configure-project.sh\"\n";
-		};
 		800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -298,7 +274,7 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-cloxpickerexample/Pods-cloxpickerexample-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		C8E1FEBD83DC50D9800C4D33 /* [CP] Embed Pods Frameworks */ = {
+		D0BCA59BDC991A129B60063A /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -320,6 +296,30 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-cloxpickerexample/Pods-cloxpickerexample-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
+		E9EEC3F2A013D05DDDABD8F7 /* [Expo] Configure project */ = {
+			isa = PBXShellScriptBuildPhase;
+			alwaysOutOfDate = 1;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"$(SRCROOT)/.xcode.env",
+				"$(SRCROOT)/.xcode.env.local",
+				"$(SRCROOT)/cloxpickerexample/cloxpickerexample.entitlements",
+				"$(SRCROOT)/Pods/Target Support Files/Pods-cloxpickerexample/expo-configure-project.sh",
+			);
+			name = "[Expo] Configure project";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(SRCROOT)/Pods/Target Support Files/Pods-cloxpickerexample/ExpoModulesProvider.swift",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "# This script configures Expo modules and generates the modules provider file.\nbash -l -c \"./Pods/Target\\ Support\\ Files/Pods-cloxpickerexample/expo-configure-project.sh\"\n";
+		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */
@@ -328,7 +328,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				F11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */,
-				6FE7D70859D7CF3D7E0FE935 /* ExpoModulesProvider.swift in Sources */,
+				9E00A3C2E448C751E924C5B6 /* ExpoModulesProvider.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -337,7 +337,7 @@
 /* Begin XCBuildConfiguration section */
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 3AB073BD8706BB4BEB67E225 /* Pods-cloxpickerexample.debug.xcconfig */;
+			baseConfigurationReference = DA3650119D47B51A62404F45 /* Pods-cloxpickerexample.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
@@ -376,7 +376,7 @@
 		};
 		13B07F951A680F5B00A75B9A /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 5363FF98F65652078EA56E87 /* Pods-cloxpickerexample.release.xcconfig */;
+			baseConfigurationReference = 3E28B125BC2D19E6432E207C /* Pods-cloxpickerexample.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;

package/ios/CloxPickerView.swift

@@ -7,10 +7,14 @@ struct CloxPickerTabItem: Identifiable {
   let id: Int
   let name: String
   let iconUri: String?
+  let iconWidth: CGFloat?
+  let iconHeight: CGFloat?
 }
 
 // MARK: - UITabBar wrapper for horizontal segmented control
 class HorizontalTabBar: UITabBar {
+  var isUpdatingProgrammatically = false
+  
   override func layoutSubviews() {
     super.layoutSubviews()
     
@@ -27,6 +31,17 @@ class HorizontalTabBar: UITabBar {
           height: bounds.height
         )
         xPosition += itemWidth
+        // Ensure touch events are properly handled
+        itemView.isExclusiveTouch = true
+      }
+    }
+  }
+  
+  override var selectedItem: UITabBarItem? {
+    didSet {
+      // Only prevent delegate if we're updating programmatically
+      if isUpdatingProgrammatically {
+        return
       }
     }
   }
@@ -38,10 +53,15 @@ struct UIKitTabBarControl: UIViewRepresentable {
   @Binding var selectedIndex: Int
   let height: CGFloat
   let selectedColor: UIColor?
+  let onSelectionChange: ((Int) -> Void)?
+  let expoView: CloxPickerView?
   
   func makeUIView(context: Context) -> HorizontalTabBar {
     let tabBar = HorizontalTabBar()
     tabBar.isTranslucent = true
+    // Ensure touch events are properly handled
+    tabBar.isUserInteractionEnabled = true
+    tabBar.isMultipleTouchEnabled = false
     
     // Create tab bar items with icons
     let tabBarItems = tabs.enumerated().map { index, tab in
@@ -49,12 +69,17 @@ struct UIKitTabBarControl: UIViewRepresentable {
       
       // Load icon if provided
       if let iconUri = tab.iconUri {
+        let iconWidth = tab.iconWidth ?? 20
+        let iconHeight = tab.iconHeight ?? 20
+        
         if let url = URL(string: iconUri) {
           // Load image asynchronously
           URLSession.shared.dataTask(with: url) { data, _, _ in
             if let data = data, let image = UIImage(data: data) {
+              // Resize image to per-icon dimensions
+              let resizedImage = resizeImage(image, to: CGSize(width: iconWidth, height: iconHeight))
               // Use template mode so icon adapts to light/dark mode (black/white)
-              let renderedImage = image.withRenderingMode(.alwaysTemplate)
+              let renderedImage = resizedImage.withRenderingMode(.alwaysTemplate)
               DispatchQueue.main.async {
                 item.image = renderedImage
               }
@@ -63,7 +88,8 @@ struct UIKitTabBarControl: UIViewRepresentable {
         } else if iconUri.hasPrefix("/") {
           // Local file
           if let image = UIImage(contentsOfFile: iconUri) {
-            item.image = image.withRenderingMode(.alwaysTemplate)
+            let resizedImage = resizeImage(image, to: CGSize(width: iconWidth, height: iconHeight))
+            item.image = resizedImage.withRenderingMode(.alwaysTemplate)
           }
         }
       }
@@ -72,7 +98,11 @@ struct UIKitTabBarControl: UIViewRepresentable {
     }
     tabBar.setItems(tabBarItems, animated: false)
     if selectedIndex < tabBarItems.count {
+      tabBar.isUpdatingProgrammatically = true
       tabBar.selectedItem = tabBarItems[selectedIndex]
+      DispatchQueue.main.async {
+        tabBar.isUpdatingProgrammatically = false
+      }
     }
     
     // Configure appearance for iOS 26 liquid glass
@@ -112,6 +142,14 @@ struct UIKitTabBarControl: UIViewRepresentable {
   }
   
   func updateUIView(_ uiView: HorizontalTabBar, context: Context) {
+    // Update coordinator's parent reference to get latest callback
+    // This ensures the coordinator always has the latest onSelectionChange callback
+    context.coordinator.parent = self
+    // Ensure delegate is set (in case it was cleared)
+    if uiView.delegate !== context.coordinator {
+      uiView.delegate = context.coordinator
+    }
+    
     // Update selected color if changed
     if let selectedColor = selectedColor {
       if #available(iOS 26.0, *) {
@@ -140,11 +178,16 @@ struct UIKitTabBarControl: UIViewRepresentable {
       let tabBarItems = tabs.enumerated().map { index, tab in
         let item = UITabBarItem(title: tab.name, image: nil, tag: index)
         if let iconUri = tab.iconUri {
+          let iconWidth = tab.iconWidth ?? 20
+          let iconHeight = tab.iconHeight ?? 20
+          
           if let url = URL(string: iconUri) {
             URLSession.shared.dataTask(with: url) { data, _, _ in
               if let data = data, let image = UIImage(data: data) {
+                // Resize image to per-icon dimensions
+                let resizedImage = resizeImage(image, to: CGSize(width: iconWidth, height: iconHeight))
                 // Use template mode so icon adapts to light/dark mode (black/white)
-                let renderedImage = image.withRenderingMode(.alwaysTemplate)
+                let renderedImage = resizedImage.withRenderingMode(.alwaysTemplate)
                 DispatchQueue.main.async {
                   item.image = renderedImage
                 }
@@ -152,7 +195,8 @@ struct UIKitTabBarControl: UIViewRepresentable {
             }.resume()
           } else if iconUri.hasPrefix("/") {
             if let image = UIImage(contentsOfFile: iconUri) {
-              item.image = image.withRenderingMode(.alwaysTemplate)
+              let resizedImage = resizeImage(image, to: CGSize(width: iconWidth, height: iconHeight))
+              item.image = resizedImage.withRenderingMode(.alwaysTemplate)
             }
           }
         }
@@ -161,9 +205,18 @@ struct UIKitTabBarControl: UIViewRepresentable {
       uiView.setItems(tabBarItems, animated: false)
     }
     
-    // Update selection
+    // Always update selection when selectedIndex changes (programmatically)
     if let items = uiView.items, selectedIndex < items.count {
-      uiView.selectedItem = items[selectedIndex]
+      let currentSelectedTag = uiView.selectedItem?.tag ?? -1
+      if currentSelectedTag != selectedIndex {
+        // Mark as programmatic update to prevent delegate callback
+        uiView.isUpdatingProgrammatically = true
+        uiView.selectedItem = items[selectedIndex]
+        // Reset flag after a brief delay to allow UI to update
+        DispatchQueue.main.async {
+          uiView.isUpdatingProgrammatically = false
+        }
+      }
     }
   }
   
@@ -179,9 +232,36 @@ struct UIKitTabBarControl: UIViewRepresentable {
     }
     
     func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
-      parent.selectedIndex = item.tag
+      // Only handle user-initiated selections, not programmatic ones
+      if let horizontalTabBar = tabBar as? HorizontalTabBar, horizontalTabBar.isUpdatingProgrammatically {
+        return
+      }
+      
+      let newIndex = item.tag
+      
+      // Call the callback FIRST before updating binding to avoid SwiftUI update conflicts
+      parent.onSelectionChange?(newIndex)
+      
+      // Also dispatch event directly from ExpoView if available
+      if let expoView = parent.expoView {
+        expoView.dispatchTabChange(index: newIndex)
+      }
+      
+      // Then update binding (this will trigger SwiftUI update, but callback already fired)
+      DispatchQueue.main.async { [weak self] in
+        self?.parent.selectedIndex = newIndex
+      }
     }
   }
+  
+}
+
+// Helper function to resize images
+private func resizeImage(_ image: UIImage, to size: CGSize) -> UIImage {
+  let renderer = UIGraphicsImageRenderer(size: size)
+  return renderer.image { _ in
+    image.draw(in: CGRect(origin: .zero, size: size))
+  }
 }
 
 // MARK: - Segmented Picker using TabView's tab bar
@@ -191,6 +271,7 @@ struct SegmentedPickerView: View {
   @Binding var selectedIndex: Int
   let useLiquidGlass: Bool
   let selectedColor: UIColor?
+  let expoView: CloxPickerView?
   let onSelectionChange: (Int) -> Void
 
   var body: some View {
@@ -198,14 +279,13 @@ struct SegmentedPickerView: View {
       tabs: tabs,
       selectedIndex: $selectedIndex,
       height: height,
-      selectedColor: selectedColor
+      selectedColor: selectedColor,
+      onSelectionChange: onSelectionChange,
+      expoView: expoView
     )
     .frame(maxWidth: .infinity, minHeight: height)
     .frame(height: height)
     .clipped()
-    .onChange(of: selectedIndex) { newValue in
-      onSelectionChange(newValue)
-    }
   }
 }
 
@@ -224,16 +304,33 @@ public class CloxPickerView: ExpoView {
     super.init(appContext: appContext)
     backgroundColor = .clear
   }
+  
+  func dispatchTabChange(index: Int) {
+    onTabChange(["tabIndex": index])
+  }
 
   func setTabs(_ tabs: [[String: Any]]) {
     currentTabs = tabs.compactMap { dict -> CloxPickerTabItem? in
       guard let name = dict["name"] as? String,
             let id = dict["id"] as? Int else { return nil }
-      let icon = (dict["icon"] as? [String: Any])?["uri"] as? String
-      return CloxPickerTabItem(id: id, name: name, iconUri: icon)
+      let iconDict = dict["icon"] as? [String: Any]
+      let iconUri = iconDict?["uri"] as? String
+      let iconWidth = iconDict?["width"] as? Double
+      let iconHeight = iconDict?["height"] as? Double
+      return CloxPickerTabItem(
+        id: id,
+        name: name,
+        iconUri: iconUri,
+        iconWidth: iconWidth != nil ? CGFloat(iconWidth!) : nil,
+        iconHeight: iconHeight != nil ? CGFloat(iconHeight!) : nil
+      )
     }
     if currentTabs.isEmpty {
-      currentTabs = [CloxPickerTabItem(id: 0, name: "Tab", iconUri: nil)]
+      currentTabs = [CloxPickerTabItem(id: 0, name: "Tab", iconUri: nil, iconWidth: nil, iconHeight: nil)]
+    }
+    // Re-validate currentValue against the new tabs count
+    if currentTabs.count > 0 {
+      currentValue = max(0, min(currentValue, currentTabs.count - 1))
     }
     updateHostingView()
   }
@@ -244,8 +341,22 @@ public class CloxPickerView: ExpoView {
   }
 
   func setValue(_ value: Int) {
-    currentValue = max(0, min(value, currentTabs.count - 1))
-    updateHostingView()
+    // If tabs haven't been set yet, store the value as-is (will be validated when tabs are set)
+    // Otherwise, clamp to valid range
+    let newValue: Int
+    if currentTabs.isEmpty {
+      newValue = value
+    } else {
+      newValue = max(0, min(value, currentTabs.count - 1))
+    }
+    
+    if newValue != currentValue {
+      currentValue = newValue
+      // Force update the hosting view to reflect the new value
+      DispatchQueue.main.async { [weak self] in
+        self?.updateHostingView()
+      }
+    }
   }
 
   func setUseLiquidGlass(_ use: Bool) {
@@ -275,14 +386,21 @@ public class CloxPickerView: ExpoView {
       selectedIndex: binding,
       useLiquidGlass: useLiquidGlass,
       selectedColor: selectedColor,
+      expoView: self,
       onSelectionChange: { [weak self] index in
-        self?.currentValue = index
-        self?.onTabChange(["tabIndex": index])
+        guard let self = self else { return }
+        // Update current value
+        self.currentValue = index
+        // Dispatch event synchronously (we're already on main thread from delegate)
+        self.onTabChange(["tabIndex": index])
       }
     )
 
     if let existing = hostingController {
+      // Force SwiftUI to update by replacing the root view
       existing.rootView = rootView
+      // Ensure the view is marked as needing update
+      existing.view.setNeedsLayout()
       return
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clox-picker",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Clox Picker native module",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/CloxPicker.types.ts

@@ -5,7 +5,13 @@ export type CloxPickerModuleEvents = {};
 /** Single tab item for the segmented picker */
 export interface CloxPickerTab {
   /** Optional icon (local file or remote URL) */
-  icon?: { uri: string };
+  icon?: { 
+    uri: string;
+    /** Icon width in points/dp (default: 20) */
+    width?: number;
+    /** Icon height in points/dp (default: 20) */
+    height?: number;
+  };
   /** Display label */
   name: string;
   /** Stable id (used as key; can match index) */

package/src/CloxPickerView.tsx

@@ -6,7 +6,22 @@ import type { CloxPickerViewProps } from './CloxPicker.types';
 const NativeCloxPickerView = requireNativeView<CloxPickerViewProps>('CloxPicker');
 
 export function CloxPickerView(props: CloxPickerViewProps) {
-  return <NativeCloxPickerView {...props} />;
+  const { onTabChange, ...restProps } = props;
+  
+  const handleTabChange = React.useCallback((event: any) => {
+    if (!onTabChange) return;
+    
+    // Extract tabIndex from nativeEvent (React Native wraps native events)
+    // The event structure is: { nativeEvent: { tabIndex: number } }
+    const tabIndex = event?.nativeEvent?.tabIndex ?? event?.tabIndex;
+    
+    if (typeof tabIndex === 'number') {
+      // Call the user's callback with the cleaned format
+      onTabChange({ tabIndex });
+    }
+  }, [onTabChange]);
+  
+  return <NativeCloxPickerView {...restProps} onTabChange={handleTabChange} />;
 }
 
 export default CloxPickerView;