I am looking to implement a feature in React Native (which supports both iOS and web) that allows users to draw a resizable rectangle by dragging. After drawing, users should be able to resize, move, or delete the rectangle, and the coordinates of the rectangle should be recorded.
I found that the react-konva library provides this functionality perfectly (for example: https://konvajs.org/docs/react/Transformer.html), but it is only available for web React and is not suitable for React Native. Is there something similar available for React Native?
So far, I have tried using react-native-gesture-handler, but the results are not even close to what react-konva offers
import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Text, 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 = (event) => {
const { x, y, translationX, translationY } = event.nativeEvent;
if (!start) setStart({ x: y, y: x });
setDimensions({ w: translationX, h: translationY });
};
const onEnd = () => {
if (!start) return;
setEnd(start);
setStart(null);
};
return (
<View style={{ flex: 1 }}>
<PanGestureHandler onGestureEvent={onPress} onEnded={onEnd}>
<View style={{ width: '100%', height: '100%', backgroundColor: 'red' }}>
<View
style={{
position: 'absolute',
backgroundColor: 'blue',
top: start?.x ?? end?.x,
left: start?.y ?? end?.y,
width: dimensions?.w ?? 0,
height: dimensions?.h ?? 0
}}
/>
</View>
</PanGestureHandler>
</View>
);
};
export default DrawRectangle;
Here’s a brief outline of my requirements:
Draw a rectangle by dragging.
Resize the rectangle after it is drawn.
Move the rectangle to a different location.
Delete the rectangle if needed.
Record the coordinates of the rectangle.
Could anyone suggest a suitable library or approach to achieve this in React Native for both iOS and web?
Any help or guidance would be greatly appreciated!