Merge pull request #13 from maximcoding/fix/react-navigation-static-config-v1.0.1

Fix/react navigation static config v1.0.1

Author: maximcoding

.claude/skills/vercel-react-native-skills/AGENTS.md

@@ -10,7 +10,7 @@ optimized for agents and LLMs.
   - `_template.md` - Template for creating new rules
   - `area-description.md` - Individual rule files
 - `metadata.json` - Document metadata (version, organization, abstract)
-- **`AGENTS.md`** - Compiled output (generated)
+- **`AGENTS.md`** - Short pointer + stack summary for this starter (not a compiled rollup)
 
 ## Rules
 
@@ -21,8 +21,7 @@ optimized for agents and LLMs.
 
 ### List Performance (HIGH)
 
-- `list-performance-virtualize.md` - Use virtualized lists (LegendList,
-  FlashList)
+- `list-performance-virtualize.md` - Use virtualized lists (FlashList primary)
 - `list-performance-function-references.md` - Keep stable object references
 - `list-performance-callbacks.md` - Hoist callbacks to list root
 - `list-performance-inline-objects.md` - Avoid inline objects in renderItem
@@ -44,7 +43,7 @@ optimized for agents and LLMs.
 
 ### Navigation (HIGH)
 
-- `navigation-native-navigators.md` - Use native stack and native tabs
+- `navigation-native-navigators.md` - Native stack + bottom tabs (this template)
 
 ### React State (MEDIUM)
 

.claude/skills/vercel-react-native-skills/README.md

@@ -28,7 +28,7 @@ Reference these guidelines when:
 - Configuring native modules or fonts
 - Structuring projects with native dependencies
 
-> **Project constraints:** Bare workflow only, no Nativewind, no Tailwind. Styling uses `StyleSheet.create()` with theme tokens only. Font setup uses `react-native-asset`. Use React Native's built-in `Image` or `react-native-fast-image`.
+> **Project constraints:** Bare workflow only, no Nativewind, no Tailwind. Styling uses `StyleSheet.create()` with theme tokens only. Font setup uses `react-native-asset`. Use React Native's built-in `Image` or `react-native-fast-image`. **Lists:** prefer `@shopify/flash-list` (examples in `rules/` use FlashList). **Monorepo** rules apply only in a multi-package repo; this starter is a **single app**—skip them unless you adopt a monorepo layout.
 
 ## Rule Categories by Priority
 
@@ -64,7 +64,7 @@ Reference these guidelines when:
 
 ### 3. Navigation (HIGH)
 
-- `navigation-native-navigators` - Use native stack and native tabs over JS navigators
+- `navigation-native-navigators` - Use `@react-navigation/native-stack` for stacks; this template uses `@react-navigation/bottom-tabs` with a custom tab bar (optional: Callstack native bottom tabs if you add the dependency)
 
 ### 4. UI Patterns (HIGH)
 
@@ -93,8 +93,8 @@ Reference these guidelines when:
 
 ### 7. Monorepo (MEDIUM)
 
-- `monorepo-native-deps-in-app` - Keep native dependencies in app package
-- `monorepo-single-dependency-versions` - Use single versions across packages
+- `monorepo-native-deps-in-app` - Keep native dependencies in app package (**ignore** in single-package apps)
+- `monorepo-single-dependency-versions` - Single versions across packages (**ignore** unless monorepo)
 
 ### 8. Configuration (LOW)
 
@@ -118,6 +118,6 @@ Each rule file contains:
 - Correct code example with explanation
 - Additional context and references
 
-## Full Compiled Document
+## Pointer doc
 
-For the complete guide with all rules expanded: `AGENTS.md`
+[`AGENTS.md`](AGENTS.md) in this folder summarizes the stack and links to repository-wide [`AGENTS.md`](../../../AGENTS.md). **All expanded examples** live under `rules/`—there is no monolithic compiled rollup (avoids drift from this starter).

.claude/skills/vercel-react-native-skills/SKILL.md

@@ -14,7 +14,7 @@ runtime crashes or broken UI.
 ## 2. List Performance (list-performance)
 
 **Impact:** HIGH  
-**Description:** Optimizing virtualized lists (FlatList, LegendList, FlashList)
+**Description:** Optimizing virtualized lists (FlatList, **FlashList** in this starter)
 for smooth scrolling and fast updates.
 
 ## 3. Animation (animation)

.claude/skills/vercel-react-native-skills/rules/_sections.md

@@ -10,7 +10,7 @@ tags: fonts, performance, config-plugin
 For managed workflow: use the font config plugin to embed fonts at build time instead of
 `useFonts` or `Font.loadAsync`. Embedded fonts are more efficient.
 
