react-native-blur: [Android] Blur not working

I have been trying to get the blur effect to work on Android for a long time now, after finally getting rid of compile and ViewGroup issues, the blur view will not blur anything.

It worked right off the bat in iOS, and continues to work. I am blurring a Google map view under a popup window of sorts. Here’s an excerpt:

        <View key={id} style={styles.placeItem}>
          <BlurView blurType="light" blurAmount={5} style={styles.placeItemBlur}/>
          <ScrollView contentContainerStyle={styles.placeItemContainer}>
            <Text style={styles.placeTitleText}>{placeProps.name}</Text>
            [...]
          </ScrollView>
        </View>

This view is itself a child of the map view, which is a child of a scrollable tab view. As others have suggested, I tried setting backgroundColor: 'transparent' on the ‘thing I want to blur’ (the map, and various other views), with no effect.

Am I missing something obvious? Thanks!

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 2
Comments: 25 (6 by maintainers)

Most upvoted comments

Thanks guys, thats really helpful. I was working off the readme, which doesn’t include Android usage, nor does it specify being a purely iOS demonstration… I guess I should refer to examples instead.

So are we to understand that you can only blur a single view on Android, and not everything above the blur view, as with iOS? That’s kind of a bummer.

I still can’t get my map view to blur, even after adding the appropriate props and a viewRef. So I don’t know if this is a limitation of the Android lib or I should try something else? Here is my updated (cross platform) call:

<BlurView
  blurType="light"
  blurAmount={5}
  blurRadius={15}
  downsampleFactor={5}
  overlayColor={'rgba(255, 255, 255, .25)'}
  viewRef={this.state.blurViewRef}
  style={styles.placeItemBlur}/>

and somewhere outside the render() stack, setting state:

blurViewRef: findNodeHandle(this.mapView),

Still no blur 😞

I briefly looked around for Android blur views and there are numerous others besides 500px-android-blur… maybe one of them would have features more similar to iOS blur? Android Arsenal link

ABleas on Mar 17, 2017

The obvious thing you’re missing is that you’re using the iOS props, however Android uses different ones.

iOS

      blurType="light"
      blurAmount={5}

Android

          blurRadius={15}
          downsampleFactor={5}
          overlayColor={'rgba(255, 255, 255, .25)'}
          viewRef={this.state.viewRef}

I’m having trouble doing this with anything besides blurring an Image however.

booboothefool on Mar 16, 2017

@ABleas ah sorry, yes that looks fine. Well, this is the only correct way, to avoid the infinite loop:

<MapView>
  //...
</MapView>
<BlurView />
<View key={'popup'}/>

I’m not sure why the Google Maps view couldn’t be blurred. This is just a guess, but maybe they do some fancy OpenGL rendering that skips the normal Android views, so the 500px blur library doesn’t work.

I’ll try to add Google Maps to the example project and see if I can figure it out.

ndbroadbent on Apr 11, 2017

I’ve pushed a fix for Android: #173

You can try it out now by adding this to your package.json:

"react-native-blur": "ndbroadbent/react-native-blur#android-fix",

Then make sure you update your Gradle version (at least 1.5.0, but you may as well use 2.2.3), and then add those “renderscript” lines. I’ve added these instructions to the README.

ndbroadbent on Apr 10, 2017

No problem. I found that documentation for most packages is pretty solid with this library being an exception. I only included this library recently so can’t speak to how it used to work. I’m hoping that using absolute positioning should make it work about the same on both platforms once we have a fix for Android.

As you may have already noticed, the authors are still looking for someone to fix this on Android. Not ideal, but you can use my hack below if you’d like.

import RNBlur from 'react-native-blur';

const BlurView = ({children, ...rest}) => Platform.select({
    ios: <RNBlur.BlurView {...rest}>{children}</RNBlur.BlurView>,
    android: <View style={[rest.style, {backgroundColor: 'rgba(16,16,16,0.9)'}]}>{children}</View>
  })

anshul-kai on Mar 17, 2017