Architecture of the app

[baltpeter]

To build a mobile app for Datenanfragen.de, we have decided to use React Native. The question now is how we want to do that, especially with regards to sharing code between the existing https://github.com/datenanfragen/website and the new mobile app.

• Despite what the name might suggest, (P)react components cannot be used in React Native. React Native doesn't use HTML but has its own primitive components ("core components": <View>, <Text>, etc.).
• Their philosophy is not "write once, run anywhere" but "learn once, write anywhere".
• Thus, we won't be able to just reuse our existing Preact code in React Native.
• The other direction (outputting a web app from React Native code) is possible through react-native-web. It seems like this could even output a Preact instead of a React app (https://docs.expo.dev/guides/using-preact/).
• There is react-native-react-bridge which allows using (P)react components directly in React Native but only through a webview. But honestly if we decide to go that route, it would probably be better to use something more mature like Cordova.

This essentially leaves us with three options:

1. Rewrite website in React Native. I'm quite strongly opposed to that.
2. Have the mobile app be a webview.
3. Extract as much of the logic and reusable code (hooks!) from website into one or more libraries but write a separate UI for React Native.

I'm leaning quite strongly towards option 3. My reasoning:

• website isn't built as a pure Preact app, we have quite a bit of code in Hugo templates that we wouldn't be able to use anyway.
• We are planning to majorly revamp the UI for the apps anyway, there is no need to port the current generator to mobile, for example.
• Some of the new features we're planning won't work on the web.
• Other projects can benefit from our shared libs (as we're already seeing for letter-generator).
• From what I've gathered, this seems to be the preferred approach (https://www.youtube.com/watch?v=QO7SkFqRd7s, https://www.youtube.com/watch?v=O8d_42Wc-po).