javascript – Find out how to Implement Resizable, Movable, and Detachable Dragable Rectangle in React Native for Each iOS and Internet?

I’m trying to implement a function in React Native (which helps each iOS and internet) that enables customers to attract a resizable rectangle by dragging. After drawing, customers ought to have the ability to resize, transfer, or delete the rectangle, and the coordinates of the rectangle must be recorded.

I discovered that the react-konva library supplies this performance completely (for instance: https://konvajs.org/docs/react/Transformer.html), however it’s only accessible for internet React and isn’t appropriate for React Native. Is there one thing comparable accessible for React Native?

Up to now, I’ve tried utilizing react-native-gesture-handler, however the outcomes usually are not even near what react-konva provides

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Textual content, Platform } from 'react-native';
import Svg, { Circle, Polygon } from 'react-native-svg';
import { GestureEvent, PanGestureHandler, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';

const DrawRectangle = () => {
  const [start, setStart] = useState(null);
  const [end, setEnd] = useState({ x: 0, y: 0 });
  const [dimensions, setDimensions] = useState({ w: 0, h: 0 });

  const onPress = (occasion) => {
    const { x, y, translationX, translationY } = occasion.nativeEvent;
    if (!begin) setStart({ x: y, y: x });
    setDimensions({ w: translationX, h: translationY });
  };

  const onEnd = () => {
    if (!begin) return;

    setEnd(begin);
    setStart(null);
  };

  return (
    <View model={{ flex: 1 }}>
      <PanGestureHandler onGestureEvent={onPress} onEnded={onEnd}>
        <View model={{ width: '100%', top: '100%', backgroundColor: 'pink' }}>
          <View
            model={{
              place: 'absolute',
              backgroundColor: 'blue',
              high: begin?.x ?? finish?.x,
              left: begin?.y ?? finish?.y,
              width: dimensions?.w ?? 0,
              top: dimensions?.h ?? 0
            }}
          />
        </View>
      </PanGestureHandler>
    </View>
  );
};

export default DrawRectangle;

This is a short define of my necessities:

Draw a rectangle by dragging.
Resize the rectangle after it’s drawn.
Transfer the rectangle to a unique location.
Delete the rectangle if wanted.
File the coordinates of the rectangle.
May anybody recommend an acceptable library or method to realize this in React Native for each iOS and internet?

Any assist or steerage could be drastically appreciated!