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.

GaussianBlurView blurs its own child views rather than the backdrop behind it. It is the direct React Native equivalent of SwiftUI’s .blur(radius:opaque:) modifier — wrap any component in it and the children will be blurred in place. On iOS it uses Core Image for the Gaussian kernel; on Android it delegates to RenderEffect, which requires API 31 (Android 12) or higher. Use GaussianBlurView when you want to blur specific content such as an avatar, an icon, or a sensitive value — rather than blurring the surface beneath a UI layer.

​
Basic Usage

basic-gaussian-blur-view.tsx
import { GaussianBlurView } from 'expo-backdrop';
import { Image } from 'react-native';

<GaussianBlurView blurRadius={12}>
  <Image source={require('./cover.png')} style={{ width: 300, height: 200 }} />
</GaussianBlurView>

​
Props

​
blurRadius
number
default:0
The Gaussian blur radius. Measured in points on iOS and dp on Android. A value of 0 produces no blur. Matches the radius parameter of SwiftUI’s .blur(radius:opaque:) modifier.
​
opaque
boolean
default:false
Controls how the blur handles the edges of the content. When false, transparent pixels beyond the content boundary are sampled, causing the edges to fade out — the signature soft-edge look of SwiftUI’s .blur. When true, the edge pixels are held solid instead of fading. Matches SwiftUI’s opaque parameter.
​
style
StyleProp<ViewStyle>
Style applied to the container view that wraps the blurred children. Use it to set dimensions, margins, and positioning.
​
children
ReactNode
The content to blur. Everything rendered inside GaussianBlurView is passed through the Gaussian kernel at the given blurRadius.

​
The opaque Flag Explained

The opaque prop mirrors SwiftUI’s blur opacity model. When opaque is false (the default), the blur kernel samples pixels beyond the visible bounds of the content, so the outermost pixels of the blurred result gradually fade to transparent — producing the characteristic soft, feathered edge you see in SwiftUI. When opaque is true, the renderer clamps the edge samples instead of fading them, keeping the perimeter of the blurred region fully opaque and solid. Use false for decorative blurs layered over backgrounds, and true when the blurred view needs to fill a defined shape without visible edge softening.

​
Animated Example

GaussianBlurView is compatible with Reanimated’s createAnimatedComponent, so blurRadius can be driven by a shared value for smooth, spring-animated transitions.
animated-gaussian-blur.tsx
import { GaussianBlurView, IGaussianBlurViewProps } from 'expo-backdrop';
import { useCallback } from 'react';
import { Button, View } from 'react-native';
import Animated, {
  interpolate,
  useAnimatedProps,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import { SymbolView } from 'expo-symbols';

const AnimatedGaussianBlurView = Animated.createAnimatedComponent(GaussianBlurView);

export default function AnimatedBlurExample() {
  const progress = useSharedValue<number>(0);

  const onPress = useCallback(() => {
    progress.value = withSpring(progress.value === 1 ? 0 : 1);
  }, []);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [
      { translateY: withSpring(interpolate(progress.value, [0, 1], [0, 50])) },
      { scale: interpolate(progress.value, [0, 1], [1, 0.5]) },
    ],
    opacity: withSpring(interpolate(progress.value, [0, 1], [1, 0])),
  }));

  const animatedBlurProps = useAnimatedProps<Pick<IGaussianBlurViewProps, 'blurRadius'>>(() => ({
    blurRadius: interpolate(progress.value, [0, 1], [0, 12]),
  }));

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'black' }}>
      <Animated.View style={[animatedStyles, { paddingBottom: 120 }]}>
        <AnimatedGaussianBlurView animatedProps={animatedBlurProps}>
          <SymbolView name="moon.zzz.fill" size={100} tintColor="white" />
        </AnimatedGaussianBlurView>
      </Animated.View>
      <Button title="Animate" onPress={onPress} />
    </View>
  );
}
useAnimatedProps feeds blurRadius directly from the Reanimated worklet so the blur interpolates on the UI thread without any JavaScript bridge round-trips. The outer Animated.View simultaneously animates translateY, scale, and opacity for a combined entrance/exit effect.

​
Android Requirements

GaussianBlurView requires Android API 31 (Android 12) or higher. On devices running API 30 or below, RenderEffect is not available and the blur will not render — the children will be displayed without any blur applied. Ensure your minimum SDK target or runtime guard accounts for this when using GaussianBlurView on Android.

​
Further Reading

  • Animations — patterns for animating both BlurView and GaussianBlurView with Reanimated createAnimatedComponent and shared values.

Build docs developers (and LLMs) love

Get started for freeTalk to us