In the Card Component for react native elements
I'm trying to get rid of the border by setting the border to 0 and borderColor to transparent but there's still a gray outline
<Card
containerStyle={{borderWidth: 0, borderColor: 'transparent', elevation: 0}}
title='HELLO WORLD'
image={require('../images/pic2.jpg')}>
<Text style={{marginBottom: 10}}>
The idea with React Native Elements is more about component structure than actual design.
</Text>
</Card>
Thought it might have been box shadow, but that's not it either
I've got the same issue, and I've found that border appears because the Card element has an elevation default setted to 1
You can override this (for android) :
<Card containerStyle={{elevation:0, backgroundColor:#123}}/>
and in IOS:
const styles = {
container: {
shadowColor: 'rgba(0,0,0, .2)',
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 0, //default is 1
shadowRadius: 0//default is 1
}
}
<Card containerStyle={styles.container} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With