vercel-react-native-skills

Use a virtualizer like LegendList or FlashList instead of ScrollView, pass stable object references as data, pass primitives to memoized list items, and hoist callbacks to the list root. Avoid inline objects in renderItem since new references break memoization.

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.

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

Yes, React Compiler handles memoization automatically, making manual memo() and useCallback() less critical. However, stable object references still matter for virtualized lists, and Reanimated shared values require .get() and .set() instead of .value for compiler compatibility.

Animate only transform and opacity properties, which run on the GPU, instead of width, height, or margin which trigger layout recalculation every frame. Use Reanimated shared values and GestureDetector so animations run on the UI thread.

Autolinking only scans the native app's node_modules, so native dependencies must be listed in the app package's package.json even if a shared package also uses them. Keep a single exact version across all packages to avoid duplicate bundles.