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.

Both BlurView and GaussianBlurView support animated props out of the box. Wrap either component with Reanimated’s createAnimatedComponent and drive any numeric prop — intensity, blurRadius — from a shared value. Style props such as opacity and transform work through useAnimatedStyle in the normal Reanimated way.

​
Animated BlurView

The most common pattern is a scroll-driven floating bar that fades its blur in as the user scrolls away from the top of the screen. Wrap BlurView with createAnimatedComponent, create a scroll handler, and interpolate opacity from a shared scroll position. 
import { BlurView } from 'expo-backdrop';
import Animated, {
  Extrapolation,
  interpolate,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);

export default function Screen() {
  const scrollY = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler((event) => {
    scrollY.value = event.contentOffset.y;
  });

  const style = useAnimatedStyle(() => ({
    opacity: interpolate(scrollY.value, [0, 300], [0, 1], Extrapolation.CLAMP),
  }));

  return (
    <>
      <Animated.ScrollView onScroll={scrollHandler} scrollEventThrottle={16}>
        {/* ... */}
      </Animated.ScrollView>

      <AnimatedBlurView
        intensity={90}
        tint="systemChromeMaterialDark"
        cornerRadius={28}
        style={[{ position: 'absolute', bottom: 40, left: 20, right: 20, height: 80 }, style]}
      />
    </>
  );
}
opacity is a style prop, so useAnimatedStyle is the right hook here. The BlurView itself is fully rendered at all scroll positions — opacity just hides it until the user scrolls far enough.

​
Animated GaussianBlurView

To animate a component-specific prop such as blurRadius, use useAnimatedProps and pass the result to the animatedProps prop. This example toggles a spring animation between a sharp and a blurred state when the user taps a button. 
import { GaussianBlurView } from 'expo-backdrop';
import type { IGaussianBlurViewProps } from 'expo-backdrop';
import Animated, {
  interpolate,
  useAnimatedProps,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';

const AnimatedGaussianBlurView = Animated.createAnimatedComponent(GaussianBlurView);

export default function BlurToggle() {
  const progress = useSharedValue(0);

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

  return (
    <AnimatedGaussianBlurView animatedProps={animatedBlurProps}>
      {/* children */}
    </AnimatedGaussianBlurView>
  );
}
Driving progress with withSpring gives a natural elastic feel when the blur transitions between the two states: 
// Toggle on button press
progress.value = withSpring(progress.value === 1 ? 0 : 1);
You can combine animatedProps and useAnimatedStyle on the same AnimatedGaussianBlurView — for example, blurring children while simultaneously fading or scaling the view.

​
Tips

  • Use useAnimatedProps (not useAnimatedStyle) to animate native component props such as intensity and blurRadius. These props are wired into the native view directly and must be passed through the animatedProps channel.
  • Use useAnimatedStyle to animate standard React Native style props (opacity, transform, backgroundColor) on the blur view wrapper.
  • scrollEventThrottle={16} ensures the scroll handler fires on every 16 ms frame (~60 fps). A higher value throttles updates and can cause the blur to lag noticeably behind the scroll position.
  • interpolate with Extrapolation.CLAMP prevents the animated value from overshooting its defined range, which would otherwise cause unintended opacity values above 1 or below 0.
React Native Reanimated is a peer dependency — it is not bundled with expo-backdrop. Install it separately with expo install react-native-reanimated and follow the Reanimated installation guide to add the Babel plugin.

Build docs developers (and LLMs) love

Get started for freeTalk to us