Multiple layout/styling issues

[srmagura]

Sample app that demonstrates these problems: https://github.com/srmagura/signature-canvas-repro

Here are screenshots of each page of the sample app (click image to view full size):

These screenshots are from Android, but if my memory serves, the same issues are present on iOS.

I am interested in fixing these but it would almost certainly be a breaking change.

If we will be making a new major version anyway, it would be a good opportunity to convert the library to TypeScript, add some automated tests, and review all of the repository's open issues. I am willing to work on this, so let me know if you are interested @YanYuanFE. Thanks!

[YanYuanFE]

@srmagura Thanks, welcome to PR.

[jimmihagenTrifecta]

is there a workaround for the issues relating to the canvas not filling the available space?

[srmagura]

@jimmihagenTrifecta It takes a lot of fiddling to get it to work, but it is possible. I recommend looking at the sample application in this repository, or at this excerpt from my app's code: https://gist.github.com/srmagura/66a2f315f37ddd1af183e5325d23a316

[kdoroszewicz]

For anyone facing problems with positioning the Signature correctly I've managed to stumble upon an elegant solution to display it fullscreen in landscape mode. I tested it on 6.7″ phone and 10″ tablet.

Here are the relevant parts:

import { useWindowDimensions } from "react-native";

...

const SignaturePad = () => {
  const { width } = useWindowDimensions();

  return (
    <View style={styles.container}>
      <SignatureScreen
        webStyle={`.m-signature-pad {
          height: ${width - 80}px;
          margin: 0;
        }`}
        rotated
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
});

[josh-thompson13]

I'm having this problem too. Works OK on macOS though.

[josh-thompson13]

I have fixed the problem. The signature-pad.css file has hard coded pixel widths for the signature. Simply add this to your code and it should fix issues. In this example I've used width but it works for height too.

webStyle={ .m-signature-pad { width: 80% }}

[omerts]

I had an issue that it looked like this:

Solved it by removing the margin:

webStyle={`
  .m-signature-pad { 
    margin: 0;
  }
`}