react-native-platform-components 0.7.0 → 0.8.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-platform-components",
-  "version": "0.7.0",
-  "description": "Native UI components for React Native: DatePicker, ContextMenu, SelectionMenu, SegmentedControl.",
+  "version": "0.8.1",
+  "description": "Native UI components for React Native: DatePicker, ContextMenu, SelectionMenu, SegmentedControl, LiquidGlass.",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
   "types": "./lib/typescript/commonjs/src/index.d.ts",
@@ -73,7 +73,14 @@
     "dropdown",
     "native",
     "material-design",
-    "expo"
+    "expo",
+    "segmented-control",
+    "segmentedcontrol",
+    "tabs",
+    "segmented-buttons",
+    "segmentedbuttons",
+    "liquid-glass",
+    "liquidglass"
   ],
   "repository": {
     "type": "git",
@@ -158,7 +165,8 @@
         "PCSelectionMenu": "PCSelectionMenu",
         "PCDatePicker": "PCDatePicker",
         "PCContextMenu": "PCContextMenu",
-        "PCSegmentedControl": "PCSegmentedControl"
+        "PCSegmentedControl": "PCSegmentedControl",
+        "PCLiquidGlass": "PCLiquidGlass"
       }
     }
   },

package/src/LiquidGlass.tsx

@@ -0,0 +1,169 @@
+// LiquidGlass.tsx
+import React, { useCallback, useMemo } from 'react';
+import { Platform, type ViewProps } from 'react-native';
+
+import NativeLiquidGlass, {
+  type LiquidGlassColorScheme,
+  type LiquidGlassEffect,
+  type LiquidGlassPressEvent,
+} from './LiquidGlassNativeComponent';
+
+export type {
+  LiquidGlassEffect,
+  LiquidGlassColorScheme,
+  LiquidGlassPressEvent,
+};
+
+/**
+ * Whether the LiquidGlass effect is supported on the current device.
+ * Returns true on iOS 26+ (with Liquid Glass support), false otherwise.
+ *
+ * Use this to conditionally render fallback UI on unsupported devices.
+ */
+export const isLiquidGlassSupported: boolean =
+  Platform.OS === 'ios' && Number(Platform.Version) >= 26;
+
+export interface LiquidGlassProps extends ViewProps {
+  /**
+   * Corner radius for the glass effect.
+   * Applied uniformly to all corners.
+   * @default 0
+   */
+  cornerRadius?: number;
+
+  /**
+   * iOS-specific props for the glass effect.
+   */
+  ios?: {
+    /**
+     * Glass effect style.
+     * - 'clear': More transparent, subtle glass effect
+     * - 'regular': Standard blur intensity (default)
+     * - 'none': No glass effect (useful for animating materialization)
+     * @default 'regular'
+     */
+    effect?: LiquidGlassEffect;
+
+    /**
+     * Enables native touch interaction effects when pressing the view.
+     * When enabled, the glass effect responds to touch location with
+     * position-aware visual feedback (iOS 26+ UIGlassEffect.isInteractive).
+     *
+     * Note: Only applies on component mount; cannot be changed dynamically.
+     * @default false
+     */
+    interactive?: boolean;
+
+    /**
+     * Overlay tint color applied to the glass effect.
+     * Accepts any valid color value (hex, rgba, named colors).
+     *
+     * Example: '#FF0000', 'rgba(255, 0, 0, 0.5)', 'red'
+     */
+    tintColor?: string;
+
+    /**
+     * Appearance adaptation mode.
+     * - 'light': Force light appearance
+     * - 'dark': Force dark appearance
+     * - 'system': Follow system appearance (default)
+     * @default 'system'
+     */
+    colorScheme?: LiquidGlassColorScheme;
+
+    /**
+     * Shadow radius for the glass effect glow.
+     * Higher values create a more diffuse shadow.
+     * @default 20
+     */
+    shadowRadius?: number;
+
+    /**
+     * @deprecated Use `interactive` instead for native touch-based highlighting.
+     * This prop is a no-op on iOS 26+ where UIGlassEffect handles touch feedback.
+     * @default false
+     */
+    isHighlighted?: boolean;
+  };
+
+  /**
+   * Android-specific props.
+   * Note: LiquidGlass is an iOS-only effect. On Android, the component
+   * renders as a regular View with optional fallback styling.
+   */
+  android?: {
+    /**
+     * Fallback background color for Android since glass effect is not supported.
+     * If not provided, the view renders transparently.
+     */
+    fallbackBackgroundColor?: string;
+  };
+
+  /**
+   * Content to render inside the glass effect container.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Called when the glass view is pressed.
+   * Includes touch coordinates relative to the view bounds.
+   */
+  onPress?: (event: { x: number; y: number }) => void;
+
+  /** Test identifier */
+  testID?: string;
+}
+
+export function LiquidGlass(props: LiquidGlassProps): React.ReactElement {
+  const {
+    style,
+    cornerRadius = 0,
+    ios,
+    android,
+    children,
+    onPress,
+    ...viewProps
+  } = props;
+
+  // Normalize iOS props for native layer (strings for codegen)
+  const nativeIos = useMemo(() => {
+    if (Platform.OS !== 'ios' || !ios) return undefined;
+    return {
+      effect: ios.effect,
+      interactive: ios.interactive ? 'true' : 'false',
+      tintColor: ios.tintColor,
+      colorScheme: ios.colorScheme,
+      shadowRadius: ios.shadowRadius,
+      isHighlighted: ios.isHighlighted ? 'true' : 'false',
+    };
+  }, [ios]);
+
+  // Normalize Android props
+  const nativeAndroid = useMemo(() => {
+    if (Platform.OS !== 'android' || !android) return undefined;
+    return {
+      fallbackBackgroundColor: android.fallbackBackgroundColor,
+    };
+  }, [android]);
+
+  // Handle native press event
+  const handlePress = useCallback(
+    (event: { nativeEvent: { x: number; y: number } }) => {
+      onPress?.({ x: event.nativeEvent.x, y: event.nativeEvent.y });
+    },
+    [onPress]
+  );
+
+  return (
+    <NativeLiquidGlass
+      style={style}
+      cornerRadius={cornerRadius}
+      ios={nativeIos}
+      android={nativeAndroid}
+      onGlassPress={onPress ? handlePress : undefined}
+      {...viewProps}
+    >
+      {children}
+    </NativeLiquidGlass>
+  );
+}

