Skip to content

Janky animations, slow startup and memory crashes in React Native apps

React Native performance and 60fps optimization

Profile where a React Native app drops frames or starts slowly, then fix it: the New Architecture, UI-thread animations, faster lists and Hermes bytecode.

Talk to an engineer
All playbooks

Symptoms

Signs your platform has this problem

If several of these sound familiar, the plan below is where we would start.

01

Janky scrolling and dropped frames

Frame rates falling well below 60fps while scrolling lists or running gestures.

02

Slow app startup

Large JavaScript bundles delaying the first screen.

03

Out-of-memory crashes

Unbounded image caches and leaked listeners crashing older devices.

Remediation plan

How we fix it, step by step

Each phase ends with a measurement, so you can see what changed before the next one starts.

01

Profiling

Profiling JS thread frame times and heavy re-renders with React Native DevTools and the Hermes profiler.

02

New Architecture

Enabling Fabric and TurboModules, so JavaScript calls native code directly through JSI instead of the old bridge.

03

Animations on the UI thread

Running gesture-driven animations on the native UI thread with Reanimated.

04

Hermes bytecode and FlashList

Replacing slow FlatLists with FlashList and shipping precompiled Hermes bytecode.

Technical checklist

Remediation checklist

What we check before a change goes to production:

  • Enable the New Architecture (Fabric and TurboModules)
  • Replace FlatList with FlashList for long lists
  • Run gesture-driven animations on the UI thread with Reanimated
  • Ship Hermes bytecode and lazy-load heavy screens
Talk to an engineer

What we measure

We take a baseline first and report the same measurements after each change, from your own monitoring — evidence, not promised results.

Frame rate
Dropped frames on key screens, on a mid-range Android device
Startup time
Cold start to the first interactive screen
Crash rate
Out-of-memory crashes per thousand sessions

Related service

Custom software

Custom software for Indian SMEs and startups, built around your workflow with an agreed scope, review milestones, clear ownership and documented handover.

Explore Custom software

Questions

Questions about this remediation

It replaces the old asynchronous JSON bridge with the JavaScript Interface (JSI), so JavaScript can call native C++ and platform APIs directly.

Yes. Swapping in FlashList, moving animations to Reanimated and enabling Hermes bytecode all work inside an existing codebase. The New Architecture upgrade depends on your native dependencies, which we check first.

Related playbooks

Other engineering problem playbooks

View all 35 playbooks

Headless Shopify storefront performance

Rebuild the storefront in Next.js on Shopify's Storefront API: server-rendered product pages, CDN caching and fast search — with Shopify's own checkout.

GitHub Actions CI/CD pipeline speed optimization

Make CI fast enough that nobody waits on it: profile the slow steps, cache what can be cached, split tests across runners and run only what changed.

Kubernetes autoscaling and compute cost fix with Karpenter

Fix slow pod scheduling and idle nodes: set accurate resource requests, replace Cluster Autoscaler with Karpenter, and run interruptible workloads on spot.

Near-zero-downtime database migration playbook

Move a production database without a long maintenance window: stream changes with CDC, verify parity with shadow reads, and cut over in a short, rehearsed window with reverse replication ready for rollback.

Want an engineer to look at this with you?

Send us the symptoms and any metrics you have. We'll reply within one business day, set up a call and agree what to measure before anything changes.

Talk to an engineer