React-native-circular-card-view NPM

Installation

Add the dependency:

React Native:

npm i react-native-circular-card-view

Peer Dependencies

IMPORTANT! You need install them.

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.33",
"react-native-vector-icons": ">= 6.6.0"
"react-native-material-ripple": ">= 0.8.0",
"react-native-dynamic-vector-icons": ">= 0.2.1",
"@freakycoder/react-native-helpers": ">= 0.0.21",

Import

import { CircularCard } from "react-native-circular-card-view";

Simple Usage

<CircularCard />

Advanced Custom Usage

Please check the example for the custom usage

<CircularCard
  title={title}
  price={price}
  color={color}
  source={image}
  priceText={price}
  description={description}
  rippleColor={rippleColor}
/>

Configuration - Props

Property	Type	Default	Description
title	string	check the code	set the title
description	string	check the code	set the description
priceText	string	check the code	set the right bottom text
width	number	ScreenWidth * 0.9	change the card's width
height	number	125	change the card's height
source	string (uri)	Unsplash String	set the image source as uri
shadowColor	color	#000	change the card's shadow color
backgroundColor	color	#fcfcfc	change the card's main background color
iconOnPress	function	null	set the icon onPress function
imageStyle	style	style	set your own style for image
titleStyle	style	style	set your own style for title
priceStyle	style	style	set your own style for price
shadowStyle	style	style	set your own style for shadow
descriptionStyle	style	style	set your own style for description