04-Apr-2023
.
Admin
Hi Guys,
In this blog, I will explain you how to use pricing card in react native. You can easily use pricing card in react native. First i will create import namespace PricingCard from react-native-elements, after I will using pricing card using for pricing card tagadd in react native example.
Here, I will give you full example for simply display pricing card using react native as bellow.
Step 1 - Create project
In the first step Run the following command for create project.
expo init PricingCard
Step 2 - Installation of Dependency
In the step, Run the following command for installation of dependency.
To use pricing card you need to npm install react-native-elements --save.
To install this open the terminal and jump into your project
cd PricingCard
Run the following command
npm install react-native-elements --save
In this step, You will open App.js file and put the code.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { PricingCard } from 'react-native-elements';
export default function App() {
return (
<View style={styles.container}>
<PricingCard
color="darkseagreen"
title="Starter Plan"
price="$100"
info={['2 User', 'Basic Support', 'Email Sending', 'Max Add Two Property']}
button={{ title: ' LETS START', icon: 'flight-takeoff' }}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});
Step 4 - Run project
In the last step run your project using bellow command.
npm start
Output
It will help you...
#React Native