How can I animate the Expo-blur View intensity using react-native-reanimated?

Question

I use React native and Expo and in the latest version of SDK 49, they mentioned that we can animate BlurView intensity with react-native-reanimated. The problem is that it doesn't work.

THis is My HomeScreen in Which there is the ScrollView

import { Dimensions, View } from "react-native";
import Animated, {
  useAnimatedScrollHandler,
  useSharedValue,
} from "react-native-reanimated";

const { height } = Dimensions.get("window");


const HomeScreen = () => {
  const scrollOffset = useSharedValue(0);
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollOffset.value = event.contentOffset.y;
    },
  });

  return (
    <View className="flex-1 bg-white">
      <View className="absolute w-full z-10">
        <Headerbar scrollOffset={scrollOffset} />
      </View>
      <Animated.ScrollView
        onScroll={scrollHandler}
        showsVerticalScrollIndicator={false}
        snapToAlignment={"start"}
        snapToInterval={height * 0.22}
        decelerationRate={"fast"}
      >
        <Header scrollOffset={scrollOffset} />
        <View className="pt-5 pb-2 rounded-t-2xl -mt-4 bg-white">
          <CategoryList />
        </View>
        <View className="py-5 bg-[#F7F7F7] rounded-t-2xl">
          <BestSales />
        </View>
      </Animated.ScrollView>
    </View>
  );
};

THis is My Header in which there is the BlurView I want to animate

import { BlurView } from "expo-blur";
import React from "react";
import { Text, TouchableNativeFeedback, View } from "react-native";
import {
  Extrapolation,
  SharedValue,
  interpolate,
} from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";


const Headerbar: React.FC<HeaderbarProps> = ({ scrollOffset }) => {
  const { top } = useSafeAreaInsets();

  const blurIntensity = interpolate(
    scrollOffset.value,
    [0, 172],
    [0, 50],
    Extrapolation.CLAMP
  );

  return (
    <BlurView intensity={blurIntensity} style={{ flex: 1 }}>
      <View
        style={[
          {
            paddingTop: top * 1.2,
            paddingBottom: top * 0.4,
            paddingHorizontal: 16,
          },
        ]}
      />
    </BlurView>
 )

What is my Bad?

score 1 · Answer 1 · answered Jul 16 '23 at 12:47

I found the solution,

By default, BlurView is not animatable (I thought it was by default). So to animate BlurView with react-native-reanimated you need to create the AnimatedBlurView component with Animated.createAnimatedComponent(BlurView) but with that you can't animate at this stage. The last step is to create animatedProps with useAnimatedProps and pass them as props to AnimatedBlurView

const App = ()=>{
    const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);

    const animatedProps = useAnimatedProps(() => {
        const intensity = interpolate(
          scrollY.value,
          [0, 150, 172],
          [0, 0, 50],
          Extrapolation.CLAMP
        );
    
        return {
          intensity,
        };
  });
    
  return (
    <AnimatedBlurView animatedProps={animatedProps} style={{ flex: 1 }}>
      <View
        style={{
          paddingTop: top * 1.2,
          paddingBottom: top * 0.4,
          paddingHorizontal: 16,
        }}
      >
    </AnimatedBlurView>
  )  


}

How can I animate the Expo-blur View intensity using react-native-reanimated?

1 Answers1