Material Provider

GlassPlatformProvider is the global policy controller for the glass rendering engine. It governs quality level, power mode, and how many blur surfaces can be active simultaneously before the engine degrades or disables blur.

Import

typescript

import { GlassPlatformProvider } from 'reactnatively/glass';
// or
import { GlassPlatformProvider } from 'reactnatively';

Basic usage

Place it at the root of your app, inside ReactnativelyProvider already wraps this automatically. Only use it standalone when you need a separate glass budget for a nested section of your UI.

app/_layout.tsx

1import { GlassPlatformProvider } from 'reactnatively/glass';23export default function RootLayout() {4  return (5    <GlassPlatformProvider6      material={{7        quality: 'balanced',   // 'full' | 'balanced' | 'efficient' | 'off'8        powerMode: 'normal',   // 'normal' | 'save'9      }}10      budget={{11        maxBlurSurfaces: 8,12        degradeStrategy: 'reduce-all-blur', // or 'disable-low-priority-blur'13      }}14    >15      <App />16    </GlassPlatformProvider>17  );18}

Material policy props

Prop	Type	Default	Description
quality	'full' \| 'balanced' \| 'efficient' \| 'off'	"balanced"	Global blur quality scalar. full=100%, balanced=82%, efficient=55%, off=0%.
powerMode	'normal' \| 'save'	"normal"	Save mode reduces all blur by 32% to cut GPU cost.
tintDensity	number	1	Multiplier for tint opacity across all glass surfaces (0–2).
reduceTransparency	boolean	false	When true, disables all blur and uses solid surfaces (mirrors system accessibility setting).
nestedGlassIntensity	number	0.72	Blur intensity multiplier for glass surfaces nested inside other glass surfaces.

Budget policy props

Prop	Type	Default	Description
maxBlurSurfaces	number	8	Maximum simultaneous blur surfaces before the degrade strategy kicks in. critical/high priority surfaces are always allowed.
degradeStrategy	'disable-low-priority-blur' \| 'reduce-all-blur'	"reduce-all-blur"	How to respond when the budget is exceeded. disable-low-priority-blur removes blur from low/normal priority surfaces. reduce-all-blur scales down intensity proportionally.

Hooks

typescript

import { useGlassPlatform, useBlurSurfaceBudget } from 'reactnatively/glass';

// Read the full platform context
const { material, budget, activeBlurSurfaces, adjustBlur, canUseBlur } = useGlassPlatform();

// Automatically register + deregister a blur surface; returns whether blur is allowed
const withinBudget = useBlurSurfaceBudget('normal'); // priority: 'low' | 'normal' | 'high' | 'critical'

Surface priority

Pass a priority prop to any GlassView to control how the budget system treats it:

tsx

// This surface's blur is always preserved, even over budget
<GlassView elevation={4} priority="critical" style={{ padding: 24 }}>
  <Text>Modal — always blurred</Text>
</GlassView>

// Background card — first to lose blur when over budget
<GlassView elevation={2} priority="low" style={{ padding: 16 }}>
  <Text>Background card</Text>
</GlassView>

Performance guide

recommended

Keep maxBlurSurfaces ≤ 8 for 60 fps on mid-range devices.

android

Use quality="efficient" on Android to reduce blur intensity by 45%.

adaptive

Set powerMode="save" when detecting low battery or thermal throttling.

recommended

Use priority="low" on decorative background surfaces so they degrade first.

tip

elevation={0} is free — it renders no blur and no shadow.

GlassView API Capability detection