React-native-blur: Blur a view

Created on 11 Jun 2017 · 10Comments · Source: Kureev/react-native-blur

Hi, I am trying to blur a view, it works on iOS but on android it doesn't work, is it possible to blur any view ?
here is my code

          <View style = {MainStyle.footer}>
                <TouchableHighlight style={MainStyle.bottomButtons}>
                    <Text style={MainStyle.footerText}>Accueil</Text>
                </TouchableHighlight>
                <TouchableHighlight style={MainStyle.bottomButtons}>
                    <Text style={MainStyle.footerText}>Livraison</Text>
                </TouchableHighlight>
                <TouchableHighlight style={MainStyle.bottomButtons}>
                    <Text style={MainStyle.footerText}>Mon Compte</Text>
                </TouchableHighlight>
            </View>
            <BlurView
                blurType = "light"
                blurAmount={7}
                viewRef = {this.state.viewRef}
                style={[MainStyle.blurView]} />
            <View style = {MainStyle.footerView}  >

Source

googl3r

Most helpful comment

until now the blur effect doesn't work on a view it works just on image

googl3r on 21 Aug 2017

👍5

All 10 comments

Not sure if I see an assignment of viewRef here. You should store a ref the view you want to blur in this.state.viewRef in order this code to work:

<View ref={ref => this.setState({ viewRef: ref })} style={MainStyle.footer}>
  //...
</View>

Kureev on 12 Jun 2017

@googl3r did found a solution?

cinder92 on 19 Jun 2017

@cinder92 no always have the same problem, @Kureev solution doesn't work

googl3r on 3 Jul 2017

you are right its work on ios but no on android, this need to be fixed... somehow...

cinder92 on 3 Jul 2017

Did you try https://github.com/react-native-community/react-native-blur/blob/master/examples/Basic/index.android.js ? Does it work for you?

Kureev on 4 Jul 2017

It works for image but not for a view, it's just a semi-transparent effect not blur effect.

cuongtructran on 5 Jul 2017

👍3

@cinder92 Were you able to test the blur effect on a physical iOS device? I've found it work on the simulator, but the blur appears as an opaque black box on the device build.