Is a webview dominant app with native-like transitions possible?
During the last few months I built a website (nextjs) with a member dashboard, now I am building the mobile (expo) counterpart. The website changes all the time, and I do not have the time or the money to have a dedicated mobile codebase, therefore I am building it completely out of webviews.
Both website and mobile have the same file router structure, so each index.tsx just has a Webview with uri set to its current pathname and that correctly routes to the corresponding website page.
The problem is the navigation sucks. I dont want to just have a continuous webview with typical safari-like navigation, I want smooth inter-screen navigation.
Problems:
The tabs transition is ok but you cant swipe between them, additionally loading 4 webviews at once (4 tabs in the dashboard) worries me performance wise. I could just load one at a time, but then every new tab (even if you just visited it) will have to be reloaded.
The stack transition is terrible, the new screen swipes ~25% over the previous screen, pauses for a second, then disappears completely (probably due to new/old screen lagging the transition, the native header swipes just fine). Additionally, just as with tabs, you cant swipe between the two screens.
Thoughts:
I know there will be limitations due to webview's non-native nature, but I am positive something better is possible. I tested simply loading two webviews and animating their positions to mimic stack navigation and it works like a charm, but attempting to build out my own navigation system completely seems like a bad idea. It doesnt help that nested stack pages would have to all be loaded at a single time for smooth navigation too. What do you think?
Thanks.