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

user_19476497 0
Viewed 38

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.

enter image description here

    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>

    )
react-native reactjs
2 Answers

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?

enter image description here

user_11988130

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"
    }

The below image is the example for the above button

user_185758690
Related