add undo, draw, and erase options

[jalinegm]

Based on the signature_pad (https://github.com/szimek/signature_pad) examples, I added options to erase/draw, undo, and change the color of the pen on runtime. Undo and erase choices cannot be used at the same application. It's necessary to choose just one.

App.js example:

import React, { useRef } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import SignatureScreen from "react-native-signature-canvas";

export default function App() {
  const ref = useRef();

  const undo = () => {
    ref.current.undo();
  };

  const erase = () => {
    ref.current.erase();
  };

  const draw = () => {
    ref.current.draw();
  };

  const changeColor = (color) => {
    ref.current.changePenColor(color);
  };

  return (
    <View style={styles.container}>
      <SignatureScreen
        ref={ref}
      />
      <View style={{ flexDirection: "row" }}>
        <Button title="undo" onPress={undo} />
        <Button title="draw" onPress={draw} />
        <Button title="erase" onPress={erase} />
        <Button title="change color" onPress={()=>changeColor("#d45")} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Example to get strokes:

import React, { useRef, useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import SignatureScreen from "react-native-signature-canvas";

export default function App() {
  const ref = useRef();

  const handleSignature = (signature) => {
    console.log(signature);
  };

  const getData = (data) => {
    data = JSON.parse(data);
    console.log(data);
    //each stroke have color and a points array
    data.forEach((stroke) => {
      console.log("\n ** stroke: **")
      stroke.points.forEach((p) =>
        console.log("time:" + p.time + "\npoints: " + p.x + "," + p.y)
      );
    });
  };



  return (
    <View style={styles.container}>
      <SignatureScreen ref={ref} onOK={handleSignature} onGetData={getData} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

[YanYuanFE]

Thanks,It would be better if you add the api description in the readme。

[leneti]

Would it be possible to make the background image loaded with the dataURL prop to be separate from the signature on the top? Currently the undo button removes the background image and the erase mode allows erasing of the image as well. Is there anything that can be done?