🎨 React Native Sketch

A React Native component for touch-based drawing.

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:

npm i -S react-native-sketch

Link the module to your project:

react-native link react-native-sketch

Usage

import React from 'react';
import { Alert, Button, View } from 'react-native';
import Sketch from 'react-native-sketch';

export default class MyPaint extends React.Component {
  save = () => {
    this.sketch.save().then(({ path }) => {
      Alert.alert('Image saved!', path);
    });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Sketch
          ref={sketch => {
            this.sketch = sketch;
          }}
          strokeColor="#ff69b4"
          strokeThickness={3}
        />
        <Button onPress={this.save} title="Save" />
      </View>
    );
  }
}

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 stroke color you want to draw with.
strokeThickness	Number	1	The stroke thickness, in pixels.
style	Style object	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 save(), 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.

• Basic: uses the bare minimum to make it work.
• Digital Touch: tries to reproduce the look and feel of iOS Message Digital Touch.

Feel free to play with them!

Known issues

• Rotating the screen gets to a weird behavior of the sketch view: #23

Notes

• If you're using Expo, you will have to detach to ExpoKit, as this module uses native iOS code.
• 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 create a Pull Request!
• The module 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