React-native-blur: [android] Blur effect for a modal view

Created on 27 Nov 2017 · 10Comments · Source: Kureev/react-native-blur

Hello everyone,

I want to add the blur effect on a Modal in my application.
That work perfectly on IOS but for Android I just have a transparent modal. How can I do that for Android ? I need to use background color transparent for my modal and add an image that cover the entire modal and finaly blur it ?

Source

zagoa

👍13

Most helpful comment

@Chamal0f Can you give sample code?

Lizhooh on 20 Jul 2018

👍3

All 10 comments

Same problem here...

camirot on 6 Jan 2018

Same problem too...

sandroferrari on 15 Jan 2018

Same here, when the BlurView had children I got an error on android saying it has to be absolute with no children, so I did that but now I am getting a transparent modal as well, and it's working perfectly on ios

omarkhaled11 on 27 Jan 2018

Same problem too...

mldb on 28 Jan 2018

Same here

RomanISWG on 30 Jan 2018

same!!!

stantoncbradley on 17 Feb 2018

update?

MiLeung on 13 Apr 2018

👍1

you can put the view reference on the screen below the modal and the blurView in the modal. It will work when you render the modal. the downsize of this workaround is : your tab bar will not be blur (only tested it with react-native-navigation), it probably works with a js based navigation.

34838358_10156244393168070_8542593899095392256_n

Chamal0f on 12 Jun 2018

@Chamal0f Can you give sample code?

Lizhooh on 20 Jul 2018

👍3

What @Chamal0f saying here as I understood is to get the reference (View reference that we want to blur) and pass it to the blurView (View that Import from the library) and keep blurView inside the modal. Then background View will be blurred and modal will appear on top of that.

The problem with that approach is its too hard to manage popup modals which can occur at any place.