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 |

ToDos

• [x] ~~LICENSE~~
• [ ] Write an article about the lib on Medium

Change Log

Credits

I could not find the artist of this design, please find me :)

Author

FreakyCoder, [email protected]

License

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