Glass Engine

BlurSurface

The semantic glass surface for everyday use. BlurSurface is a simplified wrapper around GlassView that exposes a focused subset of props — enough for cards, panels, overlays, and elevated surfaces without exposing low-level rendering knobs.

Architecture layer

GlassViewRendering primitive — raw 8-layer stack

reactnatively-glass

FrostPanelStructural layout — full-width panel

reactnatively-glass

BlurSurfaceSemantic material layer — simplified API

reactnatively (core)

When to use BlurSurface

Use BlurSurface when

Building a card, info panel, settings group, or elevated container
You want the standard glass look with minimal configuration
Content-sized surfaces (not full-width panels)

Use GlassView instead when

You need low-level control: blurOverride, tintOverride, highlight, priority, material
Building a custom glass component that extends the engine

Use FrostPanel instead when

Building a header, bottom sheet, sidebar, or any full-width anchored surface
You need selective border radius on specific edges

Import

typescript

import { BlurSurface } from 'reactnatively';

Usage

ProfileCard.tsx

1import { BlurSurface } from 'reactnatively';2import { Text, View } from 'react-native';34export function ProfileCard({ name, role }: { name: string; role: string }) {5  return (6    <BlurSurface7      elevation={2}8      borderRadius={20}9      style={{ margin: 16 }}10      contentStyle={{ padding: 20 }}11    >12      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>13        <View style={{14          width: 44, height: 44, borderRadius: 22,15          backgroundColor: 'rgba(139, 92, 246, 0.3)',16        }} />17        <View>18          <Text style={{ color: '#fff', fontSize: 16, fontWeight: '600' }}>{name}</Text>19          <Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13 }}>{role}</Text>20        </View>21      </View>22    </BlurSurface>23  );24}

Variant comparison

BlurSurfaceVariants.tsx

1import { BlurSurface } from 'reactnatively';2import { Text, View } from 'react-native';34const variants = ['ultraThin', 'surface', 'elevated', 'frosted'] as const;56export function VariantShowcase() {7  return (8    <View style={{ gap: 12, padding: 16 }}>9      {variants.map((variant) => (10        <BlurSurface11          key={variant}12          variant={variant}13          elevation={2}14          contentStyle={{ padding: 16 }}15        >16          <Text style={{ color: '#fff', fontWeight: '500' }}>{variant}</Text>17        </BlurSurface>18      ))}19    </View>20  );21}

Props

Prop	Type	Default	Description
elevation	0 \| 1 \| 2 \| 3 \| 4 \| 5	2	Glass depth level.
variant	'surface' \| 'frosted' \| 'elevated' \| 'ultraThin'	"surface"	Optical material variant.
borderRadius	number	16	Corner radius applied to all edges.
border	boolean	true	Show the subtle glass border ring.
borderWidth	number	1	Border width (clamped to 1px max).
glow	boolean	false	Enable a primary color ambient glow (iOS only).
style	StyleProp<ViewStyle>	undefined	Style applied to the outer container.
contentStyle	StyleProp<ViewStyle>	undefined	Style applied inside all glass layers.
children	ReactNode	undefined	Content rendered on top of the glass material.

Need more control? BlurSurface intentionally omits advanced props like blurOverride, tintOverride, priority, and material. Use GlassView directly for full access.

GlassView (full API)FrostPanel