Installation

Add the dependency:

npm i @paraboly/react-native-button-card-view

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.34",
"react-native-user-avatar": ">= 1.0.4",
"@freakycoder/react-native-helpers": "^0.1.0"

Usage

Import

import ButtonCardView from "@paraboly/react-native-button-card-view";

Usage (IMPORTANT! READ IT BEFORE USE)

To fill the list data. You HAVE TO use this format:

Updated: "source" is optional now :)

[
  {
    "name": "Azamat Zhanisov",
    "source": "https://images.unsplash.com/photo-1566807810030-3eaa60f3e670?ixlib=rb-1.2.1&auto=format&fit=crop&w=3334&q=80"
  },
  {
    "name": "Ayo Ogunseinde",
    "source": "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3000&q=80"
  }
]

<ButtonCardView
  data={dummyData}
  title="Hello"
  colors={["red", "black", "gray"]}
  primaryButtonText="Haritaya Git"
  secondaryButtonText="Yol Tarifi"
  primaryImage={require("example/assets/Map.png")}
  secondaryImage={require("example/assets/Route.png")}
  onPressPrimary={() => console.log("primary button")}
  onPressSeconday={() => console.log("secondary button")}
/>

Configuration - Props

Property	Type	Default	Description
width	number, string	ScreenWidth * 0.9	change the width of the card view
height	number, string	150	change the height of the card view
title	string	Testimonial	change the title
data	array	dummyData(check the code)	set your own data array however you HAVE TO fill the array with above format!
styles	style	default	change the container's style
titleStyle	style	default	change the title's style
shadowStyle	style	default	change the shadow's style
shadowColor	string	#ccc	change the shadow color
borderColor	string	#f54242	change the border color
backgroundColor	string	#fff	change the background color
borderLeftWidth	number	5	change the left sided border width
colors	array	colors	change the background color of text avatar
size	string	"30"	change the size of avatar(image)'s size
listHeight	number, string	85	change list height
primaryButtonText	string		change the button names
primaryImage	image	default	change image in button
buttonContainerStyles	style	default	change the button container style
buttonStyles	style	default	change the button style

Future Plans

• LICENSE

Author

FreakyCoder, [email protected] | [email protected]

License

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