can't make background transparent it still has a white background

[atefwahab]

I can't set background of pad to be transparent it has a white background

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

    />

[Ol1va]

Hi, look at my props, did it that way

Signature component props

webStyle={`.m-signature-pad {background:transparent;border:none;box-shadow:none;height:${canvasHeight}px;} .m-signature-pad--body {border:none;} .m-signature-pad--footer {display: none;} .m-signature-pad--body canvas {box-shadow: none !important;}`}
style={styles.singnatureContainer}
webviewContainerStyle={styles.singnatureContainer}
backgroundColor='transparent'

Styles

singnatureContainer: {
    backgroundColor: 'transparent',
}

[YanYuanFE]

only use

backgroundColor={'transparent'}

can work fine

[YanYuanFE]

[YanYuanFE]

const Sign = ({ text, onOK }) => {
  const ref = useRef();
  const [bg, setBg] = useState(dataURL);

  // Called after ref.current.readSignature() reads a non-empty base64 string
  const handleOK = (signature) => {
    console.log(signature);
    onOK(signature); // Callback from Component props
  };

  // Called after ref.current.readSignature() reads an empty string
  const handleEmpty = () => {
    console.log("Empty");
  };

  // Called after ref.current.clearSignature()
  const handleClear = () => {
    console.log("clear success!");
  };

  // Called after end of stroke
  const handleEnd = () => {
    ref.current.readSignature();

  };

  // Called after ref.current.getData()
  const handleData = (data) => {
    console.log(data);
  };

  return (
      <SignatureScreen
          ref={ref}
          onEnd={handleEnd}
          onOK={handleOK}
          onEmpty={handleEmpty}
          onClear={handleClear}
          onGetData={handleData}
          descriptionText={text}
          backgroundColor={'transparent'}
      />
  );
};

export default function App() {
  const [img, setImg] = useState(null);
  return (
      <View style={styles.container}>
        <Sign text="Test" onOK={(img) => {
          console.log('ok')
          setImg(img);
        }} />
        <View style={styles.preview}>
          {img ? (
              <Image
                  resizeMode={"contain"}
                  style={{ width: 335, height: 114 }}
                  source={{ uri: img }}
              />
          ) : null}
        </View>
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  preview: {
    height: 114,
    backgroundColor: "red",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 15,
    flex: 1,
  },
  box: {
    width: 400,
    height: 400,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
  singnatureContainer: {
    backgroundColor: 'transparent',
  }
});

[mrchess]

webStyle={.m-signature-pad {background:transparent;border:none;box-shadow:none;height:${canvasHeight}px;} .m-signature-pad--body {border:none;} .m-signature-pad--footer {display: none;} .m-signature-pad--body canvas {box-shadow: none !important;}} style={styles.singnatureContainer} webviewContainerStyle={styles.singnatureContainer} backgroundColor='transparent'

I had to do this too.

backgroundColor: transparent did not work for me. Thank you for sharing this fix.

"react-native-signature-canvas": "^4.7.2",