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