Untitled

import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState, useCallback, useRef } from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Octicons } from '@expo/vector-icons';
import { Image } from 'expo-image';
import colors from '../../colors.json'
import { LinearGradient } from 'expo-linear-gradient';
import * as FileSystem from 'expo-file-system';
import { useTranslation } from 'react-i18next';
import i18next from '../../localization/i18n.js'
import axios from 'axios'
import { TouchableOpacity as RNGHTouchableOpacity, ScrollView, FlatList } from 'react-native-gesture-handler';
import AutoScrollingScrollView from '../helpers/imageSlider';

export default function Shop({ navigation }) {
    const { t } = useTranslation()
    let cachedLanguage = i18next.language;
    const [shop, setShop] = useState([])

    const loadShop = useCallback(({ item, index }) => {

        return (
            <View style={{ marginBottom: 15 }}>
                <FlatList
                    horizontal
                    showsHorizontalScrollIndicator={false}
                    contentContainerStyle={{ paddingLeft: 20 }}
                    data={item.tiles}
                    onEndReachedThreshold={0.1}
                    removeClippedSubviews={true}
                    maxToRenderPerBatch={10}
                    updateCellsBatchingPeriod={5000}
                    initialNumToRender={25}
                    windowSize={2}
                    keyExtractor={(item, index) => `${index}`} // Change the key to something unique for each item
                    renderItem={({ item: ratio }) => (
                        <View style={{ flexDirection: ratio.tileSize === "Size_1_x_1" ? 'row' : 'column' }}>
                            {ratio.tileSize === "Size_1_x_1" ? (
                                [...Array(Math.ceil(ratio.list.length / 2))].map((_, colIndex) => (
                                    <View key={colIndex} style={{ flexDirection: 'column' }}>
                                        {ratio.list.slice(colIndex * 2, colIndex * 2 + 2).map((offer, rowIndex) => (
                                            <RNGHTouchableOpacity onPress={() => navigation.navigate("DetailsScreen", { data: offer.granted[0] })} key={`${colIndex}-${rowIndex}`} style={{ marginRight: 5, marginBottom: rowIndex === 0 ? 5 : 0, width: 72, height: 72, overflow: 'hidden', backgroundColor: '#191919', position: "relative" }}>

                                                <AutoScrollingScrollView
                                                    width={72}
                                                    height={72}
                                                    images={offer.displayAssets.map(e => e.background + "?width=100")}
                                                />
                                                
                                            </RNGHTouchableOpacity>
                                        ))}
                                    </View>
                                ))
                            ) : (
                                <View style={{ flexDirection: "row" }}>
                                    {
                                        ratio.list.map((offer, rowIndex) => (
                                            <RNGHTouchableOpacity key={rowIndex} onPress={() => navigation.navigate("DetailsScreen", { data: offer.granted[0] })} style={{ marginRight: 5, width: offer.tileSize === "Size_3_x_2" || offer.tileSize === "TripleWide" ? 170 : offer.tileSize === "Size_2_x_2" ? 150 : offer.tileSize === "Size_1_x_2" ? 82 : 150, height: offer.tileSize === "Size_3_x_2" || offer.tileSize === "TripleWide" ? 150 : offer.tileSize === "Size_2_x_2" ? 150 : offer.tileSize === "Size_1_x_2" ? 150 : 150, overflow: 'hidden', backgroundColor: '#191919', position: "relative" }}>
                                                
                                                <AutoScrollingScrollView
                                                    width={offer.tileSize === "Size_3_x_2" || offer.tileSize === "TripleWide" ? 170 : offer.tileSize === "Size_2_x_2" ? 150 : offer.tileSize === "Size_1_x_2" ? 82 : 150}
                                                    height={offer.tileSize === "Size_3_x_2" || offer.tileSize === "TripleWide" ? 150 : offer.tileSize === "Size_2_x_2" ? 150 : offer.tileSize === "Size_1_x_2" ? 150 : 150}
                                                    images={offer.displayAssets.map(e => e.background + "?width=265")}
                                                />
                                                
                                            </RNGHTouchableOpacity>
                                        ))
                                    }
                                </View>
                            )}
                        </View>
                    )}
                />
            </View>
        );
    }, [])

    return (
        <LinearGradient colors={[colors.app.background, "#000"]} style={styles.container}>
            <View style={{
                alignItems: 'center',
                justifyContent: 'center',
            }}>

                <FlatList
                    onEndReachedThreshold={0.1}
                    removeClippedSubviews={true}
                    maxToRenderPerBatch={20}
                    updateCellsBatchingPeriod={5000}
                    initialNumToRender={50}
                    windowSize={15}
                    data={shop}
                    renderItem={loadShop}
                />

            </View>


        </LinearGradient>

    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});