Home

Awesome

React Native Simple Card View

Easiest way to adding a card view on your screen.

<p align="center"> <a href="https://s9.postimg.org/qxh30azpb/Simulator_Screen_Shot_-_i_Phone_8_-_2018-02-21_at_17.49.43.png"> <img src="https://s9.postimg.org/pxvdia4rj/Simulator_Screen_Shot_-_i_Phone_8_-_2018-02-21_at_17.49.43.png" alt="CardViewWithImage Example" /> </a> <img src="https://s9.postimg.org/748niqban/card_View_With_Icon.png" alt="CardViewWithImage" /> </p> <p align="center"><a href="https://www.npmjs.com/package/react-native-simple-card-view" target="_blank"><img src="https://nodei.co/npm/react-native-simple-card-view.png?downloads=true&downloadRank=true&stars=true" alt="package info" /></a></p>

GitHub stars

Getting Started

via Yarn

yarn add react-native-simple-card-view

via NPM

npm install react-native-simple-card-view

React-Native Link

react-native link

Components

Styling card view

You can create an object, who has the card view styles. Then you can give that object to style props. Card view style object can have the following attributes

PropTypeDefaultDescriptionPlatform
widthnumber300Card view widthiOS,Android
heightnumber-Card view heightiOS,Android
paddingnumber5Card view paddingiOS,Android
marginnumber10Card view marginiOS,Android
borderRadiusnumber3Card view border radiusiOS,Android
shadowColorstring`'#000000'Card view shadow coloriOS,Android
shadowOpacitynumber0.3Card vie`w shadow opacityiOS,Android
shadowRadiusnumber3Card view shadow radiusiOS,Android
bgColorstring'#ffffff'Card view background coloriOS,Android
elevationnumber3Only for Android shadow valueAndroid
shadowOffsetWidthnumber3Shadow offset width only for iOSiOS
shadowOffsetHeightnumber3Shadow offset height only for iOSiOS

Components & Examples

CardView

English Turkish

CardViewWithIcon

English Turkish

CardViewWithImage

English Turkish

v0.3.0 Features

Contributors (Thank you all)

Built With

License

This project is licensed under the MIT License - see the LICENSE.md file for details