Can't use multiple BlurView on Android

[ezranbayantemur]

Bug report

Summary

Firstly thank you for this great repo. And sadly, as like the title said, can't use multiple BlurView on Android devices. Multiple like; FlatList item or another BlurView component on the screen. Same as like https://github.com/react-native-community/react-native-blur/issues/384 issue said, it's working fine if there is only one BlurView on the screen. If the second one, app crashes.

I think so many people faces with this issue. It would be great if you look at it and check other issue. It's a very useful library. @Kureev @vonovak @msand

Environment info

react-native info output:

System:
    OS: macOS 10.15.6
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 46.96 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.3.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.2
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_222 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version:

    "react": "16.11.0",
    "react-native": "0.62.2",
    "@react-native-community/blur": "^3.6.0",

Steps to reproduce

Error output:

	16:21:52.039	AndroidRuntime	FATAL EXCEPTION: main
Process: com.sadelabs.messdfuupdater, PID: 17992
java.lang.IndexOutOfBoundsException: Index: 1, Size: 0
	at java.util.ArrayList.get(ArrayList.java:437)
	at android.view.ViewGroup.getAndVerifyPreorderedView(ViewGroup.java:3622)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4094)
	at android.view.View.draw(View.java:19298)
	at android.view.View.draw(View.java:19165)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
	at android.view.View.draw(View.java:19163)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
	at android.view.View.draw(View.java:19298)
	at android.view.View.draw(View.java:19165)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at com.facebook.react.ReactRootView.dispatchDraw(ReactRootView.java:232)
	at android.view.View.draw(View.java:19163)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at android.view.View.draw(View.java:19298)
	at eightbitlab.com.blurview.BlockingBlurController.updateBlur(BlockingBlurController.java:149)
	at eightbitlab.com.blurview.BlockingBlurController.draw(BlockingBlurController.java:225)
	at eightbitlab.com.blurview.BlurView.draw(BlurView.java:51)
	at android.view.View.draw(View.java:19165)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
	at android.view.View.draw(View.java:19298)
	at android.view.View.draw(View.java:19165)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
	at android.view.View.draw(View.java:19163)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
	at android.view.View.draw(View.java:19163)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at android.view.View.draw(View.java:19298)
	at android.widget.ScrollView.draw(ScrollView.java:1777)
	at com.facebook.react.views.scroll.ReactScrollView.draw(ReactScrollView.java:451)
	at android.view.View.draw(View.java:19165)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at android.view.View.draw(View.java:19298)
	at android.view.View.draw(View.java:19165)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
	at android.view.View.draw(View.java:19163)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
	at android.view.View.draw(View.java:19298)
	at android.view.View.draw(View.java:19165)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at com.facebook.react.ReactRootView.dispatchDraw(ReactRootView.java:232)
	at android.view.View.draw(View.java:19163)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4310)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4096)
	at android.view.View.draw(View.java:19298)

Reproducible sample code

Code sample:

...
...
    <FlatList
        ...
        ...
        renderItem={renderListItem}
    />
...
...
    const renderListItem =  ({item}) => {
        return(
            <View>
                <Text> Blur view </Text>
                <BlurView style={absolute} ...props />
            </View>
        )
    } 

[lucaspereirasouzat]

Same here

[brunoaduarte]

I'm also getting a lot of crashes like this on my app and i only have 1 BlueView component

32 minutes ago on app version 3145742
Samsung Galaxy M01s (a10s), 2816MB RAM, Android 10
Report 1

