react-native-platform-components 0.8.10 → 1.0.0

package/android/src/main/java/com/platformcomponents/PCDatePickerView.kt

@@ -465,7 +465,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       addView(picker)
     }
 
-    val dlg = AlertDialog.Builder(act)
+    val dlg = AlertDialog.Builder(PCThemeSupport.appCompatDialogContext(act, "DatePicker"))
       .setTitle(androidDialogTitle ?: "")
       .setView(container)
       .setPositiveButton(androidPositiveTitle ?: "OK") { _, _ ->
@@ -513,7 +513,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       }
     }
 
-    val dlg = AlertDialog.Builder(act)
+    val dlg = AlertDialog.Builder(PCThemeSupport.appCompatDialogContext(act, "DatePicker"))
       .setTitle(androidDialogTitle ?: "")
       .setView(picker)
       .setPositiveButton(androidPositiveTitle ?: "OK") { _, _ ->
@@ -580,7 +580,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       addView(picker)
     }
 
-    val dlg = AlertDialog.Builder(act)
+    val dlg = AlertDialog.Builder(PCThemeSupport.appCompatDialogContext(act, "DatePicker"))
       .setTitle(androidDialogTitle ?: "")
       .setView(container)
       .setPositiveButton(androidPositiveTitle ?: "Next") { _, _ ->
@@ -617,6 +617,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
     val builder = MaterialDatePicker.Builder.datePicker()
       .setSelection(ts)
+      .setTheme(m3CalendarTheme(act))
 
     androidDialogTitle?.let { builder.setTitleText(it) }
     androidPositiveTitle?.let { builder.setPositiveButtonText(it) }
@@ -660,6 +661,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
     val is24 = android.text.format.DateFormat.is24HourFormat(act)
     val builder = MaterialTimePicker.Builder()
+      .setTheme(m3TimePickerTheme(act))
       .setTimeFormat(if (is24) TimeFormat.CLOCK_24H else TimeFormat.CLOCK_12H)
       .setHour(cal.get(Calendar.HOUR_OF_DAY))
       .setMinute(cal.get(Calendar.MINUTE))
@@ -698,6 +700,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
     val builder = MaterialDatePicker.Builder.datePicker()
       .setSelection(ts)
+      .setTheme(m3CalendarTheme(act))
 
     androidDialogTitle?.let { builder.setTitleText(it) }
     androidPositiveTitle?.let { builder.setPositiveButtonText(it) }
@@ -733,6 +736,17 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     picker.show(act.supportFragmentManager, "PCDatePicker_M3_DATE_THEN_TIME")
   }
 
