Card
Card is a container for text, photos, and actions in the context of a single subject.
import { Card } from '@redshank/native';
Examples
Default
Default card view.
Absolute Card
Absolute header and footer card.
Expandable Card
Expandable header and footer card.
Example Card
Example header and footer card.
With border
With border example card.
APIs
Card
Api props extends from View or Ripple
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| Component | Component | React Component | Change the element base | Ripple |
| background | ThemeColor string | ThemeColor | Change background color | border |
| borderWidth | number | Number | When withBorder prop is true render width of the border in the card | - |
| children | ReactNode | ReactNode | Accessory as a child for the component, we suggest passing Header, Content or Footer elements | - |
| expandContent | ReactNode | ReactNode | Accessory for expand when user press the card | - |
| isExpandCard | boolean | true false | Active expand element with press the card | !!expandContent |
| isPressable | boolean | true false | Active the animation effect when to press card | isExpandCard |
| onlyExpandContent | boolean | true false | If it is true, it will only show the expandConstant when it is extended. | - |
| onClose | function | (event: any) => void | Function that is executed after closing the expand content | - |
| rippleProps | RippleProps | object | Props for ripple wrapper element | - |
| withBorder | boolean | true false | Show borders for the card | false |
| style | object | StyleProp<ViewStyle> | Style for the wrapper card | - |
| Other Props | any | Other props | Interactive props for element | - |
Header
Api props for Card.Header element
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| Component | Component | React Component | Change the element base | Ripple |
| background | ThemeColor string | ThemeColor | Change background color | border |
| children | ReactNode | ReactNode | Accessory as a child for the component | - |
| isAbsolute | boolean | true false | Position absolute for header | false |
| left | number string | Number or String | Left position for absolute variant | 0 |
| right | number string | Number or String | Right position for absolute variant | 0 |
| style | object | StyleProp<ViewStyle> | Style for the wrapper card | - |
| top | number string | Number or String | Top position for absolute variant | 0 |
| withBackground | boolean | true false | Show background in the header | false |
Body
Api props for Card.Body element
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| Component | Component | React Component | Change the element base | Ripple |
| children | ReactNode | ReactNode | Accessory as a child for the component, we suggest passing Header, Content or Footer elements | - |
| style | object | StyleProp<ViewStyle> | Style for the wrapper card | - |
| withPadding | boolean | true false | Show padding in the body | false or card in paddingSizes |
Footer
Api props for Card.Body element
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| Component | Component | React Component | Change the element base | Ripple |
| background | ThemeColor string | ThemeColor | Change background color | border |
| bottom | number string | Number or String | Bottom position for absolute variant | - |
| children | ReactNode | ReactNode | Accessory as a child for the component | - |
| isAbsolute | boolean | true false | Position absolute for header | false |
| left | number string | Number or String | Left position for absolute variant | 0 |
| right | number string | Number or String | Right position for absolute variant | 0 |
| style | object | StyleProp<ViewStyle> | Style for the wrapper card | - |
| withBackground | boolean | true false | Show background in the header | false or card in paddingSizes |
Divider
Api props for Card.Divider element
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| background | ThemeColor string | ThemeColor | Change background color | border |
| height | number string | Number or String | Height for line divider | 1 |
| style | object | StyleProp<ViewStyle> | Style for the wrapper card | - |
Base Properties
type BaseProperties = {
onBlur?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onFocus?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
onPress?: ((event: GestureResponderEvent) => void) | undefined;
onPressIn?: ((event: GestureResponderEvent) => void) | undefined;
onPressOut?: ((event: GestureResponderEvent) => void) | undefined;
};
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.