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.

expo-backdrop exports its full TypeScript surface from the package root, so every type alias and interface you need is available from a single import path. This page covers every named type exported from 'expo-backdrop', the numeric constants defined in the library’s internal modules, and brief descriptions of the internal aliases that are re-exported but not typically used directly in application code.

All named exports

import {
  BlurView,
  GaussianBlurView,
} from 'expo-backdrop';

import type {
  BlurViewProps,
  GaussianBlurViewProps,
  BlurViewCornerRadii,
  BlurTint,
} from 'expo-backdrop';

BlurTint

BlurTint is the string union type accepted by the tint prop of BlurView. All 21 members map directly to UIBlurEffect.Style values on iOS, giving you access to the full set of system materials including adaptive, light-only, and dark-only variants. On Android, each tint value is approximated by applying a corresponding semi-transparent colour overlay on top of the blur layer.
type BlurTint =
  | 'default' | 'extraLight' | 'light' | 'dark' | 'regular' | 'prominent'
  | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial'
  | 'systemThickMaterial' | 'systemChromeMaterial'
  | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight'
  | 'systemThickMaterialLight' | 'systemChromeMaterialLight'
  | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark'
  | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
The six legacy values (default, extraLight, light, dark, regular, prominent) are carried over for compatibility. For new designs, prefer the system*Material variants, which correctly adapt to the user’s light/dark mode setting unless you explicitly require the Light or Dark suffixed variants.

BlurViewCornerRadii

BlurViewCornerRadii is the object type accepted by the cornerRadii prop of BlurView. All four fields are optional and default to 0 when omitted — you only need to specify the corners you want to round.
interface BlurViewCornerRadii {
  topLeft?: number;
  topRight?: number;
  bottomRight?: number;
  bottomLeft?: number;
}
The clipping path computed from these values is applied to both the blur layer and all children rendered inside the view, so no additional overflow: 'hidden' wrapper is required. When both cornerRadius and cornerRadii are supplied to BlurView, cornerRadii takes precedence.

BlurViewProps

BlurViewProps (original name IBlurViewProps) is the full prop interface for the BlurView component. It extends IBlurSurfaceProps to include style and children, and adds cross-platform props for blur intensity, tinting, corner shaping, and Android-specific controls for radius, downsampling, and pass count. For the complete prop-by-prop reference, see BlurViewProps.

GaussianBlurViewProps

GaussianBlurViewProps (original name IGaussianBlurViewProps) is the full prop interface for the GaussianBlurView component, which blurs its own children rather than the backdrop behind it. It extends IBlurSurfaceProps and adds blurRadius and opaque, mirroring SwiftUI’s .blur(radius:opaque:) modifier. For the complete prop-by-prop reference, see GaussianBlurViewProps.

Numeric constants

The following constants are defined in the library’s internal blur.constants.ts module and reflect the default values used by the native modules on both iOS and Android. They are not re-exported from the package root, so you cannot import them from 'expo-backdrop' directly — they are documented here as a reference for the default values used internally.
const DEFAULT_BLUR_INTENSITY = 50;
const MIN_BLUR_INTENSITY = 0;
const MAX_BLUR_INTENSITY = 100;
const DEFAULT_BLUR_REDUCTION_FACTOR = 4;
const DEFAULT_BLUR_ROUNDS = 2;
const DEFAULT_GAUSSIAN_BLUR_RADIUS = 0;
const MIN_ANDROID_SDK_FOR_GAUSSIAN_BLUR = 31;
MIN_ANDROID_SDK_FOR_GAUSSIAN_BLUR is the API level floor for GaussianBlurView on Android. The native module checks this value at runtime and skips the blur pass on devices below API 31.

Internal type aliases

The following types are exported from the package root for completeness. The I-prefixed interfaces and T-prefixed types are the original internal names; the public-facing aliases (BlurViewProps, GaussianBlurViewProps, BlurViewCornerRadii, BlurTint) are preferred in application code and are documented in their own sections above.
  • IBlurSurfaceProps — the base interface that contributes style and children to both BlurView and GaussianBlurView. You might use this type when building a wrapper component that accepts any blur surface.
  • IBlurViewProps — the original internal name for BlurViewProps. Both names refer to the same type. Prefer BlurViewProps in application code.
  • IBlurViewCornerRadii — the original internal name for BlurViewCornerRadii. Both names refer to the same type. Prefer BlurViewCornerRadii in application code.
  • IGaussianBlurViewProps — the original internal name for GaussianBlurViewProps. Both names refer to the same type. Prefer GaussianBlurViewProps in application code.
  • TBlurTint — the original internal name for BlurTint. Both names refer to the same string union. Prefer BlurTint in application code.
  • TNativeViewName — a string union of the native view names registered with the Expo module system ("GaussianBlurView" is the registered native view name). You would only reach for this type if you were extending or wrapping the native views at a low level.
  • TComponentName — a string union of the React component names used internally ("BlurView" and "GaussianBlurView"). Like TNativeViewName, this is part of the library’s internal plumbing rather than its public API surface.

Build docs developers (and LLMs) love