The Problem
PropWise's property listing screen was rendering at 38fps during scroll. On flagship devices it was tolerable. On mid-range Android — the majority of their users — it was visibly janky. Here's how we fixed it systematically.
Step 1: Measure First
Install Flipper and enable the Performance Monitor. Never optimize blindly. We found two culprits: excessive re-renders on the list item component and a heavy borderRadius + shadow combination triggering GPU overdraw.
Step 2: Virtualize Properly with FlashList
Replace FlatList with Shopify's FlashList. It's a drop-in replacement that uses a recycling mechanism similar to native RecyclerView. Our scroll performance jumped from 38fps to 52fps from this single change.
Step 3: Memoize List Items
Every list item was re-rendering on any parent state change. React.memo with a proper comparison function stopped unnecessary renders.
Step 4: Move Animations to the UI Thread
All animations must use useNativeDriver: true or Reanimated 2's worklets. JavaScript-thread animations are always frame-drop candidates.
Step 5: Image Optimization
We replaced the default Image component with expo-image, which provides blurhash placeholders and better memory management. Memory pressure from images was causing GC pauses.
Result: 38fps → 60fps
After these 5 targeted changes, the app hit a consistent 60fps on mid-range Android devices. Measure, target, fix — never optimize everything at once.
