React Native Create Price Card View Beautiful UI Design iOS Android

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:

Create Price Card View Beautiful UI Design iOS Android
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.

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.

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.

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.

  1. this.props.title : Price card title text.
  2. this.props.price : Price card Price text.
  3. this.props.titleColor : Price card title text color prop.
  4. this.props.priceColor : Price card Price text color prop.
  5. this.props.info : Some basic details about price card. It is a Array.
  6. this.props.iconURL : ICON URL.
  7. this.props.button_title : Button above text.
  8. this.props.onButtonPress : Button onPress event.

5. Complete source code for PriceCard class.

6. Create your app’s main App export default class. This class will be our main class.

7. Creating a function named as buttonClick() with a simple alert message. We would call this function on Price card button click event.

8. Call PriceCard component with 8 different props in render’s return block.

9. Creating propTypes with PriceCard class name. Using this we can define our custom props data type and also their default values.

10. Creating Style.

11. Complete source code for App.js File :

Screenshot:

2 Comments

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *