Web build of the app
React Native and Expo support building apps to a web target: It will compile to a single page application that can be hosted on the website.
For a long time I actually wanted to do this for the Renewal website: When users go to the site they can use the news recommender right there (but also access additional resources like registration for contests, and the contest dashboard).
I spent some time this week working on getting a web build to work, but it turns out to be more challenging than I hoped it would be. I have fixed some issues that were preventing the app to run at all (mostly some dependencies that needed to be updated to support react-native-web).
The article view more-or-less works using react-native-web-webview
which basically displays the page in an iframe, with the rest of the app around it.
But there are some other blocker issues:
-
The biggest problem is that the UI library we have been using for the app, NativeBase, does not seem committed to supporting react-native-web. There are many known issues (several listed at https://github.com/GeekyAnts/NativeBase-KitchenSink/issues/81) that have not been fixed or worked on in several years. I found a work-around for one of the issues, but others might continue to plague us. Might have to drop NativeBase, or fork it, or something but either way would be a lot of effort. Better to continue to try to work around it for now... -
The list of article cards displaying recommendations looks ok, but there are some issues: -
Most importantly, there is no way to refresh the recommendations. At least on a desktop browser (I have not tried mobile) there is no touch support for dragging to refresh. It also does not display the refresh button at the top of the list. -
The header/side menu button remains fixed at the top of the page and does not follow when the user scrolls down. -
Likewise, the button for jumping to the top of the page remains fixed at the very bottom of the list; it does not float over the current position. -
There is a superfluous inner scrollbar (at least on my chrome) that moves the list up and down a couple pixels and that's it. The outer scrollbar actually scrolls the list (there are some extra pixels somewhere, and the wrong overflow settings in the CSS I guess...) -
The "Share" button does not work at all--it would have be replaced with a web-specific link sharing widget.
-
-
The article view mostly works--I think we can make the header bar a little bigger. But there is also a problem where the article interaction buttons (like/dislike/etc.) are pushed down to the bottom of the page and can only be found by using a second outer scrollbar. This is just a layout issue of some sort... -
The "Settings" page basically works but has some minor layout/display issues. -
The "My account" page is completely broken. Clicking on it blanks the application out completely requiring the page to be reloaded to get anything back. I see a number of javascript errors in the console when I click on it but I'm not sure what's going on. -
If the browser window is narrow (like the dimensions of a smartphone) the app looks ok, but on a full screen browser it looks awful (same issues as #42).
Once we get the app uploaded to the Apple App Store, and a public version of the app on the Google store, this will be less important since it will be easier to install the app (right now getting a public version of the app on Google is something we can do any time--just need to decide to push the button--still working on Apple). But it might still be nice to have a web version as well.