Fully customizable Card Button via Paraboly for React Native.
Installation
Add the dependency:
npm i @paraboly/react-native-card-buttonPeer 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
<CardButton text="Home" />Solid Background (Non Gradient) Usage
<CardButton gradient={false} backgroundColor="#049134" />Advanced Usage
<CardButton
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={
<View style={sharedStyle.center}>
<MyIcon
size={50}
name={'map' }
color={"white"}/>
</View>
}
/>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, [email protected] || [email protected]
License
React Native Card Button Library is available under the MIT license. See the LICENSE file for more info.