Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sevvaleygul0/react-native-category-card
Fully customizable category card.
https://github.com/sevvaleygul0/react-native-category-card
card category-card javascript library mobile react-nativ-category-card react-native
Last synced: 3 months ago
JSON representation
Fully customizable category card.
- Host: GitHub
- URL: https://github.com/sevvaleygul0/react-native-category-card
- Owner: sevvaleygul0
- License: mit
- Created: 2020-09-07T19:50:22.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-03T01:42:24.000Z (over 1 year ago)
- Last Synced: 2024-09-13T23:13:57.397Z (5 months ago)
- Topics: card, category-card, javascript, library, mobile, react-nativ-category-card, react-native
- Language: TypeScript
- Homepage:
- Size: 32.1 MB
- Stars: 10
- Watchers: 1
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Demo
# Installation
Add the dependency:
```ruby
npm i react-native-category-card
```
## Peer Dependencies
###### IMPORTANT! You need install them
```js
"react-native-androw": ">= 0.0.34",
"react-native-linear-gradient": ">= 2.5.6",
"@freakycoder/react-native-bounceable": ">= 0.1.1"
```
# Usage
## Import
```js
import CategoryCard from "react-native-category-card";
```
## CategoryCard Usage
```js
console.log("Fruits")} />
```
```js
console.log("Meat & Poultry")}
/>
```
```js
console.log("Pantry")}
/>
```
# Configuration - Props
| Property | Type | Default | Description |
| -------------------------- | :-------: | :-------------------------------: | ---------------------------------------------------------- |
| shadowStyle | style | default | change the shadowStyle |
| shadowColor | string | '#757575' | change the shadowColor |
| height | number | | change the containers height |
| width | number | ScreenWidth \* 0.8 | change the the containers width |
| borderRadius | number | 16 | change the the containers borderRadius |
| backgroundColor | string | '#fff' | change the containers backgroundColor |
| gradientColors | array | ['#9CF4DF', '#30C9E8', '#107C91'] | change the Linear Gradient Colors |
| imageStyle | style | default | change the left image style |
| imageSource | asset | default | change the image source |
| customImageComponent | component | default | set your own custom component instead of default Image one |
| titleText | style | default | change the title text |
| titleColor | string | "#4B4B4B" | change the title text color |
| customTitleTextComponent | component | default | set your own custom component instead of default Text one |
| descriptionText | string | | change the description text |
| descriptionColor | string | "#B4B4B4" | change the description text color |
| customDescriptionComponent | component | default | set your own custom component instead of default Text one |
| count | number | 10 | change the count |
| customCountTextComponent | component | default | set your own custom component instead of default Text one |
| onPress | function | () | set your own function when onPress |
| rightButtonImageSource | asset | default | change the right button image source |
| buttonImageStyle | style | default | change the button image style |
| disableRightButton | boolean | true | disable the right button |
## Future Plans
- [x] ~~LICENSE~~
# Change Log
Change log will be here !
## Author
Sevval Eygul, [email protected]
## License
React Native Category Card is available under the MIT license. See the LICENSE file for more info.
```
```