react-native-platform-components 1.0.0 → 1.2.0

package/README.md

@@ -7,6 +7,33 @@
 
 Native **DatePicker**, **ContextMenu**, **SelectionMenu**, **SegmentedControl** and **LiquidGlass** for React Native. Every component is the real platform widget on both iOS and Android (UIKit and SwiftUI on iOS, Material 3 on Android), behind one typed, declarative API. No JavaScript re-implementations.
 
+<table>
+  <tr>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/datepicker">DatePicker</a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu">ContextMenu</a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu">SelectionMenu</a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol">SegmentedControl</a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass">LiquidGlass</a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/guides/theming">Theme</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/datepicker"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-datepicker.gif" width="100" alt="DatePicker on iOS" /></a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-contextmenu.gif" width="100" alt="ContextMenu on iOS" /></a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-selectionmenu.gif" width="100" alt="SelectionMenu on iOS" /></a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-segmentedcontrol.gif" width="100" alt="SegmentedControl on iOS" /></a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-liquidglass.gif" width="100" alt="LiquidGlass on iOS" /></a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/guides/theming"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-theme.gif" width="100" alt="Brand color and dark mode on iOS" /></a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/datepicker"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-datepicker.gif" width="100" alt="DatePicker on Android" /></a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-contextmenu.gif" width="100" alt="ContextMenu on Android" /></a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-selectionmenu.gif" width="100" alt="SelectionMenu on Android" /></a></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-segmentedcontrol.gif" width="100" alt="SegmentedControl on Android" /></a></td>
+    <td align="center" valign="middle"><sub>iOS 26+ only.<br/>Plain View on Android.</sub></td>
+    <td align="center"><a href="https://jarx-concepts.github.io/react-native-platform-components/guides/theming"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-theme.gif" width="100" alt="Brand color and dark mode on Android" /></a></td>
+  </tr>
+</table>
+
 ```sh
 npm install react-native-platform-components
 ```
