React-native-blur: BlurView on top of scrollview

[minuitagency]

Hi,

I'm using this library for a header that is absolutely positioned and I'd like to have a scrollview underneath.

Problem is the blur is not updated in real time, only when I change tab or switch apps.

Does anybody knows a workaround?

Thanks,

Théo

[Dexwell]

Anyone? @charpeni?

[Dexwell]

This is a pretty common use case. @Kureev?

[charro0407]

any response?

[Bricktheworld]

This really needs to be addressed. For a library with this many downloads which ALREADY has the invalidate() function built in, it really shouldn't be that hard to update. If anyone gets word on a workaround for this please tell. @Kureev @charpeni

[devmanny]

First of all, I apologize for the horrible workaround you will see.

I used a createAnimatableComponent to create an animatable BlurView

import {Animated} from 'react-native';

const AnimatedBlurView = Animated.createAnimatedComponent (BlurView);

Then declare an animatable variable, I named it as: forceRender

const forceRender = new Animated.Value(0);

AnimatedBlurView will replace your BlurView

<AnimatedBlurView
  style={{
    ... StyleSheet.absoluteFill,
    opacity: forceRender.interpolate ({
      inputRange: [-300, 0], // 😢 you can play with these values
      outputRange: [1, 2], // 😓 this is the only way I made opacity work
      // it should only accept values between 0 and 1, but otherwise it doesn't give me the result I expect
    }),
  }}
  blurType="dark"
  reducedTransparencyFallbackColor="black"
/>

You will have to change your ScrollView or FlatList to an Animated.ScrollView or Animated.FlatList

<Animated.FlatList
  scrollEventThrottle={30}
  onScroll={Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: {
            y: forceRender,
          },
        },
      },
    ],
    {
      useNativeDriver: true,
    },
  )}
  ...
/>

Let me know if it worked for you