How to drew a line between two points in react native?

Question

I'm working on React Native.

Actually I want to draw a line between two points in react native.

The point is where I start touch and where I release touch.

I'm doing this using penResponder. Using penResponder I get those point. Where i start touch and where I release touch.

Here is my code:

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Platform,
    Text,
    PanResponder,
    Image,
} from 'react-native';

export default class App extends Component {
    constructor() {
        super();
        //initialize state
        this.panResponder;
        this.state = {
            locationX: 0,
            locationY: 0,

            locationSX: 0,
            locationSY: 0,
        };

        //panResponder initialization
        this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (event, gestureState) => true,
            onStartShouldSetPanResponderCapture: (event, gestureState) => {
                this.setState({
                    locationX: event.nativeEvent.locationX.toFixed(2),
                    locationY: event.nativeEvent.locationY.toFixed(2),
                });
            },
            onMoveShouldSetPanResponder: (event, gestureState) => false,
            onMoveShouldSetPanResponderCapture: (event, gestureState) => false,
            onPanResponderGrant: (event, gestureState) => false,
            onPanResponderMove: (event, gestureState) => {},
            onPanResponderRelease: (event, gestureState) => {
                this.setState({
                    locationSX: event.nativeEvent.locationX.toFixed(2),
                    locationSY: event.nativeEvent.locationY.toFixed(2),
                });
            },
        });
        this.setState({
            locationX: 0,
            locationY: 0,

            locationSX: 0,
            locationSY: 0,
        });
    }
    render() {
        return (
            <View style={styles.MainContainer}>
                <View style={styles.childView}>
                    <View
                        style={[
                            {
                                height: 22,
                                width: 22,
                                marginTop: 5,
                                position: 'absolute',
                                borderRadius: 14,
                                backgroundColor: '#afeeee',
                            },
                            {
                                top: parseFloat(this.state.locationY - 5),
                                left: parseFloat(this.state.locationX - 15),
                            },
                        ]}
                    />

                    <View
                        style={[
                            {
                                height: 22,
                                width: 22,
                                marginTop: 5,
                                position: 'absolute',
                                borderRadius: 14,
                                backgroundColor: '#afeeee',
                            },
                            {
                                top: parseFloat(this.state.locationSY - 2),
                                left: parseFloat(this.state.locationSX - 11),
                            },
                        ]}
                    />

                    <View
                        style={{flex: 1, backgroundColor: 'transparent'}}
                        {...this.panResponder.panHandlers}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    MainContainer: {
        flex: 1,
    },

    childView: {
        flex: 1,
        overflow: 'hidden',
    },
    point: {
        height: 22,
        width: 22,
        marginTop: 5,
        position: 'absolute',
        borderRadius: 14,
        backgroundColor: '#afeeee',
    },
});

But how to draw line between the two points?

Actually I want this:

Please help! Thanks in advance.

Answer 1

You can use svg (https://github.com/react-native-community/react-native-svg) to do this. I recommend you to put your PanResponder on top of your svg to handle touches.

Svg example:

<Svg height={windowHeight} width={windowWidth}>
  <Line x1={startTouch.x} y1={startTouch.y} x2={endTouch.x} y2={endTouch.y} stroke="red" strokeWidth="2" />
</Svg>