react-native-bpk-component-card
Backpack React Native card component.
Installation
npm install react-native-bpk-component-card --save-dev
Usage
;;;;; const styles = StyleSheet; { const content = <BpkText> Lorem ipsum dolor sit amet consectetuer adipiscing elit Aenean commodo ligula eget dolor Aenean massa Cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus </BpkText> ; return <View style=stylescontainer> <BpkCard onPress= null accessibilityLabel="Example Card" > content </BpkCard> <BpkCard onPress= null accessibilityLabel="Example Card" padded=false > content </BpkCard> <BpkCard onPress= null accessibilityLabel="Example Card" focused > content </BpkCard> </View > ; }
withDivider
HOC
;;;;; const BpkCardWithDivider = ; const styles = StyleSheet; { const content = <BpkText> Lorem ipsum dolor sit amet consectetuer adipiscing elit Aenean commodo ligula eget dolor Aenean massa Cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus </BpkText> ; return <View style=stylescontainer> <BpkCardWithDivider onPress= null stub=content accessibilityLabel="Example Card" > content </BpkCardWithDivider> <BpkCardWithDivider onPress= null stub=content accessibilityLabel="Example Card" vertical > content </BpkCardWithDivider> <BpkCardWithDivider onPress= null stub=content accessibilityLabel="Example Card" padded=false > content </BpkCardWithDivider> <BpkCardWithDivider onPress= null stub=content accessibilityLabel="Example Card" focused cornerStyle=CORNER_STYLESlg > content </BpkCardWithDivider> </View > ; }
Props
BpkCard:
Property | PropType | Required | Default Value |
---|---|---|---|
children | node | true | - |
onPress | func | true | - |
focused | bool | false | false |
innerStyle | object | false | null |
cornerStyle | oneOf(CORNER_STYLES.sm, CORNER_STYLES.lg) | false | CORNER_STYLES.sm |
padded | bool | false | true |
After withDivider
:
Property | PropType | Required | Default Value |
---|---|---|---|
stub | node | true | - |
vertical | bool | false | false |
mainStyle | object | false | null |
stubStyle | object | false | null |