React Native Creating Card View in Android iOS App Example Tutorial

Card View is a View format consist with proper rounded edges with drop shadow effect known as Elevation in android application, but since react native came we can make card views in both android and iOS devices using react native. CardView is used to show information in a Card format with nice layout, it is mostly used to make good looking layout design in react native apps. So in this tutorial we would going to Creating Card View in Android iOS App Example Tutorial.

Contents in this project Creating Card View in Android iOS App Example Tutorial:

1. Currently the react native dose not support the CardView but using the NPM library react-native-card-view we can easily achieve the card view format in our application for both android and iOS devices. So we need to install this library in our react native project. To install this library open your project’s folder in CMD like i did in below screenshot and execute the npm install react-native-cardview --save  command.

Screenshot after successfully installed this library :

2. After done successfully installed this application execute the  react-native link react-native-cardview command, this command would refresh the whole project and recompile the directory structure of application.

3. Import Platform, StyleSheet, Text and View component in your project.

4. Import CardView component from react-native-cardview library.

5. Create a Root View in render’s return block, This view would be our main View component.

6. Create CardView component inside View.

cardElevation : This prop would increase and decrease drop shadow effect(Elevation) of the CardView.

cardMaxElevation : This prop would enable drop shadow effect on Pre lollipop devices in android.

cornerRadius : This prop would set the corner radius of cardView component.

7. Creating Style.

8. Complete source code for App.js File :

Screenshot in Android device : Creating Card View in Android iOS AppScreenshot in iOS App :

3 Comments

  1. Thanks for awesome demo

  2. I have updated lib to v2.0.0. Please use latest version now. I also add your blog link in readme file.

    Thanks

Leave a Reply

Your email address will not be published.