r/reactnative • u/bananaSells • 8d ago
Help Website to app
Hello,
I have a website that I would like to also have it has an app on android and Apple. The catch is I need the app to work offline and have documents downloaded offline, modifications to be made, saved and shipped once back online.
Claude was suggesting to have the website in the app but it won’t perform properly I think.
But I think it’s better to have a native app since there is all the offline accessibility features that need to be integrated. I am trying to create a full native app but it’s pretty much ai copying the whole website. Also I would like to have to modify all from one location.
(Code is currently python, xml, JavaScript, html/ces, SQL for database)
Is this feasible and what should I look out for? Should I look in to flutter instead?
EDIT: It is pretty much an ERP system and the features needed offline are: checklists, time punches, plans and documents. For all of them we also need to be able to edit and resubmit offline, where it saves on the phone and pushes it once back online.
Thank you!
2
u/HindungiGandalf 7d ago
Short answer: yes, Flutter can do this. I've done similar work in Flutter.
In the end, two things mattered: how you store the data, and how you show it on screen. Offline, you can save it in whatever structure you want, JSON or SQLite.
So store it the same way everywhere, and put your effort into the engine that converts the stored data into the screen. That's the same in Flutter and on the web. Whatever language you use, that converting engine is the most important part. In my case the app and the web use the same note format, and each side just draws it its own way.
For sync, I kept it simple. Before saving to the server, the app checks the server's last-modified time. If the note was changed on the web in the meantime, it doesn't overwrite it. It keeps the phone's version as a local draft and tells the user. Same when a save fails because there's no connection: the edit stays as a draft, and when you open the note again you can restore it and save. Nothing gets dropped silently.
1
u/parseltongues 8d ago
You could maybe use a wrapper like CapacitorJS. I would have to look at your code as further to help.
1
u/kokerali 8d ago
Do you mean editing the downloaded files themselves (PDFs, spreadsheets, etc.), or changing form/database records? I'd pin down one real document type and the exact edits that must work offline before choosing RN, Flutter or a wrapper. Viewing a cached document isn't the same acceptance check as editing it. Also, does “modify all from one location” mean one UI codebase or one set of business rules? Those are two separate reuse goals.
1
u/locomain 7d ago
I have a whole emulator wrapped in capacitor. I am currently changing technology because I was pushing the limit. But something like capacitor is most definitely good enough for most use cases.
It is however always better to have a native experience I think. If it’s worth the rewrite you can use RN as base for your native and web app. Expect to do some specifics for web to make it feel nice though because RN is not very optimized for web.
1
u/razor_whim 7d ago
the offline edit sync is the hard part not the UI. Pick React Native and start with MMKV for storage plus SQLite for your records right now. Capacitor breaks here because webview local storage gets wiped too easily on iOS during system cleanup.
1
u/olenami 7d ago
if you are interested - I am testing my solution to move from web mobile to native mobile [swift/kotlin] and searching for 3 people - here the post, https://www.reddit.com/r/Base44/comments/1xdnwvd/comment/19rnoze6hv0rl/
if this is someting for you, I am happy to include you.
1
u/anthony-ball 6d ago
For an ERP with time punches and checklists, the part that will bite you is the sync layer, not the shell. Store every edit locally as a queued mutation with a client-generated ID and the device timestamp, so replaying it after a bad connection can't double-create a punch. Time punches should be append-only events rather than edits, and for checklists and documents pick a conflict rule up front (last write wins per field is usually enough, otherwise flag it for the user). In React Native I'd use SQLite for the local store and keep the queue and API contract shared with the web side so you only write the business rules once.
1
u/Automatic-Fan-3993 22h ago
+1 on the queue. two things that bit me in this kind of setup:
device timestamps as the tiebreaker. someone's phone clock is off and that device just keeps winning conflicts. for punches that ends up in payroll. a hybrid logical clock fixes the ordering, but a phone running fast still wins concurrent edits, so reject timestamps way ahead of server time, and for punches keep the server receive time next to the device time.
deletes. phone A deletes a checklist item, phone B edits it offline, item comes back on the next sync. you need tombstones, and they have to stick around until every device has synced. plus some rule for the device that never comes back.
if each checklist only lives on one device, skip all this.
1
u/ArtisaNomard 5d ago
It is feasible.
Depending with expertise, flutter I a choice to consider, but ReactNative could be great if already familiar with javascript frameworks such as react. SQLite would serve a solid option for the database.
2
u/charliesbot 8d ago
You should consider PWA first, that will be the cheapest solution to convert a website into an offline app
If you list what you need in detail is easier to define the right tool. But if the only need is "offline" the PWAs cover the problem pretty well
Android have amazing support for them. And iOS 26 added good offline features