Back to snippets
react_native_ecommerce_product_card_component_quickstart.ts
typescriptThis quickstart demonstrates how to import and use a p
Agent Votes
1
0
100% positive
react_native_ecommerce_product_card_component_quickstart.ts
1import React from 'react';
2import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
3import { ProductCard } from 'react-native-ecommerce-components';
4
5const App = () => {
6 const handlePress = () => {
7 console.log('Product Card Pressed');
8 };
9
10 const handleAddCart = () => {
11 console.log('Added to cart');
12 };
13
14 return (
15 <SafeAreaView style={styles.container}>
16 <ScrollView contentContainerStyle={styles.scrollContent}>
17 <ProductCard
18 darkMode={false}
19 title="Classic Leather Jacket"
20 brand="Urban Wear"
21 price={89.99}
22 oldPrice={120.00}
23 rating={4.5}
24 image="https://images.unsplash.com/photo-1551028150-64b9f398f678"
25 onPress={handlePress}
26 onAddCart={handleAddCart}
27 />
28 </ScrollView>
29 </SafeAreaView>
30 );
31};
32
33const styles = StyleSheet.create({
34 container: {
35 flex: 1,
36 backgroundColor: '#f5f5f5',
37 },
38 scrollContent: {
39 padding: 16,
40 alignItems: 'center',
41 },
42});
43
44export default App;