vercel-react-native-skills

Use a virtualized list like LegendList or FlashList instead of ScrollView, pass primitives to memoized list items, avoid inline objects in renderItem, and hoist callbacks to the list root. These rules prevent unnecessary re-renders and reduce memory usage during scrolling.

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 ternary expressions, explicit boolean coercion, or early returns instead.

Both are recommended virtualizers that render only visible items instead of mounting all children like ScrollView. LegendList additionally supports getItemType for heterogeneous lists with separate recycling pools and per-type size estimation.

Yes, several rules include React Compiler notes. The compiler handles memoization automatically, but you should still destructure functions early in render and use .get()/.set() instead of .value on Reanimated shared values for compatibility.

Animating width, height, margin, or padding triggers layout recalculation on every frame, causing jank. Transform and opacity run on the GPU without triggering layout, producing smooth animations with Reanimated.

Install packages with native code directly in the app directory, because autolinking only scans the app's node_modules. Also enforce single exact dependency versions across all packages using overrides or syncpack to avoid duplicate bundles.