npm install react-native-signature-capture --save
link npm package
import React, { createRef } from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Text,
TouchableHighlight,
} from 'react-native';
import SignatureCapture from 'react-native-signature-capture';
export default function Signature() {
const sign = createRef();
const saveSign = () => {
sign.current.saveImage();
};
const resetSign = () => {
sign.current.resetImage();
};
const _onDragEvent = () => {
console.log('dragged');
};
const _onSaveEvent = async (result) => {
console.log(result)
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<SignatureCapture
style={styles.signature}
ref={sign}
onSaveEvent={_onSaveEvent}
onDragEvent={_onDragEvent}
showNativeButtons={false}
showTitleLabel={false}
minStrokeWidth={10}
maxStrokeWidth={10}
backgroundColor='transparent'
viewMode={'portrait'}
/>
<View style={{ flexDirection: 'row' }}>
<TouchableHighlight
style={styles.buttonStyle}
onPress={() => {
saveSign();
}}>
<Text>Save</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.buttonStyle}
onPress={() => {
resetSign();
}}>
<Text>Reset</Text>
</TouchableHighlight>
</View>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
titleStyle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
signature: {
flex: 1,
borderColor: '#000033',
borderWidth: 20,
borderColor: 'green'
},
buttonStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
color: 'white',
height: 50,
backgroundColor: '#c72028',
margin: 10,
},
});
Discussion