package/src/LiquidGlassNativeComponent.ts

@@ -0,0 +1,110 @@
+// LiquidGlassNativeComponent.ts
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * Glass effect intensity/style.
+ * - 'clear': More transparent, subtle glass effect
+ * - 'regular': Standard blur intensity (default)
+ * - 'none': No glass effect (useful for animating materialization)
+ */
+export type LiquidGlassEffect = 'clear' | 'regular' | 'none';
+
+/**
+ * Color scheme for the glass effect.
+ * - 'light': Force light appearance
+ * - 'dark': Force dark appearance
+ * - 'system': Follow system appearance (default)
+ */
+export type LiquidGlassColorScheme = 'light' | 'dark' | 'system';
+
+/**
+ * iOS-specific configuration.
+ */
+export type LiquidGlassIOSProps = Readonly<{
+  /**
+   * Glass effect style.
+   * @default 'regular'
+   */
+  effect?: string; // LiquidGlassEffect
+
+  /**
+   * Enables touch interaction effects when pressing the view.
+   * Note: Only applies on component mount; cannot be changed dynamically.
+   * @default false
+   */
+  interactive?: string; // 'true' | 'false'
+
+  /**
+   * Overlay tint color applied to the glass effect.
+   * Accepts hex color strings (e.g., '#FF0000', '#FF000080').
+   */
+  tintColor?: string;
+
+  /**
+   * Appearance adaptation mode.
+   * @default 'system'
+   */
+  colorScheme?: string; // LiquidGlassColorScheme
+
+  /**
+   * Shadow radius for the glass effect.
+   * @default 20
+   */
+  shadowRadius?: CodegenTypes.Float;
+
+  /**
+   * Whether the view is highlighted (pressed state).
+   */
+  isHighlighted?: string; // 'true' | 'false'
+}>;
+
+/**
+ * Android-specific configuration (stub - LiquidGlass is iOS only).
+ */
+export type LiquidGlassAndroidProps = Readonly<{
+  /**
+   * Fallback background color for Android (since glass effect is not supported).
+   * If not provided, renders as transparent.
+   */
+  fallbackBackgroundColor?: string;
+}>;
+
+/**
+ * Event emitted when the glass view is pressed.
+ */
+export type LiquidGlassPressEvent = Readonly<{
+  /** X coordinate of touch relative to view bounds */
+  x: CodegenTypes.Float;
+  /** Y coordinate of touch relative to view bounds */
+  y: CodegenTypes.Float;
+}>;
+
+export interface LiquidGlassNativeProps extends ViewProps {
+  /**
+   * Corner radius for the glass effect.
+   * Applied uniformly to all corners.
+   * @default 0
+   */
+  cornerRadius?: CodegenTypes.WithDefault<CodegenTypes.Float, 0>;
+
+  /**
+   * iOS-specific props.
+   */
+  ios?: LiquidGlassIOSProps;
+
+  /**
+   * Android-specific props.
+   */
+  android?: LiquidGlassAndroidProps;
+
+  /**
+   * Fired when the glass view is pressed.
+   * Includes touch coordinates relative to view bounds.
+   */
+  onGlassPress?: CodegenTypes.DirectEventHandler<LiquidGlassPressEvent>;
+}
+
+export default codegenNativeComponent<LiquidGlassNativeProps>(
+  'PCLiquidGlass'
+) as HostComponent<LiquidGlassNativeProps>;

package/src/index.tsx

@@ -2,4 +2,5 @@ export * from './DatePicker';
 export * from './SelectionMenu';
 export * from './ContextMenu';
 export * from './SegmentedControl';
+export * from './LiquidGlass';
 export * from './sharedTypes';