Package Exports
- rn-signature-view
- rn-signature-view/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rn-signature-view) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
This is signature View for React Native, made with Java / Swift + Objective-C
Properties
| Prop | Type | Description |
|---|---|---|
| addListener | (e: Event) => void |
e: "ON_STARTED" or "ON_CLEARED" |
Methods
| 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>
);
}