vercel-react-native-skills

Use a virtualized list like LegendList or FlashList, pass stable object references as data, pass primitives to memoized item components, and hoist callbacks to the list root. Avoid mapping or filtering data before passing it to the list, since new references break virtualization.

Use a list virtualizer such as LegendList or FlashList instead of ScrollView with mapped children. Virtualizers render only visible items, reducing memory usage and mount time even for short lists.

The && operator crashes when the left value is an empty string or 0, because these falsy values are still JSX-renderable and React Native attempts to render them outside a Text component. Use ternaries, explicit boolean coercion, or early returns instead.

No, animating width, height, margin, or padding triggers layout recalculation on every frame. Animate transform properties like scale and translate plus opacity instead, since these run on the GPU without triggering layout.

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

Use native navigators by default for stack and tab navigation, such as @react-navigation/native-stack or expo-router's native tabs. They run transitions on the UI thread and provide platform behaviors like iOS large titles and proper safe area handling.