Glass Engine

FrostPanel

A full-width glass panel built on top of GlassView. Unlike GlassView (which sizes to its content), FrostPanel fills its parent container horizontally and supports selective border radius via the edges prop — making it ideal for headers, footers, bottom sheets, and sidebars.

Architecture layer

reactnatively-glass

GlassViewRendering primitive — raw 8-layer stack

FrostPanelStructural layer — full-width panel with edge control

Import

typescript

import { FrostPanel } from 'reactnatively';
// or for narrower imports:
import { FrostPanel } from 'reactnatively/glass';

Usage

AppHeader.tsx

1import { FrostPanel } from 'reactnatively';2import { Text, View } from 'react-native';3import { useSafeAreaInsets } from 'react-native-safe-area-context';45export function AppHeader({ title }: { title: string }) {6  const { top } = useSafeAreaInsets();78  return (9    <FrostPanel10      elevation={3}11      edges={['bottom']}           // round bottom corners, flat top12      style={{ paddingTop: top }}  // absorb safe area13      contentStyle={{ padding: 16, flexDirection: 'row', alignItems: 'center' }}14    >15      <Text style={{ color: '#fff', fontSize: 17, fontWeight: '600' }}>16        {title}17      </Text>18    </FrostPanel>19  );20}

Bottom sheet panel

BottomSheetPanel.tsx

1import { FrostPanel } from 'reactnatively';2import { Text } from 'react-native';3import { useSafeAreaInsets } from 'react-native-safe-area-context';45export function BottomPanel() {6  const { bottom } = useSafeAreaInsets();78  return (9    <FrostPanel10      elevation={4}11      edges={['top']}              // round top corners, flat bottom12      style={{ paddingBottom: bottom }}13      contentStyle={{ padding: 24 }}14    >15      <Text style={{ color: '#fff', fontSize: 15, marginBottom: 16 }}>16        Quick actions17      </Text>18      {/* action list here */}19    </FrostPanel>20  );21}

Props

Prop	Type	Default	Description
elevation	0 \| 1 \| 2 \| 3 \| 4 \| 5	3	Glass depth level. FrostPanel defaults to 3 (floating panel depth).
variant	'ultraThin' \| 'thin' \| 'surface' \| 'elevated' \| 'overlay' \| 'frosted' \| 'tinted'	"surface"	Optical material variant — controls diffusion and sheen character.
edges	('top' \| 'bottom' \| 'left' \| 'right')[]	undefined	Which edges get border radius. Omit for full radius. Use ["top"] for a bottom sheet panel.
borderRadius	number	20	Radius applied to the edges listed in the edges prop (or all edges when edges is omitted).
border	boolean	true	Show the subtle glass border ring.
borderWidth	number	1	Border width (clamped to 1px max by the engine).
highlight	boolean \| 'none' \| 'subtle' \| 'medium' \| 'strong' \| 'intense'	true	Top-edge sheen intensity.
blurOverride	number	undefined	Override the blur amount from the elevation recipe.
tintOverride	string	undefined	Override the tint color (rgba string).
glow	{ color: string; radius?: number; opacity?: number } \| false	undefined	Ambient glow emitted from the panel (iOS only).
priority	'low' \| 'normal' \| 'high' \| 'critical'	"normal"	Blur budget priority.
style	StyleProp<ViewStyle>	undefined	Applied to the outer panel view — FrostPanel fills width by default.
contentStyle	StyleProp<ViewStyle>	undefined	Applied to the content container inside all glass layers.
children	ReactNode	undefined	Content rendered inside the panel.

FrostPanel vs GlassView

	GlassView	FrostPanel
Width	Sizes to content	Fills container (width: 100%)
Radius control	Single borderRadius prop	Per-edge radius via edges prop
Default elevation	2	3
Use case	Cards, overlays, inline surfaces	Headers, bottom sheets, sidebars, footers

GlassView BlurSurface