# List

List est un élément conçu pour contenir des [`Item`](https://docs.papillon.bzh/ui/components/item) en dehors d'une [`TableFlatList`](https://docs.papillon.bzh/ui/components/layouts/tableflatlist). Il permet de concevoir facilement des interfaces sectionnées.

<figure><picture><source srcset="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FL1ewRLhubzH07x97Y1wa%2Fimage.png?alt=media&#x26;token=e118ffde-3942-4f9c-b51b-53af6d33ec5d" media="(prefers-color-scheme: dark)"><img src="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FNQWsvwJR5gdhnQJ3q4U9%2Fimage.png?alt=media&#x26;token=5adaa850-3aec-45d1-931c-6f4647f45d97" alt=""></picture><figcaption></figcaption></figure>

{% hint style="danger" %}
Si la vue se compose essentiellement de [`List`](https://docs.papillon.bzh/ui/components/list) ou qu'il faut les sectionner, **privilégiez le** [**Layout**](https://docs.papillon.bzh/ui/components/layouts) [**`TableFlatList`**](https://docs.papillon.bzh/ui/components/layouts/tableflatlist)
{% endhint %}

## Usage

Pour utiliser List, il suffit de l'importer et d'y mettre du contenu. List applique automatiquement les séparations et le placement des items à l'intérieur.

{% hint style="warning" %}
List peut contenir autre chose que des Item, **mais cet usage n'est pas recommandé.**
{% endhint %}

{% columns %}
{% column %}

<pre class="language-tsx" data-title="example." data-line-numbers><code class="lang-tsx"><strong>&#x3C;List>
</strong>  {Array.from({ length: 10 }, (_, i) => (
    &#x3C;Item key={i}>
      &#x3C;Typography>
        Je suis l'item {i + 1}
      &#x3C;/Typography>
    &#x3C;/Item>
  ))}
<strong>&#x3C;/List>
</strong></code></pre>

{% endcolumn %}

{% column %}

<figure><picture><source srcset="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FYha83O8s4U8dMWGtwgiC%2Fimage.png?alt=media&#x26;token=b6ef609d-84d6-48d6-b58a-a6d12d1b770e" media="(prefers-color-scheme: dark)"><img src="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FFFYzeOJNfL50FnJP5EbB%2Fimage.png?alt=media&#x26;token=76aba318-0092-4308-94e3-1e87fed0edaf" alt=""></picture><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Propriétés

### `disablePadding`

Supprime le padding appliqué automatiquement aux éléments n'étant pas `<Item />`.

| Type    | Valeur par défaut |
| ------- | ----------------- |
| Booléen | false             |

### `radius`

Bordure arrondie de la liste

| Type   | Valeur par défaut |
| ------ | ----------------- |
| Nombre | 20                |

### `marginBottom`

Marge inférieure appliquée au conteneur de la liste

| Type   | Valeur par défaut |
| ------ | ----------------- |
| Nombre | 12                |

### `animated`

Si l'élément doit s'animer automatiquement ou non ([Layout Transitions](https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions))

| Type    | Valeur par défaut |
| ------- | ----------------- |
| Booléen | True              |

### `entering`

Animation d'entrée de la liste ([Reanimated.View](https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/))

| Type                     |
| ------------------------ |
| EntryOrExitAnimationType |

### `exiting`

Animation de sortie de la liste ([Reanimated.View](https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/))

| Type                     |
| ------------------------ |
| EntryOrExitAnimationType |