[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!

[ABleas]

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

[booboothefool]

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.