Signature Color change

[nodahikaru]

How I can change Signature color using property? <SignatureCapture style={{flex: 1}} ref="sign" onSaveEvent={this._onSaveEvent} onDragEvent={this._onDragEvent} saveImageFileInExtStorage={false} showNativeButtons={false} showTitleLabel={false} viewMode={"portrait"}/>

[mertozylmz]

Hi @dl528 , Here's how you can manage this:

<SignatureCapture 
    style={{flex: 1}} 
    ref="sign" 
    onSaveEvent={this._onSaveEvent} 
    onDragEvent={this._onDragEvent} 
    saveImageFileInExtStorage={false} 
    showNativeButtons={false} 
    showTitleLabel={false} 
    viewMode={"portrait"} 
    strokeColor="#3BC7C1" />

Difference is we added strokeColor="#3BC7C1" as props. And then you have to implement java code to make the props work.

Firstly open your node_modules/react-native-signature-capture folder.

in SignatureCapture.js

SignatureCapture.propTypes = {
  ...View.propTypes,
    rotateClockwise: PropTypes.bool,
    square: PropTypes.bool,
    saveImageFileInExtStorage: PropTypes.bool,
    viewMode: PropTypes.string,
    showNativeButtons: PropTypes.bool,
    showTitleLabel: PropTypes.bool,
    maxSize:PropTypes.number,
    strokeColor: PropTypes.string
};

Difference is we added strokeColor: PropTypes.stringas props.

After open your 'node_modules/react-native-signature-capture/android/src/main/java/com/rssignaturecapture' folder.

in RSSignatureCaptureView.java

public RSSignatureCaptureView(Context context, SignatureCallback callback) {

        super(context);
        this.callback = callback;

        //Fixed parameters
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);

        mMinWidth = convertDpToPx(8);
        mMaxWidth = convertDpToPx(16);
        mVelocityFilterWeight = 0.4f;

        //mPaint.setColor(Color.BLACK); Here don't used

        //Dirty rectangle to update only the changed portion of the view
        mDirtyRect = new RectF();

        clear();

        // set the bg color as white
        this.setBackgroundColor(Color.WHITE);

        // width and height should cover the screen
        this.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
    }

and

public Bitmap getSignature() function after add this code.

public void setStrokeColor(int strokeColor) {
        mPaint.setColor(strokeColor);
    }

in RSSignatureCaptureViewManager.java

public static final String PROPS_MAX_SIZE="maxSize"; after that add this code. public static final String PROPS_STROKE_COLOR="strokeColor";

and

@Override
    public String getName() {
        return "RSSignatureView";
    } 

after add this code.

@ReactProp(name = PROPS_STROKE_COLOR)
    public void setStrokeColor(RSSignatureCaptureMainView view, @Nullable String strokeColor) {
        Log.d("setStrokeColor:", "" + strokeColor);
        if(view!=null) {
            view.setStrokeColor(strokeColor);
        }
    }

Finally in RSSignatureCaptureMainView.java

public void setViewMode() function after add this code.

public void setStrokeColor(String strokeColor) {
    this.signatureView.setStrokeColor(Color.parseColor(strokeColor));
  }

[aliemre]

Also I made a pull request related to issue. https://github.com/RepairShopr/react-native-signature-capture/pull/84

[NgKhanh]

@mozaik1 That's great. How we can do it on iOS

[aliemre]

Hi @NgKhanh please follow this repository the extend these features on both iOS and Android. Custom stroke and background-color features are available.

[whysetiawan]

@mozaik1 View.propTypes has been deprecated and will be removed in react-native future. Could we open PR and change it to ViewPropTypes instead ?

[mertozylmz]

@whysetiawan View.propTypes is not required anymore. I suggest to use propTypes as dependency. Just hit the following command: $ npm install prop-types --save

[whysetiawan]

@mozaik1 Really? i use this library on RN 0.51, it works fine when development mode. But when i build the project to APK, the app instantly crash. I also test this library in RN 0.42.3. It works fine when development and released APK

[mertozylmz]

@whysetiawan What platform do you run on? Android ? I need to examine this. Will you give me some time?

[whysetiawan]

@mozaik1 yes i run on android

[whysetiawan]

@mozaik1 glad hear you'll examine this. sure you can examine this as fast as you can

[mertozylmz]

@whysetiawan Okay, I'll be back in the day. I am working. For this reason you should wait. :)

[mertozylmz]

@whysetiawan Hi. I solved the problem. Firstly open your node_modules/react-native-signature-capture folder. And SignatureCapture.js Add "ViewPropTypes" to :

var {
    requireNativeComponent,
    View,
    UIManager,
    DeviceEventEmitter,
    ViewPropTypes // HERE
} = ReactNative;

And change ...View.propTypes to ...ViewPropTypes It works like this.

[whysetiawan]

@mozaik1 Thanks! Could you update this library? So people won't face the error like me 😀

[darsodango]

@aliemre how about changing the stroke color value dynamically by the state values on iOS?

strokeColor={this.state.strokeColor}

[aliemre]

@mertozylmz Can you help me about @darsodango 's question?

[mertozylmz]

@darsodango I don't know Swift or Objective-C. But you can look alternative links.

https://github.com/terrylinla/react-native-sketch-canvas https://github.com/VGamezz19/react-native-sketch-draw