Bleeding BlurView in Android

[shashwats-greytip]

Issue

When we add a blurred view in android, the layer on top of the blur view bleeds (or blurs out the upper layer). The solution which was provided by the community were:

• Take blurView as a parent and insert the view as the child of blurView. (but in this case not able to position the child component.) RELATED ISSUE

 <BlurView>
      <ChildView></ChildView>
 </BlurView>

• Another solution was that create a common view and encapsulate blur and your view inside the common view.

<View>
     <BlurView />
     <YourView></YourView>
</View>

Same issue as this one: STRANGE BLUR ON ANDROID I tried the solution provided in the above link, but none of them gave the desired result.

Help would be highly appreciated ❣️ If the issue is not resolved @Kureev can you please provide a fix for it?

                                         THANKS IN ADVANCE 🙂

[dutradotdev]

take a look at my solution: https://gist.github.com/dutradotdev/50c82763fc621ab3c1bd5ba02180ce0d

[dutradotdev]

@shashwatgreytip

[flexsurfer]

any updates on this, looks pretty critical

[stemyke]

@flexsurfer I found out that the underlying Android library is designed to be used with child Views instead of siblings rendered after this view. If I use child components in react, the bleeding disappears, but because the instantiated view is a FrameLayout on Android side the flex style layouting we are used to in react native gets problematic. Maybe we can tweak the underlying library with extended classed here and there to make it work exactly the same as on iOS.

[stemyke]

Here is a patch file which uses my forked version of the native library. I will try to make a pull request too in their library and in this too.:

@react-native-community+blur+4.3.2.patch

[Kureev]

@Titozzz if you have time at hand, mind releasing a new version with the fix?

Sorry guys, I'm not maintaining this repo actively. The best shot is to ask @Titozzz here.

[stemyke]

@Titozzz Here, they may actually merge my changes too: https://github.com/Dimezis/BlurView/pull/201