'Blur in default modal of React Native

I would like to blur the background of my screen when the default modal opens.

I found this library for blur https://github.com/react-native-community/react-native-blur

Has anyone achieved that?

I don't find solutions with just a background color on modal.

Thank you

Solution 1:^[1]

You dont need to use any library to achieve this blur effect .Below is code that blurs Background Image when Modal is open.

{/*blurRadius is initially 0 and 4 when modal active more the blurradius more is blur effect of image*/}

import React, { Component } from 'react';

import {
  Modal,
  Button,
  View,
  Text,
  StyleSheet,
  ImageBackground,
} from 'react-native';

export default class App extends Component {
  state = {
    isVisible: false,
  };
  render() {
    return (
      <ImageBackground
        style={styles.container}
        blurRadius={this.state.isVisible ? 4 : 0}
        source={require('./bgimage.jpeg')}>
        <Modal
          animationType={'fade'}
          transparent={true}
          visible={this.state.isVisible}
          onRequestClose={() => {
            console.log('Modal has been closed.');
          }}>
          <View style={styles.modal}>
            <Text style={styles.text}>Modal is open!</Text>
            <Button
              title="Click To Close Modal"
              onPress={() => {
                this.setState({ isVisible: !this.state.isVisible });
              }}
            />
          </View>
        </Modal>

        <Button
          title="Click To Open Modal"
          onPress={() => {
            this.setState({ isVisible: true });
          }}
        />
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modal: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#606070',
    margin: 50,
  },
  text: {
    color: '#3f2949',
    marginTop: 10,
  },
});

Solution 2:^[2]

you should try this one

<Modal animationType="slide" transparent={true} visible={modalVisible}>
          <ImageBackground style={styles.centeredView} source={{uri: `${env.AssetsBaseURL}/assets/images/mandir-bg-blur.png`}}>
            <View style={styles.modalView}>
               //your view
            </View>
          </ImageBackground>
        </Modal>


const styles = StyleSheet.create({
     
    centeredView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      position:"relative"
    },
    modalView: {
      width:"100%",
      position:"absolute",
      bottom:0,
      backgroundColor: "white",
      borderTopLeftRadius: 20,
      borderTopRightRadius: 20,
       
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 2
      },
      shadowOpacity: 0.25,
      shadowRadius: 4,
      elevation: 5
    }
});

Solution 3:^[3]

just add backgroundColor: 'rgba(0,0,0,0.5)' to the style of (style.modal) container view

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	shruti garg
Solution 2	vicky
Solution 3	Andronicus

'Blur in default modal of React Native

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]