React-Native native-base How to decrease the spacing between card Items?

Question

render() {
  return(
    <Card style={{  padding: 0 }}>
      <CardItem listItemPadding={0} header style=styles.Card}>
        <Text style={styles.cardText}>
          {this.props.library.title}
        </Text>
      </CardItem>
    </Card>
  );
}

The docs say that listItemPadding can be used but it's not working I have tried to change the padding of to 0 but it's not working either.

Answer 1

Use the cardBody attribute in cardItem it will work.

Answer 2

I see that you are trying to use listItemPadding prop which doesn't exist at the moment.

ListItem, Card and CardItems, each have some padding or margin of their own. You can just inspect the screen, check it and remove the padding/margin as per your requirement using style. Or you can eject NativeBase theme (Customize) and do your changes in the theme of those components. That way you will have the same styles for those components in your whole app.

Probably you are looking for a paddingVertical property. You can add a negative value and then edit your component style as you will normally do.

native-base-theme/components/CardItem.js

paddingVertical: variables.cardItemPadding - 5,

Then on your component:

render() {
  return(
    <Card style={{  padding: 10 }}>
      <CardItem header style={{ paddingTop: 10 }}>
        <Text>Item</Text>
      </CardItem>
    </Card>
  );
}