react-native-blur Blur does not work inside native Modal component (Android)

Blur does not work inside native Modal component (Android)

Open Maydar opened this issue 7 years ago • 8 comments

Hello. I'm trying to use BlurView inside Modal on Android and I have no blur effect on my Image. When I'm using it outside Modal component everything is OK.

Here is the example from my project (some unnecessary code was omitted):

import React, { PropTypes } from 'react';
import { View, Text, Modal } from 'react-native';
import { StyleSheet, Dimensions, Image, InteractionManager } from 'react-native';
import Button from "../base/Button/index"; // custom Button

import { BlurView } from "react-native-blur";

const findNodeHandle = require('findNodeHandle');

let { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
    overlay: {
        height: height,
        width: width
    },
    absolute: {
        position: "absolute",
        top: 0, left: 0, bottom: 0, right: 0,
    },
    background: {
        alignSelf: 'stretch',
        height: height,
        width: null,
    }
});

class MockScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: true,
            viewRef: null,
        }
    }
    imageLoaded = () => {
        setTimeout(() => {
            this.setState({ viewRef: findNodeHandle(this.refs.backgroundImage) });
        }, 200);
    };
    setModalVisible = (visible) => {
        this.setState({modalVisible: visible});
    };

    render() {
        return (
            <View style={{flex: 1, flexDirection: 'column'}}>
            <Button onClick={() => this.setModalVisible(true)}>Open</Button>
                <Modal animationType="fade"
                       transparent={false}
                       visible={this.state.modalVisible}
                       onRequestClose={() => {alert("Modal has been closed.")}}>
                    <Image style={styles.background}
                           source={require('../../assets/sidebar/avatar/avatar_stub.jpg')} // path to image
                           ref={"backgroundImage"}
                           onLoadEnd={this.imageLoaded} />

                    {this.state.viewRef && <BlurView
                        style={styles.absolute}
                        blurType="dark"
                        viewRef={this.state.viewRef}
                        blurAmount={25}
                    />}
                    <Button  style={{marginTop: -300}} onClick={() => this.setModalVisible(false)}>Close</Button>

                </Modal>

            </View>
        );
    }
}

May 13 '17 18:05 Maydar

Please see my comment at: https://github.com/react-native-community/react-native-blur/issues/199

May 16 '17 15:05 DomiR

@Maydar Any luck with this? I'm currently struggling with the exact same thing.

May 26 '17 23:05 zibs

I have the same problem, does anyone had any luck so far ?

Jul 05 '17 16:07 volgar1x

@DomiR I've read your comment on #199 but I don't see what to do. I can see that my BlurView is rendered by applying a background on it but the blur is not done. Does it mean that it cannot take a screenshot of an image in a modal ? I've tried the setTimeout by it has no effect on the "bluring" of the view. Do you have any additional suggestions please ?

@Kureev Do you have any comment or suggestion to do on this one ?

@Maydar did you finally successfully make the blur in your modal ?

Thanks