Add the dependency:
npm i react-native-circular-card-view"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 { CircularCard } from "react-native-circular-card-view";<CircularCard />Please check the example for the custom usage
<CircularCard
title={title}
price={price}
color={color}
source={image}
priceText={price}
description={description}
rippleColor={rippleColor}
/>| 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 |
-
LICENSE - Write an article about the lib on Medium
I could not find the artist of this design, please find me :)
FreakyCoder, [email protected]
React Native Circular Card View is available under the MIT license. See the LICENSE file for more info.