# reactnatively-glass

> Liquid Glass rendering engine for Reactnatively — blur, vibrancy, depth

Latest version **4.0.0** (published 2026-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactnatively-glass
pnpm add reactnatively-glass
yarn add reactnatively-glass
bun add reactnatively-glass
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2026-05-25 |
| First published | 2026-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 123.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Maintainers | hakifred |
| Keywords | react-native, expo, glass, liquid-glass, blur, vibrancy, glassmorphism, ui, design-system, typescript |

## Links

- npm: https://www.npmjs.com/package/reactnatively-glass
- Repository: https://github.com/hakizimana-fred/reactnatively
- Homepage: https://github.com/hakizimana-fred/reactnatively#readme
- Issues: https://github.com/hakizimana-fred/reactnatively/issues
- npm.io page: https://npm.io/package/reactnatively-glass

## Dependencies (3)

- [reactnatively-theme](https://npm.io/package/reactnatively-theme.md) 4.0.0
- [reactnatively-utils](https://npm.io/package/reactnatively-utils.md) 4.0.0
- [reactnatively-animations](https://npm.io/package/reactnatively-animations.md) 4.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2026-05-25
- 2.1.2 — 2026-05-17
- 2.1.0 — 2026-05-11
- 2.0.0 — 2026-05-11
- 1.0.0 — 2026-05-11
- 0.1.0 — 2026-05-09

## README

# reactnatively-glass

Glass rendering engine for Reactnatively.

## Install

Most apps should install the full framework:

```sh
npm install reactnatively
```

Install `reactnatively-glass` directly only when building a custom package on
top of the glass engine without the full component framework.

Most users should import glass APIs from `reactnatively`:

```tsx
import {
  GlassView,
  useGlassStyle,
  resolveGlass,
  GlassPlatformProvider,
} from 'reactnatively';
```

Power users can use the optional subpath:

```tsx
import { GlassView, resolveGlass } from 'reactnatively/glass';
```

## What It Provides

- `GlassView`: layered blur/tint/highlight/border rendering primitive
- `resolveGlass`: resolves elevation, variant, material, and color scheme into a render recipe
- `useGlassStyle`: glass style helper
- `GlassPlatformProvider`: global glass quality, power mode, reduced transparency, and blur budget policy
- Capability flags such as `SUPPORTS_BLUR`, `IS_NO_GLASS`, and `GLASS_CAPABILITY`

## GlassView

```tsx
<GlassView material="panel" priority="high" borderRadius={20} style={{ padding: 16 }}>
  <Text>Liquid glass</Text>
</GlassView>
```

Layer stack:

1. Shadow shell
2. Clip shell
3. Native blur when available
4. Tint overlay
5. Top-edge highlight
6. Border ring
7. Content

## Platform Policy

```tsx
<GlassPlatformProvider
  material={{ quality: 'balanced', powerMode: 'normal' }}
  budget={{ maxBlurSurfaces: 8, degradeStrategy: 'reduce-all-blur' }}
>
  <App />
</GlassPlatformProvider>
```

Most apps get this automatically through `ReactnativelyProvider`.

---
_Source: https://npm.io/package/reactnatively-glass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._