I would like to blur part of an Image wherever user drags his finger, I don't want to blur the whole image. Here is my hacky way of doing blur
I am using @react-native-community/blur for blurring the view
const MyView = () => { const [locations, setLocation] = useState([]); const [top, setTop] = useState(); const [left, setLeft] = useState(); return (<><View style={styles.container} onTouchEnd={(event) => { console.log(event.nativeEvent.locationX); console.log(event.nativeEvent.locationY); setLocation([ ...locations, { right: event.nativeEvent.locationX, bottom: event.nativeEvent.locationY, top, left, }, ]); }} onTouchStart={(event) => { console.log('S'+ event.nativeEvent.locationX); console.log('S'+ event.nativeEvent.locationY); setLeft(event.nativeEvent.locationX); setTop(event.nativeEvent.locationY); }}><ImageBackground style={{width, height}} source={{ uri:'https://images.unsplash.com/photo-1593642634315-48f5414c3ad9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80', }}><Text>Hi there </Text></ImageBackground></View> {locations.map((l, index) => { return (<BlurView key={index.toString()} style={{ width: l.right - l.left, height: l.bottom - l.top, backgroundColor: 'rgba(0,0,0,0.1)', position: 'absolute', top: parseFloat(l.top), left: parseFloat(l.left), right: parseFloat(l.right), bottom: parseFloat(l.bottom), // blurR, // opacity: 0.4, }} blurType="light" blurAmount={4} reducedTransparencyFallbackColor="white" /> ); })}</>);};This is a really hacky way of smudging part of an image where user drags his finger. On Android , the application just stops responding as soon as I move my finger on more than two places. Does anyone know a better way to smudge part of view instead of blurring the whole image view where user drags his finger