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 effe

Answer 1

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 (
      
         { this.viewRef = viewRef; }}
          onLayout={() => { this.onTextViewLoaded(); }}
        >
          
          
            TEXT 2222 \n
            TEXT 3333
          
        
        {
          (this.state.viewRef || Platform.OS === 'ios') && 
        }
      
    );
  }
}

// Deps:

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

Result: