0.0.1 • Published 5 years ago
@paraboly/react-native-button-card-view v0.0.1
Installation
Add the dependency:
npm i @paraboly/react-native-button-card-viewPeer Dependencies
IMPORTANT! You need install them
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.34",
"react-native-user-avatar": ">= 1.0.4",
"@freakycoder/react-native-helpers": "^0.1.0"Usage
Import
import ButtonCardView from "@paraboly/react-native-button-card-view";Usage (IMPORTANT! READ IT BEFORE USE)
To fill the list data. You HAVE TO use this format:
Updated: "source" is optional now :)
[
{
"name": "Azamat Zhanisov",
"source": "https://images.unsplash.com/photo-1566807810030-3eaa60f3e670?ixlib=rb-1.2.1&auto=format&fit=crop&w=3334&q=80"
},
{
"name": "Ayo Ogunseinde",
"source": "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3000&q=80"
}
]<ButtonCardView
data={dummyData}
title="Hello"
colors={["red", "black", "gray"]}
primaryButtonText="Haritaya Git"
secondaryButtonText="Yol Tarifi"
primaryImage={require("example/assets/Map.png")}
secondaryImage={require("example/assets/Route.png")}
onPressPrimary={() => console.log("primary button")}
onPressSeconday={() => console.log("secondary button")}
/>Configuration - Props
| Property | Type | Default | Description |
|---|---|---|---|
| width | number, string | ScreenWidth * 0.9 | change the width of the card view |
| height | number, string | 150 | change the height of the card view |
| title | string | Testimonial | change the title |
| data | array | dummyData(check the code) | set your own data array however you HAVE TO fill the array with above format! |
| styles | style | default | change the container's style |
| titleStyle | style | default | change the title's style |
| shadowStyle | style | default | change the shadow's style |
| shadowColor | string | #ccc | change the shadow color |
| borderColor | string | #f54242 | change the border color |
| backgroundColor | string | #fff | change the background color |
| borderLeftWidth | number | 5 | change the left sided border width |
| colors | array | colors | change the background color of text avatar |
| size | string | "30" | change the size of avatar(image)'s size |
| listHeight | number, string | 85 | change list height |
| primaryButtonText | string | change the button names | |
| primaryImage | image | default | change image in button |
| buttonContainerStyles | style | default | change the button container style |
| buttonStyles | style | default | change the button style |
Future Plans
LICENSE
Author
FreakyCoder, kurayogun@gmail.com | kuray.ogun@paraboly.com
License
React Native Map Card View is available under the MIT license. See the LICENSE file for more info.
0.0.1
5 years ago