https://github.com/paraboly/react-native-card-button
Fully customizable Card Button via Paraboly for React Native.
https://github.com/paraboly/react-native-card-button
button card card-button generic paraboly react react-native
Last synced: 12 months ago
JSON representation
Fully customizable Card Button via Paraboly for React Native.
- Host: GitHub
- URL: https://github.com/paraboly/react-native-card-button
- Owner: Paraboly
- Created: 2019-05-06T09:35:24.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:41:46.000Z (about 3 years ago)
- Last Synced: 2025-04-03T02:37:03.498Z (12 months ago)
- Topics: button, card, card-button, generic, paraboly, react, react-native
- Language: JavaScript
- Homepage: https://www.paraboly.com
- Size: 2.75 MB
- Stars: 18
- Watchers: 0
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Fully customizable Card Button via Paraboly for React Native.
[](https://www.npmjs.com/package/@paraboly/react-native-card-button)
[](https://www.npmjs.com/package/@paraboly/react-native-card-button)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
## Installation
Add the dependency:
```ruby
npm i @paraboly/react-native-card-button
```
## Peer Dependencies
##### IMPORTANT! You need install them.
```
"react": ">= 16.x",
"react-native": ">= 0.55.x",
"react-native-vector-icons": ">= 6.x.x",
"react-native-linear-gradient": ">= 0.2.x",
"react-native-material-ripple": ">= 0.8.x",
"react-native-dynamic-vector-icons": ">= x.x.x"
```
## Basic Usage
```js
```
## Solid Background (Non Gradient) Usage
```js
```
## Advanced Usage
```js
}
/>
```
### Configuration - Props
| Property | Type | Default | Description |
| --------------------------- | :---------: | :-------------------------------: | ------------------------------------------------------------------------------- |
| gradient | boolean | true | if you do not want to use card button with gradient color, simply make it false |
| width | number | 90 | change the card button's width |
| height | number | 90 | change the card button's height |
| start | object | { x: 0, y: 1 } | change the gradient's start way |
| end | object | { x: 0, y: 1 } | change the gradient's end way |
| text | string | Test | use this to set card button's below text |
| gradientColors | color array | ["#f9f7b4", "#f7c77e", "#e8ba6b"] | use this to set your own gradient colors |
| modalBottom | number | height * 0.6 | use this to change where modal will be appear depends on the bottom |
| borderRadius | number | 20 | change the border radius |
| iconName | string | traffic | change the icon itself |
| iconSize | number | 36 | change the icon's size |
| iconType | string | MaterialIcons | change the icon's type |
| iconColor | color | "#cdcfd6" | change the icon's color |
| rippleColor | color | "#678fee" | change the ripple color |
| fontFamily | font family | default | use this to set your own font family |
| backgroundColor | color | "#fcfcfc" | change the background color if you want to use solid color |
| rippleContainerBorderRadius | number | 20 | change the ripple's border radius |
## Author
FreakyCoder, kuray.ogun@paraboly.com || kurayogun@gmail.com
## License
React Native Card Button Library is available under the MIT license. See the LICENSE file for more info.