How to draw on the screen with React Native?

Question

I'm trying to implement an android drawing app in react native. I'm using the PanResponder but I don't know how to get the coordinates of the part that the user has touched.

I've tried to use react-native-svg but I don't know where to place the PanResponder object.

class App extends React.Component {
  constructor(props){
    super(props);
    this._panResponder={};
    this._previousLeft = 0;
    this._previousTop = 0;
    this._circleStyles = {};
    this.circle = null;
  }
  componentWillMount(){
    this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    });
    this._previousLeft = 20;
    this._previousTop = 84;
    this._circleStyles = {
      style: {
        left: this._previousLeft,
        top: this._previousTop,
        backgroundColor: 'green',
      }
    };
  }
  componentDidMount() {
    this._updateNativeStyles();
  }


 render() {
    return (
      <View style={styles.container}>
        <View style={styles.circle}
          ref={(circle) => {
            this.circle = circle;
          }}
          { ...this._panResponder.panHandlers }
        />
      </View>
    );
  }

  _highlight = () => {
    this._circleStyles.style.backgroundColor = 'blue';
    this._updateNativeStyles();
  }

  _unHighlight = () => {
    this._circleStyles.style.backgroundColor = 'green';
    this._updateNativeStyles();
  }

  _updateNativeStyles() {
    this.circle && this.circle.setNativeProps(this._circleStyles);
  }

  _handleStartShouldSetPanResponder() {
    return true;
  }

  _handleMoveShouldSetPanResponder() {
    return true;
  }

  _handlePanResponderGrant = (e, gestureState) => {
    this._highlight();
  }

    _handlePanResponderMove = (e, gestureState) => {
    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
    this._circleStyles.style.top = this._previousTop + gestureState.dy;
    this._updateNativeStyles();
  }

  _handlePanResponderEnd = (e, gestureState) => {
    this._unHighlight();
    this._previousLeft += gestureState.dx;
    this._previousTop += gestureState.dy;
  }

}

In this example, the circle moves but I want it to leave a trail. This can be done by getting the coordinates of the points where there circle has moved and then adding color to that point.

Answer 1

I had issues with all of the other offerings that I could see, especially when upgrading to IOS14 (beta) I could not find any that worked anymore with my project.

I instead created my own drawing component based on pure JavaScript and HTML Canvas. This component has a transparent background so can be overlayed onto any background as well. This also works in online and offline modes.

in it's simplest form you can initialise like this

import RNDrawOnScreen from 'react-native-draw-on-screen';

<RNDrawOnScreen
   penColor={'#000'}
   strokeWidth={20}
/>

If you pass in a parameter for penColor and strokeWidth these will automatically change when they are updated. You can also call undo and clear methods.

This is Expo friendly and works on IOS/Android only having one dependancy of react-native-webview in order to render the view.

I have created an npm package for this, hopefully others may find it useful. Included in the package is an example simple expo app which uses the component and creates the simple drawing app shown in the screenshot.

https://www.npmjs.com/package/react-native-draw-on-screen