Skip to content

Rising Imaged Card View with Awesome Shadows and Fully Customizable Library for React Native

License

Notifications You must be signed in to change notification settings

WrathChaos/react-native-imaged-card-view

Repository files navigation

React Native Imaged Card View

Battle Tested ✅

Rising Imaged Card View with Awesome Shadows and Fully Customizable Library for React Native

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

React Native Imaged Card View React Native Imaged Card View

Installation

Add the dependency:


React Native:

npm i react-native-imaged-card-view

Peer Dependencies

IMPORTANT! You need install them.
"react": ">= 16.8.6",
"react-native": ">= 0.60.5",
"react-native-androw": ">= 0.0.33",
"react-number-format": ">= 4.2.0",
"react-native-star-review": ">= 0.0.23",
"react-native-vector-icons": ">= 6.6.0",
"react-native-dynamic-vector-icons": ">= 0.2.1"

Usage

Import

import ImagedCardView from "react-native-imaged-card-view";

Basic Usage

<ImagedCardView />

Fully Customizable Usage

<ImagedCardView
  stars={5}
  reviews={456}
  ratings={4.5}
  title="Yosemite"
  rightSideValue="$990"
  subtitle="California"
  leftSideValue="3 Days"
  backgroundColor="#ff6460"
  source={{
    uri: yosemite
  }}
/>

Configuration - Props

Property Type Default Description
width number ScreenWidth * 0.75 change the width of the card
height number 170 change the height of the card
title string Island Bali set your own title
subtitle string Indonesia set your own subtitle
borderRadius number 24 change the border radius of the card
titleColor color white change the title text's color
subtitleColor color "#dbdbdb" change the subtitle text's color
backgroundColor color "#0a96ea" change the card's background color
leftSideTitle string Days set your own title for left sided one
leftSideValue string 4 days set your own title's value for left sided one
leftSideColor color white set your color for left sided title
leftSideValueColor color white set your color for left sided value
rightSideTitle string Price set your own title for right sided one
rightSideValue string $1500 set your own title's value for right sided one
rightSideColor color white set your color for right sided title
rightSideValueColor color white set your color for right sided value
dividerColor color "#c4c4c4" set your color for divider
onPress function undefined set your own function for onPress

React Native Star Review Props

Please check out React Native Star Review for StarReview Props It is also fully customizable

Future Plans

  • LICENSE
  • Write an article about the lib on Medium

Change Log

Change log will be here !

Credits

I inspired the design by Olivia Graphics. Thank you for this awesome design :)

Author

FreakyCoder, [email protected]

License

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