Swipeable.tsx

import React, { useState, useRef, useEffect } from 'react';
import {
  Animated,
  FlatList,
  I18nManager,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/FontAwesome5'


type DataType = {
  id: string,
  title: string,
  description: string,
  enabled: boolean,
}
const data = [
  { id: "1", title: 'Mir Sahib', description: 'Lorem Ipsum is Lorem Ipsum, Quis nostrum tempus', enabled: false },
  { id: "2", title: 'Tom Cruise', description: 'Lorem Ipsum is Lorem Ipsum,', enabled: false },
  { id: "3", title: 'Jared Butler', description: 'Lorem Ipsum is Lorem Ipsum, Quis nostrum tempus', enabled: false },
  { id: "4", title: 'Tom Jared', description: 'Lorem Ipsum is Lorem Ipsum,loadWifiList is empty', enabled: false },
  { id: "5", title: 'Ludo Mag', description: 'rank is empty', enabled: false },
  { id: "6", title: 'Karen Mag', description: 'how many ranks are available', enabled: false },
]



export default function Home() {
  let prevOpenedRow;
  let row: Array<any> = [];
  const [listData,setListData] = useState(data)


  const closeRow = (index) => {
    console.log('closerow', index);
    if (prevOpenedRow && prevOpenedRow !== row[index]) {
      prevOpenedRow.close();
    }
    prevOpenedRow = row[index];
  };

  const rightActions = ({ dragX, progress }, onDelete) => {

    return (
      <View style={{
        width: 94,
        flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
        marginVertical: '2%',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
        <TouchableOpacity onPress={onDelete}>
          <Icon name="trash-alt" color={'red'} size={20} />
        </TouchableOpacity>
      </View>
    )
  }

  const renderItem = ({ item, index }: { item: DataType, index: number }, onDelete) => {
    return (
      <GestureHandlerRootView>
        <Swipeable renderRightActions={(progress, dragX) => (rightActions({ dragX, progress }, onDelete))}
          onSwipeableOpen={() => closeRow(index)}
          ref={(ref) => (row[index] = ref)}
        >
          <View style={{
            flexDirection: 'row',
            backgroundColor: 'blue',
            marginVertical: '2%',
            padding: 10,
            justifyContent: 'center'
          }}>
            <Text>{item.title}</Text>
          </View>
        </Swipeable>

      </GestureHandlerRootView>
    )
  }

  const onDelete = ({ item, index }) => {
    console.log(item, index);
    let a = listData;
    a.splice(index, 1);
    console.log(a);
    setListData([...a]);
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={{ flex: 1 }}>
        <View style={{ backgroundColor: 'yellow', height: '8%' }}></View>
        <View style={{ flex: 2 }}>
          <FlatList data={listData} renderItem={(v) => renderItem(v, () => onDelete(v))} keyExtractor={(item) => item.id} />
        </View>
      </View>
    </SafeAreaView>
  );
}

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