I want to blur the backgorund when modal is opened in react native

Question

Suppose I have a modal in react-native view and whenever I open the modal I want to blur or change color of background view just focused on modal only.

Answer 1

Use react-native-blur

import React, { Component } from "react";
import { Animated, View, Platform, Easing, StyleSheet} from "react-native";
import { BlurView } from "@react-native-community/blur"; 

export default class Blur extends Component {

  render() {
    return (
      <BlurView
        style={styles.blur}
        blurType="light" 
        blurAmount={10} 
        reducedTransparencyFallbackColor="white"
      />
    );
  }
}

const styles = StyleSheet.create({
  blur: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    justifyContent: "center",
    backgroundColor: "rgba(100,100,100, 0.5)",
    padding: 20,

    // zIndex: 10,
    // opacity: 0.5,
  },
});

Answer 2

I use a universal blur HOC, that fixes some iOS\Android bugs

import React from 'react';
import { Button, Text, View } from 'react-native';
import { withBlurModal } from './MyWithBlurModal';

const MyModalContent = ({ openModal, closeModal }) => (
  <View>
    <Text>MyModalContent</Text>
    <Button title="Close modal" onPress={closeModal} />
  </View>
);

const MyScreen = ({ openModal, closeModal, blurTargetRef }) => (
  <View
    // ref need for Android to indicate what part of View need to blur
    ref={blurTargetRef}
  >
    <Button title="Open modal" onPress={openModal} />
  </View>
);

const Screen = withBlurModal(MyModalContent)(MyScreen);