main e com code

main e com code

main e com code

// App.js - Main entry for React Native e-commerce app with UPI QR Payment import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomeScreen from './screens/HomeScreen'; import ProductDetails from './screens/ProductDetails'; import PaymentScreen from './screens/PaymentScreen'; import SuccessScreen from './screens/SuccessScreen';

const Stack = createNativeStackNavigator();

export default function App() { return ( <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'E-Store' }} /> <Stack.Screen name="ProductDetails" component={ProductDetails} options={{ title: 'Product Details' }} /> <Stack.Screen name="Payment" component={PaymentScreen} options={{ title: 'Pay via QR' }} /> <Stack.Screen name="Success" component={SuccessScreen} options={{ headerShown: false }} /> </Stack.Navigator> ); }

// --- screens/HomeScreen.js --- import React from 'react'; import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

const products = [ { id: '1', name: 'Zebronics Power Bank', price: 799 }, { id: '2', name: 'Crompton LED Bulb Pack', price: 350 }, ];

export default function HomeScreen({ navigation }) { return ( <FlatList data={products} keyExtractor={(item) => item.id} renderItem={({ item }) => ( <TouchableOpacity style={styles.card} onPress={() => navigation.navigate('ProductDetails', { product: item })} > {item.name} ₹{item.price} )} /> ); }

const styles = StyleSheet.create({ container: { flex: 1, padding: 16 }, card: { padding: 16, backgroundColor: '#f0f0f0', marginBottom: 10, borderRadius: 8 }, name: { fontWeight: 'bold', fontSize: 16 }, });

// --- screens/ProductDetails.js --- import React from 'react'; import { View, Text, Button, StyleSheet } from 'react-native';

export default function ProductDetails({ route, navigation }) { const { product } = route.params; return ( {product.name} ₹{product.price} <Button title="Buy Now" onPress={() => navigation.navigate('Payment', { product })} /> ); }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, title: { fontSize: 22, fontWeight: 'bold', marginBottom: 10 }, price: { fontSize: 18, marginBottom: 20 }, });

// --- screens/PaymentScreen.js --- import React, { useState } from 'react'; import { View, Text, TextInput, Button, Image, StyleSheet } from 'react-native';

export default function PaymentScreen({ route, navigation }) { const { product } = route.params; const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [screenshot, setScreenshot] = useState(null);

const handlePayment = () => { if (name && email) { navigation.navigate('Success', { name, product }); } else { alert('कृपया सर्व माहिती भरा'); } };

return ( Pay ₹{product.price} via UPI: <Image source={{ uri: 'https://api.qrserver.com/v1/create-qr-code/?data=upi://pay?pa=9623917685@pz&pn=Janata%20Sadguru' }} style={styles.qr} />

const styles = StyleSheet.create({ container: { padding: 20, alignItems: 'center' }, qr: { height: 200, width: 200, marginVertical: 20 }, input: { borderWidth: 1, width: '100%', marginBottom: 10, padding: 8, borderRadius: 4 }, });

// --- screens/SuccessScreen.js --- import React from 'react'; import { View, Text, Button, StyleSheet } from 'react-native';

export default function SuccessScreen({ route, navigation }) { const { name, product } = route.params; return ( धन्यवाद, {name}! तुमचं पेमेंट "{product.name}" साठी यशस्वी झालं आहे. <Button title="पुन्हा होमवर जा" onPress={() => navigation.navigate('Home')} /> ); }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }, text: { fontSize: 18, textAlign: 'center', marginBottom: 10 }, });