Fully customizable Card Button via Paraboly for React Native.
Add the dependency:
npmi@paraboly/react-native-card-button"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"
<CardButtontext="Home"/><CardButtongradient={false}backgroundColor="#049134"/><CardButtonwidth={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={<Viewstyle={sharedStyle.center}><MyIconsize={50}name={'map'}color={"white"}/></View>}/>| 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 |
FreakyCoder, kuray.ogun@paraboly.com || kurayogun@gmail.com
React Native Card Button Library is available under the MIT license. See the LICENSE file for more info.