Stuck on an issue?

import React, { useEffect, useState } from ‘react’; import { useAppSelector, useAppDispatch } from ‘store/hook’; import { SafeAreaView } from ‘react-native-safe-area-context’; import { ScrollView, ImageBackground, Image, Modal, TouchableOpacity, Animated, PanResponder, GestureResponderEvent, PanResponderGestureState } from ‘react-native’; import { DragSortableView } from ‘react-native-drag-sort’; // import { Modal } from ‘@ant-design/react-native’; import MyStyleSheet from ‘components/MyStyleSheet’; import { UIText, UITextInput } from ‘components/Text/Texts’; import { Dimensions } from ‘react-native’; import { NestableScrollContainer, NestableDraggableFlatList, ScaleDecorator, RenderItemParams } from “react-native-draggable-flatlist”

export const WINDOW_WIDTH = Dimensions.get(‘window’).width;

export const WINDOW_HEIGHT = Dimensions.get(‘window’).height;

const NUM_ITEMS = 10; function getColor(i: number) { const multiplier = 255 / (NUM_ITEMS - 1); const colorVal = i * multiplier; return rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal}); }

type Item = { key: string; label: string; height: number; width: number; backgroundColor: string; };

const initialData: Item[] = […Array(NUM_ITEMS)].map((d, index) => { const backgroundColor = getColor(index); return { key: item-${index}, label: String(index) + “”, height: 100, width: 60 + Math.random() * 40, backgroundColor, }; });

const Index: React.FC<{ navigation: any }> = ({ navigation }) => { const [data, setData] = useState(initialData);

const renderItem = ({ item, drag, isActive }: RenderItemParams) => { console.log(666, item, drag, isActive); return ( <TouchableOpacity onLongPress={drag} disabled={isActive} style={[ styles.rowItem, { backgroundColor: isActive ? “red” : item.backgroundColor }, ]} > {item.label} ); }; console.log(‘data’, data); console.log(‘renderItem’, renderItem); return ( <NestableDraggableFlatList data={data} renderItem={renderItem} keyExtractor={(item) => item.key} onDragEnd={({ data }) => setData(data)} /> ); };

const styles = MyStyleSheet.create({ rowItem: { height: 100, width: 100, alignItems: “center”, justifyContent: “center”, }, text: { color: “white”, fontSize: 24, fontWeight: “bold”, textAlign: “center”, }, });

export default Index;