https://github.com/tschoffelen/react-native-glass-effect-view
A native liquid glass view for iOS, with fallbacks for older versions and Android.
https://github.com/tschoffelen/react-native-glass-effect-view
liquid-glass react-native
Last synced: 5 months ago
JSON representation
A native liquid glass view for iOS, with fallbacks for older versions and Android.
- Host: GitHub
- URL: https://github.com/tschoffelen/react-native-glass-effect-view
- Owner: tschoffelen
- License: mit
- Created: 2025-06-18T20:47:48.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-05T19:27:21.000Z (9 months ago)
- Last Synced: 2026-01-17T18:11:58.849Z (6 months ago)
- Topics: liquid-glass, react-native
- Language: TypeScript
- Homepage:
- Size: 3.45 MB
- Stars: 39
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-glass-effect-view
A native liquid glass view for iOS, with fallbacks for older versions and Android.
## Installation
```sh
npm install react-native-glass-effect-view
```
Make sure to rebuild your project after installing the package. On iOS, your project will
only build successfully on Xcode 26 or newer.
## Usage
```js
import { Text } from "react-native";
import { GlassEffectView } from "react-native-glass-effect-view";
const App = () => {
return (
Hello world!
);
};
```
## Props
| Prop | Type | Description |
| --------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| `appearance` | `"light"` \| `"dark"` \| `"default"` | Controls the visual appearance of the glass effect. `"default"` follows the system color scheme |
| `useNative` | `boolean` | Whether to use the native iOS implementation when available (iOS 26+). Set to `false` to force fallback rendering |
| `tintColor` | `string` | Custom background color for the glass effect. When provided, overrides the default appearance-based background |
| `style` | `ViewStyle` | Standard React Native style prop for positioning, sizing, and layout |
| `children` | `ReactNode` | Content to display inside the glass effect view |
### Additional Notes
- All standard `ViewProps` are supported (e.g., `testID`, `accessibilityLabel`, etc).
- On iOS 26+, the native glass effect implementation is used by default.
- On older iOS versions and Android, a fallback implementation provides a similar visual effect.
- The fallback implementation uses CSS-style shadows and background blur effects. It's nowhere near as cool, but it should serve as a decent fallback.
---
Get professional support for this package →
Custom consulting sessions available for implementation support or feature development.