+  /**
+   * Material pickers resolve their theme from the activity. When the app theme is
+   * not a Material theme they would throw, so hand them a full Material 3 dialog
+   * theme instead (0 = use the activity theme).
+   */
+  private fun m3CalendarTheme(act: FragmentActivity): Int =
+    PCThemeSupport.materialDialogThemeOverride(act, "DatePicker", R.style.PCMaterial3CalendarDialogTheme)
+
+  private fun m3TimePickerTheme(act: FragmentActivity): Int =
+    PCThemeSupport.materialDialogThemeOverride(act, "DatePicker", R.style.PCMaterial3TimePickerDialogTheme)
+
   private fun buildM3CalendarConstraints(): CalendarConstraints? {
     val min = minDateMs
     val max = maxDateMs

package/android/src/main/java/com/platformcomponents/PCImageLoader.kt

@@ -0,0 +1,88 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.net.Uri
+import android.os.Handler
+import android.os.Looper
+import android.util.Base64
+import android.util.DisplayMetrics
+import android.util.Log
+import android.util.LruCache
+import java.net.HttpURLConnection
+import java.net.URL
+import java.util.concurrent.Executors
+import kotlin.math.roundToInt
+
+/**
+ * Loads images referenced by React Native asset URIs for native controls that
+ * take a Drawable (segmented control icons).
+ *
+ * Release builds ship local assets as drawable resources, which callers resolve
+ * directly. Debug builds (Metro), `file://`, `content://`, `data:` and remote
+ * sources go through here on a background thread and are cached in memory.
+ */
+object PCImageLoader {
+  private const val TAG = "PCImageLoader"
+  private const val TIMEOUT_MS = 10_000
+
+  private val executor = Executors.newFixedThreadPool(2)
+  private val mainHandler = Handler(Looper.getMainLooper())
+  private val cache = LruCache<String, Bitmap>(32)
+
+  /**
+   * Loads [uri] and delivers the bitmap on the main thread. [scale] is the
+   * asset scale React Native resolved (2 for an `@2x` file), used to set the
+   * bitmap density so the drawable measures in dp like an `Image` would.
+   *
+   * Cached images are delivered synchronously.
+   */
+  fun load(context: Context, uri: String, scale: Float, callback: (Bitmap?) -> Unit) {
+    val key = "$uri@${scale}x"
+    cache.get(key)?.let {
+      callback(it)
+      return
+    }
+
+    val appContext = context.applicationContext
+    executor.execute {
+      val bitmap = try {
+        decode(appContext, uri)
+      } catch (e: Exception) {
+        Log.w(TAG, "Failed to load $uri: ${e.message}")
+        null
+      }
+      if (bitmap != null) {
+        bitmap.density = (scale.coerceAtLeast(0.01f) * DisplayMetrics.DENSITY_DEFAULT).roundToInt()
+        cache.put(key, bitmap)
+      }
+      mainHandler.post { callback(bitmap) }
+    }
+  }
+
+  private fun decode(context: Context, uri: String): Bitmap? {
+    val parsed = Uri.parse(uri)
+    return when (parsed.scheme?.lowercase()) {
+      "http", "https" -> {
+        val connection = URL(uri).openConnection() as HttpURLConnection
+        connection.connectTimeout = TIMEOUT_MS
+        connection.readTimeout = TIMEOUT_MS
+        try {
+          connection.inputStream.use { BitmapFactory.decodeStream(it) }
+        } finally {
+          connection.disconnect()
+        }
+      }
+      "file" -> parsed.path?.let { BitmapFactory.decodeFile(it) }
+      "content" -> context.contentResolver.openInputStream(parsed)?.use { BitmapFactory.decodeStream(it) }
+      "data" -> {
+        val comma = uri.indexOf(',')
+        if (comma < 0) return null
+        val bytes = Base64.decode(uri.substring(comma + 1), Base64.DEFAULT)
+        BitmapFactory.decodeByteArray(bytes, 0, bytes.size)
+      }
+      else -> null
+    }
+  }
+}

package/android/src/main/java/com/platformcomponents/PCSegmentedControlView.kt

@@ -1,13 +1,22 @@
 package com.platformcomponents
 
 import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.Color
+import android.graphics.drawable.BitmapDrawable
 import android.text.TextUtils
+import android.util.TypedValue
 import android.view.View
 import android.widget.FrameLayout
+import android.widget.LinearLayout
 import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
 import com.facebook.react.views.scroll.ReactScrollViewHelper
+import com.facebook.react.views.text.ReactTypefaceUtils
+import com.google.android.material.badge.BadgeDrawable
+import com.google.android.material.badge.BadgeUtils
 import com.google.android.material.button.MaterialButton
 import com.google.android.material.button.MaterialButtonToggleGroup
 
@@ -17,8 +26,24 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
     val label: String,
     val value: String,
     val disabled: Boolean,
-    val icon: String
-  )
+    /** "", "sfSymbol" (ignored on Android), "drawable" or "image" */
+    val iconType: String,
+    val iconName: String,
+    val iconUri: String,
+    val iconScale: Float,
+    val iconTinted: Boolean,
+    val badge: String,
+    val accessibilityLabel: String
+  ) {
+    val hasIcon: Boolean get() = iconType == "drawable" || iconType == "image"
+
+    /** What TalkBack announces for the segment, badge included. */
+    val spokenLabel: String
+      get() {
+        val base = accessibilityLabel.ifEmpty { label }
+        return if (badge.isEmpty()) base else "$base, $badge"
+      }
+  }
 
   companion object {
     private const val TAG = "PCSegmentedControl"
@@ -34,9 +59,25 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
   var segments: List<Segment> = emptyList()
   var selectedValue: String = "" // sentinel for none
   var interactivity: String = "enabled" // "enabled" | "disabled"
-  var selectionRequired: Boolean = false
+  var labelVisibility: String = "auto" // "auto" | "labeled" | "unlabeled"
+  // Matches iOS, where a UISegmentedControl selection cannot be cleared by tapping.
+  var selectionRequired: Boolean = true
+
+  // --- Styling (null / empty = Material theme default) ---
+  var selectedSegmentColor: Int? = null
+  var activeTintColor: Int? = null
+  var inactiveTintColor: Int? = null
+  var rippleColor: Int? = null
+  var strokeColor: Int? = null
+  var labelFontFamily: String = ""
+  var labelFontSize: Float = 0f
+  var labelFontWeight: String = ""
+  var labelFontStyle: String = ""
+  var badgeBackgroundColor: Int? = null
+  var badgeTextColor: Int? = null
 
   // --- Events ---
+  /** index -1 with an empty value means the selection was cleared. */
   var onSelect: ((index: Int, value: String) -> Unit)? = null
 
   // --- UI ---
@@ -44,8 +85,14 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
   private val buttonIdToSegment: MutableMap<Int, Segment> = mutableMapOf()
   private var suppressCallbacks = false
 
+  /** Bumped on every rebuild so late image loads can't touch stale buttons. */
+  private var rebuildGeneration = 0
+
   init {
     minimumHeight = (PCConstants.MIN_TOUCH_TARGET_HEIGHT_DP * resources.displayMetrics.density).toInt()
+    // Badges overhang the button corner
+    clipChildren = false
+    clipToPadding = false
     rebuildUI()
   }
 
@@ -70,6 +117,16 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
     updateEnabled()
   }
 
