React-native-web: Support for Electron as a target

[necolas]

Is your feature request related to a problem? Please describe.

There's a project called react-native-electron by @PaulLeCam which adds/replaces a couple of modules in react-native-web with implementations built on Electron APIs.

https://github.com/PaulLeCam/react-native-electron/

I was thinking it could be a good idea to fold Electron support into React Native (for Web), as a build target, not a platform. Not every API in React Native today will be there in the future, e.g., WebView is being moved to "community maintenance": react-native-webview. So getting Web + Electron on their radar will be important if Electron support is to be included by the OSS community.

Describe a solution you'd like

Start figuring out how to support Electron as a target without introducing it as a "Platform". I'm thinking runtime checks are not viable, so this might be a packager problem. Perhaps configuring packagers to import *.web.electron before *.web for Electron targets, and getting something like this built into create-react-(native-)app and metro?

Describe alternatives you've considered

TBD

[PaulLeCam]

I like the idea, would be great to have React Native for Web also support Electron out of the box!
Please let me know if there is anything I can do to help the transition from react-native-electron.

The packager path seems like a good option, or at least I can't think of anything else that could effectively make it work without involving packagers.
Beyond create-react-(native-)app and metro I think adding support in electron-webpack could be useful as well for the integration with the existing Electron ecosystem, especially electron-builder.

[mpowell90]

+1
Currently running into the situation where I require file upload functionality on web and native desktop, so distinguishing between web and electron component files would be excellent.

[xmuskrat]

I implemented my own includes for both desktop.js and .darwin.desktop.js in my react-native-web impementation so I can both override for electron and each electron platform.

The feature I'd want most is wrappers for things that react-native offers for mobile and electron has a simillar api, so we could call a wrapper and it work. Examples:

Notification - https://electronjs.org/docs/tutorial/notifications
Bluetooth - https://electronjs.org/docs/api/structures/bluetooth-device
Power - https://electronjs.org/docs/api/power-monitor

That'd be cool to be able to just talk to one wrapper and also have react-native-web provide web versions of these, where possible.

Also discussing this here: https://expo.canny.io/feature-requests/p/support-electron-in-expo

[vonwao]

Totally would be a good add on for Expo. Maybe Expo needs more capital to tackle all these projects, but it has great potential!

[sanarena]

As Jonas said in Expo feature request page
React-native-windows exists (Currently in progress by Microsoft) and macOS currently have support for iPad apps (under Catalyst) so it should be better approach to just use Catalyst for macOS apps and integrate React-native-windows with Expo.

[EvanBacon]

https://dev.to/evanbacon/making-desktop-apps-with-electron-react-native-and-expo-5e36

[bugs181]

macOS currently have support for iPad apps (under Catalyst) so it should be better approach to just use Catalyst for macOS apps and integrate React-native-windows with Expo.

It's highly unlikely Catalyst will provide all of the desktop functionality that Electron (or react-native-macos) can.

Just one example off of the top of my head is folder/file access. Sure, Catalyst MIGHT make storage available or it could be some form of a sandbox, as Apple is known to do that.

What makes Electron/react-native-macos unique in this area is that it can use existing nodejs modules and not rely on some odd API that Catalyst MIGHT provide (which would require a rewrite of tens of thousands of npm packages).

[necolas]

@EvanBacon does Expo have official docs for electron integration? And how much of what Paul did for his package is available in the Expo electron adapter?

[arndeash]

@necolas this is the only Official Electron docs from Expo. https://github.com/expo/expo/blob/master/docs/pages/guides/using-electron.md
Being able to use React Native for Web with Electron would make React Native the ultimate tool (iOS, Android, Web and Mac/Windows/Linux apps with a single code base).

[piranna]

I'm one of the maintainers of re-start, that offer an out-of-the-box config for React Native to add support for web platform, and I personally have added support for Electron (wrapping web inside an Electron bundle) and Windows. At first it was designed as a project template that add all platforms, but if there's interest I'm thinking to refactor it in a CLI tool to add new platforms to current projects, that I think would be more useful.

[arndeash]

@piranna I love the vision and effort you put into re-start, but the repo seems dead to me, with no commits since April 2019.
Also I think it would be better if https://github.com/expo/expo/ or @necolas released official support "React Native for Web for Electron", or "React Native for MacOS (Catalyst)". I'm starting a new React Native client soon, and will try to get React Native for Web to work with Electron myself.

[piranna]

@piranna I love the vision and effort you put into re-start, but the repo seems dead to me, with no commits since April 2019.

A project that's correctly working don't need changes, only ones I would do is to update dependencies. If you don't want to use it it's up to you, but maybe @necolas would add support for "React Native web for Electron" but definitely will not add support for "React Native for macOS (Catalyst)" because it's out of scope, so your only chance is to use one project like re-start, or do the config to add support for React Native web by yourself. Better than that, do some contributions to re-start adding support for macOS-Catalyst and don't say it's dead anymore, that's the way Open Source works :-)

[necolas]

I'm going to leave Electron adjustments to Expo rather than attempting to account for them here.

[thorakmedichi]

@piranna Oh I would call it dead. I left an Issue asking for support in February and no one has replied. Also looking at a lot of the other issues in that repo that have not been addressed. Last issue anyone addressed was May 2019. It sure seems dead / not active and not "correctly working".

If there is a better place to ask for support or report issues then please let me know where you and your team will get to them in a timely fashion.

[piranna]

@thorakmedichi in open source, if you don't pay for support, nobody owns you nothing...

I'm available for paid support and freelance consultory and development. I've not written the rules...