Search code examples
react-nativeexpocreate-react-native-appsignaturepad

How can I do Signature Capture in React Native?


I'm trying to understand how I can do a signature capture in React Native. My App is created with create-react-native-app and Expo and I'd prefer to not have to eject the app to get this functionality to work.

Would it be possible to wrap something like this in a webview? https://github.com/szimek/signature_pad

I've also looked at this project, https://github.com/RepairShopr/react-native-signature-capture but it requires me to eject the app and use react-native link.

Looking for any advice or suggestions on how to implement this feature while keeping my project as straightforward as possible (ideally, using create-react-native-app, but if this isn't possible could someone please explain to me why?)


Solution

  • I know it's been a while, but there is an interesting article here: https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac

    Wait, but how?

    Using “expo-pixi”, you can add a component that lets you choose your brush’s color, thickness, and opacity. Then when your user lifts her finger, you get a callback. From there you can take a screenshot of the transparent view or get the raw point data if that’s what you’re looking for.