This is signature View for React Native, made with Java / Swift + Objective-C
| Prop | Type | Description |
|---|---|---|
| addListener | (e: Event) => void |
e: "ON_STARTED" or "ON_CLEARED" |
| Function | Description |
|---|---|
| onClear() | Clear the current signature |
| onSave() | Returns base64 format of the signature with white background |
To call the methods use the useRef hook:
import RNFS from 'react-native-fs';
import {PERMISSIONS, requestMultiple} from 'react-native-permissions';
import SignatureView from 'rn-signature-view';
export default function App() {
const ref = useRef<SignatureView>(null);
useEffect(() => {
requestMultiple(
Platform.OS === 'ios' ? [PERMISSIONS.IOS.PHOTO_LIBRARY] : [],
);
}, []);
async function onSave() {
const image_data = await ref.current?.onSave();
if (!image_data) {
return;
}
const fileName = 'signature_' + new Date().getTime().toString() + '.png';
const file_path = RNFS.DocumentDirectoryPath + '/' + fileName;
RNFS.writeFile(file_path, image_data, 'base64').then(() =>
CameraRoll.saveAsset(file_path, {}),
);
}
async function onClear() {
ref.current?.onClear();
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.padContainer}>
<SignatureView
ref={ref}
addListener={e => console.log(e.nativeEvent.event)}
/>
</View>
<Button title="Save" onPress={onSave} />
<Button title="Clear" onPress={onClear} />
</SafeAreaView>
);
}