e com app main
// 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 },
});
) : (