Lists
Scrolling drops frames
Inspect virtualization, item rendering, callback stability, and images before rewriting the whole screen.
01 / The skill · React Native · Mobile performance
React Native Skills: review the mobile bottlenecks
A React Native and Expo guidance Skill with priority on large lists, animation, navigation, media, and platform-specific choices.
Publisher, source, and installation
Published by Vercel Labs · Type: Mobile implementation and review Skill
Independent guide. Vercel Labs has not endorsed Floatboat.
Upstream installation
npx skills add vercel-labs/agent-skills --skill vercel-react-native-skillsInstall through the upstream Skills CLI; this page does not install a mobile runtime.
A realistic request
The source is a prioritized collection of mobile rules. It is particularly helpful where web-oriented React advice misses native list virtualization, gesture performance, safe areas, or image handling.
Ask the agent
“Review this Expo feed screen. Scrolling stutters on mid-range Android devices; identify the likely list and image bottlenecks.”
A useful result
A useful answer identifies item-rendering and image paths, proposes scoped changes, and asks for device measurements before declaring a fix.
When the React Native Skill helps
Use mobile-specific rules when a screen's behavior depends on device rendering or native APIs.
Motion
Gestures feel delayed
Review whether an animation uses compositor-friendly properties and appropriate gesture primitives.
Platform
A screen behaves differently on iOS and Android
Check safe areas, native navigation, images, fonts, and platform APIs instead of assuming web layout behavior.
What it does not replace
- A browser-only React application; use React web guidance instead.
- Proof that a screen performs well on every device; device testing is still required.
How to investigate a mobile screen
Move from a reproduced device symptom to a relevant rule and a bounded change.
- 01
Reproduce on target hardware
Record the screen, platform, and gesture that shows the problem.
- 02
Read the matching mobile rules
Prioritize list and animation categories when frame drops are the symptom.
- 03
Retest both platforms
Check behavior and performance on the intended iOS and Android device range.
02 / Practical guide
Mobile rules should follow the bottleneck
The source ranks list work above cosmetic tweaks. Check the device and interaction before choosing a pattern.
How is this different from React Best Practices?
This Skill addresses native and Expo decisions: virtualized lists, gestures, safe areas, native navigation, image handling, and native module structure. The web-focused React Skill emphasizes data waterfalls and browser bundles.
Does it include Expo-specific advice?
Yes. The source references Expo image handling and mobile configuration alongside general React Native patterns. Verify package and SDK versions before adopting a recommendation.
What you can take away
- A mobile-specific bottleneck shortlist
- Scoped component or configuration changes
- A device-validation checklist
What to check first
- Confirm Expo and library versions.
- Test the target device class, not only a simulator.
- Check accessibility and reduced-motion behavior.
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
Frequently Asked Questions
Is this for React Native or web React?
It targets React Native and Expo. For browser rendering, the separate Vercel React Best Practices Skill is a closer match.
Will installing the Skill add Expo packages?
No. It installs agent instructions. Code or dependency changes require a separate, explicit implementation task.
Which issue should be checked first?
The source puts list performance first. Start there when the symptom is scrolling jank, but follow the actual screen and device evidence.
Does it replace device testing?
No. Rules help select changes; real iOS and Android testing determines whether the change improves the intended experience.
03 / Put it to work · Review mobile work
Keep device constraints beside your code review
Use Floatboat to work through the screen, device symptoms, and proposed changes; validate the result on real target devices.