How to Draw on an Image and save it in React Native Expo

Question

In my expo app. I want the user to be able to edit an image with their finger by being able to draw on the image with a specific brush color.

The UI is as shown in the photo, where the user selects a photo and it appears on the screen. I want the user to be able to simply touch a part of the image (or drag their finger) and make the corresponding pixels near their touch to be transparent (RGB 0, 0, 0). I have found this exceptionally difficult to do, maybe because I am new to react native expo.

I have been able to use PanResponder to get the coordinates of the touch in the image component. My idea was to edit the corresponding pixels using onPanResponderMove: someFunctiontoEditPixels, however there is not easy way to do this it seems and no examples online.

Here is the panResponder I have so far

const panResponder = PanResponder.create({
    onMoveShouldSetPanResponder: (e, gs) => true,
    onMoveShouldSetPanResponderCapture: (e, gs) => true,
    onPanResponderMove: (event, gestureState) => {
      console.log(gestureState.moveX)
      setTouchCoordinates({ x_cor: gestureState.moveX, y_cor: gestureState.moveY });
    },
  });

Here is the html component for the image. I am using a Card.Cover

<Card.Cover
  {...panResponder.panHandlers}
  resizeMode="contain"
  source={{ uri: photoUrl }}
  style={styles.image}
  onLoad={handleImageLoad}
/>

Any pointers would be lovely