Card
A card layout in React Native displays content within a styled container,
offering a visually distinct, organized presentation for items like text,
images, and buttons.
Props
variant
| Type: |
string |
| Description: |
Specifies the style variant of the card, such as primary, default, or
outline.
|
<Card variant="primary" ... />
style
| Type: |
Style Object |
| Description: |
Allows additional custom styles to be applied to the View component.
|
<Card style={{ backgroundColor: 'grey' }} ... />
flex
| Type: |
number |
| Description: |
Controls the flex-grow value of the button, determining how much it
should expand or contract relative to its container.
|
<Card flex={1} ... />
width
| Type: |
number |
| Description: |
Sets the horizontal dimension of a container or element. |
<Card width={250} ... />
height
| Type: |
number |
| Description: |
Sets the vertical dimension of a container or element. |
<Card height={100} ... />
justifyContent
| Type: |
string |
| Description: |
Aligns child elements along container's main axis, controlling spacing
in flexbox layouts.
|
<Card justifyContent="center" ... />
alignItems
| Type: |
string |
| Description: |
Aligns child elements along the cross axis of their container. |
<Card alignItems="center" ... />
marginHorizontal
| Type: |
number |
| Description: |
Sets margins on left and right sides of an element. |
<Card marginHorizontal={10} ... />
marginVertical
| Type: |
number |
| Description: |
Sets margins on top and bottom sides of an element. |
<Card marginVertical={10} ... />
paddingHorizontal
| Type: |
number |
| Description: |
Sets padding on left and right sides of an element. |
<Card paddingHorizontal={10} ... />
paddingVertical
| Type: |
number |
| Description: |
Sets padding on top and bottom sides of an element. |
<Card paddingVertical={10} ... />
radius
| Type: |
number |
| Description: |
Rounds the corners of an element's border with specified curvature.
|
<Card radius={10} ... />