Image cannot blur effect with modal on Android Platform

[xclidongbo]

feature request

bug report

Version & Platform

$ yarn add react-native-view-shot@2.6.0

Platform: Android

Expected behavior

Image can blur effect with modal.

Actual behavior

Image cannot blur effect with modal.

Steps to reproduce the behavior

code:

import React, { Component } from 'react'
import { Text,Modal, View, Image, findNodeHandle, StyleSheet,InteractionManager,Platform,TouchableOpacity } from 'react-native'
import { BlurView, VibrancyView } from "@react-native-community/blur";
import ViewShot,{ captureRef,captureScreen } from 'react-native-view-shot';

// const backIMG = 'https://cdn2.jianshu.io/assets/web/misc-phone-7dfef21cef3585139d67481fbeb3a488.png';


export default class BlurPage extends Component {

    constructor(props) {
      super(props)
      this.state = {
        viewRef: null,
        modalVisible: false,
        };

    }

    _onPressModel = ()=>{
      captureScreen({
        format: "jpg",
        quality: 0.8
      }).then(
        uri => {
          this.setState({uri: uri, modalVisible: true})
        },
        error => console.error("Oops, snapshot failed", error)
      );
    }
    _onPressColoseModel =()=>{
      this.setState({modalVisible: false, uri: ''})
    }
    componentWillUnmount() {
     this.setState({modalVisible: false, uri: ''}) 
    }

    imageLoaded=()=>{
      if (this.state.uri) {
        setTimeout(() => {
         InteractionManager.runAfterInteractions(() => {
           this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
        }); 
        }, 0); 
      }

      // this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
    }


    render() {
      let {uri} = this.state
        return (
            <View style={styles.container}>
              <Text style={{color: 'red'}}>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              <Text>Hi, I am some unblurred text</Text>
              

              <Modal
                visible={this.state.modalVisible}
                animationType={'fade'}
                transparent={true}
                // onRequestClose={() => this.setState({ modalVisible: false })}
                hardwareAccelerated={true}
                style={styles.absolute}
              >

              <Image
                ref={ref => {this.backgroundImage = ref;}}
                // source={{uri: 'https://cdn2.jianshu.io/assets/web/misc-phone-7dfef21cef3585139d67481fbeb3a488.png'}  }
                source={{uri}}
                // style={[styles.absolute, {backgroundColor: 'transparent',opacity: 0}]}
                style={styles.absolute} 
                onLoadEnd={this.imageLoaded}
              />
              <BlurView
                style={styles.absolute}
                viewRef={this.state.viewRef}
                blurType="light"
                blurAmount={10}
                blurRadius={5}
                downsampleFactor={5}
                // overlayColor={'rgba(255,255,255,0.5)'}
              />  
              <TouchableOpacity
                onPress={this._onPressColoseModel}
              >
              <Text>Take back</Text>
              </TouchableOpacity> 
              </Modal>

              <TouchableOpacity
                onPress={this._onPressModel}
              >
              <Text>popup</Text>
              </TouchableOpacity>
            
          </View>
        )
    }
}


const styles = StyleSheet.create({
  // container: {
  //   justifyContent: "center",
  //   alignItems: "center"
  // },
  absolute: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },

  container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    instructions2: {
        textAlign: 'center',
        color: 'white',
        marginBottom: 5,
    },
});

[gre]

example now have an example with react-native-community/blur which works as expected

https://github.com/gre/react-native-view-shot/blob/0604b2082c91084f7a25e63af6db54e0f2e95826/example/src/Blur.js