rn-blur-view/index.js

Blur View react native support both platform

/**
 * @format
 */

// import {AppRegistry} from 'react-native';
// import App from './App';
// import {name as appName} from './app.json';

// AppRegistry.registerComponent(appName, () => App);
import {BlurView} from '@react-native-community/blur';
import React, {useEffect} from 'react';
import {Dimensions, Platform, StyleSheet, View} from 'react-native';
import BlurOverlay, {
  closeOverlay,
  openOverlay,
} from 'react-native-blur-overlay';

export default function blurView(props) {
  useEffect(() => {
    // alert(JSON.stringify(props.showHideView));
    if (props.showHideView == true) {
      openOverlay();
    } else if (props.showHideView == false) {
      closeOverlay();
    }
  }, [props.showHideView]);

  //render final view with main container
  const renderView = () => {
    return (
      <View style={styles.containerView}>
        <BlurView
          style={styles.blurView}
          blurType={props.iosBlurType}
          blurAmount={props.iosBlurAmount}
        />
        {props.renderView}
      </View>
    );
  };

  //render final view with main container

  if (Platform.OS === 'ios') {
    if (props.showHideView) {
      return (
        <View style={styles.mainIosView}>
          {Platform.OS === 'ios' && renderView()}
        </View>
      );
    } else {
      return null;
    }
  } else {
    if (props.showHideView) {
      return (
        <View style={styles.mainAndroidView}>
          {Platform.OS === 'android' && (
            <BlurOverlay
              radius={props.androidRadius}
              downsampling={props.androidDownSampling}
              brightness={props.brightness}
              onPress={() => {}}
              customStyles={props.androidBlurViewStyles}
              blurStyle={props.androidBrightness}
              children={props.renderView}
            />
          )}
        </View>
      );
    } else {
      return null;
    }
  }
}

const styles = StyleSheet.create({
  containerView: {
    flex: 1,
  },
  mainIosView: {
    flex: 1,
    position: 'absolute',
    zIndex: 1,
    height: '100%',
    width: '100%',
    justifyContent: 'flex-end',
  },
  mainAndroidView: {
    flex: 1,
    alignItems: 'center',
    position: 'absolute',
    zIndex: 1,
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width,
    justifyContent: 'flex-end',
  },
  blurView: {
    width: '100%',
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});