Card

Customizable card component that handles press events
(code example)

info

This component extends TouchableOpacity props.

tip

This component support margin, padding modifiers.

Usage

<Card flex center onPress={() => console.log('pressed')}> <Card.Image source={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg'}}/></Card>

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