⬆️ 💡 ⚠️ solution to popups in react-native-web

[Abby-Wheelis]

Before the conversion, most of the popups throughout the app were ionic popups of some manner. As we've re-written the UI, these became Modals, Dialogs, Snackbars, etc that we show/hide when to display them to the user. This works, but on pages like profile it's quite messy to have 8-10 different states for popup visibilities. And as we continue down the re-write path into things like upload service rewrite there are even more popups, but there is no React component in a .ts file to show/hide something in, so we need to consider if there's a way to more universally and elegantly handle this issue.

Starting this issue to compile solutions and/or libraries we might consider to handle popups.

[JGreenlee]

From what I've read, React Native apps usually fulfill this need by using the Alert API (https://reactnative.dev/docs/alert) - but this has not been implemented in React Native Web.

One person made a polyfill for Alert on RN Web that uses a separate library called SweetAlert.
necolas/react-native-web#1026 (comment)
https://snack.expo.dev/CVFHZ-mJx

However, because this is a separate library the style will not match the rest of the app. We have been using React Native Paper for everything else to keep the UI visually cohesive.

I think ideally, we want to be able to programmatically generate and display RN Paper <Dialog>s without them needing to be created ahead of time. Maybe we can come up with our own method of doing this.
It would be particularly cool if we can do this as our own polyfill. Much like the above polyfill, we would implement the alert() and prompt() methods that the Alert API has, but instead of launching SweetAlerts they would launch RN Paper <Dialog>s.

If it turns out to be useful and fairly re-usable, we could share this back to the RN Paper community (because I think a significant number of people using RN Paper are doing so because it supports RN Web).