import React, { useState, useRef } from 'react'; import { View, Text, ScrollView, TouchableOpacity, Image, StyleSheet, StatusBar, Dimensions, PanResponder, Animated as RNAnimated, } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { Feather, Ionicons } from '@expo/vector-icons'; import Animated, { useSharedValue, useAnimatedStyle, withSpring, withTiming, FadeInDown, FadeInUp, } from 'react-native-reanimated'; import * as Haptics from 'expo-haptics'; import { LinearGradient } from 'expo-linear-gradient'; const { width: SCREEN_WIDTH } = Dimensions.get('window'); const SWIPE_THRESHOLD = 72; const ROW_HEIGHT = 100; // ─── Types ──────────────────────────────────────────────────────────────────── interface Category { id: string; label: string; icon: string; } interface Performer { name: string; role: string; avatar: string; } interface TicketTier { id: string; name: string; price: number; description: string; available: number; } interface Event { id: string; title: string; subtitle: string; category: string; date: string; time: string; venue: string; city: string; image: string; heroImage: string; price: number; attending: number; rating: number; featured: boolean; performers: Performer[]; tiers: TicketTier[]; tags: string[]; } interface MyTicket { id: string; eventId: string; tierName: string; quantity: number; total: number; status: 'upcoming' | 'past' | 'cancelled'; purchaseDate: string; } type TabName = 'explore' | 'search' | 'tickets' | 'profile'; type DetailScreen = 'detail' | 'checkout' | 'confirmation'; // ─── Data ───────────────────────────────────────────────────────────────────── const CATEGORIES: Category[] = [ { id: 'all', label: 'All', icon: 'grid' }, { id: 'music', label: 'Music', icon: 'music' }, { id: 'sports', label: 'Sports', icon: 'activity' }, { id: 'arts', label: 'Arts', icon: 'feather' }, { id: 'food', label: 'Food', icon: 'coffee' }, { id: 'tech', label: 'Tech', icon: 'cpu' }, ]; const EVENTS: Event[] = [ { id: '1', title: 'Arctic Monkeys', subtitle: 'The Car World Tour 2025', category: 'music', date: 'Fri, Mar 14', time: '8:00 PM', venue: 'Madison Square Garden', city: 'New York, NY', image: 'https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?w=400&q=80', heroImage: 'https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?w=800&q=80', price: 89, attending: 14820, rating: 4.9, featured: true, tags: ['Rock', 'Indie', 'Live Band'], performers: [ { name: 'Arctic Monkeys', role: 'Headliner', avatar: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=100&q=80' }, { name: 'The Last Shadow Puppets', role: 'Support Act', avatar: 'https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=100&q=80' }, ], tiers: [ { id: 'ga', name: 'General Admission', price: 89, description: 'Floor access, standing', available: 320 }, { id: 'reserved', name: 'Reserved Seating', price: 149, description: 'Assigned seat, lower bowl', available: 84 }, { id: 'vip', name: 'VIP Experience', price: 399, description: 'Pit access + meet & greet', available: 12 }, ], }, { id: '2', title: 'NBA Finals Game 4', subtitle: 'Lakers vs. Celtics', category: 'sports', date: 'Sun, Mar 16', time: '7:30 PM', venue: 'Crypto.com Arena', city: 'Los Angeles, CA', image: 'https://images.unsplash.com/photo-1504450758481-7338eba7524a?w=400&q=80', heroImage: 'https://images.unsplash.com/photo-1504450758481-7338eba7524a?w=800&q=80', price: 210, attending: 20124, rating: 4.8, featured: true, tags: ['NBA', 'Basketball', 'Playoffs'], performers: [ { name: 'LA Lakers', role: 'Home Team', avatar: 'https://images.unsplash.com/photo-1546519638405-a9f8e2d63b11?w=100&q=80' }, { name: 'Boston Celtics', role: 'Away Team', avatar: 'https://images.unsplash.com/photo-1553481187-be93c21490a9?w=100&q=80' }, ], tiers: [ { id: 'upper', name: 'Upper Level', price: 210, description: 'Upper bowl, all sections', available: 540 }, { id: 'lower', name: 'Lower Level', price: 480, description: 'Lower bowl, premium views', available: 96 }, { id: 'courtside', name: 'Courtside', price: 2800, description: 'Courtside seats, celebrity row', available: 4 }, ], }, { id: '3', title: 'Dua Lipa: Radical Optimism', subtitle: 'Summer Arena Tour', category: 'music', date: 'Thu, Mar 20', time: '9:00 PM', venue: 'Barclays Center', city: 'Brooklyn, NY', image: 'https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=400&q=80', heroImage: 'https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=800&q=80', price: 75, attending: 9340, rating: 4.7, featured: false, tags: ['Pop', 'Dance', 'Electronic'], performers: [ { name: 'Dua Lipa', role: 'Headliner', avatar: 'https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=100&q=80' }, { name: 'Tove Lo', role: 'Support Act', avatar: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=100&q=80' }, ], tiers: [ { id: 'ga', name: 'General Admission', price: 75, description: 'Floor standing, unreserved', available: 600 }, { id: 'seated', name: 'Seated', price: 125, description: 'Reserved seating', available: 210 }, { id: 'vip', name: 'VIP Lounge', price: 320, description: 'Elevated lounge + bar', available: 28 }, ], }, { id: '4', title: 'Taste of Chicago', subtitle: 'Annual Food & Culture Festival', category: 'food', date: 'Sat, Mar 22', time: '12:00 PM', venue: 'Grant Park', city: 'Chicago, IL', image: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=400&q=80', heroImage: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=800&q=80', price: 35, attending: 4200, rating: 4.6, featured: false, tags: ['Food', 'Culture', 'Family'], performers: [ { name: 'Chef Marcus Rivera', role: 'Featured Chef', avatar: 'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?w=100&q=80' }, { name: 'Chicago Symphony', role: 'Live Music', avatar: 'https://images.unsplash.com/photo-1465847899084-d164df4dedc6?w=100&q=80' }, ], tiers: [ { id: 'standard', name: 'Standard Entry', price: 35, description: 'Full festival access', available: 1200 }, { id: 'tasting', name: 'Tasting Pass', price: 85, description: 'Entry + 20 tasting tokens', available: 300 }, { id: 'vip', name: "Chef's Table VIP", price: 200, description: 'Private dining + open bar', available: 20 }, ], }, { id: '5', title: 'WWDC 2025', subtitle: 'Apple Worldwide Developers Conference', category: 'tech', date: 'Mon, Mar 24', time: '9:00 AM', venue: 'Apple Park', city: 'Cupertino, CA', image: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=400&q=80', heroImage: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=800&q=80', price: 1599, attending: 5000, rating: 4.9, featured: false, tags: ['Developer', 'Apple', 'iOS'], performers: [ { name: 'Tim Cook', role: 'Keynote Speaker', avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&q=80' }, { name: 'Craig Federighi', role: 'Speaker', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&q=80' }, ], tiers: [ { id: 'standard', name: 'Standard Badge', price: 1599, description: 'Full conference, 5 days', available: 3200 }, { id: 'student', name: 'Student Badge', price: 299, description: 'Full access, verified student', available: 600 }, ], }, { id: '6', title: 'Coachella Valley 2025', subtitle: 'Weekend 1 — Empire Polo Club', category: 'music', date: 'Fri, Apr 11', time: '2:00 PM', venue: 'Empire Polo Club', city: 'Indio, CA', image: 'https://images.unsplash.com/photo-1506157786151-b8491531f063?w=400&q=80', heroImage: 'https://images.unsplash.com/photo-1506157786151-b8491531f063?w=800&q=80', price: 549, attending: 125000, rating: 4.9, featured: true, tags: ['Festival', 'Multi-Day', 'Camping'], performers: [ { name: 'Lady Gaga', role: 'Friday Headliner', avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&q=80' }, { name: 'Travis Scott', role: 'Saturday Headliner', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80' }, ], tiers: [ { id: 'ga', name: 'General Admission', price: 549, description: '3-day pass, GA grounds', available: 8000 }, { id: 'ga-plus', name: 'GA+', price: 749, description: 'Shaded viewing + charging', available: 2200 }, { id: 'vip', name: 'VIP Pass', price: 1099, description: 'VIP bars & lounges', available: 400 }, ], }, ]; const INITIAL_MY_TICKETS: MyTicket[] = [ { id: 't1', eventId: '1', tierName: 'Reserved Seating', quantity: 2, total: 330.24, status: 'upcoming', purchaseDate: 'Feb 3' }, { id: 't2', eventId: '2', tierName: 'Lower Level', quantity: 1, total: 537.60, status: 'upcoming', purchaseDate: 'Jan 28' }, { id: 't3', eventId: '6', tierName: 'GA+', quantity: 2, total: 1678.88, status: 'upcoming', purchaseDate: 'Jan 15' }, { id: 't4', eventId: '3', tierName: 'General Admission', quantity: 3, total: 252.00, status: 'past', purchaseDate: 'Dec 12' }, ]; // ─── Swipeable Ticket Row ───────────────────────────────────────────────────── interface SwipeableTicketRowProps { ticket: MyTicket; event: Event; isSaved: boolean; onPress: () => void; onRemove: () => void; onToggleSave: () => void; } function SwipeableTicketRow({ ticket, event, isSaved, onPress, onRemove, onToggleSave }: SwipeableTicketRowProps) { const translateX = useRef(new RNAnimated.Value(0)).current; const rowOpacity = useRef(new RNAnimated.Value(1)).current; const isRemoving = useRef(false); // Derive action reveal from translateX const leftActionOpacity = translateX.interpolate({ inputRange: [0, SWIPE_THRESHOLD], outputRange: [0, 1], extrapolate: 'clamp' }); const rightActionOpacity = translateX.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0], outputRange: [1, 0], extrapolate: 'clamp' }); const leftScale = translateX.interpolate({ inputRange: [0, SWIPE_THRESHOLD], outputRange: [0.6, 1], extrapolate: 'clamp' }); const rightScale = translateX.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0], outputRange: [1, 0.6], extrapolate: 'clamp' }); const panResponder = useRef( PanResponder.create({ onStartShouldSetPanResponder: () => false, onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dy) < 20, onPanResponderGrant: () => { translateX.stopAnimation(); }, onPanResponderMove: (_, g) => { if (isRemoving.current) return; translateX.setValue(g.dx * 0.85); }, onPanResponderRelease: (_, g) => { if (isRemoving.current) return; if (g.dx > SWIPE_THRESHOLD) { // Swipe right → save/unsave Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); RNAnimated.spring(translateX, { toValue: 0, useNativeDriver: true, damping: 18, stiffness: 200 }).start(); onToggleSave(); } else if (g.dx < -SWIPE_THRESHOLD) { // Swipe left → remove Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning); isRemoving.current = true; RNAnimated.parallel([ RNAnimated.timing(translateX, { toValue: -SCREEN_WIDTH, duration: 280, useNativeDriver: true }), RNAnimated.timing(rowOpacity, { toValue: 0, duration: 280, useNativeDriver: true }), ]).start(() => onRemove()); } else { RNAnimated.spring(translateX, { toValue: 0, useNativeDriver: true, damping: 18, stiffness: 200 }).start(); } }, }) ).current; return ( {/* Left action: Save — shown on swipe right */} {isSaved ? 'Unsave' : 'Save'} {/* Right action: Remove — shown on swipe left */} Remove {/* The card itself */} {event.title} {isSaved && } {ticket.tierName} · {ticket.quantity}× {event.date} · {event.time} ${ticket.total.toFixed(0)} {ticket.status === 'upcoming' ? 'UPCOMING' : 'PAST'} ); } const sw = StyleSheet.create({ container: { height: ROW_HEIGHT, marginHorizontal: 20, marginBottom: 10, borderRadius: 16, overflow: 'hidden', position: 'relative', }, leftAction: { position: 'absolute', left: 0, top: 0, bottom: 0, width: '50%', backgroundColor: '#22c55e', borderRadius: 16, alignItems: 'flex-start', justifyContent: 'center', paddingLeft: 24, }, rightAction: { position: 'absolute', right: 0, top: 0, bottom: 0, width: '50%', backgroundColor: '#ef4444', borderRadius: 16, alignItems: 'flex-end', justifyContent: 'center', paddingRight: 24, }, actionLabel: { fontSize: 11, color: '#fff', fontWeight: '700', letterSpacing: 0.5, }, card: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: '#18181b', borderRadius: 16, borderWidth: 1, borderColor: '#27272a', }, cardInner: { flex: 1, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14, gap: 12, }, thumb: { width: 60, height: 60, borderRadius: 10, }, body: { flex: 1, gap: 3, }, topRow: { flexDirection: 'row', alignItems: 'center', gap: 5, }, eventTitle: { fontSize: 14, color: '#fff', fontWeight: '700', flex: 1, }, tierLabel: { fontSize: 12, color: '#71717a', }, dateText: { fontSize: 11, color: '#52525b', }, right: { alignItems: 'flex-end', gap: 6, }, totalPrice: { fontSize: 16, color: '#fff', fontWeight: '700', }, statusBadge: { borderRadius: 5, paddingHorizontal: 6, paddingVertical: 2, }, statusUpcoming: { backgroundColor: 'rgba(99,102,241,0.25)' }, statusPast: { backgroundColor: 'rgba(255,255,255,0.08)' }, statusText: { fontSize: 9, color: '#a1a1aa', fontWeight: '700', letterSpacing: 0.6, }, }); // ─── Tab Bar ────────────────────────────────────────────────────────────────── interface TabBarProps { activeTab: TabName; onTabPress: (tab: TabName) => void; ticketCount: number; } function TabBar({ activeTab, onTabPress, ticketCount }: TabBarProps) { const insets = useSafeAreaInsets(); const tabs: { id: TabName; label: string; icon: string; activeIcon: string }[] = [ { id: 'explore', label: 'Explore', icon: 'compass-outline', activeIcon: 'compass' }, { id: 'search', label: 'Search', icon: 'search-outline', activeIcon: 'search' }, { id: 'tickets', label: 'Tickets', icon: 'ticket-outline', activeIcon: 'ticket' }, { id: 'profile', label: 'Profile', icon: 'person-outline', activeIcon: 'person' }, ]; return ( {tabs.map(tab => { const isActive = activeTab === tab.id; return ( { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); onTabPress(tab.id); }} activeOpacity={0.7}> {tab.id === 'tickets' && ticketCount > 0 && ( {ticketCount} )} {tab.label} ); })} ); } const tb = StyleSheet.create({ bar: { flexDirection: 'row', backgroundColor: '#0f0f11', borderTopWidth: 1, borderTopColor: '#1c1c1f', paddingTop: 10 }, item: { flex: 1, alignItems: 'center', gap: 3 }, iconWrap: { position: 'relative', width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }, label: { fontSize: 11, color: '#52525b', fontWeight: '500' }, labelActive: { color: '#818cf8', fontWeight: '600' }, badge: { position: 'absolute', top: -3, right: -7, backgroundColor: '#ef4444', borderRadius: 8, minWidth: 15, height: 15, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 3, borderWidth: 1.5, borderColor: '#0f0f11' }, badgeText: { fontSize: 9, color: '#fff', fontWeight: '700' }, }); // ─── Event Row ──────────────────────────────────────────────────────────────── function EventRow({ event, onPress }: { event: Event; onPress: () => void }) { return ( {event.title} {event.venue} {event.date} {event.city} ${event.price} {event.rating} ); } const er = StyleSheet.create({ row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 14 }, thumb: { width: 68, height: 68, borderRadius: 12, flexShrink: 0 }, body: { flex: 1, marginLeft: 12, marginRight: 12, gap: 3, overflow: 'hidden' }, title: { fontSize: 15, color: '#fff', fontWeight: '600' }, venue: { fontSize: 13, color: '#71717a' }, meta: { flexDirection: 'row', alignItems: 'center', gap: 3, marginTop: 2 }, metaText: { fontSize: 11, color: '#52525b' }, dot: { width: 3, height: 3, borderRadius: 1.5, backgroundColor: '#3f3f46', marginHorizontal: 1 }, right: { width: 52, flexShrink: 0, alignItems: 'flex-end', gap: 6 }, price: { fontSize: 16, color: '#fff', fontWeight: '700' }, ratingRow: { flexDirection: 'row', alignItems: 'center', gap: 3, backgroundColor: 'rgba(245,158,11,0.12)', paddingHorizontal: 6, paddingVertical: 3, borderRadius: 6 }, ratingText: { fontSize: 11, color: '#f59e0b', fontWeight: '600' }, }); // ─── Explore Tab ────────────────────────────────────────────────────────────── function ExploreTab({ onSelectEvent }: { onSelectEvent: (e: Event) => void }) { const insets = useSafeAreaInsets(); const [activeCategory, setActiveCategory] = useState('all'); const [savedEvents, setSavedEvents] = useState(['1', '6']); const filteredEvents = activeCategory === 'all' ? EVENTS : EVENTS.filter(e => e.category === activeCategory); const featuredEvents = EVENTS.filter(e => e.featured); const toggleSave = (id: string) => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setSavedEvents(p => p.includes(id) ? p.filter(x => x !== id) : [...p, id]); }; return ( Good evening Discover Events Search events, artists, venues… {CATEGORIES.map(cat => ( { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setActiveCategory(cat.id); }} style={[d.catPill, activeCategory === cat.id && d.catPillActive]} activeOpacity={0.8}> {cat.label} ))} {activeCategory === 'all' && ( Featured See all {featuredEvents.map(event => ( { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }} activeOpacity={0.95} style={d.featuredCard}> {event.tags.slice(0, 2).map(tag => {tag})} {event.title} {event.subtitle} {event.date} · {event.time} From ${event.price} toggleSave(event.id)} activeOpacity={0.8}> ))} )} {activeCategory === 'all' ? 'Upcoming' : `${CATEGORIES.find(c => c.id === activeCategory)?.label ?? ''} Events`} {filteredEvents.length} events {filteredEvents.map((event, idx) => ( { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }} /> ))} ); } // ─── Search Tab ─────────────────────────────────────────────────────────────── function SearchTab({ onSelectEvent }: { onSelectEvent: (e: Event) => void }) { const insets = useSafeAreaInsets(); const trending = EVENTS.slice(0, 4); return ( Search Artists, events, venues… Browse by Category {[ { label: 'Music', img: 'https://images.unsplash.com/photo-1501612780327-45045538702b?w=200&q=80' }, { label: 'Sports', img: 'https://images.unsplash.com/photo-1461896836934-ffe607ba8211?w=200&q=80' }, { label: 'Arts', img: 'https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?w=200&q=80' }, { label: 'Food', img: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=200&q=80' }, { label: 'Tech', img: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=200&q=80' }, { label: 'Comedy', img: 'https://images.unsplash.com/photo-1527224857830-43a7acc85260?w=200&q=80' }, ].map((cat, idx) => ( Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}> {cat.label} ))} Trending Near You {trending.map((event, idx) => ( { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }} activeOpacity={0.7}> {idx + 1} {event.title} {event.date} · {event.city} ${event.price} {idx < trending.length - 1 && } ))} ); } // ─── Tickets Tab ────────────────────────────────────────────────────────────── function TicketsTab({ myTickets, setMyTickets, onSelectEvent }: { myTickets: MyTicket[]; setMyTickets: React.Dispatch>; onSelectEvent: (e: Event) => void }) { const insets = useSafeAreaInsets(); const [activeFilter, setActiveFilter] = useState<'upcoming' | 'past'>('upcoming'); const [savedTickets, setSavedTickets] = useState(['t1']); const filtered = myTickets.filter(t => t.status === (activeFilter === 'past' ? 'past' : 'upcoming') || (activeFilter === 'past' && t.status === 'cancelled')); const getEvent = (id: string) => EVENTS.find(e => e.id === id); const handleRemove = (ticketId: string) => { setTimeout(() => setMyTickets(prev => prev.filter(t => t.id !== ticketId)), 320); }; const handleToggleSave = (ticketId: string) => { setSavedTickets(prev => prev.includes(ticketId) ? prev.filter(x => x !== ticketId) : [...prev, ticketId]); }; const upcomingCount = myTickets.filter(t => t.status === 'upcoming').length; return ( My Tickets {/* Hint */} {activeFilter === 'upcoming' && filtered.length > 0 && ( Swipe left to remove · Swipe right to save )} {(['upcoming', 'past'] as const).map(f => ( { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setActiveFilter(f); }} activeOpacity={0.8}> {f === 'upcoming' ? `Upcoming${upcomingCount > 0 ? ` (${upcomingCount})` : ''}` : 'Past'} ))} {filtered.length === 0 ? ( No {activeFilter} tickets Tickets you purchase will appear here ) : ( filtered.map((ticket, idx) => { const event = getEvent(ticket.eventId); if (!event) return null; if (activeFilter === 'upcoming') { return ( { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }} onRemove={() => handleRemove(ticket.id)} onToggleSave={() => handleToggleSave(ticket.id)} /> ); } // Past tickets — static rows, no swipe return ( { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }} activeOpacity={0.7}> {event.title} {ticket.tierName} · {ticket.quantity}× {event.date} ${ticket.total.toFixed(0)} ); }) )} ); } // ─── Profile Tab ────────────────────────────────────────────────────────────── function ProfileTab() { const insets = useSafeAreaInsets(); interface MenuItem { icon: string; label: string; trailing: string; iconColor: string; iconBg: string; } interface MenuSection { title: string; items: MenuItem[]; } const menuSections: MenuSection[] = [ { title: 'Account', items: [ { icon: 'person-outline', label: 'Personal Information', trailing: 'chevron', iconColor: '#818cf8', iconBg: 'rgba(129,140,248,0.15)' }, { icon: 'card-outline', label: 'Payment Methods', trailing: 'chevron', iconColor: '#22c55e', iconBg: 'rgba(34,197,94,0.12)' }, { icon: 'notifications-outline', label: 'Notifications', trailing: 'chevron', iconColor: '#f59e0b', iconBg: 'rgba(245,158,11,0.12)' }, ]}, { title: 'Preferences', items: [ { icon: 'location-outline', label: 'Location', trailing: 'New York, NY', iconColor: '#ef4444', iconBg: 'rgba(239,68,68,0.12)' }, { icon: 'globe-outline', label: 'Language', trailing: 'English', iconColor: '#1d9bf0', iconBg: 'rgba(29,155,240,0.12)' }, { icon: 'moon-outline', label: 'Appearance', trailing: 'Dark', iconColor: '#8b5cf6', iconBg: 'rgba(139,92,246,0.12)' }, ]}, { title: 'Support', items: [ { icon: 'help-circle-outline', label: 'Help Center', trailing: 'chevron', iconColor: '#818cf8', iconBg: 'rgba(129,140,248,0.15)' }, { icon: 'chatbubble-outline', label: 'Contact Us', trailing: 'chevron', iconColor: '#22c55e', iconBg: 'rgba(34,197,94,0.12)' }, { icon: 'document-text-outline', label: 'Terms & Privacy', trailing: 'chevron', iconColor: '#71717a', iconBg: 'rgba(113,113,122,0.15)' }, ]}, ]; return ( Profile Sarah Chen @sarahchen · Since 2021 Edit 14Events 6Upcoming $2,418Spent {menuSections.map((section, sIdx) => ( {section.title} {section.items.map((item, iIdx) => ( Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}> {item.label} {item.trailing === 'chevron' ? : {item.trailing} } {iIdx < section.items.length - 1 && } ))} ))} Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning)}> Sign Out ); } // ─── Detail Screen ──────────────────────────────────────────────────────────── function DetailScreen({ event, onBack, onGetTickets }: { event: Event; onBack: () => void; onGetTickets: () => void }) { const insets = useSafeAreaInsets(); const scrollY = useSharedValue(0); const btnScale = useSharedValue(1); const headerStyle = useAnimatedStyle(() => { 'worklet'; return { opacity: withTiming(scrollY.value > 280 ? 1 : 0, { duration: 200 }) }; }); const btnStyle = useAnimatedStyle(() => { 'worklet'; return { transform: [{ scale: btnScale.value }] }; }); const gradColors: [string, string, ...string[]] = ['transparent', 'rgba(0,0,0,0.82)', '#09090b']; return ( {event.title} { scrollY.value = e.nativeEvent.contentOffset.y; }} scrollEventThrottle={16} contentContainerStyle={{ paddingBottom: insets.bottom + 110 }}> {event.tags.map(tag => {tag})} {event.title} {event.subtitle} {(event.attending / 1000).toFixed(1)}KAttending {event.rating} Rating ${event.price}From Event Details Date & Time{event.date} at {event.time} Venue{event.venue}{event.city} Map Lineup {event.performers.map((p, idx) => ( {p.name}{p.role} {idx < event.performers.length - 1 && } ))} Ticket Options {event.tiers.map((tier, idx) => ( {tier.name} {tier.description} {tier.available} remaining ${tier.price} {idx < event.tiers.length - 1 && } ))} Starting from${event.price} { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); btnScale.value = withSpring(0.96, {}, () => { btnScale.value = withSpring(1); }); onGetTickets(); }} activeOpacity={0.9}> Get Tickets ); } // ─── Checkout Screen ────────────────────────────────────────────────────────── function CheckoutScreen({ event, onBack, onConfirm }: { event: Event; onBack: () => void; onConfirm: (t: MyTicket) => void }) { const insets = useSafeAreaInsets(); const [selectedTier, setSelectedTier] = useState(event.tiers[0]); const [quantity, setQuantity] = useState(1); const btnScale = useSharedValue(1); const fee = selectedTier.price * quantity * 0.12; const total = selectedTier.price * quantity + fee; const btnStyle = useAnimatedStyle(() => { 'worklet'; return { transform: [{ scale: btnScale.value }] }; }); return ( Select Tickets {event.title}{event.date} · {event.time}{event.venue} Choose Your Tier {event.tiers.map(tier => ( { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setSelectedTier(tier); }} style={[d.tierPick, selectedTier.id === tier.id && d.tierPickActive]} activeOpacity={0.8}> {selectedTier.id === tier.id && } {tier.name} {tier.description} {tier.available} remaining ${tier.price} ))} Quantity Number of tickets { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setQuantity(p => Math.max(1, p - 1)); }}> {quantity} { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setQuantity(p => Math.min(10, p + 1)); }}> Order Summary {selectedTier.name} × {quantity}${(selectedTier.price * quantity).toFixed(2)} Service fee (12%)${fee.toFixed(2)} Total${total.toFixed(2)} Payment Visa ending in 4821Expires 09/27 Change { Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); btnScale.value = withSpring(0.96, {}, () => { btnScale.value = withSpring(1); }); const t: MyTicket = { id: `t${Date.now()}`, eventId: event.id, tierName: selectedTier.name, quantity, total, status: 'upcoming', purchaseDate: 'Today' }; setTimeout(() => onConfirm(t), 160); }} activeOpacity={0.9}> Confirm & Pay ${total.toFixed(2)} ); } // ─── Confirmation Screen ────────────────────────────────────────────────────── function ConfirmationScreen({ event, onDone }: { event: Event; onDone: () => void }) { const iconScale = useSharedValue(0.5); const iconOpacity = useSharedValue(0); React.useEffect(() => { iconScale.value = withSpring(1, { damping: 11, stiffness: 130 }); iconOpacity.value = withTiming(1, { duration: 350 }); Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); }, []); const iconStyle = useAnimatedStyle(() => { 'worklet'; return { transform: [{ scale: iconScale.value }], opacity: iconOpacity.value }; }); return ( You're In! Tickets confirmed and sent to your email {event.title}{event.date} · {event.time} VENUE{event.venue} Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}> Add to Wallet Back to Events ); } // ─── Root ───────────────────────────────────────────────────────────────────── export default function App() { const [activeTab, setActiveTab] = useState('explore'); const [detailScreen, setDetailScreen] = useState(null); const [selectedEvent, setSelectedEvent] = useState(null); const [myTickets, setMyTickets] = useState(INITIAL_MY_TICKETS); const upcomingCount = myTickets.filter(t => t.status === 'upcoming').length; const handleSelectEvent = (event: Event) => { setSelectedEvent(event); setDetailScreen('detail'); }; const handleConfirm = (ticket: MyTicket) => { setMyTickets(prev => [ticket, ...prev]); setDetailScreen('confirmation'); }; const handleDone = () => { setDetailScreen(null); setSelectedEvent(null); setActiveTab('tickets'); }; if (detailScreen === 'confirmation' && selectedEvent) return ; if (detailScreen === 'checkout' && selectedEvent) return setDetailScreen('detail')} onConfirm={handleConfirm} />; if (detailScreen === 'detail' && selectedEvent) return { setDetailScreen(null); setSelectedEvent(null); }} onGetTickets={() => setDetailScreen('checkout')} />; return ( {activeTab === 'explore' && } {activeTab === 'search' && } {activeTab === 'tickets' && } {activeTab === 'profile' && } ); } // ─── Styles ─────────────────────────────────────────────────────────────────── const d = StyleSheet.create({ flex1: { flex: 1, backgroundColor: '#09090b' }, pageHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, paddingBottom: 16 }, pageTitle: { fontSize: 28, color: '#fff', fontWeight: '800' }, greeting: { fontSize: 13, color: '#52525b', fontWeight: '400' }, exploreHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, paddingBottom: 12 }, iconBtn: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center' }, notifDot: { position: 'absolute', top: 9, right: 9, width: 7, height: 7, borderRadius: 3.5, backgroundColor: '#818cf8', borderWidth: 1.5, borderColor: '#09090b' }, searchBar: { flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: '#18181b', borderRadius: 14, marginHorizontal: 20, paddingHorizontal: 14, paddingVertical: 13, marginBottom: 16, borderWidth: 1, borderColor: '#27272a' }, searchPlaceholder: { fontSize: 14, color: '#3f3f46' }, catScroll: { paddingHorizontal: 20, gap: 8, paddingBottom: 4 }, catPill: { flexDirection: 'row', alignItems: 'center', gap: 6, paddingHorizontal: 14, paddingVertical: 8, borderRadius: 100, backgroundColor: '#18181b', borderWidth: 1, borderColor: '#27272a' }, catPillActive: { backgroundColor: '#818cf8', borderColor: '#818cf8' }, catPillText: { fontSize: 13, color: '#71717a', fontWeight: '500' }, catPillTextActive: { color: '#09090b', fontWeight: '700' }, sectionHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, marginTop: 24, marginBottom: 12 }, sectionTitleRow: { flexDirection: 'row', alignItems: 'center', gap: 6 }, sectionTitle: { fontSize: 18, color: '#fff', fontWeight: '700' }, seeAll: { fontSize: 13, color: '#818cf8', fontWeight: '600' }, countLabel: { fontSize: 13, color: '#3f3f46' }, featuredScroll: { paddingHorizontal: 20, gap: 16, paddingBottom: 8 }, featuredCard: { width: SCREEN_WIDTH - 48, height: 240, borderRadius: 20, overflow: 'hidden', backgroundColor: '#18181b' }, featuredImage: { position: 'absolute', width: '100%', height: '100%' }, featuredGradient: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 160 }, featuredContent: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16 }, tagsRow: { flexDirection: 'row', gap: 6, marginBottom: 8 }, tagPill: { backgroundColor: 'rgba(255,255,255,0.18)', borderRadius: 100, paddingHorizontal: 10, paddingVertical: 3 }, tagText: { fontSize: 11, color: '#fff', fontWeight: '500' }, featuredTitle: { fontSize: 22, color: '#fff', fontWeight: '700' }, featuredSubtitle: { fontSize: 13, color: 'rgba(255,255,255,0.65)', marginTop: 2 }, featuredMeta: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }, featuredMetaLeft: { flexDirection: 'row', alignItems: 'center', gap: 4 }, featuredMetaText: { fontSize: 12, color: 'rgba(255,255,255,0.6)' }, featuredPrice: { fontSize: 15, color: '#fff', fontWeight: '700' }, cardSaveBtn: { position: 'absolute', top: 12, right: 12, width: 34, height: 34, borderRadius: 17, backgroundColor: 'rgba(0,0,0,0.45)', alignItems: 'center', justifyContent: 'center' }, hairline: { height: 1, backgroundColor: '#18181b', marginLeft: 20 }, // Search bigSearchWrap: { paddingHorizontal: 20, marginBottom: 24 }, bigSearchBar: { flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: '#18181b', borderRadius: 16, paddingHorizontal: 16, paddingVertical: 15, borderWidth: 1, borderColor: '#27272a' }, bigSearchPlaceholder: { flex: 1, fontSize: 15, color: '#3f3f46' }, searchSection: { paddingHorizontal: 20, marginBottom: 28 }, searchSectionTitle: { fontSize: 18, color: '#fff', fontWeight: '700', marginBottom: 12 }, catGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 }, catGridItem: { width: (SCREEN_WIDTH - 52) / 2, height: 80, borderRadius: 14, overflow: 'hidden', backgroundColor: '#18181b', justifyContent: 'flex-end' }, catGridImage: { position: 'absolute', width: '100%', height: '100%' }, catGridGradient: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 50 }, catGridLabel: { fontSize: 14, color: '#fff', fontWeight: '700', padding: 10 }, trendRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 12 }, trendRank: { width: 20, fontSize: 15, color: '#27272a', fontWeight: '700', textAlign: 'center' }, trendThumb: { width: 52, height: 52, borderRadius: 10 }, trendBody: { flex: 1 }, trendTitle: { fontSize: 14, color: '#fff', fontWeight: '600' }, trendSub: { fontSize: 12, color: '#52525b', marginTop: 2 }, trendPrice: { fontSize: 14, color: '#818cf8', fontWeight: '700' }, // Tickets qrBtn: { width: 40, height: 40, borderRadius: 12, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: '#27272a' }, swipeHint: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6, marginHorizontal: 20, marginBottom: 12 }, swipeHintText: { fontSize: 11, color: '#3f3f46', fontWeight: '500' }, filterTabRow: { flexDirection: 'row', marginHorizontal: 20, marginBottom: 20, backgroundColor: '#18181b', borderRadius: 12, padding: 4, borderWidth: 1, borderColor: '#27272a' }, filterTab: { flex: 1, paddingVertical: 9, borderRadius: 9, alignItems: 'center' }, filterTabActive: { backgroundColor: '#27272a' }, filterTabText: { fontSize: 14, color: '#52525b', fontWeight: '600' }, filterTabTextActive: { color: '#fff' }, emptyState: { alignItems: 'center', paddingTop: 64, gap: 12 }, emptyTitle: { fontSize: 18, color: '#3f3f46', fontWeight: '700' }, emptySubtitle: { fontSize: 14, color: '#27272a', textAlign: 'center', paddingHorizontal: 40 }, pastTicketRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 14, gap: 12 }, pastThumb: { width: 56, height: 56, borderRadius: 10 }, pastBody: { flex: 1, gap: 2 }, pastTitle: { fontSize: 14, color: '#fff', fontWeight: '600' }, pastTier: { fontSize: 12, color: '#71717a' }, pastDate: { fontSize: 11, color: '#52525b' }, pastTotal: { fontSize: 15, color: '#52525b', fontWeight: '700' }, // Profile profileCard: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingBottom: 20, gap: 14 }, avatar: { width: 64, height: 64, borderRadius: 32 }, profileInfo: { flex: 1 }, profileName: { fontSize: 18, color: '#fff', fontWeight: '700' }, profileHandle: { fontSize: 13, color: '#52525b', marginTop: 3 }, editBtn: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 10, borderWidth: 1.5, borderColor: '#27272a' }, editBtnText: { fontSize: 13, color: '#a1a1aa', fontWeight: '600' }, statsStrip: { flexDirection: 'row', alignItems: 'center', marginHorizontal: 20, marginBottom: 24, backgroundColor: '#18181b', borderRadius: 16, paddingVertical: 16, borderWidth: 1, borderColor: '#27272a' }, statItem: { flex: 1, alignItems: 'center', gap: 3 }, statValue: { fontSize: 20, color: '#fff', fontWeight: '700' }, statLabel: { fontSize: 12, color: '#52525b' }, statDiv: { width: 1, height: 28, backgroundColor: '#27272a' }, menuSectionLabel: { fontSize: 12, color: '#3f3f46', fontWeight: '600', letterSpacing: 0.8, textTransform: 'uppercase', paddingHorizontal: 20, marginBottom: 6, marginTop: 8 }, menuSection: { marginHorizontal: 20, backgroundColor: '#0f0f11', borderRadius: 16, borderWidth: 1, borderColor: '#1c1c1f', marginBottom: 8, overflow: 'hidden' }, menuRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 14, gap: 12 }, menuIconWrap: { width: 34, height: 34, borderRadius: 9, alignItems: 'center', justifyContent: 'center' }, menuRowLabel: { flex: 1, fontSize: 15, color: '#e4e4e7', fontWeight: '500' }, menuRowValue: { fontSize: 14, color: '#52525b' }, menuHairline: { height: 1, backgroundColor: '#1c1c1f', marginLeft: 62 }, signOutBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, marginHorizontal: 20, marginTop: 16, paddingVertical: 14, borderRadius: 14, borderWidth: 1.5, borderColor: 'rgba(239,68,68,0.25)', backgroundColor: 'rgba(239,68,68,0.08)' }, signOutText: { fontSize: 15, color: '#ef4444', fontWeight: '600' }, // Detail stickyHeader: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 99, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingBottom: 10, backgroundColor: '#09090b', borderBottomWidth: 1, borderBottomColor: '#18181b' }, stickyBackBtn: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center' }, stickyTitle: { flex: 1, fontSize: 16, color: '#fff', fontWeight: '700', textAlign: 'center' }, detailHero: { height: 380 }, detailHeroImg: { width: '100%', height: '100%' }, detailHeroGrad: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 300 }, floatBack: { position: 'absolute', left: 16, width: 38, height: 38, borderRadius: 19, backgroundColor: 'rgba(0,0,0,0.45)', alignItems: 'center', justifyContent: 'center' }, heroContent: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 20 }, heroTitle: { fontSize: 26, color: '#fff', fontWeight: '800', lineHeight: 32 }, heroSub: { fontSize: 14, color: 'rgba(255,255,255,0.65)', marginTop: 4 }, detailCard: { marginHorizontal: 20, marginTop: 20, backgroundColor: '#0f0f11', borderRadius: 16, borderWidth: 1, borderColor: '#1c1c1f', padding: 16 }, detailCardTitle: { fontSize: 15, color: '#fff', fontWeight: '700', marginBottom: 14 }, infoRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 }, infoIcon: { width: 34, height: 34, borderRadius: 9, alignItems: 'center', justifyContent: 'center' }, infoBody: { flex: 1 }, infoLabel: { fontSize: 12, color: '#52525b', fontWeight: '500' }, infoValue: { fontSize: 14, color: '#fff', fontWeight: '600', marginTop: 2 }, infoSub: { fontSize: 13, color: '#71717a', marginTop: 2 }, infoHairline: { height: 1, backgroundColor: '#1c1c1f', marginVertical: 12 }, mapBtn: { paddingHorizontal: 12, paddingVertical: 6, backgroundColor: 'rgba(129,140,248,0.15)', borderRadius: 8 }, mapBtnText: { fontSize: 13, color: '#818cf8', fontWeight: '600' }, performerRow: { flexDirection: 'row', alignItems: 'center', gap: 12 }, performerAvatar: { width: 44, height: 44, borderRadius: 22 }, performerBody: { flex: 1 }, performerName: { fontSize: 14, color: '#fff', fontWeight: '600' }, performerRole: { fontSize: 12, color: '#52525b', marginTop: 2 }, tierRow: { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' }, tierLeft: { flex: 1, paddingRight: 12 }, tierName: { fontSize: 14, color: '#fff', fontWeight: '600' }, tierDesc: { fontSize: 13, color: '#71717a', marginTop: 2 }, tierAvail: { fontSize: 12, color: '#f59e0b', fontWeight: '500', marginTop: 4 }, tierPrice: { fontSize: 16, color: '#818cf8', fontWeight: '700' }, footer: { position: 'absolute', bottom: 0, left: 0, right: 0, backgroundColor: '#09090b', borderTopWidth: 1, borderTopColor: '#18181b', paddingHorizontal: 20, paddingTop: 12 }, footerInner: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, footerLabel: { fontSize: 12, color: '#52525b' }, footerPrice: { fontSize: 24, color: '#fff', fontWeight: '800' }, ctaBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, backgroundColor: '#818cf8', borderRadius: 14, paddingHorizontal: 24, paddingVertical: 14 }, ctaBtnText: { fontSize: 15, color: '#fff', fontWeight: '700' }, fullBtn: { flex: 1 }, // Checkout modalHeader: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingBottom: 12, backgroundColor: '#09090b', borderBottomWidth: 1, borderBottomColor: '#18181b' }, darkBackBtn: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center' }, modalTitle: { flex: 1, fontSize: 18, color: '#fff', fontWeight: '700', textAlign: 'center' }, coEventCard: { flexDirection: 'row', gap: 12, backgroundColor: '#0f0f11', borderRadius: 16, padding: 14, borderWidth: 1, borderColor: '#1c1c1f' }, coThumb: { width: 64, height: 64, borderRadius: 10 }, coInfo: { flex: 1, justifyContent: 'center', gap: 3 }, coTitle: { fontSize: 15, color: '#fff', fontWeight: '700' }, coDate: { fontSize: 13, color: '#818cf8', fontWeight: '500' }, coVenue: { fontSize: 12, color: '#52525b' }, coSection: { backgroundColor: '#0f0f11', borderRadius: 16, padding: 16, borderWidth: 1, borderColor: '#1c1c1f' }, coSectionTitle: { fontSize: 15, color: '#fff', fontWeight: '700', marginBottom: 14 }, tierPick: { flexDirection: 'row', alignItems: 'flex-start', gap: 12, paddingVertical: 10, borderRadius: 12, paddingHorizontal: 4 }, tierPickActive: { backgroundColor: 'rgba(129,140,248,0.08)' }, radio: { width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: '#3f3f46', marginTop: 2, alignItems: 'center', justifyContent: 'center' }, radioActive: { borderColor: '#818cf8' }, radioFill: { width: 10, height: 10, borderRadius: 5, backgroundColor: '#818cf8' }, tierPickBody: { flex: 1 }, tierPickName: { fontSize: 14, color: '#71717a', fontWeight: '600' }, tierPickNameActive: { color: '#fff' }, tierPickDesc: { fontSize: 12, color: '#3f3f46', marginTop: 2 }, tierPickAvail: { fontSize: 12, color: '#f59e0b', fontWeight: '500', marginTop: 3 }, tierPickPrice: { fontSize: 16, color: '#52525b', fontWeight: '700', marginTop: 2 }, tierPickPriceActive: { color: '#818cf8' }, qtyRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, qtyLabel: { fontSize: 14, color: '#71717a' }, qtyCtrl: { flexDirection: 'row', alignItems: 'center', gap: 16 }, qtyBtn: { width: 36, height: 36, borderRadius: 10, backgroundColor: '#27272a', alignItems: 'center', justifyContent: 'center' }, qtyBtnOff: { backgroundColor: '#18181b' }, qtyVal: { fontSize: 18, color: '#fff', fontWeight: '700', minWidth: 24, textAlign: 'center' }, summaryRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }, summaryLabel: { fontSize: 14, color: '#71717a' }, summaryVal: { fontSize: 14, color: '#a1a1aa', fontWeight: '500' }, summaryTotalLabel: { fontSize: 15, color: '#fff', fontWeight: '700' }, summaryTotalVal: { fontSize: 18, color: '#818cf8', fontWeight: '700' }, payRow: { flexDirection: 'row', alignItems: 'center', gap: 12 }, payBody: { flex: 1 }, payName: { fontSize: 14, color: '#fff', fontWeight: '600' }, paySub: { fontSize: 12, color: '#52525b', marginTop: 2 }, changeText: { fontSize: 13, color: '#818cf8', fontWeight: '600' }, // Confirmation confirmScreen: { alignItems: 'center', justifyContent: 'center', padding: 24 }, confirmIconWrap: { marginBottom: 24 }, confirmIconRing: { width: 92, height: 92, borderRadius: 46, backgroundColor: '#22c55e', alignItems: 'center', justifyContent: 'center', shadowColor: '#22c55e', shadowOpacity: 0.4, shadowRadius: 24, shadowOffset: { width: 0, height: 6 } }, confirmTextBlock: { alignItems: 'center', marginBottom: 28 }, confirmTitle: { fontSize: 30, color: '#fff', fontWeight: '800', textAlign: 'center' }, confirmSub: { fontSize: 14, color: '#71717a', textAlign: 'center', marginTop: 8, lineHeight: 20, paddingHorizontal: 20 }, stubCard: { width: SCREEN_WIDTH - 48, borderRadius: 20, overflow: 'hidden', backgroundColor: '#0f0f11', borderWidth: 1, borderColor: '#27272a' }, stubImage: { width: '100%', height: 140 }, stubGradient: { position: 'absolute', top: 80, left: 0, right: 0, height: 80 }, stubImageContent: { position: 'absolute', bottom: 50, left: 0, right: 0, padding: 14 }, stubTitle: { fontSize: 18, color: '#fff', fontWeight: '700' }, stubSub: { fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 3 }, stubPerf: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#1c1c1f' }, stubCircleL: { width: 18, height: 18, borderRadius: 9, backgroundColor: '#09090b', marginLeft: -9 }, stubDash: { flex: 1, height: 1, borderWidth: 1, borderColor: '#27272a', borderStyle: 'dashed' }, stubCircleR: { width: 18, height: 18, borderRadius: 9, backgroundColor: '#09090b', marginRight: -9 }, stubBottom: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 14 }, stubMetaLabel: { fontSize: 10, color: '#52525b', fontWeight: '700', letterSpacing: 0.8 }, stubMetaValue: { fontSize: 13, color: '#fff', fontWeight: '600', marginTop: 3 }, stubQR: { width: 52, height: 52, borderRadius: 10, backgroundColor: '#27272a', alignItems: 'center', justifyContent: 'center' }, confirmActions: { width: '100%', gap: 12, marginTop: 24 }, walletBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, backgroundColor: 'rgba(129,140,248,0.12)', borderRadius: 14, paddingVertical: 14, borderWidth: 1, borderColor: 'rgba(129,140,248,0.2)' }, walletBtnText: { fontSize: 15, color: '#818cf8', fontWeight: '600' }, doneBtn: { alignItems: 'center', paddingVertical: 14, borderRadius: 14, borderWidth: 1.5, borderColor: '#27272a' }, doneBtnText: { fontSize: 15, color: '#71717a', fontWeight: '600' }, });

Music React Native Screen Templates — RNBlocks