React Native Shopping List demo app by kevin-dp · Pull Request #1357 · TanStack/db

kevin-dp · 2026-03-12T08:46:00Z

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 · 2026-03-12T08:47:02Z

🦋 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 · 2026-03-12T08:47:03Z

🦋 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

pkg-pr-new · 2026-03-12T08:49:26Z

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 · 2026-03-12T08:50:05Z

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 · 2026-03-12T08:50:41Z

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}

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

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

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

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

…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 [email protected] 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) <[email protected]>

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

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

* 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 [email protected] 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) <[email protected]> * 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 <[email protected]> Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]>

kevin-dp changed the base branch from kevin/includes-aggregates to kevin/includes-arbitrary-correlation March 12, 2026 08:48

Base automatically changed from kevin/includes-arbitrary-correlation to kevin/includes March 12, 2026 13:27

kevin-dp force-pushed the kevin/includes branch from 13a73c0 to 45d87e8 Compare March 16, 2026 10:42

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

RN shopping list app

4f9a3a1

ci: apply automated fixes

503c13f

samwillis force-pushed the examples/shopping-list branch 2 times, most recently from 695294f to 45481f8 Compare March 25, 2026 10:02

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 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

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

ci: apply automated fixes

8f8c5d5

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

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 merged commit 3274a29 into main Mar 25, 2026
7 checks passed

samwillis deleted the examples/shopping-list branch March 25, 2026 16:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Native Shopping List demo app#1357

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

kevin-dp commented Mar 12, 2026

Uh oh!

changeset-bot bot commented Mar 12, 2026

Uh oh!

changeset-bot bot commented Mar 12, 2026

Uh oh!

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

edited

Loading

Uh oh!

github-actions bot commented Mar 12, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 12, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

kevin-dp commented Mar 12, 2026

Summary

Test plan

Uh oh!

changeset-bot bot commented Mar 12, 2026

🦋 Changeset detected

Uh oh!

changeset-bot bot commented Mar 12, 2026

🦋 Changeset detected

Uh oh!

pkg-pr-new bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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

edited

Loading

github-actions bot commented Mar 12, 2026 •

edited

Loading

github-actions bot commented Mar 12, 2026 •

edited

Loading