@@ -47,49 +74,6 @@ That renders `UISegmentedControl` on iOS and Material 3 segmented buttons (`Mate
 | **SegmentedControl** | `UISegmentedControl`       | `MaterialButtonToggleGroup` (Material 3 segmented buttons)       | [SegmentedControl](https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol) |
 | **LiquidGlass**      | `UIGlassEffect` (iOS 26+)  | Fallback `View`                                                  | [LiquidGlass](https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass)           |
 
-<table>
-  <tr>
-    <td align="center"><strong>iOS DatePicker</strong></td>
-    <td align="center"><strong>Android DatePicker</strong></td>
-  </tr>
-  <tr>
-    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-datepicker.gif" height="550" /></td>
-    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-datepicker.gif" height="550" /></td>
-  </tr>
-  <tr>
-    <td align="center"><strong>iOS ContextMenu</strong></td>
-    <td align="center"><strong>Android ContextMenu</strong></td>
-  </tr>
-  <tr>
-    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-contextmenu.gif" height="550" /></td>
-    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-contextmenu.gif" height="550" /></td>
-  </tr>
-  <tr>
-    <td align="center"><strong>iOS SelectionMenu</strong></td>
-    <td align="center"><strong>Android SelectionMenu</strong></td>
-  </tr>
-  <tr>
-    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-selectionmenu.gif" height="550" /></td>
-    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-selectionmenu.gif" height="550" /></td>
-  </tr>
-  <tr>
-    <td align="center"><strong>iOS SegmentedControl</strong></td>
-    <td align="center"><strong>Android SegmentedControl</strong></td>
-  </tr>
-  <tr>
-    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-segmentedcontrol.gif" height="550" /></td>
-    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-segmentedcontrol.gif" height="550" /></td>
-  </tr>
-  <tr>
-    <td align="center"><strong>iOS LiquidGlass</strong></td>
-    <td align="center"><strong>Android LiquidGlass</strong></td>
-  </tr>
-  <tr>
-    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-liquidglass.gif" height="550" /></td>
-    <td align="center"><em>iOS 26+ only</em><br/><br/>On Android, renders as a<br/>regular View with optional<br/>fallback background color.</td>
-  </tr>
-</table>
-
 **Have a component request?** If there's a native UI component you'd like to see added, [open an issue](https://github.com/JarX-Concepts/react-native-platform-components/issues/new) describing the component and its native APIs on iOS and Android.
 
 **Using it in a shipped app?** Open a PR to list it here.
@@ -139,7 +123,7 @@ The library is built for the New Architecture (Fabric + Codegen) and does not su
 | Expo SDK     | 54, with a dev client or EAS Build (not Expo Go)          |
 | React        | 19                                                        |
 | iOS          | 13 (LiquidGlass needs iOS 26)                             |
-| Android      | API 24 (Android 7.0); Material Components 1.12 is bundled |
+| Android      | API 24 (Android 7.0); Material Components 1.14 is bundled |
 
 Full details: [Installation](https://jarx-concepts.github.io/react-native-platform-components/installation).
 
@@ -151,7 +135,7 @@ Everything else lives on the documentation site:
 - [DatePicker](https://jarx-concepts.github.io/react-native-platform-components/components/datepicker), [ContextMenu](https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu), [SelectionMenu](https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu), [SegmentedControl](https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol), [LiquidGlass](https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass): props, platform options and behavior
 - [Android Theme Configuration](https://jarx-concepts.github.io/react-native-platform-components/guides/android-theme): Material 3 setup and what happens without it
 - [Icons](https://jarx-concepts.github.io/react-native-platform-components/guides/icons): SF Symbols, drawables and images
-- [Theming and Colors](https://jarx-concepts.github.io/react-native-platform-components/guides/theming): design philosophy, theming, accepted color formats
+- [Theming and Colors](https://jarx-concepts.github.io/react-native-platform-components/guides/theming): light/dark mode and your brand color from JavaScript (`useNativeTheme`), accepted color formats
 
 ## Contributing
 

package/android/build.gradle

@@ -76,5 +76,5 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "com.google.android.material:material:1.12.0"
+  implementation "com.google.android.material:material:1.14.0"
 }

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

@@ -74,6 +74,12 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
   // --- Modal state ---
   private var showingModal = false
 
+  // --- Native theme ---
+  // Widgets read theme colors when they are created, so they are rebuilt when the
+  // native theme changes (brand color, light/dark switch).
+  private var builtThemeVersion = PCNativeTheme.version
+  private val nativeThemeListener = PCNativeTheme.Listener { rebuildForNativeTheme() }
+
   init {
     rebuildUI()
   }
@@ -226,6 +232,33 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     syncInlineFromState()
   }
 
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    PCNativeTheme.addListener(nativeThemeListener)
+    PCNativeTheme.attach(context)
+    if (builtThemeVersion != PCNativeTheme.version) rebuildForNativeTheme()
+  }
+
+  override fun onDetachedFromWindow() {
+    PCNativeTheme.removeListener(nativeThemeListener)
+    super.onDetachedFromWindow()
+  }
+
+  /**
+   * A theme change isn't a React commit, so nothing measures the rebuilt inline
+   * pickers; lay them out in the frame Yoga already gave this view.
+   */
+  private fun rebuildForNativeTheme() {
+    PCThemeSupport.clearColorStateListCaches(this)
+    rebuildUI()
+    if (!isInline() || width == 0 || height == 0) return
+    measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+    )
+    layout(left, top, right, bottom)
+  }
+
   // -----------------------------
   // UI construction
   // -----------------------------
@@ -233,6 +266,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
   private fun isInline(): Boolean = presentation == "inline" || presentation == "embedded"
 
   private fun rebuildUI() {
+    builtThemeVersion = PCNativeTheme.version
     removeAllViews()
     inlineContainer = null
     inlineDatePicker = null
@@ -742,10 +776,20 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
    * theme instead (0 = use the activity theme).
    */
   private fun m3CalendarTheme(act: FragmentActivity): Int =
-    PCThemeSupport.materialDialogThemeOverride(act, "DatePicker", R.style.PCMaterial3CalendarDialogTheme)
+    PCThemeSupport.materialDialogThemeOverride(
+      act,
+      "DatePicker",
+      R.style.PCMaterial3CalendarDialogTheme,
+      R.style.PCMaterial3CalendarDialogTheme_NativeTheme
+    )
 
   private fun m3TimePickerTheme(act: FragmentActivity): Int =
-    PCThemeSupport.materialDialogThemeOverride(act, "DatePicker", R.style.PCMaterial3TimePickerDialogTheme)
+    PCThemeSupport.materialDialogThemeOverride(
+      act,
+      "DatePicker",
+      R.style.PCMaterial3TimePickerDialogTheme,
+      R.style.PCMaterial3TimePickerDialogTheme_NativeTheme
+    )
 
   private fun buildM3CalendarConstraints(): CalendarConstraints? {
     val min = minDateMs

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

@@ -0,0 +1,174 @@
+package com.platformcomponents
+
+import android.app.Activity
+import android.content.Context
+import android.content.ContextWrapper
+import android.content.pm.PackageManager
+import android.content.res.Configuration
+import android.os.Build
+import android.util.Log
+import androidx.core.content.OnConfigurationChangedProvider
+import androidx.core.util.Consumer
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.uimanager.ThemedReactContext
+import com.google.android.material.color.DynamicColors
+import com.google.android.material.color.DynamicColorsOptions
+import java.lang.ref.WeakReference
+import java.util.WeakHashMap
+
+/**
+ * The native theme set from JS with `useNativeTheme` / `setNativeTheme`.
+ *
+ * The brand color seeds Material dynamic colors on the activity, so Material and
+ * AppCompat widgets created afterwards use a Material 3 scheme generated from it.
+ * Content-based dynamic colors need Android 13+ (and some Android 12 devices); on
+ * older versions the app's own theme colors stay in place.
+ *
+ * Widgets resolve theme colors when they are created, so library views register as
+ * listeners and rebuild on every change: a new brand color, or a light/dark switch
+ * (including `Appearance.setColorScheme`), which also needs the scheme regenerated.
+ *
+ * Main thread only.
+ */
+internal object PCNativeTheme {
+  private const val TAG = "PlatformComponents"
+
+  fun interface Listener {
+    fun onNativeThemeChanged()
+  }
+
+  /** Brand color from JS, or null to use the app's theme colors. */
+  var primaryColor: Int? = null
+    private set
+
+  /** Bumped on every change; views compare it to the version they were built with. */
+  var version = 0
+    private set
+
+  /** True when widgets should re-apply the brand colors over their own theme. */
+  val isActive: Boolean
+    get() = primaryColor != null && DynamicColors.isDynamicColorAvailable()
+
+  private data class Applied(val primaryColor: Int, val nightMode: Int)
+
+  private var warnedUnsupported = false
+
+  private val listeners = LinkedHashSet<Listener>()
+  private val applied = WeakHashMap<Activity, Applied>()
+  private val observed = WeakHashMap<Activity, Consumer<Configuration>>()
+
+  fun addListener(listener: Listener) {
+    listeners.add(listener)
+  }
+
+  fun removeListener(listener: Listener) {
+    listeners.remove(listener)
+  }
+
+  fun setPrimaryColor(activity: Activity?, color: Int?) {
+    UiThreadUtil.assertOnUiThread()
+    if (color == primaryColor) return
+    primaryColor = color
+    activity?.let {
+      observe(it)
+      apply(it)
+    }
+    changed()
+  }
+
+  /**
+   * Called when a library view attaches: follows its activity's configuration and
+   * applies the current theme if the activity doesn't have it yet (for example after
+   * the activity was recreated).
+   */
+  fun attach(context: Context) {
+    val activity = findActivity(context) ?: return
+    observe(activity)
+    if (applied[activity] != wanted(activity)) {
+      apply(activity)
+      changed()
+    }
+  }
+
+  fun findActivity(context: Context): Activity? {
+    (context as? ThemedReactContext)?.currentActivity?.let { return it }
+    var current: Context? = context
+    while (current is ContextWrapper) {
+      if (current is Activity) return current
+      current = current.baseContext
+    }
+    return null
+  }
+
+  private fun nightMode(context: Context): Int =
+    context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+
+  /** What the activity should have applied: null when there is no brand color. */
+  private fun wanted(activity: Activity): Applied? =
+    primaryColor?.let { Applied(it, nightMode(activity)) }
+
+  private fun apply(activity: Activity) {
+    val color = primaryColor
+
+    if (color == null) {
+      // Re-applying the activity theme resets the color attributes the overlay set.
+      if (applied.remove(activity) != null) {
+        activityThemeResId(activity)?.let { activity.theme.applyStyle(it, true) }
+      }
+      return
+    }
+
+    applied[activity] = Applied(color, nightMode(activity))
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S || !DynamicColors.isDynamicColorAvailable()) {
+      if (!warnedUnsupported) {
+        warnedUnsupported = true
+        Log.w(TAG, "useNativeTheme: brand colors need Android 13 or later; keeping the app theme colors.")
+      }
+      return
+    }
+
+    // Generates the scheme for the activity's current light/dark mode, overrides the
+    // Material "personalized" color resources with it and applies them to the theme.
+    // Material 1.13+ is needed to apply it more than once to the same activity.
+    DynamicColors.applyToActivityIfAvailable(
+      activity,
+      DynamicColorsOptions.Builder().setContentBasedSource(color).build()
+    )
+    activity.theme.applyStyle(R.style.PCNativeThemeOverlay, true)
+  }
+
+  private fun observe(activity: Activity) {
+    if (observed.containsKey(activity)) return
+    val provider = activity as? OnConfigurationChangedProvider ?: return
+
+    // The listener lives as long as the activity; don't let it keep the activity alive.
+    val activityRef = WeakReference(activity)
+    var lastNightMode = nightMode(activity)
+    val listener = Consumer<Configuration> { config ->
+      val nightMode = config.uiMode and Configuration.UI_MODE_NIGHT_MASK
+      if (nightMode == lastNightMode) return@Consumer
+      lastNightMode = nightMode
+      val current = activityRef.get() ?: return@Consumer
+      // AppCompat re-applies the activity theme on a night mode switch, and the
+      // scheme depends on the mode, so the brand colors are applied again.
+      if (primaryColor != null) apply(current)
+      changed()
+    }
+    provider.addOnConfigurationChangedListener(listener)
+    observed[activity] = listener
+  }
+
+  private fun changed() {
+    version += 1
+    listeners.toList().forEach { it.onNativeThemeChanged() }
+  }
+
+  private fun activityThemeResId(activity: Activity): Int? =
+    try {
+      activity.packageManager.getActivityInfo(activity.componentName, 0).themeResource
+        .takeIf { it != 0 }
+        ?: activity.applicationInfo.theme.takeIf { it != 0 }
+    } catch (_: PackageManager.NameNotFoundException) {
+      null
+    }
+}

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

@@ -0,0 +1,42 @@
+package com.platformcomponents
+
+import android.util.Log
+import com.facebook.react.bridge.ColorPropConverter
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
+import com.facebook.react.bridge.UiThreadUtil
+
+/** `setNativeTheme` / `useNativeTheme` on Android. See [PCNativeTheme]. */
+class PCNativeThemeModule(reactContext: ReactApplicationContext) :
+  NativePlatformComponentsThemeSpec(reactContext) {
+
+  override fun setTheme(theme: ReadableMap) {
+    val primary: Any? =
+      when (if (theme.hasKey("primary")) theme.getType("primary") else ReadableType.Null) {
+        ReadableType.Number -> theme.getDouble("primary")
+        ReadableType.Map -> theme.getMap("primary")
+        else -> null
+      }
+
+    UiThreadUtil.runOnUiThread {
+      val activity = reactApplicationContext.currentActivity
+      val color =
+        primary?.let {
+          try {
+            // Resolves PlatformColor resource paths as well as plain colors.
+            ColorPropConverter.getColor(it, activity ?: reactApplicationContext)
+          } catch (e: RuntimeException) {
+            Log.w(TAG, "setNativeTheme: could not resolve colors.primary", e)
+            null
+          }
+        }
+      PCNativeTheme.setPrimaryColor(activity, color)
+    }
+  }
+
+  companion object {
+    const val NAME = "PlatformComponentsTheme"
+    private const val TAG = "PlatformComponents"
+  }
+}

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

@@ -11,6 +11,7 @@ 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.ReactCompoundViewGroup
 import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
 import com.facebook.react.views.scroll.ReactScrollViewHelper
@@ -20,7 +21,10 @@ import com.google.android.material.badge.BadgeUtils
 import com.google.android.material.button.MaterialButton
 import com.google.android.material.button.MaterialButtonToggleGroup
 
-class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScrollViewHelper.HasStateWrapper {
+class PCSegmentedControlView(context: Context) :
+  FrameLayout(context),
+  ReactScrollViewHelper.HasStateWrapper,
+  ReactCompoundViewGroup {
 
   data class Segment(
     val label: String,
@@ -88,6 +92,15 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
   /** Bumped on every rebuild so late image loads can't touch stale buttons. */
   private var rebuildGeneration = 0
 
+  // --- Native theme ---
+  // Widgets read theme colors when they are created, so they are rebuilt when the
+  // native theme changes (brand color, light/dark switch).
+  private var builtThemeVersion = PCNativeTheme.version
+  private val nativeThemeListener = PCNativeTheme.Listener {
+    PCThemeSupport.clearColorStateListCaches(this)
+    rebuildUI()
+  }
+
   init {
     minimumHeight = (PCConstants.MIN_TOUCH_TARGET_HEIGHT_DP * resources.displayMetrics.density).toInt()
     // Badges overhang the button corner
@@ -182,9 +195,29 @@ class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScro
     rebuildUI()
   }
 
+  // The buttons have generated view ids, which React Native's touch handling would
+  // take for React tags and dispatch JS touch events to unrelated views. Claim the
+  // touch for this view instead; the buttons still receive it natively.
+  override fun interceptsTouchEvent(touchX: Float, touchY: Float): Boolean = true
+
+  override fun reactTagForTouch(touchX: Float, touchY: Float): Int = id
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    PCNativeTheme.addListener(nativeThemeListener)
+    PCNativeTheme.attach(context)
+    if (builtThemeVersion != PCNativeTheme.version) nativeThemeListener.onNativeThemeChanged()
+  }
+
+  override fun onDetachedFromWindow() {
+    PCNativeTheme.removeListener(nativeThemeListener)
+    super.onDetachedFromWindow()
+  }
+
   // ---- UI Building ----
 
   private fun rebuildUI() {
+    builtThemeVersion = PCNativeTheme.version
     removeAllViews()
     buttonIdToSegment.clear()
     rebuildGeneration += 1

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

@@ -64,6 +64,15 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
   private var headlessDismissAfterSelect = false
   private var headlessOpenToken = 0
 
+  // --- Native theme ---
+  // Widgets read theme colors when they are created, so they are rebuilt when the
+  // native theme changes (brand color, light/dark switch).
+  private var builtThemeVersion = PCNativeTheme.version
+  private val nativeThemeListener = PCNativeTheme.Listener {
+    PCThemeSupport.clearColorStateListCaches(this)
+    rebuildUI()
+  }
+
   init {
     minimumHeight = 0
     minimumWidth = 0
@@ -306,6 +315,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
   // ---- UI building ----
 
   private fun rebuildUI() {
+    builtThemeVersion = PCNativeTheme.version
     if (headlessMenuShowing) {
       headlessDismissProgrammatic = true
       headlessMenu?.dismiss()
@@ -713,6 +723,9 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
 
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
+    PCNativeTheme.addListener(nativeThemeListener)
+    PCNativeTheme.attach(context)
+    if (builtThemeVersion != PCNativeTheme.version) nativeThemeListener.onNativeThemeChanged()
     // When attached, trigger a measure/layout pass to ensure correct sizing
     if (anchorMode == "inline") {
       // Use ViewTreeObserver to wait until after the first layout pass
@@ -741,6 +754,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
 
   override fun onDetachedFromWindow() {
     detachInlineDropdownOverlay()
+    PCNativeTheme.removeListener(nativeThemeListener)
     super.onDetachedFromWindow()
   }
 

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

@@ -1,11 +1,15 @@
 package com.platformcomponents
 
 import android.content.Context
+import android.content.res.Resources
 import android.util.Log
 import android.util.TypedValue
 import android.view.ContextThemeWrapper
+import android.view.View
+import android.view.ViewGroup
 import androidx.annotation.AttrRes
 import androidx.appcompat.R as AppCompatR
+import androidx.core.content.res.ResourcesCompat
 import com.google.android.material.R as MaterialR
 
 /**
@@ -39,9 +43,34 @@ internal object PCThemeSupport {
    * renders with Material 3 defaults instead of throwing.
    */
   fun materialContext(context: Context, component: String): Context {
-    if (hasMaterialTheme(context)) return context
-    warnMaterial(component)
-    return ContextThemeWrapper(context, MaterialR.style.Theme_Material3_DayNight_NoActionBar)
+    val base =
+      if (hasMaterialTheme(context)) {
+        context
+      } else {
+        warnMaterial(component)
+        ContextThemeWrapper(context, MaterialR.style.Theme_Material3_DayNight_NoActionBar)
+      }
+    if (!PCNativeTheme.isActive) return base
+    // Re-applies the native theme's brand colors, which the Material 3 fallback resets.
+    return ContextThemeWrapper(base, R.style.PCNativeThemeOverlay)
+  }
+
+  /**
+   * Clears AndroidX's color state list cache for the themes the views under [root] were
+   * built with. Material widgets load their colors through that cache, keyed by theme,
+   * and widgets rebuilt for a new brand color use the same theme keys as the ones they
+   * replace, so without this they would get the previous brand colors back.
+   */
+  fun clearColorStateListCaches(root: View) {
+    val themes = HashSet<Resources.Theme>()
+    fun collect(view: View) {
+      themes.add(view.context.theme)
+      if (view is ViewGroup) {
+        for (i in 0 until view.childCount) collect(view.getChildAt(i))
+      }
+    }
+    collect(root)
+    themes.forEach { ResourcesCompat.clearCachesForTheme(it) }
   }
 
   /**
@@ -57,11 +86,17 @@ internal object PCThemeSupport {
   /**
    * Theme override for MaterialDatePicker / MaterialTimePicker when the activity
    * theme is not a Material theme. Returns 0 (no override) when it is.
+   * [nativeThemeFallback] is the variant that keeps the native theme's brand colors.
    */
-  fun materialDialogThemeOverride(context: Context, component: String, fallbackTheme: Int): Int {
+  fun materialDialogThemeOverride(
+    context: Context,
+    component: String,
+    fallbackTheme: Int,
+    nativeThemeFallback: Int
+  ): Int {
     if (hasMaterialTheme(context)) return 0
     warnMaterial(component)
-    return fallbackTheme
+    return if (PCNativeTheme.isActive) nativeThemeFallback else fallbackTheme
   }
 
   private fun resolves(context: Context, @AttrRes attr: Int): Boolean =

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

@@ -1,12 +1,13 @@
 package com.platformcomponents
 
-import com.facebook.react.ReactPackage
+import com.facebook.react.BaseReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
-import java.util.ArrayList
 
-class PlatformComponentsViewPackage : ReactPackage {
+class PlatformComponentsViewPackage : BaseReactPackage() {
   override fun createViewManagers(
       reactContext: ReactApplicationContext
   ): List<ViewManager<*, *>> {
@@ -19,7 +20,23 @@ class PlatformComponentsViewPackage : ReactPackage {
       )
   }
 
-  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-    return emptyList()
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? =
+    when (name) {
+      PCNativeThemeModule.NAME -> PCNativeThemeModule(reactContext)
+      else -> null
+    }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider = ReactModuleInfoProvider {
+    mapOf(
+      PCNativeThemeModule.NAME to
+        ReactModuleInfo(
+          name = PCNativeThemeModule.NAME,
+          className = PCNativeThemeModule::class.java.name,
+          canOverrideExistingModule = false,
+          needsEagerInit = false,
+          isCxxModule = false,
+          isTurboModule = true,
+        )
+    )
   }
 }