In every mobile application Price card view is used to show the pricing plan of a particular product with some basic details. There are many NPM libraries is available on internet which gives you instant price card creating facility but its nice to create your own design and improve it according to your user requirement. In this tutorial we would Create Price Card View Beautiful UI Design in iOS & Android mobile app with custom component with custom props design.
Screenshot of Price Card View:
Contents in this project Create Price Card View Beautiful UI Design in iOS Android App:
1. Import StyleSheet, Platform, View, Text, TouchableOpacity, Alert and Image component in your App.js file.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, Text, TouchableOpacity, Alert, Image } from ‘react-native’;
|
2. Import PropTypes from prop types library. This library comes inbuilt react native project. So there is no need to install any library for this.
|
1
|
import PropTypes from ‘prop-types’;
|
3. Create a new class named as PriceCard in your App.js file. This class would be our price card view class. We would use this class as a custom component with custom props.
|
1
2
3
4
5
|
class PriceCard extends Component {
}
|
4. Create View in PriceCard render’s return block with custom props. We have to pass these props in our main class to customize the price card view.
- this.props.title : Price card title text.
- this.props.price : Price card Price text.
- this.props.titleColor : Price card title text color prop.
- this.props.priceColor : Price card Price text color prop.
- this.props.info : Some basic details about price card. It is a Array.
- this.props.iconURL : ICON URL.
- this.props.button_title : Button above text.
- this.props.onButtonPress : Button onPress event.
|
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
|
render() {
return (
<View style={styles.priceCard_Container}>
<Text style={[styles.title, { color: this.props.titleColor }]}> {this.props.title} </Text>
<Text style={[styles.price, { color: this.props.priceColor }]}> {this.props.price} </Text>
{this.props.info.map(item => (
<Text
key={item}
style={styles.price_Info}
>
{item}
</Text>
))}
<TouchableOpacity onPress={this.props.onButtonPress} activeOpacity={0.4} style={styles.price_Button} >
<Image
source={{ uri: this.props.iconURL }}
style={styles.iconStyle} />
<Text style={styles.TextStyle}> {this.props.button_title} </Text>
</TouchableOpacity>
</View>
);
}
|
5. Complete source code for PriceCard class.
|
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
|
class PriceCard extends Component {
render() {
return (
<View style={styles.priceCard_Container}>
<Text style={[styles.title, { color: this.props.titleColor }]}> {this.props.title} </Text>
<Text style={[styles.price, { color: this.props.priceColor }]}> {this.props.price} </Text>
{this.props.info.map(item => (
<Text
key={item}
style={styles.price_Info}
>
{item}
</Text>
))}
<TouchableOpacity onPress={this.props.onButtonPress} activeOpacity={0.4} style={styles.price_Button} >
<Image
source={{ uri: this.props.iconURL }}
style={styles.iconStyle} />
<Text style={styles.TextStyle}> {this.props.button_title} </Text>
</TouchableOpacity>
</View>
);
}
}
|
6. Create your app’s main App export default class. This class will be our main class.
|
1
2
3
4
5
6
|
export default class App extends Component {
}
|
7. Creating a function named as buttonClick() with a simple alert message. We would call this function on Price card button click event.
|
1
2
3
4
5
|
buttonClick = () => {
Alert.alert(“Button Clicked”);
}
|
8. Call PriceCard component with 8 different props in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
render() {
return (
<View style={styles.MainContainer}>
<PriceCard
title=‘Starter’
price=’10$’
button_title =‘GET STARTED’
info={[‘1 User’, ‘Basic Support’, ‘All Core Features’]}
onButtonPress={this.buttonClick}
titleColor=‘#AA00FF’
priceColor=‘#000’
iconURL=‘/wp-content/uploads/2019/02/arrow_right_icon.png’
/>
</View>
);
}
|
9. Creating propTypes with PriceCard class name. Using this we can define our custom props data type and also their default values.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
PriceCard.propTypes =
{
title: PropTypes.string,
price: PropTypes.string,
titleColor: PropTypes.string,
priceColor: PropTypes.string,
info: PropTypes.arrayOf(PropTypes.string),
button_title: PropTypes.string,
onButtonPress: PropTypes.func,
iconURL : PropTypes.string
}
PriceCard.defaultProps =
{
title: “Default”,
price: “Default”,
titleColor: “#00E676”,
priceColor: “#00E676”,
info: [],
button_title: “GET STARTED”
}
|
10. 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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
},
priceCard_Container: {
alignItems: ‘center’,
justifyContent: ‘center’,
width: ‘85%’,
borderRadius: 4,
borderWidth: 0.5,
borderColor: ‘#78909C’,
padding: 15
},
title: {
fontSize: 25,
fontWeight: ‘bold’,
},
price: {
fontSize: 29,
fontWeight: ‘bold’,
},
price_Info: {
textAlign: ‘center’,
marginTop: 5,
marginBottom: 5,
color: ‘#B0BEC5’
},
price_Button: {
width: ‘90%’,
marginTop: 15,
marginBottom: 10,
backgroundColor: ‘#AA00FF’,
borderRadius: 4,
padding: 17,
flexDirection: ‘row’,
justifyContent: ‘center’,
},
iconStyle: {
width: 25,
height: 25,
justifyContent: ‘flex-start’,
alignItems: ‘center’,
tintColor: ‘#fff’
},
TextStyle: {
color: ‘#fff’,
textAlign: ‘center’,
fontSize: 15
}
});
|
11. 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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, Text, TouchableOpacity, Alert, Image } from ‘react-native’;
import PropTypes from ‘prop-types’;
class PriceCard extends Component {
render() {
return (
<View style={styles.priceCard_Container}>
<Text style={[styles.title, { color: this.props.titleColor }]}> {this.props.title} </Text>
<Text style={[styles.price, { color: this.props.priceColor }]}> {this.props.price} </Text>
{this.props.info.map(item => (
<Text
key={item}
style={styles.price_Info}
>
{item}
</Text>
))}
<TouchableOpacity onPress={this.props.onButtonPress} activeOpacity={0.4} style={styles.price_Button} >
<Image
source={{ uri: this.props.iconURL }}
style={styles.iconStyle} />
<Text style={styles.TextStyle}> {this.props.button_title} </Text>
</TouchableOpacity>
</View>
);
}
}
export default class App extends Component {
buttonClick = () => {
Alert.alert(“Button Clicked”);
}
render() {
return (
<View style={styles.MainContainer}>
<PriceCard
title=‘Starter’
price=’10$’
button_title =‘GET STARTED’
info={[‘1 User’, ‘Basic Support’, ‘All Core Features’]}
onButtonPress={this.buttonClick}
titleColor=‘#AA00FF’
priceColor=‘#000’
iconURL=‘/wp-content/uploads/2019/02/arrow_right_icon.png’
/>
</View>
);
}
}
PriceCard.propTypes =
{
title: PropTypes.string,
price: PropTypes.string,
titleColor: PropTypes.string,
priceColor: PropTypes.string,
info: PropTypes.arrayOf(PropTypes.string),
button_title: PropTypes.string,
onButtonPress: PropTypes.func,
iconURL : PropTypes.string
}
PriceCard.defaultProps =
{
title: “Default”,
price: “Default”,
titleColor: “#00E676”,
priceColor: “#00E676”,
info: [],
button_title: “GET STARTED”
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
},
priceCard_Container: {
alignItems: ‘center’,
justifyContent: ‘center’,
width: ‘85%’,
borderRadius: 4,
borderWidth: 0.5,
borderColor: ‘#78909C’,
padding: 15
},
title: {
fontSize: 25,
fontWeight: ‘bold’,
},
price: {
fontSize: 29,
fontWeight: ‘bold’,
},
price_Info: {
textAlign: ‘center’,
marginTop: 5,
marginBottom: 5,
color: ‘#B0BEC5’
},
price_Button: {
width: ‘90%’,
marginTop: 15,
marginBottom: 10,
backgroundColor: ‘#AA00FF’,
borderRadius: 4,
padding: 17,
flexDirection: ‘row’,
justifyContent: ‘center’,
},
iconStyle: {
width: 25,
height: 25,
justifyContent: ‘flex-start’,
alignItems: ‘center’,
tintColor: ‘#fff’
},
TextStyle: {
color: ‘#fff’,
textAlign: ‘center’,
fontSize: 15
}
});
|
Screenshot:
Also Read :
React Native Creating Card View in Android iOS App Example Tutorial
React Native Create Custom Countdown Timer for Android iOS Tutorial
React Native Getting Started With NativeBase Cross Platform UI Components
React Native Flip Image Card View Horizontally Using Animation Android iOS Example Tutorial
React Native 0.60 Stable Version is launched-Learn About New Changes
