Skip to content

Commit

Permalink
Cavans appears blank on some Android devices and unable to replicate.
Browse files Browse the repository at this point in the history 
Have added ability to send back Canvas width and Height in order to try and diagnose.
  • Loading branch information
@jreason
jreason committed Jan 23, 2018
1 parent 8e86b3f commit 29806d7
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 2 deletions.
15 changes: 13 additions & 2 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,11 @@ class SignaturePad extends Component {
this.setState({base64DataUrl});
};

_bridged_canvasSize = (data) => {
this.props.onChange(data);
// this.setState({base64DataUrl});
};

_renderError = (args) => {
this.props.onError({details: args});
};
Expand All @@ -165,8 +170,14 @@ class SignaturePad extends Component {
};

_onMessage = (event) => {
var base64DataUrl = JSON.parse(event.nativeEvent.data);
this._bridged_finishedStroke(base64DataUrl);
// console.log(event.nativeEvent.data);
var data = JSON.parse(event.nativeEvent.data);
if (data.hasOwnProperty('width')) {
this._bridged_canvasSize(data);
}
else {
this._bridged_finishedStroke(data);
}
}

render = () => {
Expand Down
9 changes: 9 additions & 0 deletions injectedJavaScript/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
}
};
reportSize(width, height);
sizeSignaturePad();
enableSignaturePadFunctionality();
};
Expand All @@ -41,6 +42,14 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
var canvasElement = document.querySelector("canvas");
var reportSize = function(width, height) {
if (postMessage.length === 1) {
window.postMessage(JSON.stringify({ width: width, height: height }));
} else {
setTimeout(function() { reportSize(width, height) }, 100);
}
}
var finishedStroke = function(base64DataUrl) {
window.postMessage(JSON.stringify({ base64DataUrl: base64DataUrl }));
};
Expand Down

3 comments on commit 29806d7

@connor-ricks
Copy link

@connor-ricks connor-ricks commented on 29806d7 Jan 26, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

avioli/react-native-signature-pad@7b0774a

Might help! However, @avioli's repo now has an issue where the android doesn't actually draw, but only renders taps.

Very interesting indeed!

@jreason
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Zanchee i could not replicate the issue when in development mode, however, as soon as a switched to production, i found that the size of the canvas was null, null.

I'm not sure why it does this, however in order to fix the issue, you have to pass the height and width of the canvas.

As my signature canvas is not the full size of the screen, i had to get the size of the View containing the SignaturePad:

constructor(props) {
        super(props);

        this.state = {
            width: 0,
            height: 0,
        }
    }

_signaturePadSize = (e) => {
        this.setState({
            width: e.nativeEvent.layout.width * 2,
            height: e.nativeEvent.layout.height * 2,
        });
    };

render() {
        let sp = (this.state.width !== 0) ?
            <SignaturePad
                name=""
                onError={this._signaturePadError}
                onChange={this._signaturePadChange}
                width={this.state.width}
                height={this.state.height}
                style={{flex: 1, backgroundColor: 'white'}}/>
            : null;

        return (
            <View style={{flex: 1, flexDirection: 'row'}}>
                <View style={styles.headerContainer}>
                    <View style={styles.test}>
                        <View style={styles.buttonContainer}>
                            <Button title="Back" style={styles.button} onPress={this.handleExitPress}/>
                            <Text style={styles.headerText}>Please sign the screen</Text>
                            <Button title="Save" style={styles.button} onPress={this.handleSavePress}/>
                        </View>
                    </View>
                </View>
                <View style={styles.signatureContainer} onLayout={this._signaturePadSize}>
                    { sp }
                </View>
            </View>
        )
    }

@connor-ricks
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@avioli's detective work decided that the reason it was null null, was due to a race condition in which the post message is just a little slow. That means that the pad renders before it gets its size. Resulting in null null.

I've been constantly bouncing between your two forks! hah!

I was wondering if there was a way to disable the rendering of a name in your fork? If I don't pass a name as a prop, the component still tries to access the name prop. Just a little bug I discovered earlier today.

Please sign in to comment.