WrathChaos/react-native-circular-card-view


Fully customizable Circular Card View for React Native

  • Users starred: 6
  • Users forked: 0
  • Users watching: 6
  • Updated at: 2020-01-30 12:39:15

React Native Circular Card View

Battle Tested ✅

Fully customizable Circular Card View for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Circular Card View React Native Circular Card View

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

  • 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, kurayogun@gmail.com

License

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