react-native-platform-components 1.3.0 → 1.5.0

package/src/LiquidGlass.tsx

@@ -15,6 +15,11 @@ export type {
   LiquidGlassPressEvent,
 };
 
+/**
+ * Corner shape of the glass: `'capsule'`, `'concentric'`, or a fixed radius.
+ */
+export type LiquidGlassCornerStyle = 'capsule' | 'concentric' | number;
+
 function resolveLiquidGlassSupport(): boolean {
   if (Platform.OS !== 'ios') {
     return false;
@@ -50,6 +55,20 @@ export interface LiquidGlassProps extends ViewProps {
    */
   cornerRadius?: number;
 
+  /**
+   * Corner shape, set through `UIView.cornerConfiguration` on iOS 26.
+   * - `'capsule'`: fully rounded short sides that follow the view's size
+   *   (`.capsule()`). Half the shorter side elsewhere.
+   * - `'concentric'`: each corner concentric with the matching corner of the
+   *   enclosing shape, such as a parent `LiquidGlass` or the screen
+   *   (`.containerConcentric()`). `cornerRadius` is the minimum on iOS 26
+   *   and the radius elsewhere.
+   * - a number: a fixed radius, the same as `cornerRadius`.
+   *
+   * Default: `cornerRadius`.
+   */
+  cornerStyle?: LiquidGlassCornerStyle;
+
   /**
    * iOS-specific props for the glass effect.
    */
@@ -123,6 +142,7 @@ export function LiquidGlass(props: LiquidGlassProps): React.ReactElement {
   const {
     style,
     cornerRadius = 0,
+    cornerStyle,
     ios,
     android,
     children,
@@ -160,7 +180,10 @@ export function LiquidGlass(props: LiquidGlassProps): React.ReactElement {
   return (
     <NativeLiquidGlass
       style={style}
-      cornerRadius={cornerRadius}
+      cornerRadius={
+        typeof cornerStyle === 'number' ? cornerStyle : cornerRadius
+      }
+      cornerStyle={typeof cornerStyle === 'string' ? cornerStyle : ''}
       ios={nativeIos}
       android={nativeAndroid}
       onGlassPress={onPress ? handlePress : undefined}

package/src/LiquidGlassContainer.tsx

@@ -0,0 +1,42 @@
+// LiquidGlassContainer.tsx
+import React from 'react';
+import type { ViewProps } from 'react-native';
+
+import NativeLiquidGlassContainer from './LiquidGlassContainerNativeComponent';
+
+export interface LiquidGlassContainerProps extends ViewProps {
+  /**
+   * How far apart the `LiquidGlass` views inside can be and still merge
+   * (`UIGlassContainerEffect.spacing`); larger values blend glass across
+   * wider gaps. iOS 26 only.
+   *
+   * Default: the system's, 0 on iOS 26, where glass doesn't merge across
+   * gaps.
+   */
+  spacing?: number;
+
+  /**
+   * Content, with the `LiquidGlass` views that merge. They don't have to be
+   * direct children.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Groups `LiquidGlass` views so they render as one glass on iOS 26
+ * (`UIVisualEffectView` with a `UIGlassContainerEffect`): neighbours within
+ * `spacing` blend together, and glass that appears, disappears or changes
+ * frame morphs in and out of its neighbours. A plain container on Android,
+ * on older iOS and on web.
+ */
+export function LiquidGlassContainer(
+  props: LiquidGlassContainerProps
+): React.ReactElement {
+  const { spacing, children, ...viewProps } = props;
+
+  return (
+    <NativeLiquidGlassContainer spacing={spacing ?? -1} {...viewProps}>
+      {children}
+    </NativeLiquidGlassContainer>
+  );
+}

package/src/LiquidGlassContainerNativeComponent.ts

@@ -0,0 +1,17 @@
+// LiquidGlassContainerNativeComponent.ts
+import type { HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { Float, WithDefault } from './codegenTypes';
+
+export interface LiquidGlassContainerNativeProps extends ViewProps {
+  /**
+   * Distance between glass elements at which they begin to merge
+   * (UIGlassContainerEffect.spacing). Negative keeps the system default.
+   * @default -1
+   */
+  spacing?: WithDefault<Float, -1>;
+}
+
+export default codegenNativeComponent<LiquidGlassContainerNativeProps>(
+  'PCLiquidGlassContainer'
+) as HostComponent<LiquidGlassContainerNativeProps>;

package/src/LiquidGlassNativeComponent.ts

@@ -78,6 +78,14 @@ export interface LiquidGlassNativeProps extends ViewProps {
    */
   cornerRadius?: WithDefault<Float, 0>;
 
+  /**
+   * Corner shape: 'capsule' | 'concentric' | '' (the cornerRadius).
+   * On iOS 26 it maps to UIView.cornerConfiguration; elsewhere 'capsule'
+   * rounds to half the shorter side and 'concentric' uses cornerRadius.
+   * @default ''
+   */
+  cornerStyle?: WithDefault<string, ''>;
+
   /**
    * iOS-specific props.
    */

package/src/NavigationRail.tsx

@@ -0,0 +1,203 @@
+// NavigationRail.tsx
+import React, { useCallback, useMemo } from 'react';
+import {
+  StyleSheet,
+  View,
+  type ColorValue,
+  type NativeSyntheticEvent,
+  type ViewProps,
+} from 'react-native';
+
+import NativeNavigationRail, {
+  type NavigationRailSelectEvent,
+} from './NavigationRailNativeComponent';
+import type { Haptics } from './haptics';
+import { normalizeLabelStyle, type LabelStyle } from './labelStyle';
+import type { TabBarBadgeStyle, TabBarLabelVisibility } from './TabBar';
+import { toNativeTabItems, type TabBarItemProps } from './tabItems';
+
+/** The collapsed Material rail shows at most seven destinations. */
+const MAX_COLLAPSED_ITEMS = 7;
+
+/**
+ * A destination: the same item as a TabBar tab. `role: 'search'` gives a
+ * destination without an icon the search icon; `systemItem` is TabBar only.
+ */
+export type NavigationRailItemProps = TabBarItemProps;
+
+/**
+ * Where the destinations sit in the rail's height, below the header.
+ * Android: `NavigationRailView.setMenuGravity`.
+ */
+export type NavigationRailMenuGravity = 'top' | 'center' | 'bottom';
+
+export interface NavigationRailProps extends ViewProps {
+  /**
+   * The destinations. The collapsed Android rail shows seven; the expanded
+   * rail and the iOS fallback show all of them.
+   */
+  items: readonly NavigationRailItemProps[];
+
+  /** Selected destination's `value`; `null` for none. */
+  selectedValue: string | null;
+
+  /** Called when the user selects a destination. */
+  onSelect?: (value: string, index: number) => void;
+
+  /** Called when the user presses the destination that is already selected. */
+  onReselect?: (value: string, index: number) => void;
+
+  /**
+   * Haptic played when the user presses a destination, including the
+   * selected one (a reselect), as on TabBar. Default: none, like the native
+   * rail. See {@link Haptics}.
+   */
+  haptics?: Haptics;
+
+  /**
+   * How labels show. Default: `'auto'`, which labels every destination;
+   * `'selected'` labels only the selected one, `'unlabeled'` none.
+   */
+  labelVisibility?: TabBarLabelVisibility;
+
+  /**
+   * Where the destinations sit: at the top below the header (default), in
+   * the middle, or at the bottom.
+   */
+  menuGravity?: NavigationRailMenuGravity;
+
+  /**
+   * The expanded rail: wider, with the labels beside the icons. Changing it
+   * animates. Android: `NavigationRailView.expand()` / `collapse()`, the
+   * Material 3 Expressive expanded rail. iOS: the buttons put the icon
+   * before the label.
+   */
+  expanded?: boolean;
+
+  /**
+   * Shown above the destinations, usually a FloatingActionButton or a
+   * Button. Android: the rail's header view (`addHeaderView`).
+   */
+  header?: React.ReactNode;
+
+  /** Icon and label color of the selected destination. */
+  activeTintColor?: ColorValue;
+
+  /** Icon and label color of the other destinations. */
+  inactiveTintColor?: ColorValue;
+
+  /**
+   * Background of the rail. Default: the Material surface on Android, none
+   * on iOS.
+   */
+  railColor?: ColorValue;
+
+  /** Colors for the badges. */
+  badgeStyle?: TabBarBadgeStyle;
+
+  /** Label font. */
+  labelStyle?: LabelStyle;
+
+  /**
+   * Largest scale the labels may reach with the system font scale, as on
+   * `Text`. Unset or `0`: no cap.
+   */
+  maxFontSizeMultiplier?: number;
+
+  /** Android-specific configuration. */
+  android?: {
+    /** Color of the active indicator behind the selected icon. */
+    indicatorColor?: ColorValue;
+
+    /** Ripple shown while pressing a destination. */
+    rippleColor?: ColorValue;
+  };
+
+  /** Test identifier of the rail. */
+  testID?: string;
+}
+
+export function NavigationRail(props: NavigationRailProps): React.ReactElement {
+  const {
+    items,
+    selectedValue,
+    onSelect,
+    onReselect,
+    haptics,
+    labelVisibility,
+    menuGravity,
+    expanded,
+    header,
+    activeTintColor,
+    inactiveTintColor,
+    railColor,
+    badgeStyle,
+    labelStyle,
+    maxFontSizeMultiplier,
+    android,
+    ...viewProps
+  } = props;
+
+  if (__DEV__ && items.length > MAX_COLLAPSED_ITEMS) {
+    console.warn(
+      `NavigationRail: ${items.length} destinations given; the collapsed Material rail shows at most ${MAX_COLLAPSED_ITEMS}.`
+    );
+  }
+
+  // The expanded rail shows every destination
+  const nativeItems = useMemo(
+    () => toNativeTabItems(items, items.length),
+    [items]
+  );
+
+  const handleItemPress = useCallback(
+    (event: NativeSyntheticEvent<NavigationRailSelectEvent>) => {
+      const { index, value, reselected } = event.nativeEvent;
+      if (reselected === 'true') {
+        onReselect?.(value, index);
+      } else {
+        onSelect?.(value, index);
+      }
+    },
+    [onSelect, onReselect]
+  );
+
+  const nativeLabelStyle = useMemo(
+    () => normalizeLabelStyle(labelStyle),
+    [labelStyle]
+  );
+
+  return (
+    <NativeNavigationRail
+      items={nativeItems}
+      selectedValue={selectedValue ?? ''}
+      labelVisibility={labelVisibility ?? 'auto'}
+      menuGravity={menuGravity ?? 'top'}
+      expanded={expanded ? 'true' : 'false'}
+      activeTintColor={activeTintColor}
+      inactiveTintColor={inactiveTintColor}
+      railColor={railColor}
+      badgeBackgroundColor={badgeStyle?.backgroundColor}
+      badgeTextColor={badgeStyle?.color}
+      labelStyle={nativeLabelStyle}
+      maxFontSizeMultiplier={maxFontSizeMultiplier ?? 0}
+      androidIndicatorColor={android?.indicatorColor}
+      androidRippleColor={android?.rippleColor}
+      haptics={haptics ?? ''}
+      onItemPress={onSelect || onReselect ? handleItemPress : undefined}
+      {...viewProps}
+    >
+      {header ? (
+        // Native places the header; out of the flow, it leaves the rail's
+        // width to native
+        <View collapsable={false} style={styles.header}>
+          {header}
+        </View>
+      ) : null}
+    </NativeNavigationRail>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: { position: 'absolute', left: 0, top: 0 },
+});

package/src/NavigationRailNativeComponent.ts

@@ -0,0 +1,107 @@
+// NavigationRailNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type {
+  BubblingEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from './codegenTypes';
+
+/**
+ * A destination: the fields of a TabBar tab (see tabItems.ts). Icons are
+ * pre-resolved on the JS side (see icons.ts), the selected icon under the
+ * `selected…` fields; empty strings mean "none".
+ */
+export type NavigationRailItem = Readonly<{
+  label: string;
+  value: string;
+  disabled: string; // 'enabled' | 'disabled'
+  iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
+  iconName: string;
+  iconRequest: string;
+  iconUri: string;
+  iconScale: Double;
+  iconTinted: string; // 'true' | 'false'
+  selectedIconType: string;
+  selectedIconName: string;
+  selectedIconRequest: string;
+  selectedIconUri: string;
+  selectedIconScale: Double;
+  selectedIconTinted: string;
+  badge: string; // badge text, '' = no badge, ' ' = a dot
+  accessibilityLabel: string; // '' = the label
+  testID: string; // '' = none
+  role: string; // '' | 'search'
+  systemItem: string; // TabBar only; ignored
+}>;
+
+/** A press on a destination. `reselected` is 'true' when it was already selected. */
+export type NavigationRailSelectEvent = Readonly<{
+  index: Int32;
+  value: string;
+  reselected: string; // 'true' | 'false'
+}>;
+
+/** Label font. Empty strings / 0 mean "platform default". */
+export type NavigationRailLabelStyleProps = Readonly<{
+  fontFamily?: string;
+  fontSize?: Double;
+  fontWeight?: string;
+  fontStyle?: string;
+}>;
+
+export interface NavigationRailNativeProps extends ViewProps {
+  /** The destinations. */
+  items: ReadonlyArray<NavigationRailItem>;
+
+  /** Selected destination by value; '' = none. */
+  selectedValue?: WithDefault<string, ''>;
+
+  /** 'auto' | 'labeled' | 'selected' | 'unlabeled' */
+  labelVisibility?: string;
+
+  /** 'top' | 'center' | 'bottom' */
+  menuGravity?: string;
+
+  /** 'true' | 'false': the expanded rail (Android). */
+  expanded?: string;
+
+  /** Icon and label color of the selected destination. */
+  activeTintColor?: ColorValue;
+
+  /** Icon and label color of the other destinations. */
+  inactiveTintColor?: ColorValue;
+
+  /** Rail background. */
+  railColor?: ColorValue;
+
+  /** Badge colors. */
+  badgeBackgroundColor?: ColorValue;
+  badgeTextColor?: ColorValue;
+
+  /** Label font. */
+  labelStyle?: NavigationRailLabelStyleProps;
+
+  /** Largest font scale the labels may reach; 0 = no cap. */
+  maxFontSizeMultiplier?: Double;
+
+  /** Android: the active indicator behind the selected icon. */
+  androidIndicatorColor?: ColorValue;
+
+  /** Android: ripple shown while pressing a destination. */
+  androidRippleColor?: ColorValue;
+
+  /**
+   * Haptic played when a destination is pressed: '' (none added) | 'none' | 'selection' |
+   * 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error'
+   */
+  haptics?: string;
+
+  /** Fired when a destination is pressed. */
+  onItemPress?: BubblingEventHandler<NavigationRailSelectEvent>;
+}
+
+export default codegenNativeComponent<NavigationRailNativeProps>(
+  'PCNavigationRail'
+) as HostComponent<NavigationRailNativeProps>;

package/src/PlatformComponentsProvider.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { PlatformComponentsProviderProps } from './webComponents';
+
+export type {
+  PlatformComponentsProviderProps,
+  WebComponents,
+  WebComponentProps,
+} from './webComponents';
+
+/** Web registrations do not replace native controls on iOS or Android. */
+export function PlatformComponentsProvider({
+  children,
+}: PlatformComponentsProviderProps): React.ReactElement {
+  return <>{children}</>;
+}