vercel-react-native-skills

Use a virtualized list like LegendList or FlashList instead of ScrollView, pass primitive props to memoized list items, keep stable object references in your data array, and hoist callbacks to the list root. Avoid inline objects in renderItem since they break memoization.

Animate only transform and opacity properties, which run on the GPU without triggering layout recalculation. Avoid animating width, height, margin, or padding. Use useDerivedValue for computed values and GestureDetector for press-state animations on the UI thread.

Use Pressable instead of TouchableOpacity or other Touchable components. For animated press feedback, combine GestureDetector with Gesture.Tap() and shared values so animations run as worklets on the UI thread without a JS round-trip.

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

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

Install packages containing native code directly in the app directory's package.json, since autolinking only scans the app's node_modules. Also enforce single exact dependency versions across all packages using pnpm overrides or a tool like syncpack.