Move to a Single Framework + Web App Revamp For Single-Screen Pages

[amalnanavati]

Currently, the web app has a strange mix of React (e.g.,

,

, etc.) and React Native Web (e.g., ). However, not only are they different frameworks, but they also have equivalent functionality. If I recall correctly, React Native Web was first added for its flex features, but that is equivalent to CSS's Flexbox, which is documented here.

This issue encompasses the following:

1. Decide on one framework and stick with it. Since React Native Web is really meant for cases where we want to export the same app as an app for the App Store (which is not the case), I'd recommend sticking with React.
2. In the process of shifting the entire app to one framework, the assignee of this issue should also clean up the app and be more intentional about space with single-screen pages (which all app pages now are). In other words, in the process of addressing this issue there should also be a top-down revamp of this app, including:
   1. Removing unnecessary nested HTML elements. As noted in Implemented vertical centering #66 , the app has many unnecessary nested tags including <>, <div>, <React.Fragment>, and <View>.
   2. Be more intentional about flex space. Are all parent elements flex elements? Are we properly using flexGrow and flexShrink? Are we properly implementing the two half-screen concept of the app (where the half-screens are in a column in portrait and a row for landscape). These questions will be key to ensuring the app works across devices.
      1. Another way to phrase the above point is that it will be a cleanup and second iteration of the app's responsiveness. Our responsiveness code as of Make App Responsiveness #60 is functional, but since we were modifying the responsive app design while writing the code (and since the app started out without being responsive at all), the code became a bit messy. Since this issue will involve a whole app revamp anyway to remove React Native Web anyway, it is worthwhile also cleaning up and simplifying the app's responsiveness in the process.