React-native-ui-kitten: Content of Card starts from bottom

[domsterthebot]

💬 Question

Hi, i'd like to have the contents in the Card component to start from the top, such as flex-start. I tried applying different styles to the component but i can't get it to work.

<Card
      status={configured ? 'success' : 'danger'}
      style={styles.medicineContainer}
    >
      <Layout style={styles.imageContainer}>
        {imageUrl ? (
          <Image style={styles.image} source={{ uri: imageUrl }} />
        ) : (
          <Text>No image added!</Text>
        )}
      </Layout>
      <Text category='h6' style={styles.medName}>
        {name}
      </Text>
    </Card>

// Some styles
medicineContainer: {
    margin: 14,
    width: width * 0.42, // Dimensions Height and Width
    height: height * 0.36,
    borderRadius: 12
  },
  imageContainer: {
    width: '100%',
    height: 100,
    marginBottom: 10,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5
  }

Image for reference:

Thank you!

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 2.0.0-alpha.1 |
| @ui-kitten/components | 5.0.0-alpha.1 |

[artyorsh]

Like that?

[domsterthebot]

Hi, i guess i've to include the header then? I was thinking of going without the Card Header, but that'll do. Thank you @artyorsh !

[artyorsh]

@domsterthebot here is another way

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