On screens with width less than `768px`, `formSheet` is used to display as a bottom sheet.
When set to `transparentModal`, it displays as an overlay without a completely obscure background content. Detents and sheet grabber properties are not applied. This presentation is useful when building your own custom modal.
Similar to `transparentModal`, when set to `containedTransparentModal`, it displays as an overlay without a completely obscure background content. Detents and other properties are not applied. This presentation is useful when building your own custom modal. | -| `sheetAllowedDetents` | `number[]`, `'fitToContents'` | Snap positions as percentages (0.0-1.0) or automatic fitting. Only applies to screens with less than `768px` width. | -| `sheetGrabberVisible` | `boolean` | **On iOS, s**hows/hides the drag handle at the top of the sheet. Not supported on Android and web. We recommend using a custom sheet header component to imitate the grabber across all platforms. | -| `sheetCornerRadius` | `number` | Corner radius of the sheet in pixels. | -| `webModalStyle` | `WebModalStyle` | Special prop that allows web-specific styling options for fine-tuning modal appearance. | - -## Custom modal styling with `webModalStyle` - -> **info** **Note:** The `webModalStyle` properties only apply to web platforms. On mobile, the modal will automatically adapt to use sheet-like behavior for touch interaction. - -You can use `webModalStyle` to customize the dimensions and appearance of your modals on web. It provides the following properties for further customization: - -| Property | Type | Description | Default | -| ------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -| `width` | `number` `string` | Override the width of the modal (px or percentage). Only applies for web platform on a desktop. | `83vw` | -| `height` | `number` `string` | Override the height of the modal (px or percentage). Only applies for web platform on a desktop. | `79vh` | -| `minHeight` | `number` `string` | Minimum height of the desktop modal (px or percentage). Overrides the default iOS 26 sizing. | `min(586px, 79vh)` | -| `minWidth` | `number` `string` | Minimum width of the desktop modal (px or percentage). Overrides the default iOS 26 sizing. | `min(936px, 83vw)` | -| `border` | `string` | Override the border of the desktop modal (any valid CSS border value, for example, '1px solid #ccc' or 'none') | None | -| `overlayBackground` | `string` | Override the overlay background color (any valid CSS color or rgba/hsla value). | Semi-transparent black | -| `shadow` | `string` | Override the modal shadow filter (any valid CSS filter value, for example, 'drop-shadow(0 4px 8px rgba(0,0,0,0.1))' or 'none') | Drop-shadow filter | - -### Custom CSS properties - -Expo Router uses custom CSS properties to style modals, which you can override globally using `webModalStyle`. These variables provide fine-grained control over a modal's appearance. - -#### Width and height sizing variables - -```css -/* Default modal width (83vw on desktop, following iOS 26 specifications) */ ---expo-router-modal-width: 83vw; - -/* Maximum modal width (936px max, 83vw by default, following iOS 26) */ ---expo-router-modal-max-width: min(936px, 83vw); - -/* Minimum modal width (auto by default) */ ---expo-router-modal-min-width: auto; - -/* Default modal height (79vh, following iOS 26 specifications) */ ---expo-router-modal-height: 79vh; - -/* Minimum modal height (586px max, 79vh by default, following iOS 26) */ ---expo-router-modal-min-height: min(586px, 79vh); -``` - -#### Border and overlay styling variables - -```css -/* Modal border (none by default) */ ---expo-router-modal-border: none; - -/* Modal corner radius (24px by default, following iOS 26) */ ---expo-router-modal-border-radius: 24px; - -/* Modal shadow filter (drop-shadow by default) */ ---expo-router-modal-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) - drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); - -/* Overlay background color (25% black by default) */ ---expo-router-modal-overlay-background: rgba(0, 0, 0, 0.25); -``` - -#### How `webModalStyle` maps to CSS variables - -When you use `webModalStyle` to override any of the sizing variables, Expo Router automatically sets these CSS variables to the values you provide: - -```tsx -// This webModalStyle configuration -webModalStyle: { - width: 800, - height: 600, - border: '2px solid blue', - overlayBackground: 'rgba(0, 0, 0, 0.7)', - shadow: 'drop-shadow(0 8px 16px rgba(0,0,0,0.2))', -} - -// ...automatically sets these CSS variables: -// --expo-router-modal-width: 800px -// --expo-router-modal-height: 600px -// --expo-router-modal-border: 2px solid blue -// --expo-router-modal-overlay-background: rgba(0, 0, 0, 0.7) -// --expo-router-modal-shadow: drop-shadow(0 8px 16px rgba(0,0,0,0.2)) -``` - -## Common examples +```tsx src/components/WebModal.native.tsx +import type { ReactNode } from 'react'; -
-
- {device.buttons.map(button => (
-
- ))}
+ {image && activeSrc && (
+
+ )}
+
-
-
+
+
+ );
+}
diff --git a/docs/ui/components/PlatformTabs/PlatformTabs.tsx b/docs/ui/components/PlatformTabs/PlatformTabs.tsx
new file mode 100644
index 00000000000000..5c85384b7d0883
--- /dev/null
+++ b/docs/ui/components/PlatformTabs/PlatformTabs.tsx
@@ -0,0 +1,72 @@
+import { mergeClasses } from '@expo/styleguide';
+import { AndroidIcon } from '@expo/styleguide-icons/custom/AndroidIcon';
+import { AppleIcon } from '@expo/styleguide-icons/custom/AppleIcon';
+import { ComponentType, HTMLAttributes } from 'react';
+
+import { FOOTNOTE } from '~/ui/components/Text';
+
+import { type Platform } from './platform';
+
+const PLATFORM_LABEL: Record
+ {available.map(platform => {
+ const Icon = PLATFORM_ICON[platform];
+ const isActive = platform === active;
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/docs/ui/components/PlatformTabs/index.ts b/docs/ui/components/PlatformTabs/index.ts
new file mode 100644
index 00000000000000..cb994128327104
--- /dev/null
+++ b/docs/ui/components/PlatformTabs/index.ts
@@ -0,0 +1,4 @@
+export { PlatformSpotlight } from './PlatformSpotlight';
+export { PlatformTabs } from './PlatformTabs';
+export { PlatformTabsGroup, orderPlatforms, usePlatformSelection } from './platform';
+export type { Platform, PlatformImage } from './platform';
diff --git a/docs/ui/components/PlatformTabs/platform.tsx b/docs/ui/components/PlatformTabs/platform.tsx
new file mode 100644
index 00000000000000..7e7acdcdeb9969
--- /dev/null
+++ b/docs/ui/components/PlatformTabs/platform.tsx
@@ -0,0 +1,44 @@
+import { PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+
+export type Platform = 'android' | 'ios';
+
+export type PlatformImage = {
+ src: string;
+ darkSrc?: string;
+ alt: string;
+};
+
+const PLATFORM_ORDER: Platform[] = ['android', 'ios'];
+
+export const orderPlatforms = (images: Partial
- {children}
+ ref={tabsRef}
+ className={isAligned ? 'absolute right-0' : undefined}
+ style={isAligned ? { top } : undefined}>
+
+
+ {children}
+
+