Migration to React Native for Desktop

[CMCDragonkai]

Specification

Migrate the Polykey Desktop GUI from its current Electron-based setup to a React Native-based setup, ensuring native GUI compatibility with Android, iOS, macOS, and Windows. Maintain Electron for Linux compatibility, using React Native Web to achieve maximum code reuse across platforms. Integrate Tailwind CSS styling consistently, using twrnc for React Native components and standard Tailwind CSS for regular React web components.

Additional context

• React Native now officially supports stable desktop implementations for macOS and Windows maintained by Microsoft.
• Electron will be preserved exclusively for Linux due to its mature ecosystem and broad compatibility.
• Prior experimentation has demonstrated feasibility of React Native Web integration with Electron.
• Using twrnc (Tailwind React Native Classnames) allows consistent styling between React Native Web components and regular React web components styled with Tailwind CSS.
• Ensure configuration consistency between twrnc and standard Tailwind CSS setups.
• Compatibility and packaging on NixOS must be validated.

Tasks

1. Set up a unified React Native and React Native Web monorepo supporting all target platforms (Android, iOS, macOS, Windows, Linux).
2. Integrate official React Native desktop implementations (macOS, Windows).
3. Configure Electron specifically for Linux, integrating React Native Web.
4. Configure and integrate Tailwind CSS for regular web React components.
5. Set up and configure twrnc for React Native Web components.
6. Validate consistent Tailwind configurations across platforms.
7. Test and document the unified workflow and setup clearly for developers.

[linear]

ENG-551

[CMCDragonkai]

Basically Polykey-Mobile uses React-Native. Polykey-Desktop also uses React-Native. But we then share code between React-Native and Electron by using React Native Web. That's the idea.

[CMCDragonkai]

Note that Desktop would bundle Polykey-CLI. Then the "daemon" is run and controlled by Desktop. This makes Desktop a "client" app, not the agent app, simplifying the desktop app. This means we shouldn't require https://hacks.mozilla.org/2024/12/introducing-uniffi-for-react-native-rust-powered-turbo-modules/ at all for Desktop.

However https://hacks.mozilla.org/2024/12/introducing-uniffi-for-react-native-rust-powered-turbo-modules/ may be useful for Mobile. Since the Mobile app wouldn't be bundling Polykey-CLI, but instead would directly represent a client and agent in one go.