react-native-platform-components 0.8.10 → 1.0.0

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

@@ -356,7 +356,8 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
     if (mode == MaterialMode.M3) {
       // M3 exposed dropdown menu - the standard Material 3 way
       // Must set box background mode BEFORE setting endIconMode to avoid IllegalStateException
-      val til = TextInputLayout(context).apply {
+      // Material widgets need a Material theme; fall back to Material 3 defaults instead of crashing.
+      val til = TextInputLayout(PCThemeSupport.materialContext(context, "SelectionMenu")).apply {
         layoutParams = FrameLayout.LayoutParams(
           FrameLayout.LayoutParams.WRAP_CONTENT,
           FrameLayout.LayoutParams.WRAP_CONTENT

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

@@ -0,0 +1,94 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.util.Log
+import android.util.TypedValue
+import android.view.ContextThemeWrapper
+import androidx.annotation.AttrRes
+import androidx.appcompat.R as AppCompatR
+import com.google.android.material.R as MaterialR
+
+/**
+ * Theme guards for the Material and AppCompat widgets this library creates.
+ *
+ * React Native and Expo templates ship an AppCompat app theme. Material widgets
+ * (MaterialButtonToggleGroup, TextInputLayout, MaterialDatePicker, ...) throw during
+ * inflation when the host theme is not a Material Components / Material 3 theme.
+ * Rather than crash the app, wrap the context in a Material 3 theme (widgets) or
+ * hand the picker dialogs a full Material 3 dialog theme, and warn once so the
+ * developer knows how to get their own colors applied.
+ */
+internal object PCThemeSupport {
+  private const val TAG = "PlatformComponents"
+
+  @Volatile private var warnedMaterial = false
+  @Volatile private var warnedAppCompat = false
+
+  /** True for Theme.MaterialComponents.* and Theme.Material3.* (and descendants). */
+  fun hasMaterialTheme(context: Context): Boolean =
+    resolves(context, MaterialR.attr.materialButtonOutlinedStyle) &&
+      resolves(context, MaterialR.attr.colorSurface)
+
+  /** True for Theme.AppCompat.* and descendants, which includes every Material theme. */
+  fun hasAppCompatTheme(context: Context): Boolean =
+    resolves(context, AppCompatR.attr.alertDialogTheme)
+
+  /**
+   * Context to build Material widgets from. The host context when its theme is a
+   * Material theme; otherwise a Theme.Material3.DayNight wrapper, so the widget
+   * 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)
+  }
+
+  /**
+   * Context to build AppCompat dialogs from. The host context when its theme is an
+   * AppCompat theme; otherwise a Theme.AppCompat.DayNight.Dialog.Alert wrapper.
+   */
+  fun appCompatDialogContext(context: Context, component: String): Context {
+    if (hasAppCompatTheme(context)) return context
+    warnAppCompat(component)
+    return ContextThemeWrapper(context, AppCompatR.style.Theme_AppCompat_DayNight_Dialog_Alert)
+  }
+
+  /**
+   * Theme override for MaterialDatePicker / MaterialTimePicker when the activity
+   * theme is not a Material theme. Returns 0 (no override) when it is.
+   */
+  fun materialDialogThemeOverride(context: Context, component: String, fallbackTheme: Int): Int {
+    if (hasMaterialTheme(context)) return 0
+    warnMaterial(component)
+    return fallbackTheme
+  }
+
+  private fun resolves(context: Context, @AttrRes attr: Int): Boolean =
+    context.theme.resolveAttribute(attr, TypedValue(), true)
+
+  private fun warnMaterial(component: String) {
+    if (warnedMaterial) return
+    warnedMaterial = true
+    Log.w(
+      TAG,
+      "$component: the app theme is not a Material 3 theme, so Material components " +
+        "fall back to Material 3 default colors. To use your app's colors, make " +
+        "AppTheme inherit from Theme.Material3.DayNight.NoActionBar in " +
+        "android/app/src/main/res/values/styles.xml (Expo: pass " +
+        "{ android: { theme: 'material3' } } to the react-native-platform-components " +
+        "config plugin). See the README section \"Android Theme Configuration\"."
+    )
+  }
+
+  private fun warnAppCompat(component: String) {
+    if (warnedAppCompat) return
+    warnedAppCompat = true
+    Log.w(
+      TAG,
+      "$component: the app theme is not an AppCompat theme, so system dialogs fall " +
+        "back to Theme.AppCompat.DayNight.Dialog.Alert. Make AppTheme inherit from " +
+        "Theme.AppCompat.* or Theme.Material3.* to style them with your theme."
+    )
+  }
+}

package/android/src/main/res/values/styles.xml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <!--
+    Fallback dialog themes for MaterialDatePicker / MaterialTimePicker when the host
+    app theme is not a Material theme (see PCThemeSupport). Each is a full
+    Theme.Material3 dialog theme plus the items from ThemeOverlay.Material3.MaterialCalendar
+    and ThemeOverlay.Material3.MaterialTimePicker (material 1.12.0), which the pickers
+    skip resolving when a theme override is supplied.
+  -->
+  <style name="PCMaterial3CalendarDialogTheme" parent="Theme.Material3.DayNight.Dialog">
+    <item name="buttonBarButtonStyle">@style/Widget.Material3.Button.TextButton.Dialog.Flush</item>
+    <item name="materialCalendarStyle">@style/Widget.Material3.MaterialCalendar</item>
+    <item name="materialCalendarHeaderLayout">@style/Widget.Material3.MaterialCalendar.HeaderLayout</item>
+    <item name="materialCalendarHeaderDivider">@style/Widget.Material3.MaterialCalendar.HeaderDivider</item>
+    <item name="materialCalendarHeaderTitle">@style/Widget.Material3.MaterialCalendar.HeaderTitle</item>
+    <item name="materialCalendarHeaderSelection">@style/Widget.Material3.MaterialCalendar.HeaderSelection</item>
+    <item name="materialCalendarHeaderCancelButton">@style/Widget.Material3.MaterialCalendar.HeaderCancelButton</item>
+    <item name="materialCalendarHeaderConfirmButton">@style/Widget.Material3.Button.TextButton</item>
+    <item name="materialCalendarHeaderToggleButton">@style/Widget.Material3.MaterialCalendar.HeaderToggleButton</item>
+    <item name="materialCalendarYearNavigationButton">@style/Widget.Material3.MaterialCalendar.YearNavigationButton</item>
+    <item name="materialCalendarMonthNavigationButton">@style/Widget.Material3.MaterialCalendar.MonthNavigationButton</item>
+    <item name="materialCalendarDayOfWeekLabel">@style/Widget.Material3.MaterialCalendar.DayOfWeekLabel</item>
+    <item name="materialCalendarDay">@style/Widget.Material3.MaterialCalendar.DayTextView</item>
+    <item name="materialCalendarMonth">@style/Widget.Material3.MaterialCalendar.MonthTextView</item>
+    <item name="buttonBarPositiveButtonStyle">@style/Widget.Material3.Button.TextButton.Dialog</item>
+    <item name="buttonBarNegativeButtonStyle">@style/Widget.Material3.Button.TextButton.Dialog</item>
+  </style>
+
+  <style name="PCMaterial3TimePickerDialogTheme" parent="Theme.Material3.DayNight.Dialog">
+    <item name="buttonBarButtonStyle">@style/Widget.Material3.Button.TextButton.Dialog.Flush</item>
+    <item name="chipStyle">@style/Widget.Material3.MaterialTimePicker.Display</item>
+    <item name="textInputStyle">@style/Widget.Material3.MaterialTimePicker.Display.TextInputLayout</item>
+    <item name="materialDisplayDividerStyle">@style/Widget.Material3.MaterialTimePicker.Display.Divider</item>
+    <item name="materialButtonOutlinedStyle">@style/Widget.Material3.MaterialTimePicker.Button</item>
+    <item name="materialClockStyle">@style/Widget.Material3.MaterialTimePicker.Clock</item>
+    <item name="materialTimePickerStyle">@style/Widget.Material3.MaterialTimePicker</item>
+    <item name="imageButtonStyle">@style/Widget.Material3.MaterialTimePicker.ImageButton</item>
+    <item name="materialTimePickerTitleStyle">@style/TextAppearance.Material3.MaterialTimePicker.Title</item>
+  </style>
+</resources>

package/ios/PCImageLoader.swift

@@ -0,0 +1,58 @@
+import UIKit
+
+/// Loads images referenced by React Native asset URIs for native controls that
+/// take a `UIImage` (segmented control icons).
+///
+/// Release builds bundle local assets next to the JS bundle, so those arrive as
+/// `file://` URLs and load synchronously. Debug builds and remote sources arrive
+/// as `http(s)://` (Metro) or `data:` URLs and load asynchronously.
+///
+/// Must be used from the main thread.
+final class PCImageLoader {
+    static let shared = PCImageLoader()
+
+    private var cache: [String: UIImage] = [:]
+    private var pending: [String: [(UIImage?) -> Void]] = [:]
+
+    /// Returns the image immediately when it is cached or readable from disk.
+    /// Otherwise starts a load and calls `completion` on the main thread with
+    /// the result; the return value is `nil` in that case.
+    @discardableResult
+    func image(
+        uri: String,
+        scale: CGFloat,
+        completion: @escaping (UIImage?) -> Void
+    ) -> UIImage? {
+        let key = "\(uri)@\(scale)x"
+        if let cached = cache[key] {
+            return cached
+        }
+
+        guard let url = URL(string: uri) else { return nil }
+
+        if url.isFileURL {
+            guard let data = try? Data(contentsOf: url),
+                  let image = UIImage(data: data, scale: scale) else { return nil }
+            cache[key] = image
+            return image
+        }
+
+        if pending[key] != nil {
+            pending[key]?.append(completion)
+            return nil
+        }
+        pending[key] = [completion]
+
+        URLSession.shared.dataTask(with: url) { [weak self] data, _, _ in
+            let image = data.flatMap { UIImage(data: $0, scale: scale) }
+            DispatchQueue.main.async {
+                guard let self else { return }
+                if let image { self.cache[key] = image }
+                let callbacks = self.pending.removeValue(forKey: key) ?? []
+                callbacks.forEach { $0(image) }
+            }
+        }.resume()
+
+        return nil
+    }
+}

package/ios/PCSegmentedControl.mm

@@ -5,6 +5,7 @@
 #import <React/RCTComponentViewFactory.h>
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTFont.h>
 
 #import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
 #import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
@@ -32,10 +33,46 @@ static inline bool SegmentsEqual(
     if (a[i].label != b[i].label) return false;
     if (a[i].value != b[i].value) return false;
     if (a[i].disabled != b[i].disabled) return false;
-    if (a[i].icon != b[i].icon) return false;
+    if (a[i].iconType != b[i].iconType) return false;
+    if (a[i].iconName != b[i].iconName) return false;
+    if (a[i].iconUri != b[i].iconUri) return false;
+    if (a[i].iconScale != b[i].iconScale) return false;
+    if (a[i].iconTinted != b[i].iconTinted) return false;
+    if (a[i].badge != b[i].badge) return false;
+    if (a[i].accessibilityLabel != b[i].accessibilityLabel) return false;
   }
   return true;
 }
+
+static inline NSString *NSStringFromStd(const std::string &s, NSString *fallback) {
+  return s.empty() ? fallback : [NSString stringWithUTF8String:s.c_str()];
+}
+
+static inline bool LabelStyleEqual(
+    const facebook::react::PCSegmentedControlLabelStyleStruct &a,
+    const facebook::react::PCSegmentedControlLabelStyleStruct &b) {
+  return a.fontFamily == b.fontFamily && a.fontSize == b.fontSize &&
+         a.fontWeight == b.fontWeight && a.fontStyle == b.fontStyle;
+}
+
+/// Builds the label font from RN-style font props, or nil when every field is
+/// unset so the control keeps the system font.
+static UIFont *FontFromLabelStyle(
+    const facebook::react::PCSegmentedControlLabelStyleStruct &style) {
+  if (style.fontFamily.empty() && style.fontSize <= 0 &&
+      style.fontWeight.empty() && style.fontStyle.empty()) {
+    return nil;
+  }
+  // UISegmentedControl titles default to 13pt; start there so a lone
+  // fontWeight or fontStyle doesn't change the size.
+  return [RCTFont updateFont:[UIFont systemFontOfSize:13]
+                  withFamily:NSStringFromStd(style.fontFamily, nil)
+                        size:style.fontSize > 0 ? @(style.fontSize) : nil
+                      weight:NSStringFromStd(style.fontWeight, nil)
+                       style:NSStringFromStd(style.fontStyle, nil)
+                     variant:nil
+             scaleMultiplier:1.0];
+}
 } // namespace
 
 @interface PCSegmentedControl ()
@@ -77,6 +114,12 @@ static inline bool SegmentsEqual(
 
       eventEmitter->onSelect(payload);
     };
+
+    _view.onNeedsRemeasure = ^{
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+      [strongSelf updateMeasurements];
+    };
   }
   return self;
 }
