React Native Roadmap 2026-W32

Implement the following React Native chunk for your mobile app:

Goal: Add a GPU-powered interactive drawing canvas to the app using react-native-canvas-kit (built on @shopify/react-native-skia).

Files to create/modify:

• src/screens/DrawingScreen.tsx — main canvas screen
• src/components/canvas/DrawingToolbar.tsx — tool picker (brush, eraser, shapes)
• package.json — add react-native-canvas-kit and @shopify/react-native-skia

Step-by-step implementation:

1. Run yarn add react-native-canvas-kit @shopify/react-native-skia then npx pod-install for iOS.
2. In DrawingScreen.tsx, render a <Stage width={width} height={height}> wrapping a background <Layer> for static shapes and a <BrushLayer tool="pencil"> for freehand drawing.
3. Add a second <BrushLayer tool="eraser"> toggled via toolbar state; the eraser uses a destination-out blend that removes pixels only from its own layer.
4. Inside the background Layer, render <Rect> and <Circle> primitives with draggable and resizable props set to true.
5. Create DrawingToolbar.tsx with buttons: Pencil, Eraser, Add Rect, Add Circle, Clear.
6. Wire the active tool state from DrawingToolbar to DrawingScreen via a shared useState hook.
7. Test on iOS and Android simulators.

Acceptance criteria verification checklist:

• Freehand brush strokes appear in real-time on canvas
• Eraser removes drawing strokes without clearing background
• Shapes are repositionable via drag gesture
• No JS errors or native crash on mount
• Runs on iOS 15+ and Android API 26+

Implement the following React Native chunk for your mobile app:

Goal: Integrate Vision Camera v5 with a real-time QR code scanner using the new frame processor API.

Files to create/modify:

• src/screens/CameraScreen.tsx — camera view with overlay
• src/hooks/useQRScanner.ts — frame processor hook
• ios/Info.plist — add NSCameraUsageDescription
• android/app/src/main/AndroidManifest.xml — add CAMERA permission

Step-by-step implementation:

1. Run yarn add react-native-vision-camera react-native-vision-camera-code-scanner, then npx pod-install.
2. Add <key>NSCameraUsageDescription</key><string>Used for QR scanning</string> to ios/Info.plist.
3. Add <uses-permission android:name="android.permission.CAMERA" /> to AndroidManifest.xml.
4. In useQRScanner.ts, call useCodeScanner({ codeTypes: ['qr'], onCodeScanned: (codes) => {...} }) and return the scanner and the last detected value.
5. In CameraScreen.tsx, call useCameraPermission() and show a permission-request button if not granted.
6. Render <Camera style={StyleSheet.absoluteFill} device={device} isActive={true} codeScanner={codeScanner} />.
7. Overlay a <Text> with the detected QR value using an Animated.View that fades in on detection.

Acceptance criteria verification checklist:

• Camera preview starts when screen is focused
• QR code value appears in the overlay when a code is scanned
• Permission prompt fires on first launch; denied state shows a fallback message
• Tested on a physical device (simulators lack cameras)
• No TypeScript errors

Implement the following React Native chunk for your mobile app:

Goal: Set up a reusable AI-prompt workflow for generating Expo screens with Fable 5 (or equivalent model), based on the benchmark methodology where each prompt is self-contained and one-shots a complete, working screen.

Files to create/modify:

• ai-prompts/screen-template.md — the master prompt template
• ai-prompts/README.md — documentation and usage guide
• app/(tabs)/list.tsx — sample generated List screen
• app/(tabs)/detail/[id].tsx — sample generated Detail screen

Step-by-step implementation:

1. Create ai-prompts/screen-template.md with this structure:

Tech stack: Expo SDK 55, Expo Router v5, TypeScript strict mode, NativeWind v4
Screen name: [NAME]
Route: [PATH e.g. app/(tabs)/list.tsx]
Data shape: [TypeScript interface for the data]
State: [local useState / Zustand / React Query — choose one]
UI layout: [paragraph description of layout, sections, and interactions]
Navigation: [which buttons navigate to which routes, with typed href]
Edge cases: [empty state, loading state, error state]

