get rid of border in Card Component React native element

user_7517654 0
Viewed 9348

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

react-native
5 Answers

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

user_83389500

Its late but it seems that a lot of people still searching for the Answer.

React Native Elements by default have set both borderWidth and shadow Props, so in order to remove border completely you need to remove both Border and Shadow.

<Card containerStyle={styles.cardCnt}>
    <Text>Content</Text>
</Card>

const styles = {
   cardCnt: {
        borderWidth: 0, // Remove Border

        shadowColor: 'rgba(0,0,0, 0.0)', // Remove Shadow for iOS
        shadowOffset: { height: 0, width: 0 },
        shadowOpacity: 0,
        shadowRadius: 0,
        
        elevation: 0 // Remove Shadow for Android
  }
};
user_115573700

It looks like react native elements' Card component has a grey border in all of the examples I've seen. I'd suggest building your own card component. Start with something like this and then style it however you want. This one has a bit of shadow which you can turn off by passing it a noShadow prop.

import React from 'react';
import { View, StyleSheet } from 'react-native';

const Card = (props) => {
  let shadowStyle = {
    shadowColor: COLORS.grey3,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: .5,
    shadowRadius: 12,
    elevation: 1,
  }
  if (props.noShadow) {
    shadowStyle = {}
  }
  return (
    <View style={[styles.containerStyle, props.style, shadowStyle]}>
      {props.children}
    </View>
  );
};


const styles = StyleSheet.create({
  containerStyle: {
    padding: 10,
    marginHorizontal: 10,
    backgroundColor: COLORS.white,
    borderRadius: 3,
  }
})

export { Card };

Then when you want to use it just

import { Card } from './yourCustomCardFile'

Then in your render method

<Card>
<Text>Any content you want to include on the card</Text>
<Text>More content that you want on the card</Text>
</Card>
user_61829320

set elevation to 0 and borderColor to white like this

<Card containerStyle={{ elevation: 0, borderColor: "white" }}>

user_112978130

set to screen background color Dirty but problem solved.

user_122271270
Related