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.

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.

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

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.

example.tsx

Copier

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

height

Hauteur du composant parent de header. Cette height sera repliée avec le scroll de la vue.

padding

Espace (padding) autour des éléments rendus (renderItem) dans la vue scrollable.

gap

Espace entre les éléments rendus (renderItem) dans la vue scrollable.

radius

Bordure arrondie de la carte contenant la vue scrollable.

backgroundColor

Couleur de fond de la vue

foregroundColor

Couleur du pattern (si utilisé) de la vue

translucent

Supprime l'arrière plan de la carte inférieure

pattern

Motif utilisé dans le fond de la vue. Fonctionne uniquement avec les motifs prédéfinis :

• dots

• checks

• grades

onFullyScrolled

Callback qui sera appelé lorsque le header sera entièrement replié.