@@ -88,32 +131,32 @@ static inline bool SegmentsEqual(
   const auto prevProps =
       std::static_pointer_cast<const PCSegmentedControlProps>(oldProps);
 
-  // segments: [{label, value, disabled, icon}]
+  // segments: [{label, value, disabled, iconType, iconName, iconUri, iconScale,
+  //             iconTinted, accessibilityLabel}]
   if (!prevProps || !SegmentsEqual(newProps.segments, prevProps->segments)) {
     NSMutableArray *arr = [NSMutableArray new];
     for (const auto &seg : newProps.segments) {
-      NSString *label = seg.label.empty()
-                            ? @""
-                            : [NSString stringWithUTF8String:seg.label.c_str()];
-      NSString *value = seg.value.empty()
-                            ? @""
-                            : [NSString stringWithUTF8String:seg.value.c_str()];
-      NSString *disabled = seg.disabled.empty()
-                               ? @"enabled"
-                               : [NSString stringWithUTF8String:seg.disabled.c_str()];
-      NSString *icon = seg.icon.empty()
-                           ? @""
-                           : [NSString stringWithUTF8String:seg.icon.c_str()];
       [arr addObject:@{
-        @"label": label,
-        @"value": value,
-        @"disabled": disabled,
-        @"icon": icon
+        @"label": NSStringFromStd(seg.label, @""),
+        @"value": NSStringFromStd(seg.value, @""),
+        @"disabled": NSStringFromStd(seg.disabled, @"enabled"),
+        @"iconType": NSStringFromStd(seg.iconType, @""),
+        @"iconName": NSStringFromStd(seg.iconName, @""),
+        @"iconUri": NSStringFromStd(seg.iconUri, @""),
+        @"iconScale": @(seg.iconScale),
+        @"iconTinted": NSStringFromStd(seg.iconTinted, @"true"),
+        @"badge": NSStringFromStd(seg.badge, @""),
+        @"accessibilityLabel": NSStringFromStd(seg.accessibilityLabel, @""),
       }];
     }
     _view.segments = arr;
   }
 
+  // labelVisibility: "auto" | "labeled" | "unlabeled"
+  if (!prevProps || newProps.labelVisibility != prevProps->labelVisibility) {
+    _view.labelVisibility = NSStringFromStd(newProps.labelVisibility, @"auto");
+  }
+
   // selectedValue (default "")
   if (!prevProps || newProps.selectedValue != prevProps->selectedValue) {
     if (!newProps.selectedValue.empty()) {
@@ -147,13 +190,30 @@ static inline bool SegmentsEqual(
     _view.apportionsSegmentWidthsByContent = (newIos.apportionsSegmentWidthsByContent == "true");
   }
 
-  if (!prevProps || newIos.selectedSegmentTintColor != oldIos.selectedSegmentTintColor) {
-    if (!newIos.selectedSegmentTintColor.empty()) {
-      _view.selectedSegmentTintColor =
-          [NSString stringWithUTF8String:newIos.selectedSegmentTintColor.c_str()];
-    } else {
-      _view.selectedSegmentTintColor = nil;
-    }
+  // Colors arrive as SharedColor (already processed by React Native)
+  if (!prevProps || newProps.selectedSegmentColor != prevProps->selectedSegmentColor) {
+    _view.selectedSegmentColor = RCTUIColorFromSharedColor(newProps.selectedSegmentColor);
+  }
+
+  if (!prevProps || newProps.activeTintColor != prevProps->activeTintColor) {
+    _view.activeTintColor = RCTUIColorFromSharedColor(newProps.activeTintColor);
+  }
+
+  if (!prevProps || newProps.inactiveTintColor != prevProps->inactiveTintColor) {
+    _view.inactiveTintColor = RCTUIColorFromSharedColor(newProps.inactiveTintColor);
+  }
+
+  // labelStyle: {fontFamily, fontSize, fontWeight, fontStyle}
+  if (!prevProps || !LabelStyleEqual(newProps.labelStyle, prevProps->labelStyle)) {
+    _view.labelFont = FontFromLabelStyle(newProps.labelStyle);
+  }
+
+  if (!prevProps || newProps.badgeBackgroundColor != prevProps->badgeBackgroundColor) {
+    _view.badgeBackgroundColor = RCTUIColorFromSharedColor(newProps.badgeBackgroundColor);
+  }
+
+  if (!prevProps || newProps.badgeTextColor != prevProps->badgeTextColor) {
+    _view.badgeTextColor = RCTUIColorFromSharedColor(newProps.badgeTextColor);
   }
 
   [super updateProps:props oldProps:oldProps];