2. Feed the template (filled for a User List screen) to Fable 5 and paste the output into app/(tabs)/list.tsx.
3. Fill the template for a User Detail screen and generate app/(tabs)/detail/[id].tsx.
4. Run npx tsc --noEmit and fix any TypeScript errors.
5. Run npx expo start and verify both screens render.
6. Document quality observations and prompt refinements in ai-prompts/README.md.

Acceptance criteria verification checklist:

• screen-template.md is complete and self-contained
• Both generated screens pass tsc --noEmit with no errors
• Screens are reachable via Expo Router tab navigation
• List screen shows a FlatList with typed items
• Detail screen receives and displays the [id] param
• README explains how to reuse and extend the template

Implement the following React Native chunk for your mobile app:

Goal: Implement a data table using TanStack Table v9's tree-shakable API with only sorting and pagination, backed by TanStack Store for fine-grained reactivity.

Files to create/modify:

• src/components/DataTable.tsx — the table component
• src/hooks/useTableStore.ts — TanStack Store for table state
• package.json — add @tanstack/react-table@9 and @tanstack/store

Step-by-step implementation:

1. Run yarn add @tanstack/react-table@9 @tanstack/store.
2. In useTableStore.ts, create a TanStack Store: new Store({ pageIndex: 0, pageSize: 10, sorting: [] as SortingState }). Export a useTableState() hook that subscribes with useStore.
3. In DataTable.tsx, import ONLY: createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel — nothing else (tree-shaking test).
4. Define columns using columnHelper.accessor.
5. Pass state: { sorting, pagination: { pageIndex, pageSize } } from the TanStack Store, wire onSortingChange and onPaginationChange to store setters.
6. Render rows with a FlatList using table.getRowModel().rows.
7. Render column headers as TouchableOpacity that call column.getToggleSortingHandler().
8. Add Previous / Next Button components connected to table.previousPage() / table.nextPage(), disabled at boundaries.
9. Run source-map-explorer on the production bundle and confirm no grouping/filtering modules.

Acceptance criteria verification checklist:

• Table displays provided data correctly
• Tapping a column header cycles sort: asc → desc → none
• Pagination buttons are disabled at boundaries (first/last page)
• TypeScript strict mode passes with no errors
• Bundle analyzer output shows no unused TanStack Table feature modules

Implement the following React Native chunk for your mobile app:

Goal: Set up Targate CLI for npm package security auditing in the React Native project to protect against supply-chain attacks on native dependencies (podspecs, Gradle files, prebuilt binaries checked against the OSV database).

Files to create/modify:

• scripts/audit-deps.sh — shell script to audit key native packages
• docs/security-audit.md — findings report (ALLOW / REQUIRE_APPROVAL / BLOCK per package)
• package.json — add a security:check script entry
• README.md — add a "Security" section

Step-by-step implementation:

1. Install globally (optional): npm install -g targate, or use npx targate for one-off runs.
2. Create scripts/audit-deps.sh:

#!/bin/bash
PACKAGES=(react-native react-native-reanimated react-native-gesture-handler react-native-screens expo)
for pkg in "${PACKAGES[@]}"; do
  echo "--- Auditing $pkg ---"
  npx targate add "$pkg" --dry-run
done

3. Run bash scripts/audit-deps.sh and capture the output.
4. Create docs/security-audit.md with a table: Package | Version | Decision | Notes.
5. Add to package.json scripts: "security:check": "npx targate add".
6. Test with npx targate add axios (ALLOW) and a known risky package to see BLOCK / REQUIRE_APPROVAL.
7. Update README.md with a "Security" section: before yarn add <package>, always run npx targate add <package> first.

Acceptance criteria verification checklist:

• npx targate add react-native-reanimated returns ALLOW with SHA-512 verification
• docs/security-audit.md lists all audited packages with their decision and version
• At least one REQUIRE_APPROVAL or BLOCK result is demonstrated in the audit log
• README.md Security section is present and explains the Targate workflow
• scripts/audit-deps.sh is executable and runs without errors