1.0.0 • Published 4 years ago
react-native-draw-view v1.0.0
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
1.0.0
4 years ago