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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, Text, View } from ‘react-native’;
|
4. Import CardView component from react-native-cardview library.
|
1
|
import CardView from ‘react-native-cardview’ ;
|
5. Create a Root View in render’s return block, This view would be our main View component.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
render() {
return (
<View style={styles.MainContainer}>
<CardView
cardElevation={5}
cardMaxElevation={5}
cornerRadius={5}
style={styles.cardViewStyle}>
<Text style={styles.cardView_InsideText}> Simple CardView </Text>
</CardView>
</View>
);
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#F5FCFF’,
justifyContent: ‘center’,
alignItems: ‘center’,
},
cardViewStyle:{
width: 250,
height: 150,
},
cardView_InsideText:{
fontSize: 20,
color: ‘#000’,
textAlign: ‘center’,
marginTop: 50
}
});
|
8. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, Text, View } from ‘react-native’;
import CardView from ‘react-native-cardview’ ;
export default class App extends Component<{}> {
render() {
return (
<View style={styles.MainContainer}>
<CardView
cardElevation={5}
cardMaxElevation={5}
cornerRadius={5}
style={styles.cardViewStyle}>
<Text style={styles.cardView_InsideText}> Simple CardView </Text>
</CardView>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#F5FCFF’,
justifyContent: ‘center’,
alignItems: ‘center’,
},
cardViewStyle:{
width: 250,
height: 150,
},
cardView_InsideText:{
fontSize: 20,
color: ‘#000’,
textAlign: ‘center’,
marginTop: 50
}
});
|
Screenshot in Android device : 
Screenshot in iOS App :
Also Read :
Use useEffect as componentwillunmount in React Native Hooks Example
React Native Collapsible Animated Text View with Slide up Slide down Animation
React Navigation 5.x Send Data From One Screen To Another React Native Example Tutorial
Create Horizontal ScrollView in React Native Tutorial Android iOS
Example of React Native Restart NPM Package Reload Reset App
