vercel-react-native-skills

Use a virtualized list like LegendList or FlashList instead of ScrollView, pass stable object references as data, and give list items primitive props so memo() shallow comparison works. Avoid inline objects and callbacks inside renderItem since new references break memoization.

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

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 a ternary with null, explicit boolean coercion, or an early return instead.

Animate only transform and opacity properties with Reanimated, since these run on the GPU without triggering layout recalculation. Animating width, height, margin, or padding forces layout on every frame and causes dropped frames.

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

Always prefer native stack and native tab navigators, such as @react-navigation/native-stack or expo-router defaults, over JS-based ones. Native navigators run transitions on the UI thread and provide platform behaviors like iOS large titles and proper safe area handling.