Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/rit3zh/expo-backdrop/llms.txt

Use this file to discover all available pages before exploring further.

BlurViewProps is the complete TypeScript interface for the BlurView component exported from expo-backdrop. It is exported both under the alias BlurViewProps and its original name IBlurViewProps. The interface extends IBlurSurfaceProps, which contributes the style and children props shared across all blur surface components in the library.
import type { BlurViewProps } from 'expo-backdrop';

Props

Cross-platform

intensity
number
default:50
Blur strength on a scale from 0 (no blur) to 100 (maximum blur). On iOS the value is passed directly to UIVisualEffectView; on Android it is converted to a pixel radius and divided by blurReductionFactor before being applied.
tint
BlurTint
default:"'default'"
The system material style washed over the blur layer. Accepts any of the 21 BlurTint string literals — from the legacy 'light' and 'dark' values through the full set of systemChromeMaterial* variants. See Types for the complete union.
tintColor
ColorValue
A custom colour overlay painted over the blur. When this prop is set it replaces tint entirely, giving you full control over the wash colour without being limited to the system materials. Accepts any React Native ColorValue — named colours, hex strings, rgb(), etc.
blurEnabled
boolean
default:true
Controls whether the blur effect is active. Set to false to disable blurring and render only the tint overlay (or a plain transparent surface if neither tint nor tintColor is set). Useful for conditionally toggling the effect without unmounting the component.
cornerRadius
number
A uniform corner radius applied to every corner of the blur view. The clipping path is applied to both the blur layer and all children rendered inside it, so you do not need a separate overflow: 'hidden' wrapper. When cornerRadii is also provided, it takes precedence.
cornerRadii
BlurViewCornerRadii
Per-corner radii expressed as a BlurViewCornerRadii object with optional topLeft, topRight, bottomRight, and bottomLeft fields. Takes precedence over cornerRadius when both are supplied. Omitted corners default to 0. See BlurViewCornerRadii for the full interface definition.
style
StyleProp<ViewStyle>
Style applied to the outer view container. Supports any React Native ViewStyle properties, including layout (flex, width, height, margin, padding) and positioning (position: 'absolute').
children
ReactNode
Child views rendered on top of the blur layer. Content here is composited above the blurred backdrop, making BlurView suitable as a container for text, icons, or any other UI elements that should appear to float over a blurred surface.

Android-only

blurReductionFactor
number
default:4
Android only. A divisor applied to the blur radius that intensity maps to. Android’s native blur algorithm reads perceptually stronger than iOS UIVisualEffectView at the same nominal intensity, so this prop lets you scale the radius down to achieve a visual match. The default of 4 is tuned to approximate the iOS appearance at equivalent intensity values.
blurRadius
number
Android only. An explicit blur radius in density-independent pixels (dp) that fully overrides the radius derived from intensity and blurReductionFactor. Use this when you need precise control over the radius rather than mapping from the 0–100 intensity scale. iOS has no equivalent because UIVisualEffectView fixes the radius per material internally.
downsampleFactor
number
default:0
Android only. The factor by which the backdrop bitmap is downsampled before blurring is applied. Higher values reduce GPU cost and produce a softer result; lower values preserve more detail. Leave at 0 to let the native layer derive an appropriate factor from the blur radius automatically.
blurRounds
number
default:2
Android only. The number of blur passes executed per frame capture. Additional passes progressively soften the result at roughly linear cost. The default of 2 balances quality against performance for most use cases.
autoUpdate
boolean
default:true
Android only. When true, the blur view re-captures the backdrop every frame so that animated or scrolling content behind it stays correctly blurred. Set to false to freeze the captured backdrop, which saves GPU work when the content behind the blur is fully static. On iOS, backdrop capture is handled by the system compositor and is always live regardless of this prop.
The blurRadius, blurReductionFactor, downsampleFactor, blurRounds, and autoUpdate props are silently ignored on iOS. iOS uses UIVisualEffectView, which controls the blur radius internally per material — there is no public API to override it without reaching into private framework internals.

Build docs developers (and LLMs) love