Signature pad not taking the full height and width

[TNAJanssen]

The red area is HTML and blue is the signature pad, on all other devices this works perfectly.

[YanYuanFE]

Please provide code example

[atefwahab]

add const to your code as below

 const style = `.m-signature-pad--footer {display: none; margin: 0px;} 
    .m-signature-pad {
        position: absolute;
        font-size: 10px;
        width: 100%;
        height: 100%;
        top: 0;
        // left: 50%;
        // border: 1px solid #e8e8e8;
        background-color: transparent !important;
        // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
      }
      body {
        background-color: transparent !important;
      }`;

and then add this const to web style property as below

<SignatureScreen
      ref={ref}
      onEnd={handleEnd}
      onOK={handleOK}
      onEmpty={handleEmpty}
      onClear={handleClear}
      onGetData={handleData}
      autoClear={false}
      backgroundColor={'transparent'}
      descriptionText={text}
      **webStyle={style}**

    />

[stonedauwg]

@TNAJanssen: by pad and device assuming you mean iPad?

[zhenkaGo]

@TNAJanssen add margin: 0px; to .m-signature-pad

[azebuji]

I was having this problem and then I solve to put the const style like above:

(

const style = `.m-signature-pad {
              margin-left: 0%;
              margin-top: 0%;
            }
          .m-signature-pad--body {border: none}
           .m-signature-pad--footer
                    .button {
                      bottom: 0px;
                      background-color: ${customColor};
                      line-height: 30px;
                      text-align: center;
                      color: #FFF;
                      border: none;
                      outline: none;
                }
        `;

return (

  <View style={[mainStyles.container]}>
    <Signature
      webStyle={style}
      style={{
        margin: 0, padding: 0
      }}
      onOK={(img) => { setSignature(img); setShowSignature(false); }}
      clearText="Limpar"
      descriptionText="Insíra a sua assinatura acima."
      confirmText="Salvar"
      imageType="image/png"
    />
  </View>
);

)

and that's works! but... some clients related to me the area are out of the box, like when I don't put the style const propertys. What would be happening?

[Helaers]

Building on top of @atefwahab... For those running into this issue now, the minimum you need to just hide the footer:

const webStyle = `
.m-signature-pad--footer {display: none;}
.m-signature-pad {
  position: absolute;
}
`;

<View style={styles.container}>
  <SignatureScreen
        webStyle={webStyle}
        ref={ref}
        onEnd={handleEnd}
        onOK={handleSignature}
        autoClear={false}
        showsVerticalScrollIndicator={false}
      />
  </View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderRadius: 12,
    overflow: 'hidden',
  }
});

If you're like me and want to have a simple white card to sign in, you'll have to use this snippet to remove the shadows/borders:

  const webStyle = `
    .m-signature-pad--footer {display: none;}
    .m-signature-pad {
        position: absolute;
        // Extra styles
        border: none;
        border: 1px solid #fff;
        box-shadow: none;
    }

    .m-signature-pad--body {
        border: none;
    }
`;

Just clearing the borders with border: none didn't work for me. It kept rendering a gray border around everything (the webview?) I tried resetting everything I found in https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css but to no avail. The only thing that worked was after the reset, setting it again with a white border (border: 1px solid #fff;)