Performance Optimization and Technical Selection of Infinite List Components in React Native

The article introduces the challenges of implementing infinite scrolling lists in React Native (RN) for classification‑style information feeds, where users swipe horizontally between tabs and scroll vertically to load more items.

Technical selection of list components : RN's built‑in ListView and FlatList were evaluated and found lacking—ListView never recycles items, causing memory bloat, while FlatList improves memory usage but still shows occasional stutter on some Android devices. The third‑party RecyclerListView was selected for its superior memory reuse and smooth performance on both iOS and Android.

Performance comparison : Frame‑rate tests on an Android OPPO R9 showed FlatList with 16% of frames below 20 fps (perceived as laggy) versus only 3% for RecyclerListView (smooth). Subjective experience matched the numbers.

Implementation details :

When item heights are known, developers can map server data to a list state that includes height and type fields, e.g.: const types = { ONE_IMAGE: 'ONE_IMAGE', TWO_IMAGE: 'TWO_IMAGE' }; const list = serverData.map(item => { switch (item.img.length) { case 1: return { ...item, height: 100, type: types.ONE_IMAGE }; case 2: return { ...item, height: 100, type: types.TWO_IMAGE }; default: return null; } });

For uncertain heights, three approaches were explored:

The final solution combines JS height estimation (≈90% accuracy) with forceNonDeterministicRendering=true to automatically animate position corrections for the remaining ~10% error.

Tab‑page infinite list handling : To avoid memory explosion when multiple tabs each contain an infinite list, the strategy is to keep only the currently visible tab and recently viewed tabs in memory, destroying those far from the viewport.

Gesture overlap resolution : RN’s original gesture system processes gestures on both native and JS threads, causing conflicts when a tab view (horizontal swipe) overlaps with a horizontally scrollable list inside a tab. Upgrading to React Native Gesture Handler (used in TabView 2.0) allows declarative gesture handling where the tab view can waitFor the inner content’s gesture, ensuring the content receives the gesture.

Conclusion : By selecting RecyclerListView, applying deterministic or non‑deterministic rendering with JS height estimation, recycling off‑screen tabs, and using the new gesture handler, the infinite‑list experience in RN‑based classification apps becomes smooth, memory‑efficient, and responsive.