# TabFlatList {% hint style="danger" %} **Déprécié depuis la v8.3** TabFlatList est déprécié en faveur de TabHeader sur l'appli Papillon. Il ne sera plus maintenu ou mis à jour {% endhint %} `` est un composant [Layout](https://docs.papillon.bzh/ui/components/layouts) utilisé pour concevoir des onglets complexes **avec un header repliant animé**. Il est notamment utilisé sur l'onglet des Notes, des Tâches et du Profil.
{% hint style="success" %} **Il étend les propriétés et le fonctionnement de** [**FlatList**](https://reactnative.dev/docs/flatlist) tout en ayant la capacité d'utiliser comme composant étendu [FlashList](https://shopify.github.io/flash-list/) et [LegendList](https://legendapp.com/open-source/list/api/gettingstarted/) si nécessaire. {% endhint %} Celui-ci est utilisé principalement pour afficher des grandes listes de données similaires ou des interfaces complèxes accompagné d'un header mobile tout en privilégiant un haut niveau de performances au render et au scroll. ## Propriétés TabFlatList étend les propriétés de [FlatList](https://reactnative.dev/docs/flatlist). {% hint style="warning" %} Il est **obligatoire** d'indiquer un **`renderItem`** et des **`data`.** {% endhint %}
Éléments obligatoires inhérents à FlatList (renderItem et data) ### `renderItem` (FlatList) Prend un item de data et le rend à l'intérieur de la liste. Ajoute également des propriétes telles que `index` au rendu. | Type | | -------- | | Fonction | ### `data` (FlatList) Une array (liste) d'éléments à rendre | Type | | ----- | | Liste |
### `engine` Composant FlatList wrappé et utilisé pour le rendu de la liste. 3 options disponibles. * [FlatList](https://reactnative.dev/docs/flatlist) * Composant de liste par défaut de React Native * [FlashList](https://shopify.github.io/flash-list/) (expérimental) * Plus performant que FlatList * Maintenu et très documenté * **Ne fonctionne pas pour le moment avec TabFlatList et le background** * [LegendList](https://github.com/LegendApp/legend-list) * Beaucoup plus performant que les deux autres * Instable avec des layouts complexes | Type | Valeur par défaut | | ------ | ----------------- | | String | FlatList | ### `header` Render le composant React a placer dans la partie supérieure animée. L'animation réduit l'échelle du component en fonction du scroll. Ce component est rendu **en dehors et au dessus** de la FlatList d'engine. {% hint style="danger" %} La hauteur du header est définie par la propriété [`height`](#height) et non par le composant lui-même. {% endhint %} {% columns fullWidth="true" %} {% column width="58.333333333333336%" %} 
<TabFlatList
  header={
    <View>
      <Text>Coucou !</Text>
    </View>
  }
/>
{% endcolumn %} {% column width="41.666666666666664%" %}
{% endcolumn %} {% endcolumns %} | Type | | --------------- | | React.ReactNode | ### `height` Hauteur du composant parent de [`header`](#header). Cette height sera repliée avec le scroll de la vue. | Type | Valeur par défaut | | ------ | ----------------- | | Number | 120 | ### `padding` Espace (padding) autour des éléments rendus (renderItem) dans la vue scrollable. | Type | Valeur par défaut | | ------ | ----------------- | | Number | 16 | ### `gap` Espace entre les éléments rendus (renderItem) dans la vue scrollable. | Type | Valeur par défaut | | ------ | ----------------- | | Number | 0 | ### `radius` Bordure arrondie de la carte contenant la vue scrollable. {% hint style="success" %} **Privilégiez un** [**radius concentrique**](https://stackoverflow.com/questions/50096684/calculating-outer-corner-radius-for-concentric-rounded-corners-of-a-border) **avec vos élements UI** si ceux-ci commencent directement dans la liste pour un confort visuel et le respect des guides d'interface Papillon. {% endhint %} | Type | Valeur par défaut | | ------ | ----------------- | | Number | 28 | ### `backgroundColor` Couleur de fond de la vue | Type | Valeur par défaut | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Couleur (HEX) | #F7E8F5 | ### `foregroundColor` Couleur du [`pattern`](#pattern) (si utilisé) de la vue | Type | Valeur par défaut | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Couleur (HEX) | ![](https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2F1vHQARsgB5CLpPY8oVZE%2Fimage.png?alt=media\&token=7124871e-4e20-42ed-b85c-de19c6213472) #29947A | ### `translucent` Supprime l'arrière plan de la carte inférieure | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | ### `pattern` Motif utilisé dans le fond de la vue. Fonctionne uniquement avec les motifs prédéfinis : * `dots` * `checks` * `grades` | Type | | ------ | | String | ### `onFullyScrolled` Callback qui sera appelé lorsque le header sera entièrement replié. | Type | | -------------------------------------- | | `({isFullyScrolled: boolean}) => void` | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.papillon.bzh/ui/components/layouts/tabflatlist.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.