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

Both are recommended virtualizers that render only visible items, reducing memory and mount time compared to ScrollView. LegendList additionally supports getItemType for heterogeneous lists with separate recycling pools per item type.

Yes, the rules cover Expo-specific patterns like expo-image, expo-font config plugins, and expo-router native navigators. Several rules also address React Compiler compatibility, such as using .get()/.set() on Reanimated shared values.

Avoid animating width, height, margin, or padding since they trigger layout recalculation every frame. Animate transform and opacity instead, which run on the GPU, and use GestureDetector with shared values for press-state animations on the UI thread.