Skip to main content

Card

Customizable card component that handles press events
(code example)

info

This component extends TouchableOpacity props.

tip

This component support margin, padding modifiers.

Usage​

Live Editor
<Card  width={70} height={70} onPress={() => console.log('pressed')}>
 <Card.Image
   width={70}
   height={70}
   source={{uri: 'https://images.pexels.com/photos/248412/pexels-photo-248412.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'}}
 />
</Card>
Result
Loading...

API​

blurOptions​

Blur options for blur effect according to @react-native-community/blur lib (make sure enableBlur is on) object

borderRadius​

Card border radius (will be passed to inner Card.Image component) number

containerStyle​

Additional styles for the card container ViewStyle

elevation​

Android only​

Elevation value number

enableBlur​

iOS only​

Enable blur effect boolean

enableShadow​

Whether the card should have shadow or not boolean

height​

Card custom height number | string

onPress​

Callback function for card press event function

row​

Should inner card flow direction be horizontal boolean

selected​

Adds visual indication that the card is selected boolean

selectionOptions​

Custom options for styling the selection indication CardSelectionOptions

width​

Card custom width number | string