VirtualizedList

Following is the default implementation of the VirtualizedList component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component.
function App() {
function getItemCount(_data) {
return 5
}
function getItem(_data, index) {
return data[index]
}
const data = [
{
id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
fullName: "Aafreen 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",
},
{
id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
fullName: "Sujitha Mathur",
timeStamp: "11:11 PM",
recentText: "Cheer up, there!",
avatarUrl:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d72",
fullName: "Anci Barroco",
timeStamp: "6:22 PM",
recentText: "Good Day!",
avatarUrl: "https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg",
},
{
id: "68694a0f-3da1-431f-bd56-142371e29d72",
fullName: "Aniket Kumar",
timeStamp: "8:56 PM",
recentText: "All the best",
avatarUrl:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU",
},
{
id: "28694a0f-3da1-471f-bd96-142456e29d72",
fullName: "Kiara",
timeStamp: "12:47 PM",
recentText: "I will call today.",
avatarUrl:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU",
},
]
return (
<>
<Box>
<Heading size="xl" p="$4" pb="$3">
Inbox
</Heading>
<VirtualizedList
getItemCount={getItemCount}
getItem={getItem}
renderItem={({ item }) => (
<Box
borderBottomWidth="$1"
borderColor="$trueGray800"
sx={{
_dark: {
borderColor: "$trueGray100",
},
"@base": {
pl: 0,
pr: 0,
},
"@sm": {
pl: "$4",
pr: "$5",
},
}}
py="$2"
>
<HStack space="md" justifyContent="space-between">
<Avatar size="md">
<AvatarImage source={{ uri: item.avatarUrl }} />
</Avatar>
<VStack>
<Text
color="$coolGray800"
fontWeight="$bold"
sx={{
_dark: {
color: "$warmGray100",
},
}}
>
{item.fullName}
</Text>
<Text
color="$coolGray600"
sx={{
_dark: {
color: "$warmGray200",
},
}}
>
{item.recentText}
</Text>
</VStack>
<Text
fontSize="$xs"
color="$coolGray800"
alignSelf="flex-start"
sx={{
_dark: {
color: "$warmGray100",
},
}}
>
{item.timeStamp}
</Text>
</HStack>
</Box>
)}
/>
</Box>
</>
)
}

Note: You can refer here to learn about default styling of VirtualizedList component

Import

To use this component in your project, include the following import statement in your file.
import { VirtualizedList } from '@gluestack-ui/themed';

Anatomy

The structure provided below can help you identify and understand a VirtualizedList component's various parts.
export default () => <VirtualizedList />

API Reference

The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.

VirtualizedList

It inherits all the properties of React Native's VirtualizedList component.
Edit this page on GitHub