5

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?)

blueether
  • 3,666
  • 4
  • 26
  • 32
  • 2
    what are you requirements for a "signature pad"? Do you simply want an area in which your user can use their finger to draw their signature and for you to be able to get that image? The reason you'd need to eject is because at the end of the day React Native translate JS into native Android views, so if the JS -> native translation isn't supported by Expo, then you'd have to eject (it's not all that bad) – ACVM Mar 21 '18 at 01:50
  • @ACVM Yes, that is basically the requirement, User draws a signature with their finger. I can definitely eject it, but right now my team is benefiting from sharing the app using Expo and I'd rather not give that up until I absolutely must. It's far more convenient for my distributed team than doing Testflight builds (for iphone) – blueether Mar 21 '18 at 01:56
  • advanced version of react-native-signature-capture is here https://github.com/john1jan/react-native-signature-capture – John Apr 01 '20 at 10:56

3 Answers3

3

The way React Native works is that each component available in React Native maps to a native component in the underlying platform.

ie. a <Image /> is an ImageView in Android and a UIImageView.h in iOS.

The Javascript code itself runs in a Javascript thread on each platform and as you use Components in React Native, there's a translation layer that passes information from JS into the React Native bridge that then results in corresponding native components being created.

By default, React Native has included the following components: https://facebook.github.io/react-native/docs/components-and-apis.html#basic-components which means that only those components come out-of-the-box in React Native. If you want other components, then you have 2 options, either create a "composite" component in which your JS component is written into other JS components or, if your feature needs a native component not yet exposed by React Native, write your own "native" component to expose certain native functionality to your React Native code.

The way Expo works is that they have wrapped React Native and a handful of 3rd party components and built it within their application. The reason why you can't use a 3rd party native component they don't support is because when that component is used, the app itself doesn't have translation code to go from JS to a native Android/iOS view.

So, to do what you're asking, you'd need to find either a "native" drawing component that Expo has included in their platform/app. OR you need to find a "composite" drawing component that is built with other default React Native components (or other components Expo supports).

ie. On Android, I might build this with a Canvas view, but from what I can tell React Native doesn't support that object natively, so I would probably write this myself, etc.

It's hard for Expo to support every 3rd party "native" component out there because React Native is open source and it iterates so fast that most community-built components aren't always up to date or they might conflict with one another.

ACVM
  • 1,497
  • 8
  • 14
  • Thanks for the incredibly clear explanation. This is enough info for me to pick a clear path forward for a Signature component. – blueether Mar 22 '18 at 16:54
2

I am using react-native-signature-capture. Working properly on both Android and iOS.

enter image description here

Miss Chanandler Bong
  • 4,081
  • 10
  • 26
  • 36
KAUSHIK PARMAR
  • 535
  • 6
  • 11
  • I was tried this, But facing the Maximum update exceeded when navigate to the signature screen – Prasad Oct 16 '19 at 05:56
  • how to add timestamp to signature using react-native-signature-capture?can someone please help me – Sridevi Ch Nov 18 '19 at 09:11
  • most advanced version of react-native-signature-capture is here https://github.com/john1jan/react-native-signature-capture – John Apr 01 '20 at 10:55
1

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.

Tim
  • 20
  • 4