Skip to content

React Native Shopping List demo app#1357

Merged
samwillis merged 10 commits intomainfrom
examples/shopping-list
Mar 25, 2026
Merged

React Native Shopping List demo app#1357
samwillis merged 10 commits intomainfrom
examples/shopping-list

Conversation

@kevin-dp
Copy link
Contributor

@kevin-dp kevin-dp commented Mar 12, 2026

Summary

  • Adds a React Native Shopping List demo app (examples/react-native/shopping-list/) showcasing three TanStack DB features:
    • Includes with aggregates — parent query uses nested count() subqueries to compute per-list item counts; ListCard subcomponents subscribe to child collections via useLiveQuery() for reactive updates
    • Offline transactions — mutations (add/delete lists, add/toggle/delete items) are applied optimistically and queued for sync via startOfflineExecutor from @tanstack/offline-transactions/react-native
    • SQLite persistence — collections use persistedCollectionOptions with createReactNativeSQLitePersistence (op-sqlite) so data survives app restarts
  • Express backend (server/index.ts) with in-memory storage and seed data for polling-based sync
  • Metro config handles pnpm monorepo symlinks, singleton React resolution, and package exports for subpath imports

Test plan

  • Start server: cd examples/react-native/shopping-list && npx tsx server/index.ts
  • Start Metro: npx expo start --dev-client --clear
  • Run on Android: npx expo run:android
  • Verify lists display with correct item counts (includes + aggregates)
  • Add/delete lists and items (offline transactions)
  • Kill and restart app — verify data persists (SQLite persistence)
  • Stop server — verify mutations queue and sync when server restarts

🤖 Generated with Claude Code

@changeset-bot
Copy link

changeset-bot bot commented Mar 12, 2026

🦋 Changeset detected

Latest commit: b318908

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages
Name Type
@tanstack/react-db Patch
@tanstack/db Patch
@tanstack/electric-db-collection Patch
@tanstack/angular-db Patch
@tanstack/db-sqlite-persisted-collection-core Patch
@tanstack/offline-transactions Patch
@tanstack/powersync-db-collection Patch
@tanstack/query-db-collection Patch
@tanstack/rxdb-db-collection Patch
@tanstack/solid-db Patch
@tanstack/svelte-db Patch
@tanstack/trailbase-db-collection Patch
@tanstack/vue-db Patch
shopping-list-react-native Patch
@tanstack/db-browser-wa-sqlite-persisted-collection Patch
@tanstack/db-cloudflare-do-sqlite-persisted-collection Patch
@tanstack/db-electron-sqlite-persisted-collection Patch
@tanstack/db-node-sqlite-persisted-collection Patch
@tanstack/db-react-native-sqlite-persisted-collection Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@changeset-bot
Copy link

changeset-bot bot commented Mar 12, 2026

🦋 Changeset detected

Latest commit: 6d89a7a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages
Name Type
@tanstack/react-db Patch
@tanstack/db Patch
@tanstack/electric-db-collection Patch
@tanstack/angular-db Patch
@tanstack/db-sqlite-persisted-collection-core Patch
@tanstack/offline-transactions Patch
@tanstack/powersync-db-collection Patch
@tanstack/query-db-collection Patch
@tanstack/rxdb-db-collection Patch
@tanstack/solid-db Patch
@tanstack/svelte-db Patch
@tanstack/trailbase-db-collection Patch
@tanstack/vue-db Patch
shopping-list-react-native Patch
@tanstack/db-browser-wa-sqlite-persisted-collection Patch
@tanstack/db-cloudflare-do-sqlite-persisted-collection Patch
@tanstack/db-electron-sqlite-persisted-collection Patch
@tanstack/db-node-sqlite-persisted-collection Patch
@tanstack/db-react-native-sqlite-persisted-collection Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@kevin-dp kevin-dp changed the base branch from kevin/includes-aggregates to kevin/includes-arbitrary-correlation March 12, 2026 08:48
@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 12, 2026 •
edited
Loading

More templates