-**For bare React Native:** use `react-native-asset` via `npm run link` to link font files. See AGENTS.md.
+**For bare React Native:** use `react-native-asset` via `npm run link` to link font files. See repository root **`AGENTS.md`** (project-wide rules).
 
 **Incorrect (async font loading):**
 

.claude/skills/vercel-react-native-skills/rules/fonts-config-plugin.md

@@ -2,43 +2,65 @@
 title: Hoist callbacks to the root of lists
 impact: MEDIUM
 impactDescription: Fewer re-renders and faster lists
-tags: tag1, tag2
+tags: lists, performance, flashlist, callbacks
 ---
 
 ## List performance callbacks
 
-**Impact: HIGH (Fewer re-renders and faster lists)**
+When passing behavior into list rows, **avoid creating new function instances inside `renderItem` on every parent render**. Hoist stable handlers to the list parent and pass **ids or item references** into memoized row components.
 
-When passing callback functions to list items, create a single instance of the
-callback at the root of the list. Items should then call it with a unique
-identifier.
+**Incorrect (creates a new callback per row, per parent render):**
 
-**Incorrect (creates a new callback on each render):**
+```tsx
+import { FlashList } from '@shopify/flash-list'
 
-```typescript
 return (
-  <LegendList
+  <FlashList
+    data={items}
+    estimatedItemSize={72}
     renderItem={({ item }) => {
-      // bad: creates a new callback on each render
       const onPress = () => handlePress(item.id)
-      return <Item key={item.id} item={item} onPress={onPress} />
+      return <Row item={item} onPress={onPress} />
     }}
   />
 )
 ```
 
-**Correct (a single function instance passed to each item):**
+**Correct (stable `renderItem`; row closes over `item` only inside memoized child):**
 
-```typescript
-const onPress = useCallback(() => handlePress(item.id), [handlePress, item.id])
+```tsx
+import { FlashList } from '@shopify/flash-list'
+import { memo, useCallback } from 'react'
+import { Pressable } from 'react-native'
+
+const handlePress = useCallback((id: string) => {
+  // ...
+}, [])
+
+const renderItem = useCallback(
+  ({ item }: { item: Item }) => <Row item={item} onPressItem={handlePress} />,
+  [handlePress],
+)
 
 return (
-  <LegendList
-    renderItem={({ item }) => (
-      <Item key={item.id} item={item} onPress={onPress} />
-    )}
+  <FlashList
+    data={items}
+    estimatedItemSize={72}
+    keyExtractor={(item) => item.id}
+    renderItem={renderItem}
   />
 )
+
+const Row = memo(function Row({
+  item,
+  onPressItem,
+}: {
+  item: Item
+  onPressItem: (id: string) => void
+}) {
+  const onPress = useCallback(() => onPressItem(item.id), [item.id, onPressItem])
+  return <Pressable onPress={onPress}>{/* ... */}</Pressable>
+})
 ```
 
