react-native-platform-components 0.6.1 → 0.8.0

package/README.md

@@ -3,55 +3,68 @@
 [![npm version](https://img.shields.io/npm/v/react-native-platform-components.svg)](https://www.npmjs.com/package/react-native-platform-components)
 [![npm downloads](https://img.shields.io/npm/dm/react-native-platform-components.svg)](https://www.npmjs.com/package/react-native-platform-components)
 
+High-quality **native UI components for React Native**, implemented with platform-first APIs and exposed through clean, typed JavaScript interfaces.
+
+This library focuses on **true native behavior**, not JavaScript re-implementations.
+
 <table>
   <tr>
-    <td valign="top">
-      <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="350" /></td>
-          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-datepicker.gif" height="350" /></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="350" /></td>
-          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-contextmenu.gif" height="350" /></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="350" /></td>
-          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-selectionmenu.gif" height="350" /></td>
-        </tr>
-      </table>
-    </td>
-    <td valign="top">
-      <p>High-quality <strong>native UI components for React Native</strong>, implemented with platform-first APIs and exposed through clean, typed JavaScript interfaces.</p>
-      <p>This library focuses on <strong>true native behavior</strong>, not JavaScript re-implementations — providing:</p>
-      <ul>
-        <li><strong>DatePicker</strong> – native date & time pickers with modal and embedded presentations</li>
-        <li><strong>ContextMenu</strong> – native context menus with long-press activation (UIContextMenuInteraction on iOS, PopupMenu on Android)</li>
-        <li><strong>SelectionMenu</strong> – native selection menus (Material on Android, system menus on iOS)</li>
-      </ul>
-      <p>The goal is to provide components that:</p>
-      <ul>
-        <li>Feel <strong>100% native</strong> on each platform</li>
-        <li>Support modern platform design systems (Material 3 on Android, system pickers on iOS)</li>
-        <li>Offer <strong>headless</strong> and <strong>inline</strong> modes for maximum layout control</li>
-        <li>Integrate cleanly with <strong>React Native Codegen / Fabric</strong></li>
-      </ul>
-    </td>
+    <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>
 
+### Components
+
+- **DatePicker** – native date & time pickers with modal and embedded presentations
+- **ContextMenu** – native context menus with long-press activation (UIContextMenuInteraction on iOS, PopupMenu on Android)
+- **SelectionMenu** – native selection menus (Material on Android, system menus on iOS)
+- **SegmentedControl** – native segmented controls (UISegmentedControl on iOS, MaterialButtonToggleGroup on Android)
+- **LiquidGlass** – iOS 26+ glass morphism effects (UIGlassEffect on iOS, fallback View on Android)
+
+### Goals
+
+- Feel **100% native** on each platform
+- Support modern platform design systems (Material 3 on Android, system pickers on iOS)
+- Offer **headless** and **inline** modes for maximum layout control
+- Integrate cleanly with **React Native Codegen / Fabric**
+
 ---
 
 ## Installation
@@ -325,6 +338,101 @@ export function Example() {
 
 ---
 
+### SegmentedControl
+
+```tsx
+import { SegmentedControl } from 'react-native-platform-components';
+
+const segments = [
+  { label: 'Day', value: 'day' },
+  { label: 'Week', value: 'week' },
+  { label: 'Month', value: 'month' },
+];
+
+export function Example() {
+  const [selected, setSelected] = React.useState('day');
+
+  return (
+    <SegmentedControl
+      segments={segments}
+      selectedValue={selected}
+      onSelect={(value) => setSelected(value)}
+    />
+  );
+}
+```
+
+### SegmentedControl (With Icons)
+
+```tsx
+import { SegmentedControl } from 'react-native-platform-components';
+import { Platform } from 'react-native';
+
+const segments = [
+  {
+    label: 'List',
+    value: 'list',
+    icon: Platform.OS === 'ios' ? 'list.bullet' : 'list_bullet',
+  },
+  {
+    label: 'Grid',
+    value: 'grid',
+    icon: Platform.OS === 'ios' ? 'square.grid.2x2' : 'grid_view',
+  },
+];
+
+export function Example() {
+  const [selected, setSelected] = React.useState('list');
+
+  return (
+    <SegmentedControl
+      segments={segments}
+      selectedValue={selected}
+      onSelect={(value) => setSelected(value)}
+      ios={{ apportionsSegmentWidthsByContent: true }}
+    />
+  );
+}
+```
+
+---
+
+### LiquidGlass
+
+```tsx
+import { LiquidGlass, isLiquidGlassSupported } from 'react-native-platform-components';
+import { View, Text, Image } from 'react-native';
+
+export function Example() {
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Background content */}
+      <Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ flex: 1 }} />
+
+      {/* Glass effect overlay */}
+      <LiquidGlass
+        style={{ position: 'absolute', top: 50, left: 20, right: 20, padding: 20 }}
+        cornerRadius={20}
+        ios={{
+          effect: 'regular',
+          interactive: true,
+          colorScheme: 'system',
+        }}
+        android={{
+          fallbackBackgroundColor: '#FFFFFF80',
+        }}
+      >
+        <Text style={{ fontSize: 18, fontWeight: '600' }}>
+          {isLiquidGlassSupported ? 'Glass Effect!' : 'Fallback View'}
+        </Text>
+      </LiquidGlass>
+    </View>
+  );
+}
+```
+
+---
+
 ## Components
 
 ## DatePicker
@@ -450,6 +558,111 @@ Native selection menu with **modal** and **embedded** modes.
 
 ---
 
+## SegmentedControl
+
+Native segmented control using **UISegmentedControl** on iOS and **MaterialButtonToggleGroup** on Android.
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `segments` | `SegmentedControlSegment[]` | Array of segments to display |
+| `selectedValue` | `string \| null` | Currently selected segment's `value` |
+| `disabled` | `boolean` | Disables the entire control |
+| `onSelect` | `(value: string, index: number) => void` | Called when user selects a segment |
+
+### SegmentedControlSegment
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `label` | `string` | Display text for the segment |
+| `value` | `string` | Unique value returned in callbacks |
+| `disabled` | `boolean` | Disables this specific segment |
+| `icon` | `string` | Icon name (SF Symbol on iOS, drawable on Android) |
+
+### iOS Props (`ios`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `momentary` | `boolean` | If true, segments don't show selected state |
+| `apportionsSegmentWidthsByContent` | `boolean` | If true, segment widths are proportional to content |
+| `selectedSegmentTintColor` | `string` | Tint color for selected segment (hex string) |
+
+### Android Props (`android`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `selectionRequired` | `boolean` | If true, one segment must always be selected |
+
+### Icon Support
+
+Icons work the same as ContextMenu:
+- **iOS**: Use SF Symbol names (e.g., `'list.bullet'`, `'square.grid.2x2'`)
+- **Android**: Use drawable resource names (e.g., `'list_bullet'`, `'grid_view'`)
+
+---
+
+## LiquidGlass
+
+Native glass morphism effect using **UIGlassEffect** on iOS 26+. On Android and older iOS versions, renders as a regular View with optional fallback styling.
+
+> **Note:** LiquidGlass requires **iOS 26+** (Xcode 16+). On older iOS versions and Android, the component renders children without the glass effect. Use `isLiquidGlassSupported` to check availability and provide fallback UI.
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `cornerRadius` | `number` | Corner radius for the glass effect (default: `0`) |
+| `children` | `ReactNode` | Content to render inside the glass container |
+
+### iOS Props (`ios`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `effect` | `'clear' \| 'regular' \| 'none'` | Glass effect intensity (default: `'regular'`) |
+| `interactive` | `boolean` | Enable touch interaction feedback (default: `false`) |
+| `tintColor` | `string` | Overlay tint color (hex string) |
+| `colorScheme` | `'light' \| 'dark' \| 'system'` | Appearance mode (default: `'system'`) |
+| `shadowRadius` | `number` | Shadow/glow radius (default: `20`) |
+| `isHighlighted` | `boolean` | Manual highlight state control |
+
+### Android Props (`android`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `fallbackBackgroundColor` | `string` | Background color when glass effect unavailable |
+
+### Constants
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `isLiquidGlassSupported` | `boolean` | `true` on iOS 26+, `false` otherwise |
+
+### Effect Modes
+
+- **`'regular'`** (default): Standard glass blur intensity with full glass morphism effect
+- **`'clear'`**: More transparent, subtle glass effect
+- **`'none'`**: No glass effect (useful for animating materialization/dematerialization)
+
+### Platform Behavior
+
+| Platform | iOS 26+ | iOS < 26 | Android |
+|----------|---------|----------|---------|
+| Glass Effect | Full glass morphism | No effect | No effect |
+| Corner Radius | Applied | Applied | Applied |
+| Tint Color | Supported | Ignored | Ignored |
+| Interactive | Supported | Ignored | Ignored |
+| Fallback BG | N/A | Transparent | Configurable |
+
+### Usage Tips
+
+1. **Check support first**: Use `isLiquidGlassSupported` to conditionally render fallback UI
+2. **Background content**: Glass effects work best over images or colorful backgrounds
+3. **Interactive mode**: Only applies on mount; cannot be toggled after initial render
+4. **Android fallback**: Set `android.fallbackBackgroundColor` for a semi-transparent background
+
+---
+
 ## Design Philosophy
 
 - **Native first** — no JS re-implementation of pickers
@@ -554,6 +767,8 @@ const actions = [
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
+**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.
+
 ## License
 
 MIT

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

@@ -0,0 +1,84 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.GradientDrawable
+import android.view.View
+import android.widget.FrameLayout
+
+/**
+ * Android stub implementation for LiquidGlass.
+ *
+ * LiquidGlass is an iOS 26+ only feature. On Android, this component renders
+ * as a regular FrameLayout with optional fallback styling (background color, corner radius).
+ */
+class PCLiquidGlassView(context: Context) : FrameLayout(context) {
+
+    companion object {
+        private const val TAG = "PCLiquidGlass"
+    }
+
+    // --- Props ---
+    var cornerRadius: Float = 0f
+        set(value) {
+            field = value
+            updateBackground()
+        }
+
+    var fallbackBackgroundColor: String? = null
+        set(value) {
+            field = value
+            updateBackground()
+        }
+
+    init {
+        // Ensure children can be rendered
+        clipChildren = false
+        clipToPadding = false
+    }
+
+    private fun updateBackground() {
+        val bgColor = fallbackBackgroundColor?.let { parseColor(it) }
+
+        if (cornerRadius > 0 || bgColor != null) {
+            val drawable = GradientDrawable().apply {
+                shape = GradientDrawable.RECTANGLE
+                cornerRadii = FloatArray(8) { cornerRadius * resources.displayMetrics.density }
+                setColor(bgColor ?: Color.TRANSPARENT)
+            }
+            background = drawable
+            clipToOutline = cornerRadius > 0
+            outlineProvider = android.view.ViewOutlineProvider.BACKGROUND
+        } else {
+            background = null
+            clipToOutline = false
+        }
+    }
+
+    private fun parseColor(colorString: String): Int? {
+        return try {
+            var sanitized = colorString.trim()
+            if (!sanitized.startsWith("#")) {
+                sanitized = "#$sanitized"
+            }
+
+            // Handle #RRGGBBAA format (web/CSS style) by converting to #AARRGGBB (Android style)
+            if (sanitized.length == 9) {
+                val rrggbb = sanitized.substring(1, 7)
+                val aa = sanitized.substring(7, 9)
+                sanitized = "#$aa$rrggbb"
+            }
+
+            Color.parseColor(sanitized)
+        } catch (e: Exception) {
+            null
+        }
+    }
+
+    // ---- Measurement ----
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        // Standard FrameLayout measurement
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    }
+}

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

@@ -0,0 +1,52 @@
+package com.platformcomponents
+
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.PCLiquidGlassManagerDelegate
+import com.facebook.react.viewmanagers.PCLiquidGlassManagerInterface
+
+/**
+ * Android ViewManager for LiquidGlass.
+ *
+ * LiquidGlass is iOS-only, so this manager provides a stub implementation
+ * that renders a basic FrameLayout with optional fallback styling.
+ * Uses ViewGroupManager since LiquidGlass can contain children.
+ */
+class PCLiquidGlassViewManager :
+    ViewGroupManager<PCLiquidGlassView>(),
+    PCLiquidGlassManagerInterface<PCLiquidGlassView> {
+
+    companion object {
+        private const val TAG = "PCLiquidGlass"
+    }
+
+    private val delegate: ViewManagerDelegate<PCLiquidGlassView> =
+        PCLiquidGlassManagerDelegate(this)
+
+    override fun getName(): String = "PCLiquidGlass"
+
+    override fun getDelegate(): ViewManagerDelegate<PCLiquidGlassView> = delegate
+
+    override fun createViewInstance(reactContext: ThemedReactContext): PCLiquidGlassView {
+        return PCLiquidGlassView(reactContext)
+    }
+
+    override fun setCornerRadius(view: PCLiquidGlassView, value: Float) {
+        view.cornerRadius = value
+    }
+
+    override fun setIos(view: PCLiquidGlassView, value: ReadableMap?) {
+        // iOS props are ignored on Android
+    }
+
+    override fun setAndroid(view: PCLiquidGlassView, value: ReadableMap?) {
+        val fallbackColor = value?.let {
+            if (it.hasKey("fallbackBackgroundColor") && !it.isNull("fallbackBackgroundColor")) {
+                it.getString("fallbackBackgroundColor")
+            } else null
+        }
+        view.fallbackBackgroundColor = fallbackColor
+    }
+}