Back to snippets

react_native_ecommerce_product_card_component_quickstart.ts

typescript

This 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;