V99ListItem

Use V99ListItem for list items.

I. Props

Name	Type	Default	Description
item	any	-	The item's data info
icon	IconCDNType	-	Name the icon of the item
iconSize	V99IconSize	V99IconSize.s16	Set size for icon
iconColor	ColorValue	-	Set color for item icon
contentView	React.ReactNode	-	The content view of item
rightView	React.ReactNode	-	The view on the right of item
backgroundColor	ColorValue	-	The background color of item
onPress	(item?: any) => void	-	Callback that is called when the item is pressed.

II. Usage

import { V99ListItem } from 'v99-kits'

Example

<FlatList
  data={[
    {
      id: 'security',
      icon: 'chain_vchain',
      title: 'Bảo mật',
    },
    {
      id: 'language',
      icon: 'network_bep20',
      title: 'Ngôn ngữ',
    },
  ]}
  renderItem={({ item }) => (
    <V99ListItem
      icon={item.icon}
      contentView={<V99Text>{item.title}</V99Text>}
      rightView={
        <V99Icon
          name={'system_right'}
          color={V99Colors.white}
        />
      }
    />
  )}
  keyExtractor={(_, index) => index.toString()}
  ItemSeparatorComponent={() => (
    <V99Box
      height={2}
      backgroundColor={V99Colors.black400}
      opacity={0.6}
      marginLeft={V99Spacing.s48}
    />
  )}
/>

Demo