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.

Android blur rendering is fundamentally different from iOS. iOS uses UIVisualEffectView, which the compositor handles at a fixed radius per material at essentially zero CPU cost per frame. Android’s BlurView captures the backdrop bitmap, applies a multi-pass Gaussian blur in software, and redraws the result every frame. The Android-only props on BlurView let you tune this process to balance visual quality against rendering cost.

​
Why Android needs extra controls

On iOS the blur radius is determined by the system material and cannot be changed without private API. The compositor keeps the backdrop live automatically — your app pays no per-frame cost. On Android, expo-backdrop captures the view hierarchy behind the BlurView on every pre-draw pass, blurs the capture, and composites the result. Every parameter of that pipeline — capture resolution, blur radius, pass count, and whether to re-capture each frame — is under your control. The five Android-only props below exist only on BlurView. They have no iOS equivalent and are silently ignored on iOS and tvOS.

​
Android-only props

​
blurReductionFactor
number
default:"4"
Divides the blur radius that intensity maps to. The native side computes a base radius as (intensity / 100) × 50 dp × (4 / blurReductionFactor). Increasing this value weakens the blur; decreasing it strengthens it. This is the primary dial for matching the visual weight of an iOS material at the same intensity value.
​
blurRadius
number
Explicit blur radius in dp, applied directly to the Gaussian kernel and bypassing the intensity-to-radius calculation. When set to a value greater than 0, blurReductionFactor has no effect. Use this when you need a precisely calibrated radius and don’t want intensity to influence it.
​
downsampleFactor
number
default:"0"
How much the backdrop bitmap is downsampled before blurring. Higher values reduce the resolution of the captured image before the Gaussian pass, making the blur both cheaper to compute and visually softer due to the lower input resolution. Setting it to 0 lets the native side derive a sensible factor from the blur radius automatically. The native layer clamps this value to the range 0–32; values outside that range are coerced to the nearest boundary.
​
blurRounds
number
default:"2"
Number of blur passes applied to the captured backdrop. Each additional pass softens the result further at roughly linear cost. The native code clamps this value to a maximum of 15. Two passes is a good default for most surfaces; increase to 3–4 for very soft frosted-glass effects.
​
autoUpdate
boolean
default:"true"
Controls whether the backdrop is re-captured on every pre-draw frame. Set to false to freeze the captured backdrop image — the blur is applied once and held until autoUpdate is set back to true. Use this for surfaces behind which the content is known to be static, such as a settings panel or a modal overlay over a non-animating screen.

​
Matching iOS blur strength

Start with the default blurReductionFactor={4} and the same intensity value you use on iOS. At intensity={80} with the default factor the Android blur typically renders visually stronger than its iOS counterpart, so increasing blurReductionFactor to 6–8 is a common first adjustment. Step in increments of 1–2 and compare on a physical device; simulators and emulators do not reproduce GPU compositing accurately. 
{/* iOS and Android render a visually similar frosted surface */}
<BlurView
  intensity={80}
  tint="systemMaterial"
  blurReductionFactor={6}
  style={{ borderRadius: 16, padding: 16 }}
/>
If you need pixel-level control, switch to the explicit blurRadius prop and bypass intensity entirely on Android using platform-specific values: 
import { Platform } from 'react-native';

<BlurView
  intensity={Platform.OS === 'ios' ? 80 : 50}
  blurRadius={Platform.OS === 'android' ? 18 : undefined}
  style={{ borderRadius: 16, padding: 16 }}
/>

​
Performance tips

When nothing behind the BlurView is animating or changing, freeze the backdrop capture with autoUpdate={false}. The blur is computed once on first render and re-used on subsequent frames, eliminating the per-frame capture cost entirely.
<BlurView intensity={80} autoUpdate={false} style={{ padding: 16 }} />
Downsampling reduces the size of the bitmap before the Gaussian pass. A downsampleFactor of 4 processes a bitmap one-sixteenth the area of the full capture, which can cut blur time significantly on complex layouts. The trade-off is a slightly lower-resolution — but often imperceptibly softer — blur.
<BlurView intensity={80} downsampleFactor={4} style={{ padding: 16 }} />
The default of two passes produces a visually smooth result for most surfaces. Jumping to three or four passes is noticeable on heavy blur effects (intensity above 70) but adds roughly 50 % per extra pass to the blur time. Profile with Android Studio’s GPU profiler before increasing beyond 3.
GaussianBlurView on Android requires API 31 (Android 12) or higher because it relies on RenderEffect.createBlurEffect, which was introduced in API 31. On devices running an older Android version the view renders its children unblurred and logs a warning — it does not crash. BlurView works on all Android versions supported by Expo.

Build docs developers (and LLMs) love

Get started for freeTalk to us