BlurView does not re-render when scrolling

[whalemare]

Bug

BlurView does not rerender content below it, if it content scrolled with animations that using nativeDriver: true (I think)

Environment info

 System:
    OS: macOS 10.15.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 3.59 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.18.1 - /var/folders/qp/3zxwn9r97fq7fd4wb0jfq5tm0000gn/T/yarn--1587368146094-0.8545979982221785/node
    Yarn: 1.21.1 - /var/folders/qp/3zxwn9r97fq7fd4wb0jfq5tm0000gn/T/yarn--1587368146094-0.8545979982221785/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v10.18.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 28.0.3, 29.0.0, 29.0.2
      System Images: android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

Library version: 3.4.1

Steps To Reproduce

1. Copy paste code sample below
2. Run it on iOS
3. Try to slide image carousel
4. Blur stay at first rendered frame

Describe what you expected to happen:

1. Blur should be rendered with scrolling images

Reproducible sample code

import { BlurView } from "@react-native-community/blur"
import React, { useRef } from "react"
import { Dimensions } from "react-native"
import FastImage from "react-native-fast-image"
import { ScrollView } from "react-native-gesture-handler"
import Carousel from "react-native-snap-carousel"

const screenWidth = Dimensions.get("window").width

export const SampleScreen: React.FC<any> = props => {
  const { style } = props
  const blurRef = useRef<BlurView>()

  return (
    <ScrollView
      contentContainerStyle={{ flexGrow: 1, justifyContent: "space-between" }}
      style={{ flex: 1 }}
    >
      <BlurView
        // viewRef={blurRef}
        ref={blurRef}
        blurType={"dark"}
        style={{
          top: 0,
          elevation: 10,
          zIndex: 10,
          height: 100,
          start: 0,
          end: 0,
          position: "absolute",
        }}
      />
      <Carousel
        data={["https://picsum.photos/200/300", "https://picsum.photos/200/300"]}
        sliderWidth={screenWidth}
        itemWidth={screenWidth}
        inactiveSlideScale={0.98}
        inactiveSlideShift={0.98}
        autoplay
        containerCustomStyle={{
          flexGrow: 0,
        }}
        autoplayDelay={8000}
        autoplayInterval={4000}
        automaticallyAdjustContentInsets
        bouncesZoom={false}
        renderItem={({ item }) => {
          return (
            <FastImage
              source={{ uri: item }}
              style={{ width: screenWidth, height: screenWidth / 1.5 }}
            />
          )
        }}
      />
    </ScrollView>
  )
}

[devmanny]

check this workaround: https://github.com/react-native-community/react-native-blur/issues/317#issuecomment-700376727