dragable

import React, { useCallback, useLayoutEffect, useState } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import DraggableFlatList, { ScaleDecorator, NestableScrollContainer } from 'react-native-draggable-flatlist';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import SplashScreen from 'react-native-splash-screen';

import { SafeAreaView, Image } from 'react-native';

import { IconButton } from '@jmstechnologiesinc/react-native-paper';

const NUM_ITEMS = 10;

const getColor = (i, numItems = 25) => {
    const multiplier = 255 / (numItems - 1);
    const colorVal = i * multiplier;
    return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
};

const mapIndexToData = (_d, index) => {
    return {
        text: `https://api.slingacademy.com/public/sample-photos/${index + 1}.jpeg`,
        index: `${index + 1}`,
    };
};

const initialData = [...Array(NUM_ITEMS)].map(mapIndexToData);

export default function Horizontal() {
    const [data, setData] = useState(initialData);
    const [valueId, setValueId] = useState(2);
    // console.log(JSON.stringify(data, null, 4));

    useLayoutEffect(() => {
        SplashScreen.hide();
    }, []);

    const renderItem = useCallback(({ item, drag, isActive }) => {
        console.log(item);
        return (
            <ScaleDecorator>
                <TouchableOpacity
                    activeOpacity={1}
                    onLongPress={drag}
                    disabled={isActive}
                    style={[
                        styles.rowItem,
                        { opacity: isActive ? 0.5 : 1 },
                        { backgroundColor: isActive ? 'blue' : 'pink' },
                    ]}
                >
                    <Image style={{ height: 100, width: 100, marginHorizontal: 20 }} source={{ uri: item.text }} />

                    <IconButton
                        icon="delete"
                        selected
                        size={24}
                        color={'red'}
                        onPress={() => {}}
                        style={{
                            position: 'absolute',
                            right: -10,
                            top: 0,
                            backgroundColor: 'white',
                            // top: 10, // Ajusta la posición vertical del ícono encima de la imagen
                            // right: 10,
                        }}
                    />
                </TouchableOpacity>
            </ScaleDecorator>
        );
    }, []);

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <GestureHandlerRootView style={{ flex: 1 }}>
                <NestableScrollContainer>
                    <DraggableFlatList
                        horizontal
                        data={data}
                        onDragEnd={({ data }) => setData(data)}
                        keyExtractor={(item) => {
                            return item.text;
                        }}
                        renderItem={renderItem}
                        renderPlaceholder={() => <View style={{ flex: 1, backgroundColor: 'tomato' }} />}
                    />
                </NestableScrollContainer>
            </GestureHandlerRootView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    rowItem: {
        height: 100,
        width: 100,
        marginHorizontal: 20,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        fontSize: 24,
        fontWeight: 'bold',
        textAlign: 'center',
    },
});