@paraboly/react-native-card-button

Fully customizable Card Button via Paraboly for React Native.

!Platform - Android and iOS

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
width={75}
height={75}
textSize={10}
key={layer.id}
text={layer.title}
iconColor={"white"}
textColor={"white"}
gradient={layer.active}
gradientColor={["#48c6", "#2f3a60"]}
onPress={_.partial(this.toggle, item).bind(this)}
iconComponent={

size={50}
name={'map' }
color={"white"}/>

}
/>
``

$3

| 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.