repairshopr / react-native-signature-capture Goto Github PK

this.refs['sign'] gives an instance of the signature capture component as expected, but this.refs['sign'].saveImage() method is unavailable and logs as undefined.

Hello.

I tried creating a modal signature view, but in my cansole, this error shows and it cannot draw on the pad!

Help appreciated!
Thank you

Hey guys, love this plugin to bits!
Any chance of one being developed for Android or know anyone who would know to develop one for Android?
Thanks

The dotted signature line does not expand with the width of the signature component as shown in this image.

Hello. Wondering whether you are having a problem as well. This is the Xcode error I keep getting when the React Native component is invoked...

when using with react native 0.40

error github.com/facebook/react-native/issues/11725

I have an app that I want keep in portrait. I was able to rotate and contain the signature component in iOS like so:

The issue I'm having is with Android. When running in a Genymotion emulator, the emulator starts freaking out and rotates back and forth until it crashes. I'm guessing this has to do with the Orientation being set by react-native-signature-capture.

Is this something that could be conditional, or simply not done on the assumption the developer could set it themselves?

I've implemented react-native-signature-panel in an app that uses the Navigator component to display it as required, and found that the onSaveEvent callback is called +1 times for each time I mount the scene.

Example code:

const React = require('react-native');
const SignatureCapture = require('react-native-signature-capture');

const {
    StyleSheet,
    View,
} = React;

var SignatureInput = React.createClass({
    componentWillUnmount () {
        console.log('UNMOUNTING');
    },
    onSave (result) {
        console.log('ONSAVE');
        this.props.onSave(result);
        this.props.navigator.pop();
    },
    render() {
        return (
            <View style={styles.view}>
                <SignatureCapture onSaveEvent={this.onSave}/>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    view: {
        flex: 1
    },
});

module.exports = SignatureInput;

In the console, the first time the scene is mounted and the onSaveEvent callback fires, everything happens as expected.

The second time, however, ONSAVE is logged twice. Third time, it's logged three times. And so on.

RN: 0.40

I am getting a throw from the "uimanager/ReactShadowNode.java":

Cannot add a child that doesn't have a CSS node to a node without a measure function!

Here is where the error is thrown in RN:

https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java

Hello!

is possible to draw on top of existing image? It would be great have this feature

Thanks!

I'm trying to install on an existing project, and followed the instructions given. I'm running React Native 0.18.0-rc

When trying to launch the app I get the following error:

* What went wrong:
A problem occurred configuring project ':app'.
> Cannot evaluate module reactnativesignaturecapture : Configuration with name 'default' not found.

I'm trying to integrate this component to my project and I get this warning when rendering the component:

Warning: forceUpdate(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

And the component does not render, is there something I forgot?

Exception in native call java.lang.NullPointerException: Attempt to invoke virtual method 'int android.app.Activity.getRequestedOrientation()' on a null object reference at com.rssignaturecapture.RSSignatureCaptureMainView.<init>(RSSignatureCaptureMainView.java:46) at com.rssignaturecapture.RSSignatureCaptureViewManager.createViewInstance(RSSignatureCaptureViewManager.java:77) at com.rssignaturecapture.RSSignatureCaptureViewManager.createViewInstance(RSSignatureCaptureViewManager.java:18) at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:44) at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:211) at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:148) at com.facebook.react.uimanager.UIViewOperationQueue$2.run(UIViewOperationQueue.java:776) at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:829) at com.facebook.react.uimanager.UIViewOperationQueue.access$1500(UIViewOperationQueue.java:44) at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:868) at com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame(GuardedChoreographerFrameCallback.java:32) at com.facebook.react.uimanager.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:131) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:856) at android.view.Choreographer.doCallbacks(Choreographer.java:670) at android.view.Choreographer.doFrame(Choreographer.java:603) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844) at android.os.Handler.handleCallback(Handler.java:739) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:148) at android.app.ActivityThread.main(ActivityThread.java:5417) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

Right now, a long press will clear the signature.
This can confuse the user, and it's absolutely unnecessary when there is also a reset button enabled.

Hello Team,

I'm using this but facing problem to remove dotted line like

For android and iOS both, please suggest
And also need to decode image for web module

It would be great to be able to access the Reset button press and run a function.

Currently I have a hint I've added over top the signature pad (with pointerEvents='none') to help the user know what to do:

I remove the hint by wrapping the signature pad in a TouchableWithoutFeedback object and changing the opacity of the hint to 0 when the user starts signing.

It would be great if the hint could reappear when the user hit Reset.

Not a big deal, but could be a nice feature.

The onSaveEvent function runs even if the signature is blank on Android. This is inconsistent with the iOS implementation.

Hello,

After linked the package, I got this error :
I'm using react-native 0.31.0, when I remove the line of my MainApplication the build is ok

Thanks

Trying to include UIManager from React package works, but onSaveEvent is not firing anymore on iOS

var {
PropTypes,
requireNativeComponent,
UIManager,
View,
} = React;

The signature pad is rotated. It is possible to rotate it with css, but then it will save the signature as rotated as well.

