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='https://reactnativecode.com/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='https://reactnativecode.com/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:
hii sir,
i need your help please…
i can’t set minTime in android but its working properly in ios.
i ty this link
https://github.com/xgfe/react-native-datepicker/issues/156
can you please reply me.
Rahul i have installed this library and check it but its still not working in android. Sorry bro .
Hello .
I have a problem. I’m working on a native react project and I want to save the data I get from a webAPI and use them when I have more connection and synchronize changes when I hate a connection.
you can have an idea how to implement that. thank you
Bro you can use Realm or SQLite to save data in react native app.