rn-best-practices

React Native Best Practices — Procedural Adapter

This installed Codex skill routes through the packaged 118-rule rules.index.json plus package-local rn-dev-agent reference files. Do not assume an rn-dev-agent source checkout or a third_party/ tree. Query only the index entries relevant to the code being written/reviewed; title, severity, triggers, and applicable_when are the installed metadata contract.

Index

The routing surface is codex-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