react-native-platform-components 0.7.0 → 0.8.1

package/README.md

@@ -7,6 +7,8 @@ High-quality **native UI components for React Native**, implemented with platfor
 
 This library focuses on **true native behavior**, not JavaScript re-implementations.
 
+**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.
+
 <table>
   <tr>
     <td align="center"><strong>iOS DatePicker</strong></td>
@@ -40,6 +42,14 @@ This library focuses on **true native behavior**, not JavaScript re-implementati
     <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
@@ -48,6 +58,7 @@ This library focuses on **true native behavior**, not JavaScript re-implementati
 - **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
 
@@ -106,12 +117,11 @@ eas build --platform android
 **Config Plugin:**
 
 Add to your `app.json`:
+
 ```json
 {
   "expo": {
-    "plugins": [
-      ["react-native-platform-components/app.plugin", {}]
-    ]
+    "plugins": [["react-native-platform-components/app.plugin", {}]]
   }
 }
 ```
@@ -124,18 +134,20 @@ For a complete working example, see the [`example-expo/`](./example-expo) direct
 
 This library is built for the **React Native New Architecture** (Fabric + TurboModules).
 
-| Feature | Status |
-|---------|--------|
-| Fabric (New Renderer) | Supported |
-| Codegen | Used for type-safe native bindings |
-| TurboModules | N/A (view components only) |
-| Old Architecture | Not supported |
+| Feature               | Status                             |
+| --------------------- | ---------------------------------- |
+| Fabric (New Renderer) | Supported                          |
+| Codegen               | Used for type-safe native bindings |
+| TurboModules          | N/A (view components only)         |
+| Old Architecture      | Not supported                      |
 
 **Tested with:**
+
 - React Native 0.81+ (bare and Expo)
 - Expo SDK 54+
 
 **Requirements:**
+
 - New Architecture must be enabled in your app
 - For bare React Native: set `newArchEnabled=true` in `gradle.properties` (Android) and use the `RCT_NEW_ARCH_ENABLED` flag (iOS)
 - For Expo: set `"newArchEnabled": true` in `app.json`
@@ -167,8 +179,8 @@ export function Example() {
           setVisible(false);
         }}
         onClosed={() => setVisible(false)}
-        ios={{preferredStyle: 'inline'}}
-        android={{material: 'system'}}
+        ios={{ preferredStyle: 'inline' }}
+        android={{ material: 'system' }}
       />
     </>
   );
@@ -189,8 +201,8 @@ export function Example() {
       presentation="embedded"
       mode="date"
       onConfirm={(d) => setDate(d)}
-      ios={{preferredStyle: 'inline'}}
-      android={{material: 'system'}}
+      ios={{ preferredStyle: 'inline' }}
+      android={{ material: 'system' }}
     />
   );
 }
@@ -230,7 +242,9 @@ export function Example() {
       ]}
       onPressAction={(id, title) => setLastAction(title)}
     >
-      <View style={{ padding: 20, backgroundColor: '#E8F4FD', borderRadius: 8 }}>
+      <View
+        style={{ padding: 20, backgroundColor: '#E8F4FD', borderRadius: 8 }}
+      >
         <Text>Long-press me</Text>
       </View>
     </ContextMenu>
