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 exposes iOS system materials through its tint prop, giving your app a blur that automatically adapts to light/dark mode and the system’s appearance. For cases where none of the materials fit, tintColor overrides the wash with any React Native ColorValue.
System materials
Thetint prop accepts one of 21 string values, drawn directly from UIBlurEffect.Style. They are organised into three groups:
| Group | Values |
|---|---|
| Legacy | default, extraLight, light, dark, regular, prominent |
| Materials (adaptive) | systemUltraThinMaterial, systemThinMaterial, systemMaterial, systemThickMaterial, systemChromeMaterial |
| Light variants | systemUltraThinMaterialLight, systemThinMaterialLight, systemMaterialLight, systemThickMaterialLight, systemChromeMaterialLight |
| Dark variants | systemUltraThinMaterialDark, systemThinMaterialDark, systemMaterialDark, systemThickMaterialDark, systemChromeMaterialDark |
systemUltraThin) to heaviest (systemChrome). systemChromeMaterial is the opaque tab-bar background; systemUltraThinMaterial is the barely-there overlay seen in Today widgets.
Choosing the right tint
Use the adaptive materials (noLight or Dark suffix) whenever possible — they automatically switch between a light and dark appearance based on the user’s system setting. Pin a Light or Dark variant only when your screen uses a fixed background that does not follow the system appearance, for example a media player that always renders against a dark image.
The default value maps to UIBlurEffect.Style.regular on iOS — a neutral starting point if you are unsure which material to pick.
Custom tintColor
SettingtintColor replaces the system material’s colour wash with an arbitrary ColorValue. This is useful when your brand colour is part of the surface or when you need a coloured glass card that no system material provides. The blur layer itself remains active; only the colour overlay changes.
tintColor and tint are independent — you can set both if you want to hint at a material thickness while still tinting the result with a custom colour. When tintColor has a non-transparent alpha, it takes visual precedence over the tint colour wash.
Disabling the blur
SetblurEnabled={false} to render the tint overlay without the blur effect. The component still occupies the same space and clips children normally; only the backdrop capture is skipped.
On Android the
tint value is approximated via an overlay colour derived from the material style — each TintStyle enum case maps to a semi-transparent ARGB value scaled by intensity. The exact rendering differs from iOS because Android has no equivalent to UIVisualEffectView; there is no compositor-level material, only a blurred backdrop capture with a colour layer on top.