How can I give a shadow to the TouchableOpacity in React Native? - reactjs

Question

I am trying to apply shadow to TouchableOpacity in React native. I used both styled-components and inline style.
I have a View component called PaintCon and PainDummy and a TouchableOpacity component called PaintBtn.
I applied shadow to PaintBtn. But the strange thing is that the shadow works just fine, but PaintBtn shows a faint square box that I don't know. Use elevation to get this square. How do I get rid of this?
Below is my code.
const PaintCon = styled.View`
flex-direction: row;
justify-content: center;
align-items: center;
flex:1;
`;
const PainDummy = styled.View`
width: 20%;
justify-content: center;
align-items: center;
flex:1;
`;
const PaintBtn = styled.TouchableOpacity`
width: 80%;
height: 70px;
background-color: lightcyan;
border-radius: 18px;
margin-bottom: 5px;
`;
return (
<PaintCon
>
<PainDummy
>
<PaintBtn
style={{backgroundColor:'#0097E8',
shadowColor: '#52006A',
shadowOffset: {width: 10, height: 3},
shadowOpacity: 50,
elevation: 10,
}}
activeOpacity={0.7}>
</PaintBtn>
<Text>#0097E8</Text>
</PainDummy>
</PaintCon>
)

Answer 1

It looks like you've given it a different background color (lightCyan in the PaintBtn styled component style). If you remove that background color, it should work?

Answer 2

You don't need to use TouchableOpacity like that. Refer my example given below,
<TouchableOpacity style={styles.card}>
{{------My Codes-----}}
</TouchableOpacity>
And the styles are,(For your reference I had set the ShadowColor to green),
const styles = StyleSheet.create({
card: {
backgroundColor: "#FFFFFF",
padding: 15,
margin: 10,
borderRadius: 15,
shadowColor: "green",
elevation: 15,
flexDirection: "row",
flex: 1,
justifyContent: "space-between"
}