@@ -388,6 +402,54 @@ export function Example() {
 
 ---
 
+### 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
@@ -396,37 +458,37 @@ Native date & time picker using **platform system pickers**.
 
 ### Props
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `date` | `Date \| null` | Controlled date value |
-| `minDate` | `Date \| null` | Minimum selectable date |
-| `maxDate` | `Date \| null` | Maximum selectable date |
-| `locale` | `string` | Locale identifier (e.g., `'en-US'`) |
-| `timeZoneName` | `string` | Time zone identifier |
-| `mode` | `'date' \| 'time' \| 'dateAndTime' \| 'countDownTimer'` | Picker mode |
-| `presentation` | `'modal' \| 'embedded'` | Presentation style |
-| `visible` | `boolean` | Controls modal visibility (modal mode only) |
-| `onConfirm` | `(date: Date) => void` | Called when user confirms selection |
-| `onClosed` | `() => void` | Called when modal is dismissed |
+| Prop           | Type                                                    | Description                                 |
+| -------------- | ------------------------------------------------------- | ------------------------------------------- |
+| `date`         | `Date \| null`                                          | Controlled date value                       |
+| `minDate`      | `Date \| null`                                          | Minimum selectable date                     |
+| `maxDate`      | `Date \| null`                                          | Maximum selectable date                     |
+| `locale`       | `string`                                                | Locale identifier (e.g., `'en-US'`)         |
+| `timeZoneName` | `string`                                                | Time zone identifier                        |
+| `mode`         | `'date' \| 'time' \| 'dateAndTime' \| 'countDownTimer'` | Picker mode                                 |
+| `presentation` | `'modal' \| 'embedded'`                                 | Presentation style                          |
+| `visible`      | `boolean`                                               | Controls modal visibility (modal mode only) |
+| `onConfirm`    | `(date: Date) => void`                                  | Called when user confirms selection         |
+| `onClosed`     | `() => void`                                            | Called when modal is dismissed              |
 
 ### iOS Props (`ios`)
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `preferredStyle` | `'automatic' \| 'compact' \| 'inline' \| 'wheels'` | iOS date picker style |
-| `countDownDurationSeconds` | `number` | Duration for countdown timer mode |
-| `minuteInterval` | `number` | Minute interval (1-30) |
-| `roundsToMinuteInterval` | `'inherit' \| 'round' \| 'noRound'` | Rounding behavior |
+| Prop                       | Type                                               | Description                       |
+| -------------------------- | -------------------------------------------------- | --------------------------------- |
+| `preferredStyle`           | `'automatic' \| 'compact' \| 'inline' \| 'wheels'` | iOS date picker style             |
+| `countDownDurationSeconds` | `number`                                           | Duration for countdown timer mode |
+| `minuteInterval`           | `number`                                           | Minute interval (1-30)            |
+| `roundsToMinuteInterval`   | `'inherit' \| 'round' \| 'noRound'`                | Rounding behavior                 |
 
 ### Android Props (`android`)
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `firstDayOfWeek` | `number` | First day of week (1-7, Sunday=1) |
-| `material` | `'system' \| 'm3'` | Material Design style (modal only; embedded always uses system picker) |
-| `dialogTitle` | `string` | Custom dialog title |
-| `positiveButtonTitle` | `string` | Custom confirm button text |
-| `negativeButtonTitle` | `string` | Custom cancel button text |
+| Prop                  | Type               | Description                                                            |
+| --------------------- | ------------------ | ---------------------------------------------------------------------- |
+| `firstDayOfWeek`      | `number`           | First day of week (1-7, Sunday=1)                                      |
+| `material`            | `'system' \| 'm3'` | Material Design style (modal only; embedded always uses system picker) |
+| `dialogTitle`         | `string`           | Custom dialog title                                                    |
+| `positiveButtonTitle` | `string`           | Custom confirm button text                                             |
+| `negativeButtonTitle` | `string`           | Custom cancel button text                                              |
 
 ---
 
@@ -436,42 +498,42 @@ Native context menu that wraps content and responds to **long-press** or **tap**
 
 ### Props
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `title` | `string` | Menu title (shown as header on iOS) |
-| `actions` | `ContextMenuAction[]` | Array of menu actions |
-| `disabled` | `boolean` | Disables the menu |
-| `trigger` | `'longPress' \| 'tap'` | How the menu opens (default: `'longPress'`) |
-| `onPressAction` | `(actionId, actionTitle) => void` | Called when user selects an action |
-| `onMenuOpen` | `() => void` | Called when menu opens |
-| `onMenuClose` | `() => void` | Called when menu closes |
-| `children` | `ReactNode` | Content to wrap (required) |
+| Prop            | Type                              | Description                                 |
+| --------------- | --------------------------------- | ------------------------------------------- |
+| `title`         | `string`                          | Menu title (shown as header on iOS)         |
+| `actions`       | `ContextMenuAction[]`             | Array of menu actions                       |
+| `disabled`      | `boolean`                         | Disables the menu                           |
+| `trigger`       | `'longPress' \| 'tap'`            | How the menu opens (default: `'longPress'`) |
+| `onPressAction` | `(actionId, actionTitle) => void` | Called when user selects an action          |
+| `onMenuOpen`    | `() => void`                      | Called when menu opens                      |
+| `onMenuClose`   | `() => void`                      | Called when menu closes                     |
+| `children`      | `ReactNode`                       | Content to wrap (required)                  |
 
 ### ContextMenuAction
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `id` | `string` | Unique identifier returned in callbacks |
-| `title` | `string` | Display text |
-| `subtitle` | `string` | Secondary text (iOS only) |
-| `image` | `string` | Icon name (SF Symbol on iOS, drawable on Android) |
-| `imageColor` | `string` | Tint color for the icon (hex string) |
-| `attributes` | `{ destructive?, disabled?, hidden? }` | Action attributes |
-| `state` | `'off' \| 'on' \| 'mixed'` | Checkmark state |
-| `subactions` | `ContextMenuAction[]` | Nested actions for submenu |
+| Property     | Type                                   | Description                                       |
+| ------------ | -------------------------------------- | ------------------------------------------------- |
+| `id`         | `string`                               | Unique identifier returned in callbacks           |
+| `title`      | `string`                               | Display text                                      |
+| `subtitle`   | `string`                               | Secondary text (iOS only)                         |
+| `image`      | `string`                               | Icon name (SF Symbol on iOS, drawable on Android) |
+| `imageColor` | `string`                               | Tint color for the icon (hex string)              |
+| `attributes` | `{ destructive?, disabled?, hidden? }` | Action attributes                                 |
+| `state`      | `'off' \| 'on' \| 'mixed'`             | Checkmark state                                   |
+| `subactions` | `ContextMenuAction[]`                  | Nested actions for submenu                        |
 
 ### iOS Props (`ios`)
 
-| Prop | Type | Description |
-|------|------|-------------|
+| Prop            | Type      | Description                       |
+| --------------- | --------- | --------------------------------- |
 | `enablePreview` | `boolean` | Enable preview when long-pressing |
 
 ### Android Props (`android`)
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `anchorPosition` | `'left' \| 'right'` | Anchor position for the popup menu |
-| `visible` | `boolean` | Programmatic visibility control (Android only) |
+| Prop             | Type                | Description                                    |
+| ---------------- | ------------------- | ---------------------------------------------- |
+| `anchorPosition` | `'left' \| 'right'` | Anchor position for the popup menu             |
+| `visible`        | `boolean`           | Programmatic visibility control (Android only) |
 
 ### Trigger Modes
 
@@ -492,17 +554,17 @@ Native selection menu with **modal** and **embedded** modes.
 
 ### Props
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `options` | `{ label: string; data: string }[]` | Array of options to display |
-| `selected` | `string \| null` | Currently selected option's `data` value |
-| `disabled` | `boolean` | Disables the menu |
-| `placeholder` | `string` | Placeholder text when no selection |
-| `presentation` | `'modal' \| 'embedded'` | Presentation mode (default: `'modal'`) |
-| `visible` | `boolean` | Controls modal mode menu visibility |
-| `onSelect` | `(data, label, index) => void` | Called when user selects an option |
-| `onRequestClose` | `() => void` | Called when menu is dismissed without selection |
-| `android.material` | `'system' \| 'm3'` | Material Design style preference |
+| Prop               | Type                                | Description                                     |
+| ------------------ | ----------------------------------- | ----------------------------------------------- |
+| `options`          | `{ label: string; data: string }[]` | Array of options to display                     |
+| `selected`         | `string \| null`                    | Currently selected option's `data` value        |
+| `disabled`         | `boolean`                           | Disables the menu                               |
+| `placeholder`      | `string`                            | Placeholder text when no selection              |
+| `presentation`     | `'modal' \| 'embedded'`             | Presentation mode (default: `'modal'`)          |
+| `visible`          | `boolean`                           | Controls modal mode menu visibility             |
+| `onSelect`         | `(data, label, index) => void`      | Called when user selects an option              |
+| `onRequestClose`   | `() => void`                        | Called when menu is dismissed without selection |
+| `android.material` | `'system' \| 'm3'`                  | Material Design style preference                |
 
 ### Modes
 
@@ -519,44 +581,106 @@ Native segmented control using **UISegmentedControl** on iOS and **MaterialButto
 
 ### 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 |
+| 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) |
+| 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 |
+| 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) |
+| `selectedSegmentTintColor`         | `string`  | Tint color for selected segment (hex string)        |
 
 ### Android Props (`android`)
 
