React-native-blur: [Android]: Apply blur effect

[abdelwehed]

Hello everyone,
I have a problem using the blur effect on android. Here is my code:

<SwipeListView 
  dataSource={this.state.dataSource}
  renderRow={(rowData, sectionID, rowID) => this.eachMessage(rowData, rowID)}
  enableEmptySections={true}
  renderHiddenRow={(rowData) => (
    <View style={{flexDirection: 'row', backgroundColor:'#1FB25A'}}>
      <Button style={{height:80, width:60}} onPress={()=> this.invitContact(rowData)}>
        <Icons name='user-plus' style={{color:'white'}} size={30} />
        <Text style={{color:'green', marginTop:20}}>|</Text>
      </Button>
      <Text style={{color:'green', marginTop:20}}>|</Text>
      <Button style={{height:80, width:60}} onPress={() => this.openModalContact(rowData)}>
        <Icons name='pencil' style={{color:'white'}} size={30} />
      </Button>
      <Text style={{color:'green', marginTop:20}}>|</Text>
      <Button style={{height:80, width:60}} onPress={() => this.deleteContactConfirm(rowData)}>
        <Icons name='trash' style={{color:'white'}} size={30} />
      </Button>
    </View>
  )}
  rightOpenValue={-200} 
  disableRightSwipe={true}>
    <BlurView
      blurRadius={15}
      downsampleFactor={5}
      overlayColor="rgba(0, 255, 0, 0.3)"
      style={styles.blurView}
      viewRef={this.state.viewRef}/>
</SwipeListView>

Here is the function that refers to my SwipeLIstView:

imageLoaded() { 
  this.setState({viewRef: findNodeHandle(this.refs.SwipeListView)}) 
}

[Vjsharma]

Not working with android in my case also...

[abdelwehed]

Hi, i think it was my fault because i didn't change the color in the node_modules/BlurView.js.
it's setted transparent as default.
Try to change the color there, i think it will work for you

[Kureev]

Is it solved, @abdelwehed?

[abdelwehed]

@Kureev yes it's :)

[SudoPlz]

I don't understand... Do we have to change this line: https://github.com/react-native-community/react-native-blur/blob/master/src/BlurView.android.js#L10 for it to work?

[abdelwehed]

There is no problem in IOS, but in android i had to change that line to the color of the blur i want. That's it. if it didn't work for you you can ask me again for more explication :)

[SudoPlz]

I spent hours yesterday trying to make it work but eventually I just quit.
I'm trying to use the blur view to the initial view of my app but I it blurs only the top 15 pixels of the screen and not all of it.
If I change the background color as you suggest it does color the whole screen, so I know I've set it up right.. But it just doesn't work on Android.
Android 7.1.1

[Kureev]

Ok, seems the issue is still here

[Kureev]

cc @cmcewen

[AnhHT]

https://github.com/AnhHT/blur-image
I update the code sample to work with latest react, react-native version. Did test with android 6

[SudoPlz]

That looks almost exactly like my code, only I'm not using an Image.. I'm using a view, and I'm doing this.setState({ viewRef: findNodeHandle(this.ref.MainView) }); on the onLayout event.

[AntiHate]

Facing same issue as @SudoPlz

I'm trying to use the blur view to the initial view of my app but I it blurs only the top 15 pixels of the screen and not all of it.
If I change the background color as you suggest it does color the whole screen, so I know I've set it up right.. But it just doesn't work on Android.

[DoubleOK]

I just battled with this for hours. AntiHate's answer looked almost exactly the same as mine.

In the end what worked was setting the backgroundColor to 'transparent' on the image i wanted to blur........hope that helps!

[nishiltamboli]

@DoubleOK I checked some 8-10 issues and was clueless about what was going wrong! Your comment made me look at that one line in style that did the trick! Thanks mate!