An SVG gradient id collision
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.
Only visible by using it
Invisible to a code read. Found by being the real user, on a real device, at a real width.
Every card rendered its scrim as an inline react-native-svg gradient using the same element id. In a list those collide across items and resolve to the wrong definition, so cards rendered a flat opaque grey box instead of a scrim. Swapped to expo-linear-gradient, which has no id namespace to collide in. Did the list performance work at the same time since it was the same screen: React.memo on the three card variants, Expo Image recycling, memoized handlers, FlatList windowing.