# Layouts

Les layouts sont les principaux conteneurs d'une page ou de contenu, contenant les élements scrollables, le header, le footer, etc. **Il est le point d'entrée d'un affichage particulier de données.**

<figure><picture><source srcset="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FMGTOmLBBLthzwu2sddl9%2Fimage.png?alt=media&#x26;token=b148537c-01de-4697-8593-29e9082a313f" media="(prefers-color-scheme: dark)"><img src="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2F5wV7GzLf1sDWLt9grupW%2Fimage.png?alt=media&#x26;token=d1a9f832-9f03-42e1-b03b-c9a7c29bd544" alt=""></picture><figcaption></figcaption></figure>

## Commencer avec les layouts

Il existe dans Papillon UI plusieurs types de layouts utilisables pour votre interface.

{% hint style="warning" %}
Si vous ne retrouvez pas votre cas d'usage dans ces types, privilégiez les layouts par défaut tels que [ScrollView](https://reactnative.dev/docs/scrollview), [FlatList](https://reactnative.dev/docs/flatlist) ou ceux importés comme [LegendList](https://github.com/LegendApp/legend-list) ou [FlashList](https://shopify.github.io/flash-list/).
{% endhint %}

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover-dark data-type="image">Cover image (dark)</th></tr></thead><tbody><tr><td><strong>TabFlatList</strong></td><td>Composition complexes avec un header repliant animé</td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2Fhebr1njUuKREkext5TVd%2Fimage.png?alt=media&#x26;token=0f09f505-5a01-42b2-abdf-4f3ca2205afe">image (28).png</a></td><td><a href="layouts/tabflatlist">tabflatlist</a></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FrfR8kyxlRPg6byUXRT4m%2Fimage.png?alt=media&#x26;token=cadace48-cb5d-49a4-a310-6076eb0d3396">image (34).png</a></td></tr><tr><td><strong>TableFlatList</strong></td><td>Affichage de large listes de données scrollables avec sections </td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FV5fgF2zEu6K5wxSeIaqx%2Fimage.png?alt=media&#x26;token=1c17b85e-4d5d-4217-a29d-d88c225c42d6">image (29).png</a></td><td><a href="layouts/tableflatlist">tableflatlist</a></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FhU6y7HMek7Ze2IZS1AbV%2Fimage.png?alt=media&#x26;token=81994093-d31b-4f0d-9d2f-e36142cd9b04">image (35).png</a></td></tr><tr><td><strong>Stack</strong></td><td>Affiche des éléments dans un format conditionné</td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FLxZ0TcHTTc05BKCggoWo%2Fimage.png?alt=media&#x26;token=b9c4c978-3152-492e-9a03-80ca8a53b39f">image.png</a></td><td></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FeCSojLYNNT5srQRxy2Zz%2Fimage.png?alt=media&#x26;token=03a1bbe8-5a7f-436c-9b25-ca03fe6fa1ea">image (1).png</a></td></tr></tbody></table>