Scrolling drops frames
Inspect virtualization, item rendering, callback stability, and images before rewriting the whole screen.
Vercel React Native Skills by Vercel Labs
Use Vercel React Native Skills by Vercel Labs to build and review React Native and Expo interfaces. Explore guidance for long lists, animations, navigation, images, and native dependencies, then apply the relevant patterns to a screen and verify its behavior on your target devices.
Install and get started
Choose your agent to see how to get started. In Floatboat, copy a request that asks the agent to read the original instructions. Other options show the Skill installation command or the publisher’s native setup steps.
Choose an agent
Start in Floatboat
Copy the request into a Floatboat conversation
Read the original Vercel React Native Skills instructions at https://github.com/vercel-labs/agent-skills/blob/main/skills/react-native-skills/SKILL.md. Explain its purpose, required tools, and installation options, then help me use it.Let the agent read the original instructions and check how to use them in your environment.
Download Floatboat ↗Try this request
Review this Expo feed screen. Scrolling stutters on mid-range Android devices; identify the likely list and image bottlenecks.
About Vercel React Native Skills
Vercel React Native Skills is an Agent Skill for React Native and Expo development. Its mobile-specific rules address list performance, animation, navigation, interface patterns, state, rendering, monorepos, and configuration. This gives an agent a reference for issues that depend on device rendering or native platform behavior, such as scrolling, gestures, safe areas, and media. Start with a screen and a reproducible symptom so the agent can select the relevant rules and propose a focused implementation. Installing the Skill provides instructions rather than Expo packages or native dependencies. The resulting code still needs to be tested on the iOS and Android environments your application supports.
Use Cases for React Native Skills
Explore mobile tasks where device behavior shapes the implementation. Review long scrolling lists, gesture-driven animations, or platform-specific screen details, using React Native and Expo guidance to identify changes that can be checked on the devices your users actually use.
Gestures feel delayed
Review whether an animation uses compositor-friendly properties and appropriate gesture primitives.
A screen behaves differently on iOS and Android
Check safe areas, native navigation, images, fonts, and platform APIs instead of assuming web layout behavior.
How to Review React Native Screens
Describe the screen, target platform, and gesture or interaction you want to improve. Ask the agent to apply the relevant mobile rules, implement a focused change, and compare the same flow on representative devices, including any platform-specific behavior.
- 01
Reproduce the screen behavior
Identify the screen, platform, and interaction that shows the issue. Record your React Native or Expo version and test device.
- 02
Apply the mobile rules
Ask the agent to inspect the matching list, animation, navigation, or media code. Keep the implementation focused on the reproduced issue.
- 03
Verify on target devices
Repeat the flow on representative iOS and Android devices. Compare responsiveness and confirm gestures, layout, and content remain correct.
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
Vercel React Native Skills FAQ
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.
Why can a list still feel slow after a code review?
Scrolling depends on actual item complexity, image work, and device behavior. Profile a representative long list on target devices; passing a source-code review alone cannot establish smooth interaction.
Should Android and iOS share every interface decision?
Share the task and component structure where appropriate, but verify gestures, safe areas, keyboard behavior, and images on both platforms. Native behavior may need platform-specific handling.
What project details help the agent choose mobile rules?
Provide React Native and Expo versions, the affected screen, target platforms, and reproduction steps. Note relevant libraries and device measurements, especially for scrolling or animation problems.