react-native-platform-components 0.7.0 → 0.8.0

package/README.md

@@ -40,6 +40,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 +56,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
 
@@ -388,6 +397,42 @@ 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
@@ -557,6 +602,67 @@ Icons work the same as ContextMenu:
 
 ---
 
+## 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

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

package/ios/PCLiquidGlass.mm

@@ -0,0 +1,140 @@
+// PCLiquidGlass.mm
+
+#import "PCLiquidGlass.h"
+
+#import <React/RCTComponentViewFactory.h>
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+
+#import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+
+#if __has_include(<PlatformComponents/PlatformComponents-Swift.h>)
+#import <PlatformComponents/PlatformComponents-Swift.h>
+#else
+#import "PlatformComponents-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@implementation PCLiquidGlass {
+  PCLiquidGlassView *_view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<PCLiquidGlassComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _view = [[PCLiquidGlassView alloc] initWithEffect:nil];
+    self.contentView = _view;
+
+    // Set up press callback
+    __weak __typeof(self) weakSelf = self;
+    _view.onPressCallback = ^(CGFloat x, CGFloat y) {
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCLiquidGlassEventEmitter>(
+              strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      PCLiquidGlassEventEmitter::OnGlassPress payload = {
+          .x = (float)x,
+          .y = (float)y,
+      };
+      eventEmitter->onGlassPress(payload);
+    };
+  }
+  return self;
+}
+
+// Mount children into the UIVisualEffectView's contentView
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [_view.contentView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [childComponentView removeFromSuperview];
+}
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps {
+  const auto &newProps =
+      *std::static_pointer_cast<const PCLiquidGlassProps>(props);
+  const auto prevProps =
+      std::static_pointer_cast<const PCLiquidGlassProps>(oldProps);
+
+  BOOL needsSetup = NO;
+
+  // cornerRadius -> glassCornerRadius
+  if (!prevProps || newProps.cornerRadius != prevProps->cornerRadius) {
+    _view.glassCornerRadius = newProps.cornerRadius;
+  }
+
+  // iOS-specific props
+  const auto &newIos = newProps.ios;
+  const auto &oldIos = prevProps ? prevProps->ios : PCLiquidGlassIosStruct{};
+
+  // interactive - needs setup to re-create effect with isInteractive
+  if (!prevProps || newIos.interactive != oldIos.interactive) {
+    _view.interactive = (newIos.interactive == "true");
+    needsSetup = YES;
+  }
+
+  // effect -> effectStyle
+  if (!prevProps || newIos.effect != oldIos.effect) {
+    if (!newIos.effect.empty()) {
+      _view.effectStyle = [NSString stringWithUTF8String:newIos.effect.c_str()];
+    } else {
+      _view.effectStyle = @"regular";
+    }
+    needsSetup = YES;
+  }
+
+  // tintColor -> glassTintColor
+  if (!prevProps || newIos.tintColor != oldIos.tintColor) {
+    if (!newIos.tintColor.empty()) {
+      _view.glassTintColor = [NSString stringWithUTF8String:newIos.tintColor.c_str()];
+    } else {
+      _view.glassTintColor = nil;
+    }
+    needsSetup = YES;
+  }
+
+  // colorScheme
+  if (!prevProps || newIos.colorScheme != oldIos.colorScheme) {
+    if (!newIos.colorScheme.empty()) {
+      _view.colorScheme = [NSString stringWithUTF8String:newIos.colorScheme.c_str()];
+    } else {
+      _view.colorScheme = @"system";
+    }
+    needsSetup = YES;
+  }
+
+  // shadowRadius -> glassShadowRadius
+  if (!prevProps || newIos.shadowRadius != oldIos.shadowRadius) {
+    _view.glassShadowRadius = newIos.shadowRadius;
+  }
+
+  // isHighlighted
+  if (!prevProps || newIos.isHighlighted != oldIos.isHighlighted) {
+    _view.isHighlighted = (newIos.isHighlighted == "true");
+  }
+
+  // Apply glass effect if any glass-related props changed
+  if (needsSetup) {
+    [_view setupView];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> PCLiquidGlassCls(void) {
+  return PCLiquidGlass.class;
+}