Got my react-native app running on macOS via Apple's Project Catalyst

Got my react-native app running on macOS via Apple's Project Catalyst(twitter.com)

4 points by brunolemos 6 years ago | 3 comments

brunolemos 6 years ago |

This is a react-native app that has nested scrolling and swipe gestures using react-native-gesture-handler. Both of this worked great when running on macOS, which is amazing.

What didn't work for me: - Development mode (only Release mode, because of the failing WebSocket module) - Firebase - Deep linking

Overall impression: - Amazing to be able to reuse the same code across iOS, Android, Web, macOS and Windows - 99% of the layout looks correct, noticed only one small part breaking - Some performance are great and some are worse than the iPad version, need to investigate - Bundle size: 9,1MB (compare this to the Electron version: 181,1MB)

Steps: - Upgrade your macOS to Catalina - Upgrade Xcode to v11.1+ - Upgrade your app to react-native 0.61.2+ - On Xcode, at the General tab, enable the "Mac" device target - Build - You will get some build errors. Go to the Pods project, search for the failing Target, tap Build Phases > Compile Sources and choose only "iOS" instead of "macOS + iOS" (temporary fix)

tomduncalf 6 years ago |

This is really exciting, I'd love to try out a build if you're able to share at some point. Nice work!

I experimented with running a React Native app on desktop earlier in the year. react-native-macos didn't seem ready for prime time and the app looked completely different to how it did on mobile - might be OK for simpler apps but the app I was porting had a very bespoke look and feel, most of which react-native-macos seemed to ignore in favour of default macOS widgets. I didn't take a proper look at react-native-windows, and using ReactXP would require rebuilding the whole UI to use their widgets.

What ended up working surprisingly well was using react-native-web to render the app to a browser, then running this in Electron (so that the app could communicate over IPC to a native backend for audio playback, more or less sending the same messages you would over the RN bridge over IPC instead) - I was pleasantly surprised how 95% of the UI "just worked", the only real changes I had to make was adding "onMouseX" handlers in places where I was using "onTouchX".

But for well documented reasons, Electron apps aren't always ideal, so being able to run RN natively like this would be really cool! I wonder if react-native-windows enables you to do more or less the same on Windows, and if there is a Linux equivalent? If not, the Electron approach would probably still win out for my use case, but definitely an area I'm excited to see development in.

brunolemos 6 years ago | |

That's what I did as well, tried react-native-macos but that didn't work. I also have an Electron version using react-native-web, which works great.

Now, with Apple Catalyst, things got really interesting. Try it on your project and let me know how it goes, specially the performance. I haven't tried react-native-windows yet but that's on my radar. I don't think we have a high quality alternative for Linux.