@tanstack/angular-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/angular-db@1357

@tanstack/db

npm i https://pkg.pr.new/TanStack/db/@tanstack/db@1357

@tanstack/db-browser-wa-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-browser-wa-sqlite-persisted-collection@1357

@tanstack/db-capacitor-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-capacitor-sqlite-persisted-collection@1357

@tanstack/db-cloudflare-do-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-cloudflare-do-sqlite-persisted-collection@1357

@tanstack/db-electron-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-electron-sqlite-persisted-collection@1357

@tanstack/db-expo-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-expo-sqlite-persisted-collection@1357

@tanstack/db-ivm

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-ivm@1357

@tanstack/db-node-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-node-sqlite-persisted-collection@1357

@tanstack/db-react-native-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-react-native-sqlite-persisted-collection@1357

@tanstack/db-sqlite-persisted-collection-core

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-sqlite-persisted-collection-core@1357

@tanstack/db-tauri-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-tauri-sqlite-persisted-collection@1357

@tanstack/electric-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/electric-db-collection@1357

@tanstack/offline-transactions

npm i https://pkg.pr.new/TanStack/db/@tanstack/offline-transactions@1357

@tanstack/powersync-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/powersync-db-collection@1357

@tanstack/query-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/query-db-collection@1357

@tanstack/react-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/react-db@1357

@tanstack/rxdb-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/rxdb-db-collection@1357

@tanstack/solid-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/solid-db@1357

@tanstack/svelte-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/svelte-db@1357

@tanstack/trailbase-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/trailbase-db-collection@1357

@tanstack/vue-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/vue-db@1357

commit: 40b90b2

@github-actions
Copy link
Contributor

github-actions bot commented Mar 12, 2026 •
edited
Loading

Size Change: 0 B

Total Size: 113 kB

