react-native-sketch-2

    0.2.5 • Public • Published

    react-native-sketch

    Version Downloads Gitter MIT License

    A react-native component for touch-based drawing.

    Screenshots

    Getting started

    Install rnpm to make things easy:

    $ npm i -g rnpm

    Then, use rnpm to install and link this component to your project:

    $ rnpm install react-native-sketch

    Usage

    import React, { Component } from 'react';
    import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
    import Sketch from 'react-native-sketch';
     
    const styles = StyleSheet.create({
      container: {
        padding: 20,
      },
      instructions: {
        fontSize: 16,
        marginBottom: 20,
        textAlign: 'center',
      },
      sketch: {
        height: 250, // Height needed; Default: 200px
        marginBottom: 20,
      },
      button: {
        alignItems: 'center',
        backgroundColor: '#111111',
        padding: 20,
      },
      buttonText: {
        color: '#ffffff',
        fontSize: 16,
      },
    });
     
    class Signature extends Component {
     
      constructor(props) {
        super(props);
        this.onReset = this.onReset.bind(this);
        this.onSave = this.onSave.bind(this);
        this.onUpdate = this.onUpdate.bind(this);
      }
     
      state = {
        encodedSignature: null,
      };
     
      /**
       * Do extra things after the sketch reset
       */
      onReset() {
        console.log('The drawing has been cleared!');
      }
     
      /**
       * The Sketch component provides a 'saveImage' function (promise),
       * so that you can save the drawing in the device and get an object
       * once the promise is resolved, containing the path of the image.
       */
      onSave() {
        this.sketch.saveImage(this.state.encodedSignature)
          .then((data) => console.log(data))
          .catch((error) => console.log(error));
      }
     
      /**
       * On every update (touch up from the drawing),
       * you'll receive the base64 representation of the drawing as a callback.
       */
      onUpdate(base64Image) {
        this.setState({ encodedSignature: base64Image });
      }
     
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.instructions}>
              Use your finger on the screen to sign.
            </Text>
            <Sketch
              fillColor="#f5f5f5"
              strokeColor="#111111"
              strokeThickness={2}
              onReset={this.onReset}
              onUpdate={this.onUpdate}
              ref={(sketch) => { this.sketch = sketch; }}
              style={styles.sketch}
            />
            <TouchableOpacity
              disabled={!this.state.encodedSignature}
              style={styles.button}
              onPress={this.onSave}
            >
              <Text style={styles.buttonText}>Save</Text>
            </TouchableOpacity>
          </View>
        );
      }
     
    }
     
    export default Signature;

    Roadmap

    • Define a way for an external component to clear the current drawing.
    • Improve the documentation.
    • Make some tests.
    • Android support (help wanted ¯\(ツ)/¯).

    Notes

    This component uses this smooth freehand drawing technique under the hood.

    Contributing

    Feel free to contribute by sending a pull request or creating an issue.

    License

    MIT

    Install

    npm i react-native-sketch-2

    DownloadsWeekly Downloads

    0

    Version

    0.2.5

    License

    MIT

    Last publish

    Collaborators

    • alexsotocx