Fix offline transactions for React Native #1137

kevin-dp · 2026-01-15T13:54:29Z

Fix `@tanstack/offline-transactions` for React Native / Expo

This PR fixes #1013

Problem

The DefaultOnlineDetector attempted to use browser-specific APIs (window.addEventListener('online'), document.addEventListener('visibilitychange')) which don't exist in React Native. This caused errors when using the package in RN/Expo environments.

Solution

Introduced platform-specific OnlineDetector implementations:

WebOnlineDetector - Uses browser APIs (window.online/offline, document.visibilitychange)
ReactNativeOnlineDetector - Uses RN primitives (@react-native-community/netinfo for network status, AppState for foreground/background)

The RN implementation is exposed via a separate entrypoint to avoid bundling RN modules for web users.

Usage

Web (unchanged):

import { startOfflineExecutor } from '@tanstack/offline-transactions'

React Native / Expo:

import { startOfflineExecutor } from '@tanstack/offline-transactions/react-native'

The RN entrypoint automatically uses ReactNativeOnlineDetector. All other APIs remain the same.

Peer Dependencies (for RN users)

npm install @react-native-community/netinfo

The package declares react-native and @react-native-community/netinfo as optional peer dependencies.

… (issue #1013)

changeset-bot · 2026-01-15T13:54:33Z

🦋 Changeset detected

Latest commit: f6203ce

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

This PR includes changesets to release 1 package

Name	Type
@tanstack/offline-transactions	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-01-15T13:58:46Z

More templates

@tanstack/angular-db

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

@tanstack/db

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

@tanstack/db-ivm

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

@tanstack/electric-db-collection

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

@tanstack/offline-transactions

npm i https://pkg.pr.new/@tanstack/offline-transactions@1137

@tanstack/powersync-db-collection

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

@tanstack/query-db-collection

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

@tanstack/react-db

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

@tanstack/rxdb-db-collection

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

@tanstack/solid-db

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

@tanstack/svelte-db

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

@tanstack/trailbase-db-collection

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

@tanstack/vue-db

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

commit: b42ffaf

github-actions · 2026-01-15T13:59:23Z

Size Change: 0 B

Total Size: 90.5 kB

ℹ️ View Unchanged

Filename	Size
`./packages/db/dist/esm/collection/change-events.js`	1.39 kB
`./packages/db/dist/esm/collection/changes.js`	1.19 kB
`./packages/db/dist/esm/collection/events.js`	388 B
`./packages/db/dist/esm/collection/index.js`	3.32 kB
`./packages/db/dist/esm/collection/indexes.js`	1.1 kB
`./packages/db/dist/esm/collection/lifecycle.js`	1.67 kB
`./packages/db/dist/esm/collection/mutations.js`	2.34 kB
`./packages/db/dist/esm/collection/state.js`	3.46 kB
`./packages/db/dist/esm/collection/subscription.js`	3.62 kB
`./packages/db/dist/esm/collection/sync.js`	2.38 kB
`./packages/db/dist/esm/deferred.js`	207 B
`./packages/db/dist/esm/errors.js`	4.49 kB
`./packages/db/dist/esm/event-emitter.js`	748 B
`./packages/db/dist/esm/index.js`	2.69 kB
`./packages/db/dist/esm/indexes/auto-index.js`	742 B
`./packages/db/dist/esm/indexes/base-index.js`	766 B
`./packages/db/dist/esm/indexes/btree-index.js`	1.93 kB
`./packages/db/dist/esm/indexes/lazy-index.js`	1.1 kB
`./packages/db/dist/esm/indexes/reverse-index.js`	513 B
`./packages/db/dist/esm/local-only.js`	837 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`	733 B
`./packages/db/dist/esm/query/builder/index.js`	4.08 kB
`./packages/db/dist/esm/query/builder/ref-proxy.js`	1.05 kB
`./packages/db/dist/esm/query/compiler/evaluators.js`	1.42 kB
`./packages/db/dist/esm/query/compiler/expressions.js`	430 B
`./packages/db/dist/esm/query/compiler/group-by.js`	1.87 kB
`./packages/db/dist/esm/query/compiler/index.js`	1.96 kB
`./packages/db/dist/esm/query/compiler/joins.js`	2 kB
`./packages/db/dist/esm/query/compiler/order-by.js`	1.45 kB
`./packages/db/dist/esm/query/compiler/select.js`	1.06 kB
`./packages/db/dist/esm/query/expression-helpers.js`	1.43 kB
`./packages/db/dist/esm/query/ir.js`	673 B
`./packages/db/dist/esm/query/live-query-collection.js`	360 B
`./packages/db/dist/esm/query/live/collection-config-builder.js`	5.4 kB
`./packages/db/dist/esm/query/live/collection-registry.js`	264 B
`./packages/db/dist/esm/query/live/collection-subscriber.js`	1.93 kB
`./packages/db/dist/esm/query/live/internal.js`	145 B
`./packages/db/dist/esm/query/optimizer.js`	2.56 kB
`./packages/db/dist/esm/query/predicate-utils.js`	2.97 kB
`./packages/db/dist/esm/query/subset-dedupe.js`	921 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`	924 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`	852 B
`./packages/db/dist/esm/utils/cursor.js`	457 B
`./packages/db/dist/esm/utils/index-optimization.js`	1.51 kB
`./packages/db/dist/esm/utils/type-guards.js`	157 B

_{compressed-size-action::db-package-size}

github-actions · 2026-01-15T13:59:59Z

Size Change: 0 B

Total Size: 3.47 kB

ℹ️ View Unchanged

Filename	Size
`./packages/react-db/dist/esm/index.js`	225 B
`./packages/react-db/dist/esm/useLiveInfiniteQuery.js`	1.17 kB
`./packages/react-db/dist/esm/useLiveQuery.js`	1.12 kB
`./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}