After using the onSaveEvent method, the result correctly return the path and the base64 encoding, however when I navigate to the given path, the save_signature folder is empty (also the image isn't displayed in the gallery)

Using Android with RN v0.40 and component version v0.4.5

1.React.findNodeHandle is not a function
2.getPackages() now is moved into MainApplication, there should be an activity in RSSignatureCapturePackage constructor, what should it be? new RSSignatureCapturePackage(new MainActivity())?

It's weird the native buttons are working fine but the custom buttons always clears the last Signature pad component

I can't edit an existing drawing

I'm working on a standard for displaying version support on React-Native module README files. I would love your feedback: react-native-version-support-table

After doing all the steps on the tutorial I run the following command: react-native run-android

I'm getting this error:

FAILURE: Build failed with an exception.

• Where:
  Settings file 'C:\myApp\android\settings.gradle' line: 3

• What went wrong:
  A problem occurred evaluating settings 'myApp'.

Project with path ':react-native-signature-capture' could not be found.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

PS: Line 133 is compile project(':reactnativesignaturecapture')

Following the readme instructions for installation and am not seeing the project file within the node module. Am I missing something?

Hi, I want to remove the dashed lines in the signature pad without going in to native code. Something like

<SignatureCapture
    displayDashedBorders={false}
/>

Is it doable?

error code EPEERINVALID
error peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
error peerinvalid Peer [email protected] wants react-native@>=0.17

Hi,

When I set the viewMode to landscape if I quit/save the pad, all of the screen view stay to landscape without the possibility to come back to portait.

I've tried decoding the result and converting it to JSON with something similar to:

var str = btoa(result.encoded)
var json = JSON.stringify(eval("(" + str + ")"));

but have had no success getting this to work.

Is it possible to save as JSON so I can save it in Postgres on my backend?

Hi,

Is any parameter to change the stroke color?
Or how to change from the source code?

Thanks in advance

I'm encountering an issue on iOS in React Native 0.38.0.

I'm finding that while the native buttons work consistently, using the saveImage method with my own buttons fails sporadically and unpredictably; sometimes it will work 3-4 times after first boot, sometimes it won't work at all. Once it has failed, it will fail every subsequent try as well, and resetImage also stops functioning as expected.

I don't know C, but I threw in some logs to try to get a sense of what was happening. The problem seems to occur in RSSignatureView/saveImage where the image apparently fails to save: isSuccess comes up null and the directory where signature.png is saved remains empty.

Happy to provide more information as necessary.

The option showNativeButtons={false} seems not to work in iOS. The property seems nowhere to be handled in the native component.

Hello team,

I have installed then run my app then my screen look this.

And unable to sign please help and suggest me.

Hi,

I was trying this component on ios simulator.
I am facing few problems here.

1. It is not coming in the landscape mode even when I set the viewMode value to "landscape"
2. On save or reset button click it is throwing error.

Below are the screenshots

Any chance we can get an option to rotate the final signature before saving??

Hey, great project!

Can we publish a new version with the changes in #17? I would love to keep using this project through npm.

Thanks!

Code issues with BuildConfig.DEBUG which is not defined as well as scope of method enclosing the call to BuildConfig

@OverRide
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

=> should be marked as "public" as required by Javac.

This being done, the example does not work on Android

I got this warning when I open the signature component:
Failed to bind EAGLDrawable: <CAEAGLLayer: 0x6000004326e0> to GL_RENDERBUFFER 1

I use these dependencies for my react-native project.
"react": "15.4.2", "react-native": "0.41.2"

The issue is that I can't sign on the signature component. There is no signature shown

Were it not pointed out to me by my colleague, I would have totally missed out on the Android support. I remember seeing the header description and moving on because I needed one that had support for both the platform (iOS & Android) but the header seemed to suggest support only for iOS.

The saveImageFileInExtStorage={false} prop should prevent the image from being saved to the file system.

This works correctly on android (see relevant code here).

However, on iOS, the value of the saveImageFileInExtStorage prop seems to be ignored. The image is saved to the file system regardless of its value. Looking at the code, there does not seem to be any conditional logic wrapping the code which saves to the file system (see relevant code here).

pod 'ReactNativeSignatureCapture', :path => '../node_modules/react-native-signature-capture'

I'm having problems when trying to save a blank signature on Android.

It either accepts the blank or returns this error:

Unrecognized signal `RESPONDER_RELEASE` or state `undefined` for Touchable responder `null`

When calling the resetImage method of the component, this error is thrown:

ExceptionsManager.js:61 React.findNodeHandle is not a function

I was able to fix this by replacing React with ReactNative. But now a new error is thrown, saying:

ExceptionsManager.js:76 Argument 1 (NSInteger) of RCTUIManager.dispatchViewManagerCommand must not be null

It seems that line 76 in SignatureCapture.js (UIManager.RSSignatureView.Commands.resetImage) is returning a null value. With further inspection I found that the UIManager.RSSignatureView.Commands object itself is empty. I am running RN 0.30.0. Any ideas for what could be causing this issue?

Hi!

There is a prop to change the stroke width??

Thanks!

Antonio

On commit 321a687 imports of React and ReactNative were changed.
A fix for this might be to change line 68 in SignatureCapture.js from:
React.findNodeHandle(this)
to:
ReactNative.findNodeHandle(this)

and the same change for line 78.

First of all, thank you for creating such a useful package. Installation instructions were accurate, and I am getting successful builds on both iOS and Android. On Android, the SignatureCapture component is working as expected, but I am having issues with iOS. When I try to draw my signature in iOS, my screen scrolls up and down and nothing is drawn on the component.

I tried changing the styling a bit, but this doesn't resolve the issue unfortunately. Please let me know what you think, and thank you.

Hi there,
Any chance of saving base 64 images with a transparent background?

Props rotateClockwise and square cause image to have white background color instead of transparent. The problem doesn't appear when no props are set.