+  fun applyLabelVisibility(value: String?) {
+    val newValue = when (value) {
+      "labeled", "unlabeled" -> value
+      else -> "auto"
+    }
+    if (labelVisibility == newValue) return
+    labelVisibility = newValue
+    rebuildUI()
+  }
+
   fun applyAndroidProps(required: Boolean) {
     if (selectionRequired != required) {
       selectionRequired = required
@@ -77,16 +134,70 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
     }
   }
 
+  fun applySelectedSegmentColor(color: Int?) {
+    if (selectedSegmentColor == color) return
+    selectedSegmentColor = color
+    rebuildUI()
+  }
+
+  fun applyActiveTintColor(color: Int?) {
+    if (activeTintColor == color) return
+    activeTintColor = color
+    rebuildUI()
+  }
+
+  fun applyInactiveTintColor(color: Int?) {
+    if (inactiveTintColor == color) return
+    inactiveTintColor = color
+    rebuildUI()
+  }
+
+  fun applyRippleColor(color: Int?) {
+    if (rippleColor == color) return
+    rippleColor = color
+    rebuildUI()
+  }
+
+  fun applyStrokeColor(color: Int?) {
+    if (strokeColor == color) return
+    strokeColor = color
+    rebuildUI()
+  }
+
+  fun applyBadgeColors(background: Int?, text: Int?) {
+    if (badgeBackgroundColor == background && badgeTextColor == text) return
+    badgeBackgroundColor = background
+    badgeTextColor = text
+    rebuildUI()
+  }
+
+  fun applyLabelStyle(fontFamily: String, fontSize: Float, fontWeight: String, fontStyle: String) {
+    if (labelFontFamily == fontFamily && labelFontSize == fontSize &&
+      labelFontWeight == fontWeight && labelFontStyle == fontStyle
+    ) return
+    labelFontFamily = fontFamily
+    labelFontSize = fontSize
+    labelFontWeight = fontWeight
+    labelFontStyle = fontStyle
+    rebuildUI()
+  }
+
   // ---- UI Building ----
 
   private fun rebuildUI() {
     removeAllViews()
     buttonIdToSegment.clear()
+    rebuildGeneration += 1
+    val generation = rebuildGeneration
 
-    val group = MaterialButtonToggleGroup(context).apply {
+    // Material widgets need a Material theme; fall back to Material 3 defaults instead of crashing.
+    val themedContext = PCThemeSupport.materialContext(context, "SegmentedControl")
+    val group = MaterialButtonToggleGroup(themedContext).apply {
       layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
       isSingleSelection = true
       isSelectionRequired = selectionRequired
+      clipChildren = false
+      clipToPadding = false
     }
 
     // Calculate if we need compact mode (many segments or long labels)
@@ -94,49 +205,59 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
     val useCompactMode = segments.size > 3 || totalLabelLength > 20
 
     for ((index, segment) in segments.withIndex()) {
-      val button = MaterialButton(context, null, com.google.android.material.R.attr.materialButtonOutlinedStyle).apply {
+      // "unlabeled" hides the text of segments that have an icon; segments
+      // without one keep their label. "auto" and "labeled" show icon + label.
+      val iconOnly = labelVisibility == "unlabeled" && segment.hasIcon
+
+      val button = MaterialButton(themedContext, null, com.google.android.material.R.attr.materialButtonOutlinedStyle).apply {
         id = View.generateViewId()
-        text = segment.label
+        text = if (iconOnly) "" else segment.label
         isAllCaps = false  // Preserve original text casing
-        contentDescription = segment.label  // For accessibility and Detox matching
+        // Screen readers (and Detox) always get the label, even when hidden
+        contentDescription = segment.spokenLabel
         isEnabled = !segment.disabled && interactivity == "enabled"
 
         // Enable text truncation with ellipsis when space is limited
         ellipsize = TextUtils.TruncateAt.END
         maxLines = 1
 
-        // Reduce horizontal padding in compact mode to fit more content
-        if (useCompactMode) {
-          val compactPadding = (8 * resources.displayMetrics.density).toInt()
-          setPaddingRelative(compactPadding, paddingTop, compactPadding, paddingBottom)
-          iconPadding = (4 * resources.displayMetrics.density).toInt()
+        // Material 3 segmented buttons use 12dp horizontal padding and an 8dp
+        // icon gap (the outlined button style defaults to 24dp); tighten
+        // further when there are many segments or long labels.
+        val density = resources.displayMetrics.density
+        val horizontalPadding = ((if (useCompactMode) 8 else 12) * density).toInt()
+        setPaddingRelative(horizontalPadding, paddingTop, horizontalPadding, paddingBottom)
+        iconPadding = ((if (useCompactMode) 4 else 8) * density).toInt()
+
+        if (iconOnly) {
+          // Centre the icon instead of leaving it at the start edge
+          iconGravity = MaterialButton.ICON_GRAVITY_TEXT_START
+          iconPadding = 0
         }
 
-        // Set icon if available
-        if (segment.icon.isNotEmpty()) {
-          val resId = context.resources.getIdentifier(
-            segment.icon, "drawable", context.packageName
-          )
-          if (resId != 0) {
-            setIconResource(resId)
-          }
-        }
-
-        // Handle click to trigger selection (needed for Detox taps)
-        setOnClickListener {
-          if (!suppressCallbacks && isEnabled) {
-            group.check(id)
-          }
-        }
+        applyIcon(this, segment, generation)
+        styleButton(this, segment)
       }
 
       buttonIdToSegment[button.id] = segment
-      group.addView(button)
+      // Share the width equally (like UISegmentedControl) so trailing segments
+      // never overflow the control; long labels ellipsize instead.
+      group.addView(button, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f))
+      attachBadge(button, segment)
     }
 
-    group.addOnButtonCheckedListener { _, checkedId, isChecked ->
+    group.addOnButtonCheckedListener { toggleGroup, checkedId, isChecked ->
       if (suppressCallbacks) return@addOnButtonCheckedListener
-      if (!isChecked) return@addOnButtonCheckedListener
+
+      if (!isChecked) {
+        // In single-selection mode switching from A to B reports A as unchecked
+        // before B is reported as checked; by then the group already knows B is
+        // checked. Only a tap that leaves nothing checked is a real deselection.
+        if (toggleGroup.checkedButtonId == View.NO_ID) {
+          onSelect?.invoke(-1, "")
+        }
+        return@addOnButtonCheckedListener
+      }
 
       val segment = buttonIdToSegment[checkedId] ?: return@addOnButtonCheckedListener
       val index = segments.indexOf(segment)
@@ -153,6 +274,117 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
     requestLayout()
   }
 
+  /**
+   * Resolves a segment's icon. Drawable names and release-bundled assets (which
+   * React Native ships as drawable resources) resolve synchronously; other
+   * image URIs load in the background and are applied when they arrive.
+   */
+  private fun applyIcon(button: MaterialButton, segment: Segment, generation: Int) {
+    if (!segment.iconTinted) {
+      button.iconTint = null
+    }
+
+    when (segment.iconType) {
+      "drawable" -> {
+        button.icon = ResourceDrawableIdHelper.getResourceDrawable(context, segment.iconName)
+      }
+      "image" -> {
+        val uri = segment.iconUri
+        val isResourceName = !uri.contains(':')
+        if (isResourceName) {
+          button.icon = ResourceDrawableIdHelper.getResourceDrawable(context, uri)
+        } else {
+          PCImageLoader.load(context, uri, segment.iconScale) { bitmap ->
+            if (bitmap == null || generation != rebuildGeneration) return@load
+            button.icon = BitmapDrawable(resources, bitmap)
+            requestLayout()
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Draws a Material badge over the button's top-end corner. The badge lives
+   * in the button's overlay, so it needs the button's final bounds: attach
+   * after the first layout and follow later size changes.
+   */
+  private fun attachBadge(button: MaterialButton, segment: Segment) {
+    if (segment.badge.isEmpty()) return
+
+    val inset = (2 * resources.displayMetrics.density).toInt()
+    val badge = BadgeDrawable.create(button.context).apply {
+      text = segment.badge
+      badgeGravity = BadgeDrawable.TOP_END
+      badgeBackgroundColor?.let { backgroundColor = it }
+      badgeTextColor?.let { setBadgeTextColor(it) }
+    }
+
+    var attached = false
+    button.addOnLayoutChangeListener { view, _, _, _, _, _, _, _, _ ->
+      if (!attached) {
+        attached = true
+        BadgeUtils.attachBadgeDrawable(badge, view)
+        // The badge's size is only known once it has an anchor. Offset it by
+        // half its size so it sits fully inside the button corner; a badge
+        // that overhangs the last segment would be clipped by the control.
+        badge.horizontalOffset = badge.intrinsicWidth / 2 + inset
+        badge.verticalOffset = badge.intrinsicHeight / 2 + inset
+      }
+      badge.updateBadgeCoordinates(view)
+    }
+  }
+
+  /**
+   * Applies the color and font props on top of the Material theme defaults.
+   * Buttons are rebuilt whenever a style prop changes, so the theme values
+   * read here are always the untouched defaults.
+   */
+  private fun styleButton(button: MaterialButton, segment: Segment) {
+    val checkedState = intArrayOf(android.R.attr.state_checked)
+    val disabledState = intArrayOf(-android.R.attr.state_enabled)
+
+    if (activeTintColor != null || inactiveTintColor != null) {
+      val theme = button.textColors
+      val disabled = theme.getColorForState(disabledState, theme.defaultColor)
+      val checked = activeTintColor ?: theme.getColorForState(checkedState, theme.defaultColor)
+      val normal = inactiveTintColor ?: theme.defaultColor
+      val tint = ColorStateList(
+        arrayOf(disabledState, checkedState, intArrayOf()),
+        intArrayOf(disabled, checked, normal)
+      )
+      button.setTextColor(tint)
+      if (segment.iconTinted) {
+        button.iconTint = tint
+      }
+    }
+
+    selectedSegmentColor?.let { color ->
+      val theme = button.backgroundTintList
+      val normal = theme?.defaultColor ?: Color.TRANSPARENT
+      button.backgroundTintList = ColorStateList(
+        arrayOf(checkedState, intArrayOf()),
+        intArrayOf(color, normal)
+      )
+    }
+
+    rippleColor?.let { button.rippleColor = ColorStateList.valueOf(it) }
+    strokeColor?.let { button.strokeColor = ColorStateList.valueOf(it) }
+
+    if (labelFontSize > 0) {
+      button.setTextSize(TypedValue.COMPLEX_UNIT_SP, labelFontSize)
+    }
+    if (labelFontFamily.isNotEmpty() || labelFontWeight.isNotEmpty() || labelFontStyle.isNotEmpty()) {
+      button.typeface = ReactTypefaceUtils.applyStyles(
+        button.typeface,
+        ReactTypefaceUtils.parseFontStyle(labelFontStyle.ifEmpty { null }),
+        ReactTypefaceUtils.parseFontWeight(labelFontWeight.ifEmpty { null }),
+        labelFontFamily.ifEmpty { null },
+        context.assets
+      )
+    }
+  }
+
   private fun updateSelection() {
     suppressCallbacks = true
     val group = toggleGroup ?: return
@@ -182,6 +414,35 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
     }
   }
 
+  // ---- Layout ----
+
+  private var manualLayoutPending = false
+
+  /**
+   * React Native's root view ignores requestLayout after the initial pass, so
+   * a native view that changes its own subtree later (rebuilding segments for
+   * a prop change, an icon finishing loading) has to measure and lay itself
+   * out. Coalesced to one pass per frame.
+   */
+  override fun requestLayout() {
+    super.requestLayout()
+    if (!manualLayoutPending) {
+      manualLayoutPending = true
+      post { runManualLayout() }
+    }
+  }
+
+  private fun runManualLayout() {
+    manualLayoutPending = false
+    // Nothing to do until Yoga has placed us; the regular pass covers that.
+    if (width == 0 || height == 0) return
+    measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+    )
+    layout(left, top, right, bottom)
+  }
+
   // ---- Measurement ----
 
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

package/android/src/main/java/com/platformcomponents/PCSegmentedControlViewManager.kt

@@ -52,22 +52,82 @@ class PCSegmentedControlViewManager :
     }
   }
 
-  // segments: array of {label, value, disabled, icon}
+  private fun ReadableMap.stringOr(key: String, fallback: String): String =
+    if (hasKey(key) && !isNull(key)) getString(key) ?: fallback else fallback
+
+  private fun ReadableMap.doubleOr(key: String, fallback: Double): Double =
+    if (hasKey(key) && !isNull(key)) getDouble(key) else fallback
+
+  // segments: array of {label, value, disabled, iconType, iconName, iconUri,
+  //                     iconScale, iconTinted, accessibilityLabel}
   override fun setSegments(view: PCSegmentedControlView, value: ReadableArray?) {
     val out = ArrayList<PCSegmentedControlView.Segment>()
     if (value != null) {
       for (i in 0 until value.size()) {
         val m = value.getMap(i) ?: continue
-        val label = if (m.hasKey("label") && !m.isNull("label")) m.getString("label") ?: "" else ""
-        val segValue = if (m.hasKey("value") && !m.isNull("value")) m.getString("value") ?: "" else ""
-        val disabled = m.hasKey("disabled") && !m.isNull("disabled") && m.getString("disabled") == "disabled"
-        val icon = if (m.hasKey("icon") && !m.isNull("icon")) m.getString("icon") ?: "" else ""
-        out.add(PCSegmentedControlView.Segment(label = label, value = segValue, disabled = disabled, icon = icon))
+        val scale = m.doubleOr("iconScale", 1.0)
+        out.add(
+          PCSegmentedControlView.Segment(
+            label = m.stringOr("label", ""),
+            value = m.stringOr("value", ""),
+            disabled = m.stringOr("disabled", "enabled") == "disabled",
+            iconType = m.stringOr("iconType", ""),
+            iconName = m.stringOr("iconName", ""),
+            iconUri = m.stringOr("iconUri", ""),
+            iconScale = if (scale > 0) scale.toFloat() else 1f,
+            iconTinted = m.stringOr("iconTinted", "true") != "false",
+            badge = m.stringOr("badge", ""),
+            accessibilityLabel = m.stringOr("accessibilityLabel", "")
+          )
+        )
       }
     }
     view.applySegments(out)
   }
 
+  override fun setLabelVisibility(view: PCSegmentedControlView, value: String?) {
+    view.applyLabelVisibility(value)
+  }
+
+  // Colors arrive already processed by React Native (ARGB ints)
+  override fun setSelectedSegmentColor(view: PCSegmentedControlView, value: Int?) {
+    view.applySelectedSegmentColor(value)
+  }
+
+  override fun setActiveTintColor(view: PCSegmentedControlView, value: Int?) {
+    view.applyActiveTintColor(value)
+  }
+
+  override fun setInactiveTintColor(view: PCSegmentedControlView, value: Int?) {
+    view.applyInactiveTintColor(value)
+  }
+
+  override fun setAndroidRippleColor(view: PCSegmentedControlView, value: Int?) {
+    view.applyRippleColor(value)
+  }
+
+  override fun setAndroidStrokeColor(view: PCSegmentedControlView, value: Int?) {
+    view.applyStrokeColor(value)
+  }
+
+  override fun setBadgeBackgroundColor(view: PCSegmentedControlView, value: Int?) {
+    view.applyBadgeColors(value, view.badgeTextColor)
+  }
+
+  override fun setBadgeTextColor(view: PCSegmentedControlView, value: Int?) {
+    view.applyBadgeColors(view.badgeBackgroundColor, value)
+  }
+
+  // labelStyle: {fontFamily, fontSize, fontWeight, fontStyle}; empty / 0 = default
+  override fun setLabelStyle(view: PCSegmentedControlView, value: ReadableMap?) {
+    view.applyLabelStyle(
+      fontFamily = value?.stringOr("fontFamily", "") ?: "",
+      fontSize = value?.doubleOr("fontSize", 0.0)?.toFloat() ?: 0f,
+      fontWeight = value?.stringOr("fontWeight", "") ?: "",
+      fontStyle = value?.stringOr("fontStyle", "") ?: ""
+    )
+  }
+
   override fun setSelectedValue(view: PCSegmentedControlView, value: String?) {
     // Spec sentinel: empty string means "no selection"
     view.applySelectedValue(value ?: "")
@@ -78,8 +138,14 @@ class PCSegmentedControlViewManager :
   }
 
   override fun setAndroid(view: PCSegmentedControlView, value: ReadableMap?) {
-    val selectionRequired = value != null && value.hasKey("selectionRequired") &&
-      !value.isNull("selectionRequired") && value.getString("selectionRequired") == "true"
+    // Spec sentinel: "true" | "false"; missing means the default (required).
+    val selectionRequired = if (
+      value != null && value.hasKey("selectionRequired") && !value.isNull("selectionRequired")
+    ) {
+      value.getString("selectionRequired") != "false"
+    } else {
+      true
+    }
     view.applyAndroidProps(selectionRequired)
   }