KyleAMathews · 2026-01-15T14:44:12Z

Can we document this in the readme?

kevin-dp · 2026-01-15T16:19:06Z

@claude update the readme of the @tanstack/offline-transactions package to explain how to use that package for web vs for React Native as i did in this PR description.

claude · 2026-01-15T16:19:30Z

Claude finished @kevin-dp's task in 1m 22s —— View job

Documentation updated successfully

Tasks completed

Read current README to understand structure
Update README with platform-specific usage instructions (web vs React Native)
Commit and push changes

Summary

I've updated the @tanstack/offline-transactions README to document the platform-specific usage for web vs React Native. The changes include:

Installation Section

Split into separate sections for Web and React Native/Expo
Documented the required @react-native-community/netinfo peer dependency for React Native

Platform Support Section (new)

Explained the different underlying APIs used:
- Web: Browser APIs (window.online/offline, document.visibilitychange)
- React Native: React Native primitives (@react-native-community/netinfo, AppState)

Quick Start Section

Split into separate examples for Web and React Native
Showed the different import paths:
- Web: import { ... } from '@tanstack/offline-transactions'
- React Native: import { ... } from '@tanstack/offline-transactions/react-native'
Emphasized that all other APIs remain identical between platforms

Platform Support Section (bottom)

Updated from "Browser Support" to "Platform Support"
Added React Native/Expo version requirements and storage details

The documentation now clearly guides users on how to use the package in both web and React Native environments, matching the implementation details from this PR.

--- •

- Added separate installation instructions for web and React Native - Documented platform-specific OnlineDetector implementations - Clarified import path differences between platforms - Added React Native platform support details Co-authored-by: Kevin <[email protected]>

kevin-dp · 2026-01-15T16:28:47Z

packages/offline-transactions/README.md

+### React Native / Expo
+
+```typescript
+import { startOfflineExecutor } from '@tanstack/offline-transactions/react-native'


@claude no need to repeat all the same code as we already show for the web example. Just show that the import is different.

kevin-dp added 2 commits January 15, 2026 14:37

test: assert DefaultOnlineDetector works in React Native environments…

e4826ee

… (issue #1013)

OnlineDetector for RN

3f17c31

autofix-ci bot and others added 2 commits January 15, 2026 13:55

ci: apply automated fixes

288bd38

Changeset

b42ffaf

kevin-dp mentioned this pull request Jan 15, 2026

Example React Native app with offline transactions #1138

Open

kevin-dp moved this to Ready for review in TanStack DB 1.0.0 release Jan 15, 2026

kevin-dp added this to TanStack DB 1.0.0 release Jan 15, 2026

kevin-dp commented Jan 15, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix offline transactions for React Native #1137

Fix offline transactions for React Native #1137

Uh oh!

kevin-dp commented Jan 15, 2026

Uh oh!

changeset-bot bot commented Jan 15, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Jan 15, 2026

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

KyleAMathews commented Jan 15, 2026

Uh oh!

kevin-dp commented Jan 15, 2026

Uh oh!

claude bot commented Jan 15, 2026 •

edited

Loading

Uh oh!

kevin-dp Jan 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix offline transactions for React Native #1137

Are you sure you want to change the base?

Fix offline transactions for React Native #1137

Uh oh!

Conversation

kevin-dp commented Jan 15, 2026

Fix @tanstack/offline-transactions for React Native / Expo

Problem

Solution

Usage

Peer Dependencies (for RN users)

Uh oh!

changeset-bot bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

pkg-pr-new bot commented Jan 15, 2026

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

KyleAMathews commented Jan 15, 2026

Uh oh!

kevin-dp commented Jan 15, 2026

Uh oh!

claude bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Documentation updated successfully

Tasks completed

Summary

Installation Section

Platform Support Section (new)

Quick Start Section

Platform Support Section (bottom)

Uh oh!

kevin-dp Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix `@tanstack/offline-transactions` for React Native / Expo

changeset-bot bot commented Jan 15, 2026 •

edited

Loading

claude bot commented Jan 15, 2026 •

edited

Loading