MultinaireListView

Enhanced FlatList with loading states and skeleton placeholders.

Basic Usage

import { MultinaireListView } from '@multinaire/multinaire-design';

<MultinaireListView
  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

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

With Loading State

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

With Gap and Padding

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

Horizontal List

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

With Pull to Refresh

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

With Empty State

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