Notes

import React, { useState } from "react";
import { Center, Box, Heading, ScrollView, Pressable, HStack, Avatar, VStack, Text, Spacer, Icon } from "native-base";
import { SwipeListView } from "react-native-swipe-list-view";
import { Entypo, MaterialIcons } from "@expo/vector-icons"; // Make sure to import the required icons

interface ListItem {
id: string;
fullName: string;
timeStamp: string;
recentText: string;
avatarUrl: string;
}

function Index() {
const [mode, setMode] = useState<string>('Basic');
return (
<Center h="290px">
<Box
_dark={{ bg: 'coolGray.800' }}
_light={{ bg: 'white' }}
flex="1" safeAreaTop maxW="400px" w="100%"
>
<Heading p="4" pb="3" size="lg">
Inbox
</Heading>
<ScrollView showsVerticalScrollIndicator={false}>
<Basic />
</ScrollView>
</Box>
</Center>
);
}

function Basic() {
const data: ListItem[] = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
fullName: 'Afreen Khan',
timeStamp: '12:47 PM',
recentText: 'Good Day!',
avatarUrl: 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
// ... (rest of the list items)
];

const [listData, setListData] = useState<ListItem[]>(data);

const closeRow = (rowMap: any, rowKey: string) => {
if (rowMap[rowKey]) {
rowMap[rowKey].closeRow();
}
};

const deleteRow = (rowMap: any, rowKey: string) => {
closeRow(rowMap, rowKey);
const newData = listData.filter(item => item.id !== rowKey);
setListData(newData);
};

const onRowDidOpen = (rowKey: string) => {
console.log('This row opened', rowKey);
};

const renderItem = ({ item, index }: { item: ListItem; index: number }) => (
<Box>
<Pressable
onPress={() => console.log('You touched me')}
_dark={{ bg: 'coolGray.800' }}
_light={{ bg: 'white' }}
>
{/* ... (rest of the JSX) */}
</Pressable>
</Box>
);

const renderHiddenItem = (data: any, rowMap: any) => (
<HStack flex="1" pl="2">
<Pressable
w="70"
ml="auto"
cursor="pointer"
bg="coolGray.200"
justifyContent="center"
onPress={() => closeRow(rowMap, data.item.id)}
_pressed={{ opacity: 0.5 }}
>
{/* ... (rest of the JSX) */}
</Pressable>
<Pressable
w="70"
cursor="pointer"
bg="red.500"
justifyContent="center"
onPress={() => deleteRow(rowMap, data.item.id)}
_pressed={{ opacity: 0.5 }}
>
{/* ... (rest of the JSX) */}
</Pressable>
</HStack>
);

return (
<Box bg="white" safeArea flex="1">
<SwipeListView
data={listData}
renderItem={renderItem}
renderHiddenItem={renderHiddenItem}
rightOpenValue={-130}
previewRowKey={'0'}
previewOpenValue={-40}
previewOpenDelay={3000}
onRowDidOpen={onRowDidOpen}
/>
</Box>
);
}