ℹ️ View Unchanged
Filename Size
./packages/db/dist/esm/collection/change-events.js 1.39 kB
./packages/db/dist/esm/collection/changes.js 1.38 kB
./packages/db/dist/esm/collection/cleanup-queue.js 810 B
./packages/db/dist/esm/collection/events.js 434 B
./packages/db/dist/esm/collection/index.js 3.61 kB
./packages/db/dist/esm/collection/indexes.js 1.99 kB
./packages/db/dist/esm/collection/lifecycle.js 1.69 kB
./packages/db/dist/esm/collection/mutations.js 2.47 kB
./packages/db/dist/esm/collection/state.js 5.26 kB
./packages/db/dist/esm/collection/subscription.js 3.74 kB
./packages/db/dist/esm/collection/sync.js 2.88 kB
./packages/db/dist/esm/collection/transaction-metadata.js 144 B
./packages/db/dist/esm/deferred.js 207 B
./packages/db/dist/esm/errors.js 4.92 kB
./packages/db/dist/esm/event-emitter.js 748 B
./packages/db/dist/esm/index.js 3 kB
./packages/db/dist/esm/indexes/auto-index.js 830 B
./packages/db/dist/esm/indexes/base-index.js 729 B
./packages/db/dist/esm/indexes/basic-index.js 2.05 kB
./packages/db/dist/esm/indexes/btree-index.js 2.17 kB
./packages/db/dist/esm/indexes/index-registry.js 820 B
./packages/db/dist/esm/indexes/reverse-index.js 538 B
./packages/db/dist/esm/local-only.js 890 B
./packages/db/dist/esm/local-storage.js 2.1 kB
./packages/db/dist/esm/optimistic-action.js 359 B
./packages/db/dist/esm/paced-mutations.js 496 B
./packages/db/dist/esm/proxy.js 3.75 kB
./packages/db/dist/esm/query/builder/functions.js 905 B
./packages/db/dist/esm/query/builder/index.js 5.25 kB
./packages/db/dist/esm/query/builder/ref-proxy.js 1.05 kB
./packages/db/dist/esm/query/compiler/evaluators.js 1.62 kB
./packages/db/dist/esm/query/compiler/expressions.js 430 B
./packages/db/dist/esm/query/compiler/group-by.js 2.69 kB
./packages/db/dist/esm/query/compiler/index.js 3.63 kB
./packages/db/dist/esm/query/compiler/joins.js 2.11 kB
./packages/db/dist/esm/query/compiler/order-by.js 1.51 kB
./packages/db/dist/esm/query/compiler/select.js 1.11 kB
./packages/db/dist/esm/query/effect.js 4.78 kB
./packages/db/dist/esm/query/expression-helpers.js 1.43 kB
./packages/db/dist/esm/query/ir.js 829 B
./packages/db/dist/esm/query/live-query-collection.js 360 B
./packages/db/dist/esm/query/live/collection-config-builder.js 7.78 kB
./packages/db/dist/esm/query/live/collection-registry.js 264 B
./packages/db/dist/esm/query/live/collection-subscriber.js 1.94 kB
./packages/db/dist/esm/query/live/internal.js 145 B
./packages/db/dist/esm/query/live/utils.js 1.64 kB
./packages/db/dist/esm/query/optimizer.js 2.62 kB
./packages/db/dist/esm/query/predicate-utils.js 2.97 kB
./packages/db/dist/esm/query/query-once.js 359 B
./packages/db/dist/esm/query/subset-dedupe.js 960 B
./packages/db/dist/esm/scheduler.js 1.3 kB
./packages/db/dist/esm/SortedMap.js 1.3 kB
./packages/db/dist/esm/strategies/debounceStrategy.js 247 B
./packages/db/dist/esm/strategies/queueStrategy.js 428 B
./packages/db/dist/esm/strategies/throttleStrategy.js 246 B
./packages/db/dist/esm/transactions.js 2.9 kB
./packages/db/dist/esm/utils.js 927 B
./packages/db/dist/esm/utils/array-utils.js 273 B
./packages/db/dist/esm/utils/browser-polyfills.js 304 B
./packages/db/dist/esm/utils/btree.js 5.61 kB
./packages/db/dist/esm/utils/comparison.js 1.05 kB
./packages/db/dist/esm/utils/cursor.js 457 B
./packages/db/dist/esm/utils/index-optimization.js 1.54 kB
./packages/db/dist/esm/utils/type-guards.js 157 B
./packages/db/dist/esm/virtual-props.js 360 B

compressed-size-action::db-package-size

@github-actions
Copy link
Contributor

github-actions bot commented Mar 12, 2026 •
edited
Loading

Size Change: 0 B

Total Size: 4.23 kB

ℹ️ View Unchanged
Filename Size
./packages/react-db/dist/esm/index.js 249 B
./packages/react-db/dist/esm/useLiveInfiniteQuery.js 1.32 kB
./packages/react-db/dist/esm/useLiveQuery.js 1.34 kB
./packages/react-db/dist/esm/useLiveQueryEffect.js 355 B
./packages/react-db/dist/esm/useLiveSuspenseQuery.js 559 B
./packages/react-db/dist/esm/usePacedMutations.js 401 B

compressed-size-action::react-db-package-size

Base automatically changed from kevin/includes-arbitrary-correlation to kevin/includes March 12, 2026 13:27
Base automatically changed from kevin/includes to main March 16, 2026 10:46
kevin-dp and others added 4 commits March 23, 2026 14:56
@kevin-dp @samwillis
RN shopping list app
4f9a3a1
@autofix-ci @samwillis
ci: apply automated fixes
503c13f
@samwillis
feat: migrate RN shopping-list to electric proxy sync
f8976d5 
Switch the React Native shopping-list example to Electric-backed persisted collections with offline transaction replay, and proxy shape streaming through API endpoints so auth and protocol headers are handled server-side.

Made-with: Cursor
@samwillis
feat: polish RN shopping-list offline sync UX
45481f8 
Improve the Electric + persisted offline demo by adding global network controls, robust local reset behavior, and clearer sync-state UI without layout jitter. This makes offline behavior easier to demo across iOS/Android while avoiding transaction and status-bar regressions.

