Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bleeding BlurView in Android #511

Open
shashwats-greytip opened this issue Nov 23, 2022 · 7 comments · May be fixed by #598
Open

Bleeding BlurView in Android #511

shashwats-greytip opened this issue Nov 23, 2022 · 7 comments · May be fixed by #598

Comments

@shashwats-greytip
Copy link

shashwats-greytip commented Nov 23, 2022 •
edited
Loading

Issue
image (1)

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 🙂
@shashwats-greytip shashwats-greytip changed the title Bleeding BluView in Android Bleeding BlurView in Android Nov 23, 2022
@dutradotdev
Copy link

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

@dutradotdev
Copy link

@shashwatgreytip

@flexsurfer
Copy link

any updates on this, looks pretty critical

@flexsurfer flexsurfer mentioned this issue Mar 8, 2023
Merged
@yqrashawn yqrashawn mentioned this issue May 10, 2023
Merged
@stemyke
Copy link

stemyke commented Jul 26, 2023

@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
Copy link

stemyke commented Jul 27, 2023

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
Copy link
Owner

Kureev commented Jul 27, 2023

@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
Copy link

stemyke commented Jul 28, 2023

@Titozzz Here, they may actually merge my changes too: Dimezis/BlurView#201

@anoukhello anoukhello mentioned this issue Jul 31, 2023
Merged
4 tasks
@dopplerDistortion dopplerDistortion linked a pull request Oct 6, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: android blurview library updated dopplerDistortion/react-native-blur
5 participants
@Kureev @stemyke @flexsurfer @dutradotdev @shashwats-greytip