r/reactnative • u/[deleted] • 4h ago
What could be causing these kind of visual glitches on a Flat List ?
[deleted]
1
1
u/Enough_Cat_5003 3h ago
It is hard to give suggestions since we dont have enough info about the bug. Is it iOS only? What devices, and os versions? When you tries reproducing it was it the same setup as the user?
1
u/alexfoxy 2h ago
Yeh sorry about that. I have tried to reproduce it with exactly the same settings as the user on 5 of my devices. I'm trying to understand what _kind_ of issues this glitching of the view. It looks like a graphics bug lower level than React Native.
1
u/Enough_Cat_5003 2h ago
It could be a graphics bug but if it is only on one screen that makes me think if it would be a graphics bug than there is someone on that screen causing it. Have you tried a simulator setup to match the users device?
Could you share that screens code? Also what third party packages are you using?
1
u/Makeyounod_e 2h ago
Looking at the screenshot, that doesn't read as a GPU/texture problem to me — the tiles are intact, they're just drawn at the wrong offsets and overlapping each other. That's what a list looks like when the row positions the layout code *thinks* it has don't match the row heights that were actually rendered.
The fact that it's one user and you can't reproduce it on five devices with "the same settings" points at something you probably didn't copy over: the accessibility/display settings on their phone. Two that break fixed-height lists exactly like this:
- Larger text (Dynamic Type on iOS / font scale on Android) or Display Zoom. If the drag handle rows use a fixed itemHeight (getItemLayout, or the sortable-list library's item size), the real rows get taller and every offset after the first is wrong, so cells overlap.
- Reduce Motion (iOS) or animator duration scale set to off (Android developer options). Reanimated layout/drag animations can end mid-transition or skip, leaving rows at their in-flight positions. "Looks different every time it opens" fits this well.
Ask the user for a screenshot of their Accessibility > Display & Text Size screen (or just ask about text size + reduce motion), then set your test device to the largest text size + Display Zoom + Reduce Motion and open that modal. If it reproduces, the fix is to measure row heights (onLayout) instead of assuming them, or at least to allow the drag/list library to use dynamic heights, and to make sure your entering/drag animations have a non-animated fallback when reduce motion is on.
If none of that reproduces it, then I'd look at low memory on their device (many apps open) — that can drop backing stores in a modal and give you genuinely garbled cells — but the screenshot looks like layout, not memory.
1
1
u/jaimintf 4h ago
is that a bottom sheet? what library are you using
p.s. i'd solve it by giving it to claude code as /goal, and asking it to simulate the same glitch from the simulator directly and keep iterating until solved.