java.lang.IndexOutOfBoundsException: 
  at java.util.ArrayList.get (ArrayList.java:437)
  at android.view.ViewGroup.getAndVerifyPreorderedView (ViewGroup.java:4468)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4984)
  at com.facebook.react.views.view.ReactViewGroup.dispatchDraw (ReactViewGroup.java:3)
  at android.view.View.draw (View.java:23060)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at android.view.View.draw (View.java:23060)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at android.view.View.draw (View.java:23060)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at android.view.View.draw (View.java:23060)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at com.facebook.react.views.view.ReactViewGroup.dispatchDraw (ReactViewGroup.java:3)
  at android.view.View.draw (View.java:23060)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at com.facebook.react.views.view.ReactViewGroup.dispatchDraw (ReactViewGroup.java:3)
  at android.view.View.draw (View.java:23193)
  at android.view.View.draw (View.java:23062)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at com.facebook.react.views.view.ReactViewGroup.dispatchDraw (ReactViewGroup.java:3)
  at android.view.View.draw (View.java:23060)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at com.facebook.react.views.view.ReactViewGroup.dispatchDraw (ReactViewGroup.java:3)
  at android.view.View.draw (View.java:23060)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at com.facebook.react.views.view.ReactViewGroup.dispatchDraw (ReactViewGroup.java:3)
  at android.view.View.draw (View.java:23060)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at com.facebook.react.ReactRootView.dispatchDraw (ReactRootView.java)
  at android.view.View.draw (View.java:23060)
  at android.view.ViewGroup.drawChild (ViewGroup.java:5230)
  at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4987)
  at android.view.View.draw (View.java:23193)
  at eightbitlab.com.blurview.BlockingBlurController.b (BlockingBlurController.java:49)
  at eightbitlab.com.blurview.BlockingBlurController$1.onPreDraw (BlockingBlurController.java:2)
  at android.view.ViewTreeObserver.dispatchOnPreDraw (ViewTreeObserver.java:1102)
  at android.view.ViewRootImpl.performTraversals (ViewRootImpl.java:3310)
  at android.view.ViewRootImpl.doTraversal (ViewRootImpl.java:2200)
  at android.view.ViewRootImpl$TraversalRunnable.run (ViewRootImpl.java:9065)
  at android.view.Choreographer$CallbackRecord.run (Choreographer.java:999)
  at android.view.Choreographer.doCallbacks (Choreographer.java:797)
  at android.view.Choreographer.doFrame (Choreographer.java:732)
  at android.view.Choreographer$FrameDisplayEventReceiver.run (Choreographer.java:984)
  at android.os.Handler.handleCallback (Handler.java:883)
  at android.os.Handler.dispatchMessage (Handler.java:100)
  at android.os.Looper.loop (Looper.java:237)
  at android.app.ActivityThread.main (ActivityThread.java:8019)
  at java.lang.reflect.Method.invoke (Method.java)
  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:493)
  at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1100)

[jong-hui]

I think this is a problem with Dimezis BlurView https://github.com/Dimezis/BlurView/issues/110

[chepicov]

Is there any solution?

[mawais78]

Is there any solution? Facing the same issue here

[peetzweg]

Same use case here 🙃

[JSharles]

I'm having the issue here. It always crashes when the situation involves a BlurView and an animation. Having multiple blurred views is fine for me tho.

[anhquan291]

I'm also having the same issue. Please help us. Thanks a lot

[invyctus92]

Updates ?

[DawidRubch]

Someone came up with a solution?

[ja-ka]

Is probably addressed with https://github.com/Kureev/react-native-blur/pull/411 now, waiting for merge though.

[carlg0020]

Someone came up with a solution?

[invyctus92]

There is a user-modified version that includes a fix for the Blur library, try it. Use in package: "@react-native-community/blur": "https://github.com/flyingSAP/react-native-blur",

[prathamnemade]

Still not able to use multiple BlurView in a single page. Crashes the application for Android whereas works fine with iOS.

[marcoantoni0]

Same here

[parmarkamlesh]

same issue here in android

[yigithanyucedag]

Still same issue on Android

[phuocantd]

add implementation('com.eightbitlab:blurview:1.6.6') { force = true } in app/build.gradle. It working for me. Something crash app :(((

[sanch941]

This library is garbage

[mrousavy]

This library is garbage

@sanch941 then do it better and stop hating on other people's work, which they've put countless hours into.

[Changcumt]

when I upgrade to "com.eightbitlab:blurview:1.6.6", it's still crash.

[Newbas]

Interested is someone tried to use it in FlatList? On iOS works good, but Android version seems like goes out borders and blurs whole row with blured item. I have 2 lists, one horizontal and one vertical. Horizontal one is completely blured, while vertical with 2 columns blurs only rows with blured item, no matter one or two have BlurView

[valeriashpiner]

add implementation('com.eightbitlab:blurview:1.6.6') { force = true } in app/build.gradle. It working for me. Something crash app :(((

works for me. thank you!

[phuocantd]

add implementation('com.eightbitlab:blurview:1.6.6') { force = true } in app/build.gradle. It working for me. Something crash app :(((

works for me. thank you!

I'm not sure but sometimes it crashes the app

[Iamivan1996]

add implementation('com.eightbitlab:blurview:1.6.6') { force = true } in app/build.gradle. It working for me. Something crash app :(((

Works for me too, but wondering why it can fix the IndexOutOfBoundsException error?