rn-signature-view

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>
  );
}