Code-MCP

/** * React Native Screen Template * Complete screen with navigation, state, and API integration */ import React, { useState, useEffect } from "react"; import { View, Text, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator, RefreshControl, } from "react-native"; import { useNavigation } from "@react-navigation/native"; interface Item { id: string; title: string; description: string; } export default function ItemListScreen() { const navigation = useNavigation(); const [items, setItems] = useState<Item[]>([]); const [loading, setLoading] = useState(true); const [refreshing, setRefreshing] = useState(false); const [error, setError] = useState<string | null>(null); const fetchItems = async () => { try { setError(null); const response = await fetch("https://api.example.com/items"); const data = await response.json(); setItems(data); } catch (err) { setError("Failed to load items"); } finally { setLoading(false); setRefreshing(false); } }; useEffect(() => { fetchItems(); }, []); const onRefresh = () => { setRefreshing(true); fetchItems(); }; const renderItem = ({ item }: { item: Item }) => ( <TouchableOpacity style={styles.item} onPress={() => navigation.navigate("ItemDetail", { id: item.id })} > <Text style={styles.title}>{item.title}</Text> <Text style={styles.description}>{item.description}</Text> </TouchableOpacity> ); if (loading) { return ( <View style={styles.centered}> <ActivityIndicator size="large" color="#007AFF" /> </View> ); } if (error) { return ( <View style={styles.centered}> <Text style={styles.error}>{error}</Text> <TouchableOpacity style={styles.retryButton} onPress={fetchItems}> <Text style={styles.retryText}>Retry</Text> </TouchableOpacity> </View> ); } return ( <FlatList data={items} renderItem={renderItem} keyExtractor={(item) => item.id} contentContainerStyle={styles.list} refreshControl={ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> } ListEmptyComponent={<Text style={styles.empty}>No items found</Text>} /> ); } const styles = StyleSheet.create({ centered: { flex: 1, justifyContent: "center", alignItems: "center", }, list: { padding: 16, }, item: { backgroundColor: "#fff", padding: 16, borderRadius: 8, marginBottom: 12, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, title: { fontSize: 18, fontWeight: "600", marginBottom: 4, }, description: { fontSize: 14, color: "#666", }, error: { color: "red", marginBottom: 16, }, retryButton: { backgroundColor: "#007AFF", paddingHorizontal: 24, paddingVertical: 12, borderRadius: 8, }, retryText: { color: "#fff", fontWeight: "600", }, empty: { textAlign: "center", color: "#999", marginTop: 32, }, });