React-native-ui-kitten: Customize card body

[AntoinedeChassey]

💬 Question

Hey guys,
Just a quick question, is it possible to remove the padding properties on the body of the card component?
Is this customizable?
Thanks a lot,
Antoine

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 1.4.0 |
| @ui-kitten/components | 4.4.1 |

[artyorsh]

You can:

• Do this with mapping customization
• Use negative paddings like style={{ paddingHorizontal: -16 }} to override the actual value.

[artyorsh]

@AntoinedeChassey sorry, not padding. The option is to pass a negative margin to a child element.

[AntoinedeChassey]

Hey @artyorsh! You're a genius, thanks so much for the quick answer :)

Applied the following on the child element:

marginHorizontal: -24,
marginVertical: -16,

[domsterthebot]

@AntoinedeChassey Hi sir! May i ask if you directly added to your component?

Such as,

<Item style={{marginHorizontal: -24, marginVertical: -16}} ... />

I'm trying to remove the spacing at the top and bottom of the image, but to no avail.
I tried custom mapping but i think i'm doing it wrongly..

// Mapping file
{
  "components": {
    "Card": {
      "appearance": {
        "outline": {
          "mapping": {
            "headerMarginHorizontal": -24, // Tried
            "headerMarginVertical": -16
            "headerPaddingHorizontal": 0, 
            "headerPaddingVertical": -100
          }
        }
      }
    }
  }
}

// Card
const Header = () => (
    <View style={styles.imageContainer}>
      {imageUrl ? (
        <ImageBackground style={styles.image} source={{ uri: imageUrl }} />
      ) : (
        <ImageBackground
          style={styles.image}
          source={require('../assets/images/1.jpg')}
        />
      )}
    </View>
  );

  return (
    <Card
      style={styles.container}
      header={Header}
    >
      <Text category='h6'>
        {name}
      </Text>
    </Card>
  );

And i'm still unsure why my text (test, test 2, ...) starts from the bottom, like a flex style of flex-end has been applied.

Thanks!

EDIT: Sorry @artyorsh wondering if you could please assist.. i looked through the docs but i'm still unable to do it.. ugh...

[artyorsh]

@domsterthebot

"headerMarginHorizontal": -24, // Tried

In mapping, what you've set is for header is not for the body, isn't it?

[AntoinedeChassey]

@domsterthebot try to put what is in your header inside the card component itself :
As:

<Card
  style={styles.container}
  header={Header}
>
    <View style={styles.imageContainer}>
      {imageUrl ? (
        <ImageBackground style={styles.image} source={{ uri: imageUrl }} />
      ) : (
        <ImageBackground
          style={styles.image}
          source={require('../assets/images/1.jpg')}
        />
      )}
    </View>
</Card>

Might be something with the header not accepting styling..

[vzts]

The correct key for mapping is

export const mapping = {
  components: {
    Card: {
      appearances: {
        outline: {
          mapping: {
            bodyPaddingHorizontal: 16,
          }
        }
      }
    }
  },
}

[iamadityaaz]

I have done multiple mapping for font-family and card

{
  "strict": {
    "text-font-family": "Ubuntu-Regular"
  },
  "components": {
    "Card": {
      "appearances": {
        "outline": {
          "mapping": {
            "bodyPaddingHorizontal": -16,
            "bodyPaddingVertical": -16
          }
        }
      }
    }
  }
}