Live Preview

The example app below runs directly in your browser via React Native Web. Every API surface is demonstrated — createComponent, variants, .extend(), .withSlots(), component groups, color mode, custom platforms, responsive hooks, theming, presets, and more.

Tip

Use the tabs at the bottom to navigate between sections. Tap any item on the Components tab to drill into a showcase screen.

Note

The preview runs the same source code as the native app — no stubs, no mocks. Behaviour on iOS and Android is identical; only platform-specific style overrides (_ios, _android) differ visually. Open DevTools to inspect React Native Web’s CSS output.

What’s showcased

Screen	APIs demonstrated
Static Styles	createComponent, _light, _dark, _ios, _android, _web
Variants	variants, compoundVariants, defaultVariants
.extend()	Style composition — BaseCard → ElevatedCard → FeaturedCard
.withSlots()	Compound component pattern — Card.Header / Body / Footer
Component Group	createComponentGroup — sibling components sharing reactive context
Color Mode	useColorMode, setColorScheme, toggleColorScheme, useColorModeValue
Custom Color Mode	configure({ colorModes }), setCustomColorMode, _sepia, _highContrast
Configure	configure({ platforms }), custom _tablet, _compact predicates
Media Query	useMediaQuery — width, orientation, prefers-color-scheme, resolution
Breakpoint Value	useBreakPointValue — responsive values across all breakpoints
Orientation	useOrientation
Theming	registerTheme, setTheme, useTheme, useThemeName — multi-theme switching
Multi-Theme	Named theme slots — default / ocean / sunset
Presets	elevation, shadow, inset, text, layout, border spread into components
Theme-Driven	createComponent + useTheme — token values as props, updates on theme switch
Color Utils	ColorUtils.getHexAlpha, getContrastColor, getContrastMode