Made-with: Cursor
@samwillis samwillis force-pushed the examples/shopping-list branch 2 times, most recently from 695294f to 45481f8 Compare March 25, 2026 10:02
@samwillis
chore: align shopping list example dependency versions
c205aea 
Match the React Native shopping-list example with the workspace React and TanStack package versions so Sherif passes in CI.

Made-with: Cursor
@samwillis samwillis force-pushed the examples/shopping-list branch from 7f2b4e0 to c205aea Compare March 25, 2026 13:07
samwillis and others added 5 commits March 25, 2026 13:09
@samwillis
ci: refresh lockfile for shopping list dependency update
e0b5eed 
Sync pnpm-lock.yaml with the shopping-list React Native dependency version changes so frozen installs pass in CI.

Made-with: Cursor
@autofix-ci
ci: apply automated fixes
8f8c5d5
@kevin-dp @claude
fix: make RN shopping-list server endpoints idempotent & fix metro-ca…
05a85e7 
…che resolution

- Add ON CONFLICT DO UPDATE to POST /api/items and POST /api/lists so
  offline retry inserts don't fail with duplicate key errors
- Add metro-cache@0.82.5 override to fix pnpm resolving 0.83.x which
  removed the ./src/* export that @expo/metro-config requires

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@samwillis
fix: stabilize RN shopping-list iOS startup
d4d4463 
Align the Expo 53 Metro toolchain and pin the shopping-list React version so the iOS example avoids the renderer crash during startup while keeping package exports resolution working in the monorepo.

Made-with: Cursor
@samwillis
ci: ignore RN shopping-list sherif mismatch
40b90b2 
Exclude the React Native shopping-list example from the workspace dependency version check so CI keeps the runtime-required React pin without failing sherif.

Made-with: Cursor
@samwillis samwillis merged commit 3274a29 into main Mar 25, 2026
7 checks passed
@samwillis samwillis deleted the examples/shopping-list branch March 25, 2026 16:23
KyleAMathews pushed a commit that referenced this pull request Mar 25, 2026
@kevin-dp @autofix-ci
@samwillis @claude @KyleAMathews
React Native Shopping List demo app (#1357)
a45642b 
* RN shopping list app

* ci: apply automated fixes

* feat: migrate RN shopping-list to electric proxy sync

Switch the React Native shopping-list example to Electric-backed persisted collections with offline transaction replay, and proxy shape streaming through API endpoints so auth and protocol headers are handled server-side.

Made-with: Cursor

* feat: polish RN shopping-list offline sync UX

Improve the Electric + persisted offline demo by adding global network controls, robust local reset behavior, and clearer sync-state UI without layout jitter. This makes offline behavior easier to demo across iOS/Android while avoiding transaction and status-bar regressions.

Made-with: Cursor

* chore: align shopping list example dependency versions

Match the React Native shopping-list example with the workspace React and TanStack package versions so Sherif passes in CI.

Made-with: Cursor

* ci: refresh lockfile for shopping list dependency update

Sync pnpm-lock.yaml with the shopping-list React Native dependency version changes so frozen installs pass in CI.

Made-with: Cursor

* ci: apply automated fixes

* fix: make RN shopping-list server endpoints idempotent & fix metro-cache resolution

- Add ON CONFLICT DO UPDATE to POST /api/items and POST /api/lists so
  offline retry inserts don't fail with duplicate key errors
- Add metro-cache@0.82.5 override to fix pnpm resolving 0.83.x which
  removed the ./src/* export that @expo/metro-config requires

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: stabilize RN shopping-list iOS startup

Align the Expo 53 Metro toolchain and pin the shopping-list React version so the iOS example avoids the renderer crash during startup while keeping package exports resolution working in the monorepo.

Made-with: Cursor

* ci: ignore RN shopping-list sherif mismatch

Exclude the React Native shopping-list example from the workspace dependency version check so CI keeps the runtime-required React pin without failing sherif.

Made-with: Cursor

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Sam Willis <sam.willis@gmail.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@kevin-dp @samwillis