rnc
react-native-cardview
npm i react-native-cardview
rnc

react-native-cardview

Native CardView for react-native (All Android version and iOS)

by Kishan Vaghela

2.0.5 (see all)License:MITTypeScript:Not Found
npm i react-native-cardview
Readme

react-native-card-view npm version npm downloads Platform - Android and iOS MIT

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
# --- or ---
$ yarn add react-native-cardview

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/[...]/MainApplication.java
  • Add import com.kishanjvaghela.cardview.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-cardview'
    project(':react-native-cardview').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-cardview/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      implementation project(':react-native-cardview')
    

Usage

N|Example

N|Example

Example

Browse the files in the /example directory.

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

You can also follow

Attributes

  • cardElevation (Android/iOS)

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 (Android)

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

  • cornerRadius (Android/iOS) An attribute to set the radius of the card.

  • useCompatPadding (Android)

CardView adds additional padding to draw shadows on platforms before Lollipop. setUseCompatPadding

  • cornerOverlap (Android)

On pre-Lollipop platforms, CardView does not clip the bounds of the Card for the rounded corners. Instead, it adds padding to content so that it won't overlap with the rounded corners. You can disable this behavior by setting this field to false.

Setting this value on Lollipop and above does not have any effect unless you have enabled compatibility padding.

setPreventCornerOverlap

Downloads/wk

1.6K

GitHub Stars

483

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

23

OPEN ISSUES

13

OPEN PRs

9
VersionTagPublished
2.0.5
latest
3yrs ago
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100