Code Review Standards for RN

## Mobile review checklist
 
### Evidence (UI / gesture / a11y changes)
- [ ] iOS screenshot or recording attached
- [ ] Android screenshot or recording attached
- [ ] VoiceOver OR TalkBack spot-check noted (which flow)
 
### Performance
- [ ] Lists use FlashList/FlatList - not ScrollView for long feeds
- [ ] `renderItem` / `keyExtractor` stable (useCallback or module scope)
- [ ] No new heavy imports in `app/_layout.tsx` without lazy route
 
### Accessibility
- [ ] `accessibilityLabel` on icon-only controls
- [ ] `accessibilityRole` matches behavior (button vs link)
- [ ] Dynamic type: layout survives large font (or `maxFontSizeMultiplier` justified)
 
### Native boundary
- [ ] New deps added via `npx expo install <pkg>`
- [ ] `app.config.ts` / config plugin changes called out in description
- [ ] Classified: JS-only (OTA OK) vs requires `eas build`
- [ ] `npx expo-doctor` green (CI link)
 
### Architecture
- [ ] Route file thin - logic in `features/`
- [ ] No deep imports across feature boundaries
- [ ] Server state in TanStack Query - not duplicated in Zustand
 
### Release (if touching eas.json, runtimeVersion, channels)
- [ ] Rollback steps in ticket / PR comment
- [ ] runtimeVersion bump justified

// ❌ Reviewer blocks - ScrollView map of 200 orders
export function OrdersScreenBad() {
  const { data } = useOrders();
  return (
    <ScrollView>
      {data?.map((o) => <OrderRow key={o.id} order={o} />)}
    </ScrollView>
  );
}

// ✅ Approve path - virtualized list + stable renderItem
import { FlashList } from "@shopify/flash-list";
import { useCallback } from "react";
 
export function OrdersScreen() {
  const { data } = useOrders();
  const renderItem = useCallback(
    ({ item }: { item: Order }) => <OrderRow order={item} />,
    []
  );
 
  return (
    <FlashList
      data={data ?? []}
      renderItem={renderItem}
      keyExtractor={(o) => o.id}
      estimatedItemSize={72}
    />
  );
}

// ❌ Block - icon-only, no name, wrong role
<Pressable onPress={onSave}>
  <Icon name="check" />
</Pressable>

// ✅ Approve - name, role, state
<Pressable
  onPress={onSave}
  accessibilityRole="button"
  accessibilityLabel="Save changes"
  accessibilityState={{ disabled: !dirty, busy: saving }}
>
  <Icon name="check" accessible={false} />
</Pressable>

// package.json - reviewer verifies expo install, not raw npm major
+ "expo-camera": "~17.0.10"

// app.config.ts - plugin stanza present
plugins: [
  [
    "expo-camera",
    {
      cameraPermission: "Allow $(PRODUCT_NAME) to scan warehouse barcodes.",
    },
  ],
],

// ❌ Block - fetch + branching in app/ route
// app/(tabs)/orders.tsx
export default function OrdersRoute() {
  const [filter, setFilter] = useState("open");
  const { data } = useQuery({ queryKey: ["orders", filter], queryFn: () => fetchOrders(filter) });
  return <FlatList data={data} ... />;
}

// ✅ Approve - thin route
// app/(tabs)/orders.tsx
export { OrdersScreen as default } from "@/features/orders/screens/OrdersScreen";