라이브러리 소개

GitHub - RepairShopr/react-native-signature-capture: A simple modular component for react native (iOS) to capture a signature as an image

• 선정 이유: 동일 목적의 타 라이브러리에 비해 유지보수 빈도, 다운로드 수 등에서 제일 우수

특징

1. 메인 컴포넌트인 <SignatureCapture>의 속성 내에 대부분 필요한 property와 method를 포함하고 있음
2. "Save"와 "Reset" 버튼이 디폴트로 포함되어 있으며, showNativeButtons 속성 값으로 보여주거나 숨길 수 있음 : 버튼 클릭 만으로 내장 함수인 saveImage()가 호출되고, 이어서 이벤트 리스너에 의해서 콜백함수인 onSaveEvent가 순서대로 호출되는 것으로 보임
3. 외부 스토리지에 저장할지 여부에 대한 boolean 속성 값을 포함하고 있음 = saveImageFileInExtStorage
4. 이미지는 base64 형식으로 encode되어, <Image>의 source ={{uri: ~ }}로 화면에 띄울 수 있음

더 알아보기

• 버튼 customization

필요 배경 지식

Data URIs

Data URIs, 즉 data: 스킴이 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 임베드할 수 있도록 해줍니다.

Data URIs - HTTP | MDN

data:[<mediatype>][;base64],<data>

테스트 시연 영상

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0a6b8d5d-a5f0-47be-8d43-ed397d465aae/화면_기록_2021-08-09_오전_11.38.11.mov