Item

Item est un élément conçu pour être placé dans une List ou dans une TableFlatList. Il permet de concevoir facilement des interfaces sectionnées. Il remplace l'ancien <NativeItem />.

Fonctionnement

Item est un élément dynamique et intelligent. Il adapte automatiquement le placement de son contenu selon son type, ce qui lui permet d'être utile pour construire rapidement des interfaces complètes.

Texte

Pour commencer un Item, on ajoute habituellement un titre et un sous-titre. Pour cela, on va utiliser <Typography/> et ses variantes conçues pour Item.

example.tsx

Copier

<List>
  <Item>
    <Typography variant="title">
      Salut tout le monde !
    </Typography>
    <Typography variant="caption">
      Comment ça va ?
    </Typography>
  </Item>
<List>

Icône

Pour ajouter une icône, on va faire appel a l'élément <Icon />.

example.tsx

Copier

<List>
  <Item>
    <Icon papicon>
      <Papicons.Student />
    </Icon>

    <Typography variant="title">
      Salut tout le monde !
    </Typography>
    <Typography variant="caption">
      Comment ça va ?
    </Typography>
  </Item>
</List>

Trailing

Trailing est un élément placé en fin d'Item, il peut contenir n'importe quel composant React.

example.tsx

Copier

<List>
  <Item>
    {/* Reste du code */}
    
    <Trailing>
      <Button
        title="Bouton"
        size="small"
        inline
      />
    </Trailing>
  </Item>
</List>

Leading

Leading est un élément placé en début d'Item, il peut contenir n'importe quel composant React.

example.tsx

Copier

<List>
  <Item>
    <Leading>
      <Image source={require('@/assets/images/icon.png')} style={{ width: 40, height: 40, borderRadius: 10 }} />
    </Leading>

    {/* Reste du code */}
  </Item>
</List>

Propriétés

onPress

Appelé lorsqu'un appui est enregistré sur l'Item