WiP - Had to commit that.

Author: jgrancher

.eslintrc

@@ -3,6 +3,7 @@
   "parser": "babel-eslint",
   "rules": {
     "react/jsx-filename-extension": "off",
-    "react/no-unused-prop-types": "warn"
+    "react/no-unused-prop-types": "warn",
+    "no-use-before-define": "off"
   }
 }

.npmignore

@@ -0,0 +1 @@
+examples

README.md

@@ -1,129 +1,102 @@
-# React Native Sketch
+# 🎨 React Native Sketch
 
-[![Version](https://img.shields.io/npm/v/react-native-sketch.svg?style=flat-square)](http://npm.im/react-native-sketch)
-[![Downloads](https://img.shields.io/npm/dm/react-native-sketch.svg?style=flat-square)](http://npm.im/react-native-sketch)
-[![Gitter](https://img.shields.io/badge/chat-on%20gitter-1dce73.svg?style=flat-square)](https://gitter.im/jgrancher/react-native-sketch)
-[![MIT License](https://img.shields.io/npm/l/react-native-sketch.svg?style=flat-square)](http://opensource.org/licenses/MIT)
+[![npm](https://img.shields.io/npm/v/react-native-sketch.svg)](https://www.npmjs.com/package/react-native-sketch)
+[![Downloads](https://img.shields.io/npm/dm/react-native-sketch.svg)](https://www.npmjs.com/package/react-native-sketch)
+[![MIT License](https://img.shields.io/npm/l/react-native-sketch.svg)](http://opensource.org/licenses/MIT)
 
-*A React Native component for touch-based drawing.*
+A React Native component for touch-based drawing.
 
 ![Screenshots](https://cloud.githubusercontent.com/assets/5517450/15202227/ca865758-183b-11e6-8c4e-41080bc04538.jpg "Disclaimer: This is not my signature ;)")
 
-## Getting started
+## Features
+
+- 👆 Draw with your finger, and export an image from it.
+- 🖍 Change the stroke color and thickness on the fly.
+- 👻 Generate a transparent image (or not).
+
+## Setup
+
+Install the module from npm:
 
-Install React Native Sketch:
 ```bash
-$ npm install react-native-sketch
+npm install react-native-sketch
 ```
 
-Then, link it to your project:
+Link the module to your project:
+
 ```bash
-$ react-native link
+react-native link react-native-sketch
 ```
 
-**Note**: If you are using an older version of React Native than `0.31`, you will need to install [rnpm](https://github.com/rnpm/rnpm) to link the module.
-
 ## Usage
 
 ```javascript
 import React from 'react';
-import {
-  Button,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { Alert, Button, View } from 'react-native';
 import Sketch from 'react-native-sketch';
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  sketch: {
-    height: 250, // Height needed; Default: 200px
-  },
-});
-
-class Signature extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.clear = this.clear.bind(this);
-    this.onReset = this.onReset.bind(this);
-    this.onSave = this.onSave.bind(this);
-    this.onUpdate = this.onUpdate.bind(this);
-  }
-
-  state = {
-    encodedSignature: null,
+export default class MyPaint extends React.Component {
+  save = () => {
+    this.sketch.save().then(({ path }) => {
+      Alert.alert('Image saved!', path);
+    });
   };
 
-  /**
-   * Clear / reset the drawing
-   */
-  clear() {
-    this.sketch.clear();
-  }
-
-  /**
-   * 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}>
+      <View style={{ flex: 1 }}>
         <Sketch
-          fillColor="transparent"
-          strokeColor="#111111"
-          strokeThickness={2}
-          imageType="png"
-          onReset={this.onReset}
-          onUpdate={this.onUpdate}
-          ref={(sketch) => { this.sketch = sketch; }}
-          style={styles.sketch}
-        />
-        <Button
-          onPress={this.clear}
-          title="Clear drawing"
-        />
-        <Button
-          disabled={!this.state.encodedSignature}
-          onPress={this.onSave}
-          title="Save drawing"
+          ref={sketch => {
+            this.sketch = sketch;
+          }}
+          strokeColor="#ff69b4"
+          strokeThickness={3}
         />
+        <Button onPress={this.save} title="Save" />
       </View>
     );
   }
-
 }
-
-export default Signature;
 ```
 
+## API
+
+Here are the `props` of the the component:
+
+| Name | Type | Default value | Comment |
+| ---- | ---- | ------------- | ---- |
+| `fillColor` | `String` | `null` | The color of the sketch background. Default to null to keep it transparent! *Note: This is different from the `style.backgroundColor` property, as the former will be seen in your exported drawing image, whereas the latter is only used to style the view.* |
+| `imageType` | `String` | `png` | The type of image to export. Can be `png` or `jpg`. Default to `png` to get transparency out of the box. |
+| `onChange` | `Function` | `() => {}` | Callback function triggered after every change on the drawing. The function takes one argument: the actual base64 representation of your drawing.|
+| `onClear` | `Function` | `() => {}` | Callback function triggered after a `clear` has been triggered. |
+| `strokeColor` | `String` | `#000000` | The color of the stroke with which you want to draw. |
+| `strokeThickness` | `Number` | `1` | The stroke thickness in pixels. |
+| `style` | `` | `null` | Some `View` styles if you need. |
+
+The component also has some instance methods:
+
+| Name | Return type | Comment |
+| ---- | ----------- | ------- |
+| `clear()` | `Promise` | Clear the drawing. This method is a Promise mostly to be consistent with the `save()` one, but you could simply type: `this.sketch.clear();` |
+| `save()` | `Promise` | Save the drawing to an image, using the defined props as settings (`imageType`, `fillColor`, etc...). The Promise resolves with an object containing the `path` property of that image. Ex: `this.sketch.save().then(image => console.log(image.path));` |
+
+## Examples
+
+The project contains a folder `examples` that contains few demos of how to use `react-native-sketch`. Just copy and paste the code to your React Native application.
+
+- [`ios-digital-touch.js`](https://github.com/jgrancher/react-native-sketch/tree/master/examples/ios-digital-touch.js): uses few colors buttons to reproduce the behaviour of iOS10 Message Digital Touch.
+- []
+
+Feel free to play with them!
+
+## Known issues
+
+- Rotating the screen gets to a weird behavior of the sketch view: [#23](https://github.com/jgrancher/react-native-sketch/issues/23)
+- Taping the screen without dragging your finger causes an update but does not display any point: [#25](https://github.com/jgrancher/react-native-sketch/issues/25)
+
 ## Notes
 
-- The module is available *only on iOS* (for now), as I don't know Android development... But if you think you can help on that matter, please feel free to contact me!
+- The module is available *only on iOS* (for now), as I don't know Android development... But if you think you can help on that matter, please feel free to [contact me](https://twitter.com/jgrancher)!
 - The module uses this [smooth freehand drawing technique](http://code.tutsplus.com/tutorials/smooth-freehand-drawing-on-ios--mobile-13164) under the hood.
 
 ## Contributing

examples/basic.js

@@ -0,0 +1,52 @@
+/**
+ * React Native Sketch - Basic example
+ * Uses the bare minimum to make react-native-sketch working
+ */
+
+import React, { Component } from 'react';
+import Sketch from 'react-native-sketch';
+import { AppRegistry, Button, StyleSheet, View } from 'react-native';
+
+export default class Basic extends Component {
+  clear = () => {
+    this.sketch.clear();
+  };
+
+  save = () => {
+    this.sketch.save().then(({ path }) => {
+      console.log('The image is saved there:', path); // eslint-disable-line no-console
+    });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Sketch
+          ref={(sketch) => {
+            this.sketch = sketch;
+          }}
+        />
+        <View style={styles.actionsBar}>
+          <Button color="#EA212E" onPress={this.clear} title="❌ Clear" />
+          <Button color="#1DBD21" onPress={this.save} title="Save  ✅" />
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F5FCFF',
+    flex: 1,
+    paddingTop: 20,
+  },
+  actionsBar: {
+    alignItems: 'stretch',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 20,
+  },
+});
+
+AppRegistry.registerComponent('Basic', () => Basic);