React Native - How to do Blur View like iOS or instagram?

Question

Background Transparency with BLUR

Is it possible to blur view without using background Image? I want to show the parent content on top of the background blur view in modal.

Similar kind of this:

Tried with react-native-blur :

Its actually blurring the background image. I want to blur and show the content which is behind the modal.

Tried along with react-native-overlay : But no change.

Rusch

If you're using Expo, docs.expo.io/versions/latest/sdk/blur-view would work, wouldn't it? – Shanda

But am not using Expo. – Rusch

Well, too bad then 😉 – Shanda

Please add some code to your question to get a better and relative answer. react-native-blur should work bu you might be using it wrong – Scow

Did you try github.com/voronianski/react-native-effects-view ? – North

Answer 1

well if you are

using expo

then you should go and check out this link here

else if you are like me

who loves to use 'react-native init' and want some blurry effect based views then i have this for you!

https://github.com/voronianski/react-native-effects-view

an awesome library

it would be very simple to use it like

"if the dialogbox is open then render The blur view else render simple",

here is a simple example for basic how to use!

...imports
var EffectsView = require('react-native-effects-view');

var App = React.createClass({
renderVibrant() {
    return (
        <View>
            <Text style={styles.text}>Do you feel blurry??</Text>
        </View>
    );
},

render() {
    return (
        <EffectsView 
            style={styles.view} 
            blurStyle="dark" 
            vibrantContent={this.renderVibrant()}
        >
            <Image style={styles.bg} source={require('image!bg')} />
        </EffectsView>
    );
}
});

Windhoek

Expo BlurView link is dead here is an updated one docs.expo.io/versions/latest/sdk/blur-view – Unfreeze