react-native-card-view
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
- 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 thegetPackages()
method
- 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')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:implementation project(':react-native-cardview')
Usage
Example
Browse the files in the /example directory.
<CardView cardElevation=2 cardMaxElevation=2 cornerRadius=5> <Text> Elevation 0 </Text></CardView>
You can also follow
- https://reactnativecode.com/creating-card-view-in-android-ios-app-example/
- http://androidseekho.com/others/reactnative/how-to-use-card-view-in-react-native
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.