ListContainer

Enhanced FlatList with loading states and skeleton placeholders.

Basic Usage

import { ListContainer } from '@multinaire/expo-ui';

<ListContainer
  data={items}
  renderItem={({ item }) => <ItemCard data={item} />}
/>

Props

Prop	Type	Default	Description
data	T[]	—	Array of items to render
renderItem	({ item }) => ReactElement	—	Render function for each item
isLoading	boolean	false	Show loading skeleton items in place of content
itemHeight	number	—	Estimated item height in pixels, used for loading skeletons
itemCount	number	5	Number of skeleton items to show while loading
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin
padding	SpacingProps	—	Inner padding
gap	number	—	Gap between items in pixels

All React Native FlatList props are also supported.

Examples

Basic List

<ListContainer
  data={users}
  renderItem={({ item }) => (
    <UserCard user={item} onPress={() => viewUser(item.id)} />
  )}
  keyExtractor={(item) => item.id}
/>

With Loading State

<ListContainer
  data={products}
  renderItem={({ item }) => <ProductCard product={item} />}
  isLoading={isLoading}
  itemHeight={80}
  itemCount={6}
/>

With Gap and Padding

<ListContainer
  data={posts}
  renderItem={({ item }) => <PostCard post={item} />}
  padding={16}
  gap={12}
/>

Horizontal List

<ListContainer
  horizontal
  data={categories}
  renderItem={({ item }) => <CategoryChip category={item} />}
  padding={{ horizontal: 16 }}
  gap={8}
  showsHorizontalScrollIndicator={false}
/>

With Pull to Refresh

<ListContainer
  data={items}
  renderItem={({ item }) => <Item data={item} />}
  refreshControl={
    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
  }
/>

With Empty State

<ListContainer
  data={items}
  renderItem={({ item }) => <Item data={item} />}
  ListEmptyComponent={
    <Container flex={1} justifyContent="center" alignItems="center">
      <Typography color="neutral">No items found</Typography>
    </Container>
  }
/>