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.

BlurView supports both uniform corner rounding (cornerRadius) and per-corner control (cornerRadii). Crucially, both properties clip the blur layer and any children simultaneously — you don’t need overflow: 'hidden' on a parent wrapper. The clipping is applied at the native layer level, so there is no compositing overhead from an extra View.

​
Uniform radius

Pass a single number to cornerRadius to apply the same radius to all four corners. This is the fastest path and the right choice for cards, pills, and any shape where all corners are identical. 
<BlurView intensity={70} cornerRadius={24} style={{ padding: 20 }}>
  <Text style={{ color: '#fff' }}>Glass card</Text>
</BlurView>
On iOS, a uniform radius is implemented with CALayer.cornerRadius and cornerCurve = .continuous, which produces the smooth squircle curve used throughout the iOS system UI.

​
Per-corner radii

Pass a cornerRadii object to shape each corner independently. All four keys are optional and default to 0 when omitted. 
<BlurView
  intensity={70}
  cornerRadii={{ topLeft: 24, topRight: 24, bottomLeft: 0, bottomRight: 0 }}
/>
On iOS, when the four corners differ, the view falls back to a CAShapeLayer mask built from a UIBezierPath that traces the exact rounded rectangle. Each radius is clamped to half the shortest side to prevent degenerate arcs.

​
Precedence

When both cornerRadius and cornerRadii are set, cornerRadii takes precedence. Use cornerRadius as the default and cornerRadii only when you need asymmetric rounding.

​
BlurViewCornerRadii type

Import the type if you are building a wrapper component or computing radii programmatically: 
interface BlurViewCornerRadii {
  topLeft?: number;
  topRight?: number;
  bottomRight?: number;
  bottomLeft?: number;
}
All fields are optional. Omitting a field is equivalent to passing 0 for that corner.

​
iOS implementation note

On iOS, the corner strategy is chosen at render time based on whether all four values are equal:
  • Uniform — CALayer.cornerRadius + cornerCurve = .continuous. Applies the same smooth squircle curve the system uses for app icons and sheets.
  • Mixed — a CAShapeLayer mask is generated from a UIBezierPath with four independent arcs. The blur layer and all children are clipped through this shared mask.
Asymmetric radii are ideal for bottom sheets and drawers — round the top two corners (topLeft and topRight) to your design radius and leave bottomLeft and bottomRight at 0 to flush the sheet against the bottom edge of the screen.

Build docs developers (and LLMs) love

Get started for freeTalk to us