← Journal technique
EduQate·frontend·2026-08-31

Une collision d'id de dégradé SVG

Inline react-native-svg gradients reused one element id across list items, so the ids collided and cards rendered a flat opaque box instead of a scrim.

Visible seulement en s'en servant

Invisible à la relecture du code. Trouvé en étant le vrai utilisateur, sur un vrai appareil, à une vraie largeur.

Chaque carte rendait son voile comme un dégradé react-native-svg inline utilisant le même id d'élément. Dans une liste, ceux-là entrent en collision entre éléments et se résolvent vers la mauvaise définition, donc les cartes rendaient une boîte grise opaque plate au lieu d'un voile. Basculé vers expo-linear-gradient, qui n'a aucun namespace d'id où entrer en collision. Fait le travail de performance de liste en même temps puisque c'était le même écran : React.memo sur les trois variantes de carte, recyclage d'Expo Image, handlers mémoïsés, windowing de FlatList.