react-native-expandable-card
Advanced tools
Comparing version
{ | ||
"name": "react-native-expandable-card", | ||
"version": "1.0.2", | ||
"version": "1.0.3", | ||
"description": "A react-native expandable and collapsible animated card", | ||
@@ -5,0 +5,0 @@ "main": "ExpandableCard.js", |
# react-native-expandable-card | ||
A react-native expandable and collapsible animated card | ||
## Installation | ||
npm install --save react-native-expandable-card | ||
## Use | ||
```javascript | ||
import React from 'react'; | ||
import { View } from 'react-native'; | ||
import ExpandableCard from 'react-native-expandable-card'; | ||
const MyComponent = () => { | ||
return ( | ||
<View> | ||
<ExpandableCard | ||
collapsedCardItems={[ | ||
{label: 'title', value: 'Inception'}, | ||
{label: 'director', value: 'Christopher Nolan'}, | ||
{label: 'year', value: 2010} | ||
]} | ||
expandedCardItems={[ | ||
{label: 'title', value: 'Inception'}, | ||
{label: 'director', value: 'Christopher Nolan'}, | ||
{label: 'genre', value: 'science-fiction'} | ||
{label: 'year', value: 2010} | ||
]} | ||
style={{backgroundColor: 'lightgrey', marginHorizontal: 20}} | ||
labelStyle={{fontFamily: 'open-sans-cond-bold'}} | ||
valueStyle={{fontFamily: 'open-sans-cond'}} | ||
/> | ||
</View> | ||
); | ||
}; | ||
export default MyComponent; | ||
``` |
7102
14.02%37
1133.33%