react-native-draw-view

A React Native component for free-hand drawing on both iOS and Android.

Features

👆 Draw with your finger and export an image from it.
💾 Save your sketch to image.
🖍 Change the stroke color and thickness of the pen easily.
👻 Full-customize UI.

Setup

Install the module from npm:

npm i --save react-native-draw-view

Link the module to your project:

react-native link react-native-draw-view

Note: For iOS, if you're using CocoaPod, remember to cd ios && pod install after link. Or you can manual link follow this instruction.

Important for iOS: Because the source code is written in Swift, so if your project doesn't include any .swift file, please open your project in XCode, create a file anyname.swift, accept to create the bridging header, then just leave it empty is ok.

Usage

import React from 'react';
import { View } from 'react-native';
import DrawView from 'react-native-draw-view';

export default class MyScreen extends React.Component {
  drawer;

  save = () => {
    this.drawer.save()
  }

  reset = () => {
    this.drawer.reset();
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <DrawView
          style={{ flex: 1, backgroundColor: '#eee' }}
          onRef={el => this.drawer = el}
          color="#000"
          strokeWidth={2}
          onSaved={res => console.log('Save', res.nativeEvent)}
          onError={error => console.log('Error', error.nativeEvent)} />
        <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
          <Button title="Reset" onPress={this.reset} />
          <Button title="Save" onPress={this.save} />
        </View>
      </View>
    );
  }
}

API

Here are the props of the the component:

Name	Type	Default value	Comment
`color`	`String`	`'#000000'`	The stroke color you want to draw with.
`strokeWidth`	`Number`	`1`	The stroke thickness, in pixels.
`style`	Style object	`null`	Some `View` styles if you need.
`onRef`	Function	`null`	Bind draw view's ref to your variable.
`onSaved`	Function	`null`	Event called after the draw's saved successfully. The return value is an object `res` which `res.nativeEvent` include file's information: uri, mimetype, size, name.
`onError`	Function	`null`	Event called if there is error. The return value is an object `err` which `err.nativeEvent` include `message` of that error.

The component also has some instance methods:

Name	Return type	Comment
`reset()`	`Promise`	Reset the drawing. You could simply type: `this.sketch.clear();`
`save()`	`Promise`	Save the drawing to an image. The result's returned by `onSaved` event.`

Contributing

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

License

MIT

lukenguyen-me / react-native-draw-view