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 in renderItem and keep list items free of queries and heavy hooks.

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

Use useDerivedValue when deriving one shared value from another, since it is declarative and tracks dependencies automatically. Reserve useAnimatedReaction for side effects that produce no value, such as triggering haptics or calling runOnJS.

Yes, several rules address React Compiler compatibility specifically. Destructure functions from hooks early in render, and use .get() and .set() instead of .value on Reanimated shared values so the compiler can track them correctly.

Native navigators like @react-navigation/native-stack and react-native-bottom-tabs run transitions on the UI thread using platform APIs. They provide better performance, iOS large titles, proper safe area handling, and automatic accessibility support compared to JS-based navigators.

Install packages containing native code directly in the app directory, because autolinking only scans the app's node_modules. Also pin single exact dependency versions across all packages using pnpm overrides or a tool like syncpack to avoid duplicate bundles.