can't make background transparent it still has a white background
atefwahab opened this issue · 5 comments
atefwahab commented
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 commented
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 commented
only use
backgroundColor={'transparent'}
can work fine
YanYuanFE commented
YanYuanFE commented
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 commented
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",