Quiero que mejores, optimices, completes, corrigue lo necesario de la pantalla de react native en js: import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Image, TouchableOpacity, StyleSheet, ScrollView, SafeAreaView, Modal, Dimensions, ActivityIndicator} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import Swiper from 'react-native-swiper';
import { useNavigation } from '@react-navigation/native';
import { useGlobalContext } from '../context/GlobalContext';
import { BlurView } from 'expo-blur';

const { width } = Dimensions.get('window');

const sliderImages = [
    require('../assets/Green Elegant Natural Skincare Product Showcase Promotion Banner.png'),
    require('../assets/White Black Simple New Product Sale Banner Landscape.png'),
    // ... más imágenes
];

const categories = [
    { 
        icon: 'business-outline', 
        title: 'Venta al por mayor', 
        screen: 'Wholesale', 
        color: '#4a90e2',
        info: {
            providers: ['Distribuidoras', 'Tiendas', 'Negocios pequeños', 'Depósitos', 'Almacenes'],
            description: 'Accede a precios al por mayor con descuentos significativos.',
            subscription: 'Suscripción de $5 para acceder a los beneficios de venta al por mayor.',
        }
    },
    { 
        icon: 'cart-outline', 
        title: 'Venta directa', 
        screen: 'DirectSale', 
        color: '#50c878',
        info: {
            providers: ['Importadores', 'Fabricantes', 'Productores'],
            description: 'Obtén los mejores precios directamente de los fabricantes y productores.',
            benefits: 'Ahorra hasta un 40% comprando directamente del origen.',
            subscription: 'Tarjeta de $14 para acceder a los beneficios de venta directa.',
        }
    },
];

