Natively Pluggable Module

    react-native-cardview28

    2.0.3 • Public • Published

    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).


    Professionally supported react-native-cardview is coming soon

    Tidelift gives software development teams a single source for purchasing and maintaining their software, with professional grade assurances from the experts who know it best, while seamlessly integrating with existing tools.


    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:
        compile 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

    Install

    npm i react-native-cardview28

    DownloadsWeekly Downloads

    1

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    1.59 MB

    Total Files

    34

    Last publish

    Collaborators

    • mathnogueira