TabFlatList

<TabFlatList /> est un composant Layout 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.

Il étend les propriétés et le fonctionnement de FlatList tout en ayant la capacité d'utiliser comme composant étendu FlashList et LegendList si nécessaire.

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.

Il est obligatoire d'indiquer un renderItem et des data.

É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

  • Composant de liste par défaut de React Native

• FlashList (expérimental)

  • Plus performant que FlatList

  • Maintenu et très documenté

  • Ne fonctionne pas pour le moment avec TabFlatList et le background

• LegendList

  • 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.

La hauteur du header est définie par la propriété height et non par le composant lui-même.

example.tsx

<TabFlatList
  header={
    <View>
      <Text>Coucou !</Text>
    </View>
  }
/>

Type
React.ReactNode

height

Hauteur du composant parent de 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.

Privilégiez un radius concentrique avec vos élements UI si ceux-ci commencent directement dans la liste pour un confort visuel et le respect des guides d'interface Papillon.

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 (si utilisé) de la vue

Type	Valeur par défaut
Couleur (HEX)	#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