Drawing library for expo using svg.
npm install expo-drawexpo install react-native-svg
npm install --save @marangonieduardo/expo-draw or npm install --save git+https://github.com/MarangoniEduardo/expo-draw
import ExpoDraw from 'expo-draw'
containerStyle={{backgroundColor: 'rgba(0,0,0,0.01)'}}
rewind={(undo) => {this._undo = undo}}
clear={(clear) => {this._clear = clear}}
color={'#000000'}
strokeWidth={4}
enabled={true}
onChangeStrokes={(strokes) => console.log(strokes)}
/>
$3
strokes [Array] - set with some initial data. (defaults to [])
containerStyle [Object] - style for the container of the draw component.
color [String] - string representation of pen color (defaults to '#000000')
strokeWidth [Number] - width of pen strokes (defaults to 4)
rewind [Func] - a function for passing the draw component's undo functionality
clear [Func] - a function for passing the draw component's clear functionality
onChangeStrokes [Func] - callback that is called when the draw changes.
enabled [Boolean] - set if user can edit it. If false it disable also all touch event, so you can use it easly on GestureView like ScrollView.
`
Tips when implementing
You can save a screenshot of your canvas using takeSnapshotAsync, the method from expo, like so:
`
import { captureRef as takeSnapshotAsync } from 'react-native-view-shot';
mySaveFx = async () => {
const signatureResult = await takeSnapshotAsync(this.refOfExpoDrawElement, {
result: 'tmpfile',
quality: 0.5,
format: 'png',
});
//The output will be a local tmpfile (uri)[String], with the current lines that were drawn. Therefore, you can save it or so! ;)
console.log(signatureResult);
}
`
You can also save strokes array as json, for example, on firebase. In order to support all displays i recommend to use fixed dimensions:
`
state = {
strokes: []
}
saveOnFirebase = () => {
firebase.firestore().collection('signature').doc().set({strokes})
}
render() {
return(
containerStyle={{backgroundColor: 'rgba(0,0,0,0.01)', height: 300, width: 500}}
rewind={(undo) => {this._undo = undo}}
clear={(clear) => {this._clear = clear}}
color={'#000000'}
strokeWidth={4}
enabled={true}
onChangeStrokes={(strokes) => this.setState({strokes})}
/>
)
}
``