vercel-react-native-skills

Use a virtualized list like LegendList or FlashList instead of ScrollView, pass primitive props to memoized list items, hoist callbacks to the list root, and avoid creating inline objects in renderItem. Keep list items lightweight with no queries or expensive computations.

Using {value && <Component />} crashes when value is an empty string or 0, because React Native tries to render the falsy value as text outside a Text component. Use ternaries, explicit boolean coercion, or early returns instead.

Both are virtualized lists that render only visible items, reducing memory and mount time compared to ScrollView. LegendList supports getItemType for heterogeneous lists with separate recycling pools; either is recommended over ScrollView with mapped children.

Animate only transform and opacity properties with Reanimated, since these run on the GPU without triggering layout recalculation. Avoid animating width, height, margin, or padding, which force layout on every frame.

Yes. With React Compiler enabled, use .get() and .set() methods instead of reading or writing .value directly on shared values, because the compiler cannot track property access. Destructure functions from hooks early for stable references.

Install packages with native code directly in the app directory, since autolinking only scans the app's node_modules. Use exact single dependency versions across all packages, enforced with pnpm overrides or a tool like syncpack.