how to make the blur effect with react-native?

Question

how to make the blur effect with react-native ? like 'background-image'

and i want to switch the effect 'blur' and 'none'，'none' means no blur effect

Answer 1

Now you can do this without any library using the prop: blurRadius.

E.g

<Image
    style={styles.img}
    resizeMode='cover'
    source={imgSrc} 
    blurRadius={1}
/>

Explanation: the number(1) means the amount of blur you want to apply on the image, the higher the number, the blurrier the image.

Unfortunately, this doesn't work on Android yet (RN 0.40.0). Nevertheless, it could be useful to who's looking for only an iOS solution.

Edit: It seems to be working on Android now.

Answer 2

Try using {ImageBackground} from 'react-native' and set blurRadius={number} like this:

<ImageBackground
      style={{flex: 1}}
      source={require('../assets/example.jpg')}
      blurRadius={90}>
    <Text>Blur background</Text>
</ImageBackground>

https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting https://facebook.github.io/react-native/docs/image.html#blurradius

Answer 3

To blur and an entire View in react-native you can use @react-native-community/blur and apply it like this:

import React, { Component } from 'react';
import { BlurView } from '@react-native-community/blur';
import {
  StyleSheet,
  Text,
  View,
  findNodeHandle,
  Platform,
  Image,
} from 'react-native';

const styles = StyleSheet.create({
  title: {
    color: 'black',
    fontSize: 15,
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  blurredView: {
    // For me android blur did not work until applying a background color:
    backgroundColor: 'white',
  },
});

export default class MyBlurredComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { viewRef: null };
  }

  onTextViewLoaded() {
    this.setState({ viewRef: findNodeHandle(this.viewRef) });
  }

  render() {
    return (
      <View>
        <View
          style={[
            styles.blurredView,
          ]}
          ref={(viewRef) => { this.viewRef = viewRef; }}
          onLayout={() => { this.onTextViewLoaded(); }}
        >
          <Image
            style={{ width: 100, height: 100 }}
            source={{ uri: 'https://facebook.github.io/react-native/docs/assets/GettingStartedCongratulations.png' }}
          />
          <Text style={[styles.title]}>
            TEXT 2222 \n
            TEXT 3333
          </Text>
        </View>
        {
          (this.state.viewRef || Platform.OS === 'ios') && <BlurView
            style={styles.absolute}
            viewRef={this.state.viewRef}
            blurType="light"
            blurAmount={3}
            blurRadius={5}
          />
        }
      </View>
    );
  }
}

// Deps:

 "react-native": "0.53.3",
 "@react-native-community/blur": "^3.2.2"

Result:

Answer 4

Install react-native-blur:

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...

Answer 5

If you created your app using CRNA i.e, using expo. You can use BlurView from expo.

import {BlurView} from 'expo-blur';

It got two props to control the blur effect.

tint which takes string value namely light, default, or dark. and intensity which ranges from 1 to 100

Blur View Only Works for iOS from Expo Docs:

A React component that blurs everything underneath the view. On iOS, it renders a native blur view. On Android, it falls back to a semi-transparent view. Common usage of this is for navigation bars, tab bars, and modals.

Not recommended to be used if your prime goal is to blur the background on both iOS and Android.

Answer 6

Anyone who is trying to blur a video view in react native android, would not be able to do so with the libraries available at the time of writing this answer. But I achieved this effect by using WebView as a frame for the video. Write a little HTML page with video tag in it and style it as per your requirement and then add CSS filter property with blur as it's value, to the style of video tag. Create some javascript functions as well to play and pause the video (they'll be just one liners) which you can call from react-native code using WebView's injectJavaScript() method. You can add this html code directly to the WebView using html property of source probe of WebView component. This is obviously a hacky solution, and it won't be as fast as the native one. If you want to apply some animations or do something with layout of video, then do it with the WebView component in react-native code, that would be as fast other react-native components.

Answer 7

With recent React native version (0.57) you can use blurRadius, it works both iOS and Android http://facebook.github.io/react-native/docs/image#blurradius

Answer 8

As said @Shaikh Amaan FM You can use WebView. It must be positioned above View you want to blur.

...
<WebView
    style={[s.absolute, s.transparent]}
    originWhitelist={['*']}
    source={{ html:
        '<div style="' +
        'position: absolute; top: 0; right:0; bottom: 0; left: 0;' +
        'background: rgba(255,255,255,0.2); backdrop-filter: blur(48px);' +
        '/*width:100%; height:100%; margin:0; padding:-10px;*/' +
        '/*background: #ff000033;*/ /*transparent*/ /*background: #4fc3f733;*/  
        /*border: none*/" ' +
        '></div>'
    }}
/>
...


const s = StyleSheet.create({
    absolute: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    transparent: {
        backgroundColor: '#00000000'
    }
});

Answer 9

Try this blurry library.

dependencies :: compile 'jp.wasabeef:blurry:2.0.2'

https://github.com/wasabeef/Blurry

Answer 10

Using the blurRadius prop. It's pre attached to all Image based component in React Native, such as, Image, BackgroundImage. A number value from 0 to 100, representing radius percentage, where 10 = 10% and 100 = 100%