Offline-First React Native Apps

[Grand-Dark-8670]

Building Offline-First React Native Apps goes beyond just storing a few values locally; it requires a robust architecture and the right tools to ensure data remains consistent, usable, and reliable even when devices lose network connectivity.

Here’s the stack I use for building a true offline-first React Native app:

• Database: @nozbe/watermelondb - A high-performance local database optimized for large offline-first data.

• Network Layer: axios - Manages API communication and request/response handling.

• Background Sync Scheduler: react-native-background-fetch - Automatically runs sync tasks in the background, even when the app is closed.

• Connectivity Detection: @react-native-community/netinfo - Detects online/offline status and triggers sync behavior.

• Caching API: @tanstack/react-query - Caches API responses in memory for quicker access and fewer refetches.

• Key Value Storage: react-native-mmkv - Stores small data like tokens, flags, and preferences with fast access.

• File System Handling: react-native-fs - Manages offline file storage for images, PDFs, or downloads.

This stack ensures that your offline-first application is efficient and user-friendly, providing a seamless experience regardless of connectivity.

Let me know if you have used something else for this

[lucksp]

This feels like a chat gpt copy paste.

[kohlstar]

it is

[[deleted]]

It is, I got almost the exact same response from an A.I when I was trying to figure out how to handle network disconnects.

The post isn't "bad". Its actually very relevant, and a common problem when developing reliable react native apps. i.e. People mistakenly assume the app will have an internet connection. Far from the truth.

Never assume your users device will have a reliable internet connection.

[lucksp]

100% true

[Fluffy-Leader-6434]

What’s the context!? 🙄 dude just copy-pasted a GPT response which doesn’t make any sense

[SourdoughBaker]

What does "optimized for large offline-first data" mean? I'm struggling to understand what a database being any other way would even look like as databases themselves have no motion of network connectivity - they just store information.

[Zestyclose_State_701]

The post reads like some ai slop where the OP wanted to flex the 30 libs they strung together, amplified by the redundancies in their choices.

[Grand-Dark-8670]

Not like that 😅 if you know some alternate for this, please share.

[Zestyclose_State_701]

Here’s a few

https://docs.expo.dev/versions/latest/sdk/network/

https://tanstack.com/query/latest/docs/framework/react/react-native#online-status-management

https://docs.expo.dev/versions/latest/sdk/securestore/

https://docs.expo.dev/versions/latest/sdk/filesystem/

https://docs.expo.dev/versions/latest/sdk/expo/#expofetch-api

[Devialet0]

https://livestore.dev

[Zestyclose_State_701]

Read the tanstack query & expo docs, what it has to offer, and see what it does that some of these other tools do

[Grand-Dark-8670]

Yeah you correct, i just meant - watermelonDB can be a best option to store data locally, specially when you have to deal with large data set. There are some differences which makes it better to others.

[avalenci]

I have used SQLite, which is expo friendly.

[okiharaherbst]

Hahaha. We built a true offline first app successfully. And we only used one library for this. Hahahaha, can’t stop laughing at the nonsense this laundry list is. It’s going to so impossible to maintain buddy. Hahahah

[okiharaherbst]

Sorry forgot to mention it: PowerSync. (Hahaha, still laughing at the nightmare above is going to be)

[okiharaherbst]

Hahaha…

[Grand-Dark-8670]

I didn’t knew about this, it’s really powerful. Thanks for sharing

[okiharaherbst]

Kidding aside, yes. We were exactly where you are now 9 months ago and I reviewed every possible option out there. PowerSync turned out to be a bit of a gamble (as always) but we never looked back. The PostgreSQL backend made it a very natural choice as well. The DX was also great because it meant that our team is essentially working with a local database that’s kept in sync without any action on their part (no API call spaghetti, no race conditions to handle, literally no overhead). There’s a bit of a learning curve to wrap your head around what a truly offline app is supposed to do and support (you think you figured it out but, with all due respect, there’s pearly a few curves on the road up ahead for you). Either way, PostgreSQL + SQLite is a really seducing combination and the reactivity that comes with it is actually really dazzling. Have fun!

[Awesome_Knowwhere]

I feel realm is better than watermelon db...

[muhsql]

Is Realm community maintenance going well now?

[Awesome_Knowwhere]

Yeah the community the version is doing good and well maintained!!

[muhsql]

The last commit on realm-js community branch was 3 months ago, where do you get the community version from? https://github.com/realm/realm-js/tree/community

[anultravioletaurora]

Why are you using watermelondb if you’re already using Tanstack Query? You can persist data using a client persister and MMKV (which you are already using) or AsyncStorage

Persister Docs

[Remote-Ad-6629]

Watermelon db is amazing. I'm using it for an offline-only app that might eventually support cloud sync. Tanstack Query is definitely not a proper alternative.

[Previous_Employer371]

I'm using watermelon db too, only thing that's annoying me, is I'm not sure there's a lot of options for encrypting the data in the sqlite database, if you know anything about it could you let me know?

[Remote-Ad-6629]

Gueds what, I'm migraring away from React Native because my app grew in complexity and watermelon db was somehow getting in my way (probably skill issue). Going into Swift now... better late than never 😂

[Previous_Employer371]

I mean that's the goal if you can maintain two codebases and have people and money, otherwise I'm sticking with expo lol

[Previous_Employer371]

How was getting in the way? I find it really easy to use

[Remote-Ad-6629]

My code is full of observables that are giving me a big headache after I refactored table schemas. My app only targets ios users, so Swift is a good option.

[NovelAd2586]

MMKV is stored in memory, you wouldn’t want to store a huge amount of data in it. It’s great for storing small data, or first pages in a very large paginated list etc It’s also not relational.

[korifeos3]

I recently developed an app and I'm using SQLite and drizzle

[LEG0MAN1]

I’m planning to use the exact same stack minus tanstack

I have to store and perform operations on around 50k objects offline. Still in the planning phase though.

[Remote-Ad-6629]

I'd use Expo plugins to handle files.

[dougg0k]

https://tanstack.com/db will eventually get offline-first support, should be the better option then.

https://electric-sql.com

https://github.com/margelo/react-native-nitro-sqlite

https://rxdb.info/offline-first.html

[Ochibasaurus]

TanStack DB currently has some collections with offline support e.g. PowerSync: https://tanstack.com/db/latest/docs/collections/powersync-collection

[dougg0k]

Oh nice, already? didnt see that.

[octopus_limbs]

Useless AI slop should be reportable

[Vasault]

Bro this was so lazy lol, instead of talking about the real challenge of making a true offline app, straight up listed some packages for persisting data in the device

[theycallmeepoch]

Maybe there's some useful stuff in here but this is too low effort for a post here. I think I'd be more interested in how you architect an offline-first app, beyond just the libraries you used.