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.
Refs: the five view components (BlurView, ProgressiveBlurView, VibrancyView, LiquidGlassView, LiquidGlassContainer) forward a ref to their underlying native view on the primary platform path.
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+The type of glass effect. |
| glassTintColor | string | 'clear' | iOS 26+The tint color for the glass effect. Accepts hex colors or color names. |
| glassOpacity | number | 1.0 | iOS 26+The opacity of the glass effect (0-1). |
| isInteractive | boolean | true | iOSControls whether the liquid glass effect is interactive and reacts to touch (iOS 26+ only). |
| 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 | Where the gradient plateau starts (0.0-1.0). 0 gives the longest blur body. |
| 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 current value of the switch. |
| 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' | iOSThe 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. |
| 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+.
| 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. |