JAVASCRIPT

blur area behind an element in react native

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 

            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>
    );
  }
}