{ "name": "wine-showcase-app", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "~51.0.8", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.1", "react-native-gesture-handler": "~2.16.1", "react-native-reanimated": "~3.10.1", "react-native-screens": "~3.31.1", "react-native-safe-area-context": "4.10.1", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.3.29" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.2.45", "typescript": "^5.1.3" }, "private": true } module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: [ 'react-native-reanimated/plugin', // Needs to be last ], }; }; { "expo": { "name": "Wine Showcase", "slug": "wine-showcase", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" } }, "web": { "favicon": "./assets/favicon.png" }, "assetBundlePatterns": [ "**/*" ] } } import React from 'react'; import { StatusBar } from 'expo-status-bar'; import AppNavigator from './src/navigation/AppNavigator'; import { SafeAreaProvider } from 'react-native-safe-area-context'; export default function App() { return ( ); } import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import WineListScreen from '../screens/WineListScreen'; import WineDetailScreen from '../screens/WineDetailScreen'; import { Wine } from '../types/wine'; export type RootStackParamList = { WineList: undefined; WineDetail: { wine: Wine }; }; const Stack = createStackNavigator(); const AppNavigator = () => { return ( ({ title: route.params.wine.name })} /> ); }; export default AppNavigator; import React from 'react'; import { View, FlatList, StyleSheet } from 'react-native'; import { StackNavigationProp } from '@react-navigation/stack'; import { RootStackParamList } from '../navigation/AppNavigator'; import WineListItem from '../components/WineListItem'; import { WINE_DATA } from '../data/wines'; import { Wine } from '../types/wine'; type WineListScreenNavigationProp = StackNavigationProp< RootStackParamList, 'WineList' >; type Props = { navigation: WineListScreenNavigationProp; }; const WineListScreen: React.FC = ({ navigation }) => { const renderItem = ({ item }: { item: Wine }) => ( navigation.navigate('WineDetail', { wine: item })} /> ); return ( item.id} contentContainerStyle={styles.listContent} /> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f8f8f8', }, listContent: { paddingVertical: 8, }, }); export default WineListScreen; import React from 'react'; import { View, Text, StyleSheet, Image, ScrollView } from 'react-native'; import { RouteProp } from '@react-navigation/native'; import { RootStackParamList } from '../navigation/AppNavigator'; type WineDetailScreenRouteProp = RouteProp; type Props = { route: WineDetailScreenRouteProp; }; const WineDetailScreen: React.FC = ({ route }) => { const { wine } = route.params; return ( {wine.name} {`${wine.vintage} - ${wine.region}`} {wine.description} {`Price: $${wine.price.toFixed(2)}`} Type: {wine.type} Grape: {wine.grape} Alcohol: {wine.alcohol}% ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, image: { width: '100%', height: 300, // Adjust height as needed }, detailsContainer: { padding: 20, }, name: { fontSize: 28, fontWeight: 'bold', marginBottom: 8, color: '#333', }, vintageRegion: { fontSize: 18, color: '#666', marginBottom: 16, }, description: { fontSize: 16, lineHeight: 24, color: '#444', marginBottom: 20, textAlign: 'justify', }, price: { fontSize: 20, fontWeight: 'bold', color: '#8B0000', // Wine red color marginBottom: 20, }, infoRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8, borderBottomWidth: 1, borderBottomColor: '#eee', paddingBottom: 8, }, infoLabel: { fontSize: 16, fontWeight: '500', color: '#555', }, infoValue: { fontSize: 16, color: '#333', }, }); export default WineDetailScreen; import React from 'react'; import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'; import { Wine } from '../types/wine'; type Props = { wine: Wine; onPress: () => void; }; const WineListItem: React.FC = ({ wine, onPress }) => { return ( {wine.name} {`${wine.vintage} - ${wine.region}`} {`$${wine.price.toFixed(2)}`} ); }; const styles = StyleSheet.create({ container: { flexDirection: 'row', backgroundColor: '#fff', borderRadius: 8, marginVertical: 6, marginHorizontal: 12, padding: 12, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 2, alignItems: 'center', // Align items vertically }, image: { width: 60, height: 90, // Adjust for typical wine bottle aspect ratio borderRadius: 4, marginRight: 12, backgroundColor: '#eee', // Placeholder background }, infoContainer: { flex: 1, // Take remaining space justifyContent: 'center', }, name: { fontSize: 16, fontWeight: 'bold', color: '#333', marginBottom: 4, }, details: { fontSize: 14, color: '#666', marginBottom: 4, }, price: { fontSize: 15, fontWeight: '500', color: '#8B0000', // Wine red color }, }); export default WineListItem; import { Wine } from '../types/wine'; // Sample Wine Data - Replace with your actual data source (API, local DB, etc.) // Using placeholder image URLs. Replace with actual URLs or local assets. export const WINE_DATA: Wine[] = [ { id: '1', name: 'Château Margaux', vintage: 2015, region: 'Bordeaux, France', type: 'Red', grape: 'Cabernet Sauvignon Blend', price: 850.00, description: 'An exceptional vintage offering complexity, elegance, and depth. Notes of blackcurrant, violet, and cedar.', imageUrl: 'https://via.placeholder.com/150/8B0000/FFFFFF?text=Wine+1', alcohol: 13.5, }, { id: '2', name: 'Cloudy Bay Sauvignon Blanc', vintage: 2023, region: 'Marlborough, New Zealand', type: 'White', grape: 'Sauvignon Blanc', price: 35.00, description: 'Vibrant and aromatic with notes of passionfruit, grapefruit, and a hint of herbaceousness. Crisp acidity.', imageUrl: 'https://via.placeholder.com/150/FFFFE0/000000?text=Wine+2', alcohol: 13.0, }, { id: '3', name: 'Domaine de la Romanée-Conti La Tâche', vintage: 2018, region: 'Burgundy, France', type: 'Red', grape: 'Pinot Noir', price: 4500.00, description: 'Legendary Grand Cru Pinot Noir. Exquisite balance, complex aromas of red fruit, spice, and earth. Silky tannins.', imageUrl: 'https://via.placeholder.com/150/800000/FFFFFF?text=Wine+3', alcohol: 13.0, }, { id: '4', name: 'Veuve Clicquot Brut Yellow Label', vintage: 0, // Non-Vintage region: 'Champagne, France', type: 'Sparkling', grape: 'Pinot Noir, Chardonnay, Pinot Meunier', price: 60.00, description: 'Classic Champagne with notes of brioche, apple, and citrus. Fine bubbles and a crisp, refreshing finish.', imageUrl: 'https://via.placeholder.com/150/FFD700/000000?text=Wine+4', alcohol: 12.0, }, { id: '5', name: 'Caymus Vineyards Cabernet Sauvignon', vintage: 2021, region: 'Napa Valley, USA', type: 'Red', grape: 'Cabernet Sauvignon', price: 90.00, description: 'Rich and opulent Napa Cabernet. Dark fruit flavors, vanilla, and cocoa notes with plush tannins.', imageUrl: 'https://via.placeholder.com/150/4B0082/FFFFFF?text=Wine+5', alcohol: 14.8, }, { id: '6', name: 'Miraval Rosé', vintage: 2023, region: 'Provence, France', type: 'Rosé', grape: 'Cinsault, Grenache, Syrah, Rolle', price: 25.00, description: 'Elegant Provençal rosé with delicate aromas of strawberry, white peach, and floral notes. Dry and refreshing.', imageUrl: 'https://via.placeholder.com/150/FFC0CB/000000?text=Wine+6', alcohol: 13.0, }, ]; export interface Wine { id: string; name: string; vintage: number; // Use 0 or null for Non-Vintage region: string; type: 'Red' | 'White' | 'Rosé' | 'Sparkling' | 'Dessert' | 'Fortified'; grape: string; // Could be a blend, e.g., "Cabernet Sauvignon Blend" price: number; description: string; imageUrl: string; // URL to the wine bottle image alcohol: number; // Alcohol percentage // Add more properties as needed: e.g., tasting notes, food pairings, winery info } iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=