export default function HomeScreen() {
    console.log('HomeScreen rendering');
    const navigation = useNavigation();
    const { selectedAddress, selectAddress, fetchStores, stores } = useGlobalContext();
    const [randomStores, setRandomStores] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [modalContent, setModalContent] = useState(null);

    useEffect(() => {
        console.log('Fetching stores useEffect');
        fetchStores().catch(error => console.error("Error fetching stores:", error));
    }, [fetchStores]);

    useEffect(() => {
        console.log('Updating random stores useEffect, stores length:', stores.length);
        const updateRandomStores = () => {
            if (stores.length > 0) {
                const shuffled = [...stores].sort(() => 0.5 - Math.random());
                const newRandomStores = shuffled.slice(0, 4);
                console.log('New random stores:', newRandomStores);
                setRandomStores(newRandomStores);
            }
        };

        updateRandomStores();
        const interval = setInterval(updateRandomStores, 30000);
        return () => {
            console.log('Clearing interval in useEffect cleanup');
            clearInterval(interval);
        }
    }, [stores]);

    const handleCategoryPress = (screen) => {
        console.log('Category pressed, navigating to:', screen);
        navigation.navigate(screen, { productType: type });
    };

    const handleAddressPress = () => {
        console.log('Address pressed, navigating to AddressPicker');
        navigation.navigate('AddressPicker', {
            onSelectAddress: (address) => {
                console.log('New address selected:', address);
                selectAddress(address);
            }
        });
    };

    const openModal = (content) => {
        console.log('Opening modal with content:', content);
        setModalContent(content);
        setModalVisible(true);
    };

    useEffect(() => {
        console.log('randomStores state changed:', randomStores);
    }, [randomStores]);

    useEffect(() => {
        console.log('modalVisible state changed:', modalVisible);
    }, [modalVisible]);

    useEffect(() => {
        console.log('modalContent state changed:', modalContent);
    }, [modalContent]);

    return (
        <SafeAreaView style={styles.safeArea}>
            <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
                <View style={styles.header}>
                    <TouchableOpacity onPress={() => navigation.navigate('UserProfile')} style={styles.iconButton}>
                        <Ionicons name="person-circle-outline" size={28} color="#333" />
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.locationContainer} onPress={handleAddressPress}>
                        <Ionicons name="location-outline" size={20} color="#333" />
                        <Text numberOfLines={1} style={styles.selectedAddressText}>
                            {selectedAddress || 'Selecciona tu ubicación'}
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => navigation.navigate('Cart')} style={styles.iconButton}>
                        <Ionicons name="cart-outline" size={28} color="#333" />
                    </TouchableOpacity>
                </View>

                <View style={styles.searchContainer}>
                    <Ionicons name="search-outline" size={20} color="#888" style={styles.searchIcon} />
                    <TextInput
                        style={styles.searchInput}
                        placeholder="¿Qué deseas ordenar hoy?"
                        placeholderTextColor="#888"
                    />
                </View>

                <Swiper 
                    height={180} 
                    autoplay 
                    autoplayTimeout={5} 
                    showsPagination={false} 
                    style={styles.sliderSwiper}
                    dot={<View style={styles.dot} />}
                    activeDot={<View style={styles.activeDot} />}
                >
                    {sliderImages.map((imageSrc, index) => (
                        <Image key={index} source={imageSrc} style={styles.sliderImage} />
                    ))}
                </Swiper>

                <View style={styles.categoryContainer}>
                    {categories.map((category, index) => (
                        <TouchableOpacity 
                            key={index} 
                            style={[styles.category, { backgroundColor: category.color }]} 
                            onPress={() => handleCategoryPress(category.screen, category.title === 'Venta al por mayor' ? 'wholesale' : 'direct')}
                            >
                            <Ionicons name={category.icon} size={32} color="#fff" />
                            <Text style={styles.categoryText}>{category.title}</Text>
                            <TouchableOpacity 
                                style={styles.infoButton} 
                                onPress={() => openModal(category.info)}
                            >
                                <Ionicons name="information-circle-outline" size={24} color="#fff" />
                            </TouchableOpacity>
                        </TouchableOpacity>
                    ))}
                </View>

                <View style={styles.recommendedContainer}>
                    <Text style={styles.recommendedHeader}>Tiendas Recomendadas</Text>
                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                        {randomStores.map((store, index) => (
                            <TouchableOpacity 
                                key={index} 
                                style={styles.recommendedItem}
                                onPress={() => navigation.navigate('StoreDetails', { store })}
                            >
                                <Image source={{ uri: store.image }} style={styles.recommendedImage} />
                                <View style={styles.recommendedTextContainer}>
                                    <Text style={styles.recommendedText}>{store.name}</Text>
                                    <Text style={styles.recommendedDescription}>{store.description}</Text>
                                </View>
                            </TouchableOpacity>
                        ))}
                    </ScrollView>
                </View>
            </ScrollView>

            <Modal
                animationType="fade"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => setModalVisible(false)}
            >
                <BlurView intensity={100} style={styles.modalContainer} tint="dark">
                    <View style={styles.modalContent}>
                        <ScrollView>
                            {modalContent && (
                                <>
                                    <Text style={styles.modalTitle}>Proveedores</Text>
                                    <Text style={styles.modalProviders}>{modalContent.providers.join(', ')}</Text>
                                    <Text style={styles.modalDescription}>{modalContent.description}</Text>
                                    {modalContent.benefits && (
                                        <Text style={styles.modalBenefits}>{modalContent.benefits}</Text>
                                    )}
                                    <Text style={styles.modalSubscription}>{modalContent.subscription}</Text>
                                </>
                            )}
                        </ScrollView>
                        <TouchableOpacity
                            style={styles.closeButton}
                            onPress={() => setModalVisible(false)}
                        >
                            <Text style={styles.closeButtonText}>Cerrar</Text>
                        </TouchableOpacity>
                    </View>
                </BlurView>
            </Modal>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    safeArea: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    container: {
        flex: 1,
        padding: 16,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 16,
    },
    iconButton: {
        padding: 8,
    },
    locationContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#fff',
        borderRadius: 20,
        padding: 8,
        marginHorizontal: 10,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.23,
        shadowRadius: 2.62,
        elevation: 4,
    },
    selectedAddressText: {
        flex: 1,
        textAlign: 'center',
        fontSize: 14,
        color: '#333',
        marginLeft: 8,
    },
    searchContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderRadius: 25,
        paddingVertical: 8,
        paddingHorizontal: 16,
        marginBottom: 16,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.23,
        shadowRadius: 2.62,
        elevation: 4,
    },
    searchIcon: {
        marginRight: 8,
    },
    searchInput: {
        flex: 1,
        fontSize: 16,
    },
    sliderSwiper: {
        height: 180,
        marginBottom: 24,
        borderRadius: 10,
        overflow: 'hidden',
    },
    sliderImage: {
        height: '100%',
        width: '100%',
        resizeMode: 'cover',
    },
    dot: {
        backgroundColor: 'rgba(255,255,255,.3)',
        width: 8,
        height: 8,
        borderRadius: 4,
        marginLeft: 3,
        marginRight: 3,
    },
    activeDot: {
        backgroundColor: '#fff',
        width: 8,
        height: 8,
        borderRadius: 4,
        marginLeft: 3,
        marginRight: 3,
    },
    categoryContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 24,
    },
    category: {
        width: (width - 40) / 2,
        height: 120,
        borderRadius: 10,
        padding: 16,
        justifyContent: 'space-between',
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.23,
        shadowRadius: 2.62,
        elevation: 4,
    },
    categoryText: {
        fontSize: 16,
        fontWeight: '600',
        color: '#fff',
    },
    infoButton: {
        position: 'absolute',
        top: 8,
        right: 8,
    },
    recommendedContainer: {
        marginBottom: 24,
    },
    recommendedHeader: {
        fontSize: 20,
        fontWeight: 'bold',
        marginBottom: 16,
        color: '#333',
    },
    recommendedItem: {
        width: 200,
        marginRight: 16,
        backgroundColor: '#fff',
        borderRadius: 10,
        overflow: 'hidden',
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.23,
        shadowRadius: 2.62,
        elevation: 4,
    },
    recommendedImage: {
        width: '100%',
        height: 120,
        resizeMode: 'cover',
    },
    recommendedTextContainer: {
        padding: 12,
    },
    recommendedText: {
        fontSize: 16,
        fontWeight: '600',
        color: '#333',
        marginBottom: 4,
    },
    recommendedDescription: {
        fontSize: 14,
        color: '#666',
    },
    modalContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalContent: {
        backgroundColor: 'white',
        borderRadius: 20,
        padding: 20,
        width: '90%',
        maxHeight: '80%',
    },
    modalTitle: {
        fontSize: 22,
        fontWeight: 'bold',
        marginBottom: 16,
        color: '#333',
    },
    modalProviders: {
        fontSize: 16,
        marginBottom: 12,
        color: '#666',
    },
    modalDescription: {
        fontSize: 16,
        marginBottom: 12,
        color: '#333',
    },
    modalBenefits: {
        fontSize: 16,
        fontStyle: 'italic',
        marginBottom: 12,
        color: '#4a90e2',
    },
    modalSubscription: {
        fontSize: 16,
        fontWeight: 'bold',
        marginTop: 12,
        color: '#50c878',
    },
    closeButton: {
        backgroundColor: '#4a90e2',
        padding: 12,
        borderRadius: 8,
        alignSelf: 'center',
        marginTop: 20,
    },
    closeButtonText: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: 16,
    },
});