rn-best-practices

React Native Best Practices — Procedural Adapter

This skill is the routing surface between Claude and the vendored vercel-labs/agent-skills content under third_party/vercel-labs/agent-skills/. Don't read the 118 rule files upfront. Use the procedures below to look up only the rules that apply to the code you're about to write or review.

Index

The routing surface is skills/rn-best-practices/rules.index.json. Each entry:

{ "id": "react-native-skills/list-performance-virtualize",
  "title": "Use a list virtualizer for any list",
  "category": "react-native-skills",
  "platform": "RN",
  "severity": "CRITICAL" | "HIGH" | "MEDIUM" | "LOW",
  "triggers": ["FlatList", "FlashList", "ScrollView"],
  "upstream_path": "third_party/vercel-labs/agent-skills/skills/.../list-performance-virtualize.md",
  "checkable": true | false,
  "checkerRule": "no-touchable-new-code" | null
}

Query with jq or read directly. Filter by platform: "RN" for React Native work; platform: "both" for composition rules; platform: "web" only for web React when applicable.

Always check (inline, regardless of category)

These cause runtime crashes. Check on every review pass. Do not delegate.

Falsy-&& rendering crash

{x && <Comp />} where x could be 0, "", or NaN renders the falsy value as a string in RN. Bad: {count && <Badge />} (renders "0"). Good: {count > 0 && <Badge />} or ternary. Full rule: third_party/vercel-labs/agent-skills/skills/react-native-skills/rules/rendering-no-falsy-and.md

Bare strings outside <Text>

A string as a direct child of <View> is a runtime crash on RN. Bad: <View>Hello</View>. Good: <View><Text>Hello</Text></View>. Full rule: .../rules/rendering-text-in-text-component.md

Components defined inside components

Defining const Child = () => … inside function Parent() creates a new component type every render. RN remounts it, destroying state, native views, animations, scroll position, focus. Bad: inline function components inside parents. Good: define outside, pass data via props. Full rule (web/RN): .../skills/react-best-practices/rules/rerender-no-inline-components.md