react-native-blur-overlay/index.js

import {
  View,
  Platform,
  NativeModules,
  requireNativeComponent,
  StyleSheet,
  TouchableWithoutFeedback,
  Animated,
} from 'react-native'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
var emitter = require('tiny-emitter/instance')

const { SajjadBlurOverlay } = NativeModules
var iface = {
  name: 'BlurView',
  propTypes: {
    ...View.propTypes,
    brightness: PropTypes.any,
    radius: PropTypes.number,
    downsampling: PropTypes.number,
    blurStyle: PropTypes.string,
    vibrant: PropTypes.bool,
    idBlur: PropTypes.string,
  },
}
var RCTSajjadBlurOverlay = Platform.select({
  ios: () => requireNativeComponent('SajjadBlurOverlay', iface),
  android: () => requireNativeComponent('RCTSajjadBlurOverlay', iface),
})()
export default class BlurOverlay extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showBlurOverlay: false,
      fadeIn: new Animated.Value(0),
    }
    this._openOverlay = this.openOverlay.bind(this)
    this._closeOverlay = this.closeOverlay.bind(this)
  }
  openOverlay() {
    this.setState(
      {
        showBlurOverlay: true,
        fadeIn: new Animated.Value(0),
      },
      () => {
        Animated.timing(this.state.fadeIn, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }).start()
      }
    )
  }
  closeOverlay() {
    Animated.timing(this.state.fadeIn, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }).start(() => this.setState({ showBlurOverlay: false }))
  }
  componentDidMount() {
    emitter.on('drawer-open' + this.props.idBlur, this._openOverlay)
    emitter.on('drawer-close' + this.props.idBlur, this._closeOverlay)
  }
  componentWillUnmount() {
    emitter.off('drawer-open' + this.props.idBlur, this._openOverlay)
    emitter.off('drawer-close' + this.props.idBlur, this._closeOverlay)
  }

  render() {
    const { children } = this.props
    return this.state.showBlurOverlay ? (
      <Animated.View style={[{ opacity: this.state.fadeIn }, styles.style]}>
        <TouchableWithoutFeedback
          style={styles.style}
          onPress={this.props.onPress}
        >
          <RCTSajjadBlurOverlay
            {...this.props}
            style={[this.props.customStyles, styles.style]}
          >
            <View style={[this.props.customStyles, styles.style]}>
              {children}
            </View>
          </RCTSajjadBlurOverlay>
        </TouchableWithoutFeedback>
      </Animated.View>
    ) : null
  }

}

const styles = StyleSheet.create({
  style: {
    position: 'absolute',
    flex: 1,
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
    //  resizeMode: 'cover',
    width: null,
    height: null,
    zIndex: 999,
  },
})
export function openOverlay(idBlur) {
  emitter.emit('drawer-open' + idBlur)
}
export function closeOverlay(idBlur) {
  emitter.emit('drawer-close' + idBlur)
}