react-native-sketch

    1.1.0 • Public • Published

    🎨 React Native Sketch

    npm Downloads MIT License

    A React Native component for touch-based drawing.

    Capture

    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
    • Taping the screen without dragging your finger causes an update but does not display any point: #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 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

    DownloadsWeekly Downloads

    26

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • jgrancher