https://github.com/paraboly/react-native-button-card-view
https://github.com/paraboly/react-native-button-card-view
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/paraboly/react-native-button-card-view
- Owner: Paraboly
- License: mit
- Created: 2020-04-16T15:09:51.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T12:40:02.000Z (about 3 years ago)
- Last Synced: 2025-02-15T14:54:01.928Z (over 1 year ago)
- Language: JavaScript
- Size: 15.5 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/Paraboly/react-native-map-card-view)
[](https://github.com/Paraboly/react-native-map-card-view)
[](https://www.npmjs.com/package/@paraboly/react-native-map-card-view)
[](https://www.npmjs.com/package/react-native-map-card-view)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```ruby
npm i @paraboly/react-native-button-card-view
```
## Peer Dependencies
###### IMPORTANT! You need install them
```js
"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
```jsx
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 :)
```json
[
{
"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"
}
]
```
```jsx
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
- [x] ~~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.