How to fix react-native-signature-canvas overflow on Android?

Issue

I'm having a problem that the canvas of react-native-signature-canvas is overflowing the screen.

I tried to use {paddingRight: 50} to SignatureScreen component but the result is white space on the right side of the image.

I tried to modify margin, position, padding, also using a parent View component without success. Any help is much appreciated.

I'm running the app with ExpoGo on a Samsung Galaxy Tab S6 Lite with Android 12.

Solution

I faced the same issue in galaxy tab and fixed it by adding position fixed in m-signature-pad. Add this style to your webStyle in your Signature component:

`.m-signature-pad {
  position: fixed;
  margin:auto; 
  top: 0; 
  width:100%;
  height:50%
}
body,html { 
  position:relative; 
}`

Hope this helps you.

Answered By - Alok Mahanta