Props reference
A single scannable page listing every component’s props side by side. For usage examples and platform-specific notes, see each component’s own page.
All six wrappers also accept standard React Native ViewProps, including testID, onLayout, pointerEvents, and accessibility properties. These are forwarded on native, web, and fallback paths; the tables below list the component-specific props.
Refs: the five view components (BlurView, ProgressiveBlurView, VibrancyView, LiquidGlassView, LiquidGlassContainer) forward a ref to their underlying native view on the primary platform path. On web, refs resolve to the root View (a DOM element).
Deprecated: the raw ReactNative* native components are deprecated and will be removed in a future major — use the wrappers documented here. See Migration.
BlurView
| Prop | Type | Default | Description |
|---|
| blurType | BlurType | 'xlight' | The type of blur effect to apply. |
| blurAmount | number | 10 | The intensity of the blur effect (0-100). |
| blurRounds | number | 5 | AndroidNumber of blur interactions for a smoother effect (1-15). |
| ignoreSafeArea | boolean | true | iOSControls whether the blur effect should ignore all safe area edges. |
| reducedTransparencyFallbackColor | string | '#FFFFFF' | iOSFallback color shown when the "Reduce Transparency" accessibility setting is enabled. |
| overlayColor | ColorValue | undefined | An overlay color to apply on top of the blur effect. |
| style | StyleProp<ViewStyle> | undefined | Style object for the blur view. |
| children | React.ReactNode | undefined | Child components to render inside the blur view. |
VibrancyView
| Prop | Type | Default | Description |
|---|
| blurType | BlurType | 'xlight' | The type of blur/vibrancy effect to apply. |
| blurAmount | number | 10 | The intensity of the effect (0-100). |
| style | StyleProp<ViewStyle> | undefined | Style object for the vibrancy view. |
| children | React.ReactNode | undefined | Child components to render inside the vibrancy view. |
LiquidGlassView
| Prop | Type | Default | Description |
|---|
| glassType | GlassType ('clear' | 'regular') | 'clear' | iOS 26+, Android 13+The type of glass effect. |
| glassTintColor | ColorValue | 'transparent' | iOS 26+, Android 13+The tint color for the glass effect. Accepts #RGB, #RGBA, #RRGGBB, #RRGGBBAA, or color names. Modulated by the glass shader on both platforms; on fallback paths it tints the BlurView/web overlay. |
| glassOpacity | number | 1.0 | iOS 26+, Android 13+The opacity of the glass effect (0-1). Also scales the fallback overlay tint on platforms without native glass. |
| isInteractive | boolean | true | iOS 26+, Android 13+Controls whether the liquid glass effect is interactive and reacts to touch (iOS 26+; on Android it toggles an iOS-style press-scale animation). No effect on fallback paths. |
| ignoreSafeArea | boolean | true | iOSControls whether the glass effect should ignore all safe area edges. |
| reducedTransparencyFallbackColor | string | '#FFFFFF' | iOSFallback color shown when reduced transparency is enabled, or on iOS versions below 26. |
| style | StyleProp<ViewStyle> | undefined | Style object for the glass view. |
| children | React.ReactNode | undefined | Child components to render inside the glass view. |
LiquidGlassContainer
| Prop | Type | Default | Description |
|---|
| spacing | number | 0 | iOS 26+The spacing value between glass elements in the container. |
| style | StyleProp<ViewStyle> | undefined | Style object for the glass container. |
| children | React.ReactNode | undefined | Child components to render inside the glass container (typically LiquidGlassView components). |
ProgressiveBlurView
| Prop | Type | Default | Description |
|---|
| blurType | BlurType | 'regular' | The type of blur effect to apply. |
| blurAmount | number | 20 | Maximum blur radius at the most-blurred point. |
| blurRounds | number | 5 | AndroidNumber of blur interactions for a smoother effect (1-15). |
| direction | 'blurredTopClearBottom' | 'blurredBottomClearTop' | 'blurredCenterClearTopAndBottom' | 'blurredTopClearBottom' | Direction of the blur gradient. |
| startOffset | number | 0.0 | Plateau size (0.0-1.0): grows the fully-blurred zone from the blurred edge, so for edge directions 0 gives the longest fade. For the center direction the fade occupies fixed edge bands and startOffset insets them (max 0.3), so 0 gives the longest center blur body. Same meaning on all platforms. |
| reducedTransparencyFallbackColor | string | '#FFFFFF' | iOSFallback color when reduced transparency is enabled. |
| overlayColor | ColorValue | undefined | An overlay color to apply on top of the blur effect. |
| style | StyleProp<ViewStyle> | undefined | Style object for the blur view. |
| children | React.ReactNode | undefined | Child components to render inside the blur view. |
BlurSwitch
| Prop | Type | Default | Description |
|---|
| value | boolean | false | The controlled value of the switch. Update it from onValueChange to accept a toggle; otherwise the supplied value is restored. |
| onValueChange | (value: boolean) => void | undefined | Callback invoked when the switch value changes. |
| blurAmount | number | 10 | AndroidThe intensity of the blur effect (0-100). Only Android renders a blurred track. |
| blurRounds | number | 5 | AndroidNumber of blur interactions for a smoother effect (1-15). |
| thumbColor | ColorValue | '#FFFFFF' | iOS, WebThe color of the switch thumb. |
| trackColor | { false?: ColorValue; true?: ColorValue } | { false: '#E5E5EA', true: '#34C759' } | Track colors. On Android only `true` is used — QmBlurView auto-calculates the off-state shade from it. Android string colors accept #RGB, #RGBA, #RRGGBB, and #RRGGBBAA. |
| disabled | boolean | false | Disables interaction while keeping the current value. |
| style | StyleProp<ViewStyle> | undefined | Style object for the switch view. |
BlurType values
Shared by BlurView, VibrancyView, and ProgressiveBlurView.
| Value | Description |
|---|
| light | Light blur effect. |
| dark | Dark blur effect. |
| xlight | Extra light blur effect (default for BlurView/VibrancyView). |
| extraDark | Extra dark blur effect. |
| regular | Regular blur (iOS 10+). |
| prominent | Prominent blur (iOS 10+). |
| systemUltraThinMaterial | Ultra thin material (iOS 13+). |
| systemThinMaterial | Thin material (iOS 13+). |
| systemMaterial | Material (iOS 13+). |
| systemThickMaterial | Thick material (iOS 13+). |
| systemChromeMaterial | Chrome material (iOS 13+). |
| systemUltraThinMaterialLight | Ultra thin light material (iOS 13+). |
| systemThinMaterialLight | Thin light material (iOS 13+). |
| systemMaterialLight | Light material (iOS 13+). |
| systemThickMaterialLight | Thick light material (iOS 13+). |
| systemChromeMaterialLight | Chrome light material (iOS 13+). |
| systemUltraThinMaterialDark | Ultra thin dark material (iOS 13+). |
| systemThinMaterialDark | Thin dark material (iOS 13+). |
| systemMaterialDark | Dark material (iOS 13+). |
| systemThickMaterialDark | Thick dark material (iOS 13+). |
| systemChromeMaterialDark | Chrome dark material (iOS 13+). |
GlassType values
Used by LiquidGlassView on iOS 26+ and Android 13+.
| Value | Description |
|---|
| clear | Clear glass effect (default). |
| regular | Regular glass effect with a more pronounced appearance. |
ProgressiveBlurDirection values
Used by ProgressiveBlurView.
| Value | Description |
|---|
| blurredTopClearBottom | Blurred at the top, fading to clear at the bottom (default). |
| blurredBottomClearTop | Blurred at the bottom, fading to clear at the top. |
| blurredCenterClearTopAndBottom | Blur peaks in the center and fades to clear at both edges. |