-| Prop | Type | Description |
-|------|------|-------------|
+| 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
@@ -588,11 +712,11 @@ Use [SF Symbols](https://developer.apple.com/sf-symbols/) names. These are built
 
 ```tsx
 // Common SF Symbols
-image: 'doc.on.doc'        // Copy
-image: 'square.and.arrow.up' // Share
-image: 'trash'             // Delete
-image: 'pencil'            // Edit
-image: 'checkmark.circle'  // Checkmark
+image: 'doc.on.doc'; // Copy
+image: 'square.and.arrow.up'; // Share
+image: 'trash'; // Delete
+image: 'pencil'; // Edit
+image: 'checkmark.circle'; // Checkmark
 ```
 
 Browse available symbols using Apple's SF Symbols app or [sfsymbols.com](https://sfsymbols.com).
@@ -603,9 +727,9 @@ Use drawable resource names from your app's `res/drawable` directory. You must a
 
 ```tsx
 // Reference drawable by name (without extension)
-image: 'content_copy'  // res/drawable/content_copy.xml
-image: 'share'         // res/drawable/share.xml
-image: 'delete'        // res/drawable/delete.xml
+image: 'content_copy'; // res/drawable/content_copy.xml
+image: 'share'; // res/drawable/share.xml
+image: 'delete'; // res/drawable/delete.xml
 ```
 
 **Adding drawable resources:**
@@ -666,3 +790,15 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 ## License
 
 MIT
+
+---
+
+## Author
+
+**Andrew Tosh** — Santa Barbara, California
+
+Full-stack developer with deep experience across entertainment and defense industries, specializing in simulation, visualization, and cross-platform mobile development. Technical focus areas include React Native, Rust, C++, real-time 3D visualization, and game engine technologies.
+
+**Available for contract work** — Always interested in connecting with new clients for mobile development, visualization systems, and related projects. Hit me up at [andrew.tosh@jarxconcepts.com](mailto:andrew.tosh@jarxconcepts.com).
+
+[LinkedIn](https://www.linkedin.com/in/atosh/) · [JarX Concepts](https://github.com/JarX-Concepts)

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
+    }
+}

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

@@ -15,6 +15,7 @@ class PlatformComponentsViewPackage : ReactPackage {
           PCDatePickerViewManager(),
           PCContextMenuViewManager(),
           PCSegmentedControlViewManager(),
+          PCLiquidGlassViewManager(),
       )
   }
 

package/ios/PCLiquidGlass.h

@@ -0,0 +1,10 @@
+// PCLiquidGlass.h
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface PCLiquidGlass : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END