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.

Once you have installed expo-backdrop and completed the prebuild step, you are ready to start adding blur effects. This guide provides two complete, copy-paste-ready examples — the first uses BlurView to create a frosted-glass overlay on top of a background image, and the second uses GaussianBlurView to apply a Gaussian blur directly to its children. Both examples work on iOS and Android without any additional configuration.
Import TypeScript types directly from expo-backdrop when you need to type props or tint values:
import type { BlurViewProps, GaussianBlurViewProps, BlurTint } from 'expo-backdrop';

​
Example 1 — BlurView Frosted-Glass Overlay

BlurView blurs whatever is rendered behind it, making it perfect for floating cards, headers, and action bars that sit above a rich background. The tint prop selects an iOS system material that adds a colour wash on top of the blur, and cornerRadius clips both the blur and the children with no need for an extra wrapper.
BlurView frosted-glass overlay
import { BlurView } from 'expo-backdrop';
import { Image, StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Image
        source={require('./cover.png')}
        style={{ ...StyleSheet.absoluteFillObject }}
      />

      <BlurView
        intensity={80}
        tint="systemThinMaterialDark"
        cornerRadius={24}
        style={{ margin: 20, padding: 20 }}>
        <Text style={{ color: '#fff' }}>Hello from behind the glass</Text>
      </BlurView>
    </View>
  );
}

​
Example 2 — GaussianBlurView on Children

GaussianBlurView blurs its own children rather than the content behind it, mirroring SwiftUI’s .blur(radius:opaque:) modifier. Set blurRadius to control the strength — values are in points on iOS and dp on Android. The optional opaque prop keeps edges solid when set to true, or lets them fade naturally when false (the default).
GaussianBlurView on an image
import { GaussianBlurView } from 'expo-backdrop';
import { Image } from 'react-native';

export default function App() {
  return (
    <GaussianBlurView blurRadius={12}>
      <Image
        source={require('./cover.png')}
        style={{ width: 300, height: 200 }}
      />
    </GaussianBlurView>
  );
}
For scroll-driven or gesture-driven blur animations, use Animated.createAnimatedComponent(BlurView) from react-native-reanimated. You can then animate the intensity prop in a useAnimatedProps callback for buttery-smooth transitions as the user scrolls. See the Animations guide for a full walkthrough with useAnimatedScrollHandler and interpolate.

​
Next Steps

BlurView Props

Full reference for every BlurView prop, including Android-only dials and all 21 iOS system materials.

GaussianBlurView Props

Full reference for GaussianBlurView, including blurRadius, opaque, and platform behaviour notes.

Build docs developers (and LLMs) love

Get started for freeTalk to us