Card
Card component.
PropTypes
| Prop | Type | Description |
|---|---|---|
| width | number or string | Card custom width |
| height | number or string | Card custom height |
| row | boolean | Should inner card flow direction be horizontal |
| borderRadius | number | Card border radius (will be passed to inner Card.Image component). Default BorderRadiuses.br40 |
| onPress | function | Action for when pressing the card |
| enableShadow | boolean | Whether the card should have shadow or not. Default true. |
| containerStyle | object, number or array | Additional styles for the top container |
Card.Image
Card.Image belongs inside the Card component.
PropTypes
| Prop | Type | Description |
|---|---|---|
| imageSource | object or number | Image source, either remote source or local |
| width | number or string | Image width |
| height | number or string | Image height |
| position | string or array or strings | The Image position which determines the appropriate flex-ness of the image and border radius (for Android). This prop derived automatically from Card parent component if it rendered as a direct child of the Card component. |
| borderRadius | number | Border radius, basically for Android since overflow doesn't work well |
Card.Item
Card.Item, a sub Card component for layout-ing inside a card
PropTypes
| Prop | Type | Description |
|---|---|---|
| row | boolean | Align flex as a row (default) |
| column | boolean | Align flex as a column |
Card.Section
Card.Section, a sub Card component for layout-ing inside a card
PropTypes
| Prop | Type | Description |
|---|---|---|
| enableBlur | boolean | Enable blur view for the section |
| blurOptions | object | Bur options |
| body | boolean | This modifier applies inner padding |
| footer | boolean | Style as a footer, remove bottom spacing |
Usage
import {Colors, Card} from 'react-native-ui-lib';
<Card height={120} width={120}>
<Card.Image height={'100%'} imageSource={require('photo.png')} />
</Card>
<Card row height={160} containerStyle={{marginBottom: 15}} onPress={() => {}}>
<Card.Image width={115} imageSource={cardImage} />
<Card.Section body>
<Card.Section>
<Text text70 dark10>
You’re Invited!
</Text>
</Card.Section>
<Card.Section>
<Text text80 dark10>
Join Old The Town Barbershop Official Store. Download the Wix app to...
</Text>
</Card.Section>
<Card.Section footer>
<Text text90 dark50>
wix.to/A465c
</Text>
</Card.Section>
</Card.Section>
</Card>