Best way to build web app that behaves like a native mobile app? 1 month of work wasted?
Unanswered
chan posted this in #help-forum
chanOP
(Part 1)
I've spent the better part of a month building a mobile web app using Next.js and am running into a sort of panic moment due to all the strange bugs/behaviors I have to keep fixing because of my strict rule of making the website feel like a mobile app.
Here is a link to working website as of right now:
https://go-copy-jwre39eff-chandler-forrests-projects.vercel.app/
In the app, I allow users to click on various buttons to bring up new screens without the main page reloading. The buttons allow you to change settings, search/filter, sort, see a tutorial, etc. I designed the app to NOT have the main page reload because I wanted to mimic a real native mobile app as closely as possible.
My first approach to achieve this kind of functionality was hiding the content of the main page using display: none when users click the menu buttons. This worked well except when you scrolled on any of the menus that were NOW visible, it caused the original main content to scroll too so when you went back to the main page, the content was now in a new position. Not what I wanted. I saw no way to fix this so I moved to another solution.
I've spent the better part of a month building a mobile web app using Next.js and am running into a sort of panic moment due to all the strange bugs/behaviors I have to keep fixing because of my strict rule of making the website feel like a mobile app.
Here is a link to working website as of right now:
https://go-copy-jwre39eff-chandler-forrests-projects.vercel.app/
In the app, I allow users to click on various buttons to bring up new screens without the main page reloading. The buttons allow you to change settings, search/filter, sort, see a tutorial, etc. I designed the app to NOT have the main page reload because I wanted to mimic a real native mobile app as closely as possible.
My first approach to achieve this kind of functionality was hiding the content of the main page using display: none when users click the menu buttons. This worked well except when you scrolled on any of the menus that were NOW visible, it caused the original main content to scroll too so when you went back to the main page, the content was now in a new position. Not what I wanted. I saw no way to fix this so I moved to another solution.
4 Replies
chanOP
(Part 2)
I now use https://reactcommunity.org/react-modal/. Every screen except the main screen is a Modal which has its style hacked to make it take the full width and height of the window. This almost works out of the box, but it also requires me to use a custom hook https://gist.github.com/reecelucas/2f510e6b8504008deaaa52732202d2da to block the scrolling on the main screen. Using this custom hook alone with the original solution of swapping the
I’m now running into various bugs that relate to the text input field not being able to focus/blur because of the way the Modals render. I’ve now reached a tipping point where I don’t want to work around any of the jank anymore and just want to figure out what would be the proper way to achieve the functionality I’m working towards. A web app, that has multiple popups/menus which when scrolled through don’t disrupt the main content.
Should I be building this all in a React native for web? Is there another library I can use? Am I simply doing something wrong? Any advice would be helpful. Happy to provide more clarity if needed too.
I now use https://reactcommunity.org/react-modal/. Every screen except the main screen is a Modal which has its style hacked to make it take the full width and height of the window. This almost works out of the box, but it also requires me to use a custom hook https://gist.github.com/reecelucas/2f510e6b8504008deaaa52732202d2da to block the scrolling on the main screen. Using this custom hook alone with the original solution of swapping the
display: none between the main content and other menus does not work. Only when using it in tandem with the Modals.I’m now running into various bugs that relate to the text input field not being able to focus/blur because of the way the Modals render. I’ve now reached a tipping point where I don’t want to work around any of the jank anymore and just want to figure out what would be the proper way to achieve the functionality I’m working towards. A web app, that has multiple popups/menus which when scrolled through don’t disrupt the main content.
Should I be building this all in a React native for web? Is there another library I can use? Am I simply doing something wrong? Any advice would be helpful. Happy to provide more clarity if needed too.
chanOP
turns out there's a flag in the Modal library that allows you to NOT focus is after render. this fixed the bug I was having that was causing me dread https://reactcommunity.org/react-modal/
still would love advice on the best way to approach the problem as my current solution feels JANK
Plott Hound
firstly the url you shared is private so i cant see the app.
is the main issue here that pages are reloading when you navigate? because next shouldn't be doing that. if you are navigating around with next link then the pages wont reload
is the main issue here that pages are reloading when you navigate? because next shouldn't be doing that. if you are navigating around with next link then the pages wont reload