Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 17587

How to smudge part of a view in React Native?

$
0
0

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


Viewing all articles
Browse latest Browse all 17587

Latest Images

Trending Articles



Latest Images