vercel-react-native-skills

Use a virtualized list like LegendList or FlashList instead of ScrollView, pass primitive props to memoized item components, 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, while FlashList is a widely adopted alternative from Shopify.

Yes, but you must use .get() and .set() methods instead of reading or writing .value directly. The React Compiler cannot track property access on shared values, so explicit method calls ensure correct behavior.

Animating width, height, margin, or padding triggers layout recalculation on every frame, causing jank. Transform properties like scale and translate, plus opacity, run on the GPU without triggering layout, producing smooth animations.

Always prefer native navigators such as @react-navigation/native-stack or expo-router's default stack over @react-navigation/stack. Native navigators use platform APIs for UI-thread transitions, large titles, and proper safe area handling.