JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 755
  • Score
    100M100P100Q102679F
  • License MIT

A react native card view

Package Exports

  • react-native-cardview

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-cardview) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-card-view npm version npm downloads

npm

Native CardView that compatible for iOS and Android( both lollipop and pre-lolipop).

Website
Material Design Card Spec
CardView Android Documentation

Getting started

$ npm install react-native-cardview --save

Mostly automatic installation

$ react-native link react-native-cardview

Manual installation

iOS

Dont need to setup

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.reactlibrary.RNCardViewPackage; to the imports at the top of the file
  • Add new RNCardViewPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-card-view'
    project(':react-native-card-view').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-card-view/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
    compile project(':react-native-card-view')

Usage

N|Example

Example
import CardView from 'react-native-cardview'
<CardView
          cardElevation={2}
          cardMaxElevation={2}
          cornerRadius={5}>
          <Text>
              Elevation 0
          </Text>
</CardView>

Attributes

  • cardElevation

An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card. There can be some performance impact when using a very high elevation value.

  • cardMaxElevation

An attribute to support shadow on pre-lollipop device in android. cardMaxElevation

  • cornerRadius An attribute to set the radius of the card.