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