@paraboly/react-native-card-button

Fully customizable Card Button via Paraboly for React Native.

Installation

Add the dependency:

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

<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, [e-mail] || [e-mail]

License

React Native Card Button Library is available under the MIT license. See the LICENSE file for more info.