-Reference: [Link to documentation or resource](https://example.com)
+Reference: [FlashList performance](https://shopify.github.io/flash-list/docs/fundamentals/performant-components)

.claude/skills/vercel-react-native-skills/rules/list-performance-callbacks.md

@@ -2,21 +2,20 @@
 title: Optimize List Performance with Stable Object References
 impact: CRITICAL
 impactDescription: virtualization relies on reference stability
-tags: lists, performance, flatlist, virtualization
+tags: lists, performance, flatlist, flashlist, virtualization
 ---
 
 ## Optimize List Performance with Stable Object References
 
-Don't map or filter data before passing to virtualized lists. Virtualization
-relies on object reference stability to know what changed—new references cause
-full re-renders of all visible items. Attempt to prevent frequent renders at the
-list-parent level.
+Don't map or filter data before passing to virtualized lists in ways that **replace every row object on each keystroke**. Virtualization works best when **element identities** in `data` are stable. Prefer moving dynamic text (e.g. search keyword) into **selectors inside row components** or stable derived stores.
 
 Where needed, use context selectors within list items.
 
 **Incorrect (creates new object references on every keystroke):**
 
 ```tsx
+import { FlashList } from '@shopify/flash-list'
+
 function DomainSearch() {
   const { keyword, setKeyword } = useKeywordZustandState()
   const { data: tlds } = useTlds()
@@ -31,8 +30,10 @@ function DomainSearch() {
   return (
     <>
       <TextInput value={keyword} onChangeText={setKeyword} />
-      <LegendList
+      <FlashList
         data={domains}
+        estimatedItemSize={56}
+        keyExtractor={(item) => item.tld}
         renderItem={({ item }) => <DomainItem item={item} keyword={keyword} />}
       />
     </>
@@ -43,23 +44,24 @@ function DomainSearch() {
 **Correct (stable references, transform inside items):**
 
 ```tsx
-const renderItem = ({ item }) => <DomainItem tld={item} />
+import { FlashList } from '@shopify/flash-list'
+
+const renderItem = ({ item }: { item: Tld }) => <DomainItem tld={item} />
 
 function DomainSearch() {
   const { data: tlds } = useTlds()
 
   return (
-    <LegendList
-      // good: as long as the data is stable, LegendList will not re-render the entire list
+    <FlashList
       data={tlds}
+      estimatedItemSize={56}
+      keyExtractor={(item) => item.name}
       renderItem={renderItem}
     />
   )
 }
 
 function DomainItem({ tld }: { tld: Tld }) {
-  // good: transform within items, and don't pass the dynamic data as a prop
-  // good: use a selector function from zustand to receive a stable string back
   const domain = useKeywordZustandState((s) => s.keyword + '.' + tld.name)
   return <Text>{domain}</Text>
 }
@@ -71,11 +73,16 @@ Creating a new array instance can be okay, as long as its inner object
 references are stable. For instance, if you sort a list of objects:
 
 ```tsx
-// good: creates a new array instance without mutating the inner objects
-// good: parent array reference is unaffected by typing and updating "keyword"
 const sortedTlds = tlds.toSorted((a, b) => a.name.localeCompare(b.name))
 
-return <LegendList data={sortedTlds} renderItem={renderItem} />
+return (
+  <FlashList
+    data={sortedTlds}
+    estimatedItemSize={56}
+    keyExtractor={(item) => item.name}
+    renderItem={renderItem}
+  />
+)
 ```
 
 Even though this creates a new array instance `sortedTlds`, the inner object
@@ -84,6 +91,8 @@ references are stable.
 **With zustand for dynamic data (avoids parent re-renders):**
 
 ```tsx
+import { FlashList } from '@shopify/flash-list'
+
 const useSearchStore = create<{ keyword: string }>(() => ({ keyword: '' }))
 
 function DomainSearch() {
@@ -92,17 +101,17 @@ function DomainSearch() {
   return (
     <>
       <SearchInput />
-      <LegendList
+      <FlashList
         data={tlds}
-        // if you aren't using React Compiler, wrap renderItem with useCallback
+        estimatedItemSize={56}
+        keyExtractor={(item) => item.name}
         renderItem={({ item }) => <DomainItem tld={item} />}
       />
     </>
   )
 }
 
 function DomainItem({ tld }: { tld: Tld }) {
-  // Select only what you need—component only re-renders when keyword changes
   const keyword = useSearchStore((s) => s.keyword)
   const domain = `${keyword}.${tld.name}`
   return <Text>{domain}</Text>

.claude/skills/vercel-react-native-skills/rules/list-performance-function-references.md

@@ -2,7 +2,7 @@
 title: Avoid Inline Objects in renderItem
 impact: HIGH
 impactDescription: prevents unnecessary re-renders of memoized list items
-tags: lists, performance, flatlist, virtualization, memo
+tags: lists, performance, flashlist, virtualization, memo
 ---
 
 ## Avoid Inline Objects in renderItem
@@ -14,10 +14,14 @@ values directly from `item` instead.
 **Incorrect (inline object breaks memoization):**
 
 ```tsx
+import { FlashList } from '@shopify/flash-list'
+
 function UserList({ users }: { users: User[] }) {
   return (
-    <LegendList
+    <FlashList
       data={users}
+      estimatedItemSize={72}
+      keyExtractor={(item) => item.id}
       renderItem={({ item }) => (
         <UserRow
           // Bad: new object on every render
@@ -44,10 +48,14 @@ renderItem={({ item }) => (
 **Correct (pass item directly or primitives):**
 
 ```tsx
+import { FlashList } from '@shopify/flash-list'
+
 function UserList({ users }: { users: User[] }) {
   return (
-    <LegendList
+    <FlashList
       data={users}
+      estimatedItemSize={72}
+      keyExtractor={(item) => item.id}
       renderItem={({ item }) => (
         // Good: pass the item directly
         <UserRow user={item} />

.claude/skills/vercel-react-native-skills/rules/list-performance-inline-objects.md

@@ -49,13 +49,17 @@ function ProductRow({ name, price, imageUrl }: Props) {
 **Move data fetching to parent:**
 
 ```tsx
+import { FlashList } from '@shopify/flash-list'
+
 // Parent fetches all data once
 function ProductList() {
   const { data: products } = useQuery(['products'], fetchProducts)
 
   return (
-    <LegendList
+    <FlashList
       data={products}
+      estimatedItemSize={88}
+      keyExtractor={(item) => item.id}
       renderItem={({ item }) => (
         <ProductRow name={item.name} price={item.price} imageUrl={item.image} />
       )}