Support Project Catalyst (running iPad apps on macOS)

[brunolemos]

Apple has just announced Project Catalyst on WWDC 2019, which allows iOS/iPad apps to run on macOS without modification. This is AWESOME.

We'd love if React Native could build and work correctly on macOS. That should be a supported scenario.

Beta is already available today for developers to test.
EDIT: Stable version of macOS Catalina is already available.

https://techcrunch.com/2019/06/03/ios-apps-will-run-on-macos-with-project-catalyst/

[brunolemos]

Not sure if should open an issue here or on react-native: facebook/react-native#25133

[David-Melo]

Didn't they also announce iPadOS? How does this affect react-native now that iOS and IPadOS might be two separate targets

[kelset]

Ok, so let's keep the discussion here, it fits better the format.

Few points (which ofc take with a pinch of salt):

• I feel that the likely outcome is that it will be something closer to react-native-tvos in terms of implementation than it being integrated in the main repo. (same answer for the new ipados)

• as you mentioned, they literally announced this less than 24hrs ago so I don't see this happening for a while

• this going into the main repo is mostly a decision that needs to happen internally at Facebook, because they need to evaluate if it fits with their needs first (hence why my first point) - so cc'ing @TheSavior @cpojer @fkgozali so that they can give some insight on their POV

• Just for reference, there was already some experimentation from @wbroek https://twitter.com/wbroek/status/1102361241811599365?s=20 and similarly, this is what MS has been doing for their macos implementation: https://twitter.com/LinguaBrowse/status/1102504112552374273

[pvinis]

I mean.. there is no Facebook.app for the mac right?? And it would be nice to reuse the iOS code, right? wink wink? :p

[wbroek]

That it can work I and some more people demonstrated but took some adjustments in the core of React Native; mostly deprecated API's because you must target the latest iOS/Mac.
So fully agree with @kelset that Facebook as to have a need because of the core changes; although with the Lean initiative a lot of old balast will be removed.

Planned to make a POC in the coming weeks with 0.60 to see what is working and needed change

[fungilation]

Ya I'm looking for docs and experience on this. How automatic is such "porting" from iPad to Mac?

Relevant, important links while I was researching this:

• Dimensions window support for Split View and Slide Over on iPad facebook/react-native#16152
• https://github.com/wix/react-native-navigation/blob/master/docs/docs/layout-types.md#splitview-ios-only
• https://developer.apple.com/design/human-interface-guidelines/ios/overview/ipad-apps-for-mac/

I disagree about treating ipadOS support in RN like tvOS. The latter is very different, while ipadOS is for all intents and purposes of app makers, the same as iOS 13. Dimensions window support for Split View and Slide Over on iPad in #16152 link above means afaik, I got what I need to fully convert my iPhone RN app to support the iPad's screen. Add splitView so my 1 column iPhone layout become 2 columns, then it should be ready for the new Catalyst conversion for macOS.

Apple's new HIG docs for iPad apps on Mac says explicitly that splitView on iPad will get automatic conversion to equivalent on macOS.

So this is my own plan for bringing my iPhone app (WonderSwipe) to iPad and Mac. Am I missing anything that needs RN core support to make happen, or am I right that all the pieces are already in place as I've outlined above? RNN provides the splitView, while Xcode 11 provides not just iPad layout but also a new Mac option you simply turn on. Will share hiccups I get along the way.

Anyone else thinking/planning something similar, on iPad/Mac adaptations of your RN apps? What else do you see missing inside RN that's needed for these adaptations?

[radex]

I feel that the likely outcome is that it will be something closer to react-native-tvos in terms of implementation than it being integrated in the main repo. (same answer for the new ipados)

I strongly disagree.

tvOS is treated by Apple as a separate OS, with most things in common with iOS and UIKit, but a separate target nonetheless.

iPadOS is only a marketing term. It's not really a separate OS, from a technical standpoint.

UIKit for Mac / Marzipan / Catalyst is a weird beast, but the way Apple treats it, Mac is only a separate device target for the iOS app. It's not listed as a separate OS in code (all platform checks reference iOS, not macOS), and you're not really supposed to create a separate Xcode target for Catalyst apps (the way you are for tvOS or watchOS -- or truly native/AppKit Mac apps), just check the checkbox, add necessary configuration for macOS, and if necessary -- add extra target environment checks in code to ifdef APIs not available on macOS/outside of macOS.

Therefore, the core of RN for Catalyst apps should remain the same, and in the same repo. A react-native-community repo(s) might (and should) spring up for enhancing Catalyst apps (supporting extra features only available for the Mac).

[ZComwiz]

@radex have you had any success building RN to catalyst on any recent version? The last building version was RN 64.0 for me.

[kelset]

👋 Radek - yeah, again, my was literally just a feeling because I wasn't really able to understand what iPad OS really was back then.

Upon further investigation, and your comment, I can rollback that 100%, yeah it's basically still iOS13 from our perspective 🤗

[radex]

Heads up: I began initial for for supporting Catalyst in React Native. More work needs to be done to polish everything to look good, but in general it was an hour or two of work to get it to compile properly:

facebook/react-native#25427

[brunolemos]

@radex will your commit make it to rn 61? do you think real world projects will build successfully for mac?

[radex]

@brunolemos I think it will make it to RN 61, but it's only the first step -- web socket doesn't work which is annoying for development, the layout and fonts are all broken… You should help out and contribute too :)

[kirill-konshin]

Any news about this? Catalina is going to be released this month, will it bring anything useful in scope of this topic?

[brunolemos]

Tried to build for mac (react-native 0.61.2).

Had build errors related to firebase (invertase/react-native-firebase#2698, firebase/firebase-ios-sdk#3144). Then I removed firebase.

Got this error:

Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_RCTSRWebSocket", referenced from:
      l_OBJC_$_CATEGORY_RCTSRWebSocket_$_React in libReact-Core.a(RCTWebSocketModule.o)

Removed the websocket pod but no change. How to pass through this error?

[xiao99xiao]

facebook/react-native#25427 did most of the work for apps not using RCTWebSocket, but more help are still needed for other apps like mine. 😔

[radex]

@brunolemos RCTWebSocket didn't compile for Catalyst, so I ifdef'ed it out of React Native build. If you manage to get to compile, send a PR to react-native repo

[kaiyes]

facebook/react-native#27469 (review)

[charpeni]

Introducing keyboard shortcuts to show up the dev menu here: facebook/react-native#27479.

[mgcrea]

Anyone has made it work with the latests 0.62.0-rc.2? I'm hitting facebook/react-native#27845. It would be really awesome to have macOS support soon!

[corasan]

@mgcrea, for now, you can just disable Flipper since it seems to be the cause of the error. You can comment out the lines that mention flipper in the AppDelegate.m file (lines 7 through 24, and lines 30 through 32).

[kirill-konshin]

Quick question, how to run with Mac target from console, is there an analog for react-native run-ios but for Mac? Or for now only XCode launch is supported?

[Naturalclar]

@kirill-konshin
there was a PR in the cli recently that added support to run MacOS target form the cli react-native-community/cli#1024

[kirill-konshin]

@Naturalclar I just tried [email protected] and @react-native-community/[email protected] and when I ran react-native run-ios --device "XXX" I still got No iOS devices connected. Looks like this PR hasn't been released yet? @robertying please clarify :)

[robertying]

@Naturalclar I just tried [email protected] and @react-native-community/[email protected] and when I ran react-native run-ios --device "XXX" I still got No iOS devices connected. Looks like this PR hasn't been released yet? @robertying please clarify :)

I think they haven’t released a new version containing this commit. I’m not one of the maintainers so I don’t know when they will release it either.

You can use something like patch-package to manually apply the commit diff as a workaround.

[Andreychikov-Vasiliy]

Anyone has made it work with the latests 0.62.0-rc.2? I'm hitting facebook/react-native#27845. It would be really awesome to have macOS support soon!

Seems that macos support not planned in nearest future.

[kevinvangelder]

Microsoft is hard at work building out the react-native-macos platform, which in my opinion is a far better solution than relying on Project Catalyst. Just recently they merged this PR: microsoft/react-native-macos#291

[mgcrea]

Microsoft is hard at work building out the react-native-macos platform, which in my opinion is a far better solution than relying on Project Catalyst. Just recently they merged this PR: microsoft/react-native#291

That's just amazing! Agree that project Catalyst has many shortcomings, eg. any macOS specific API is unavailable like handling file drops, using system menu, etc. that makes it currently a pretty poor option to build real applications.

[Andreychikov-Vasiliy]

@kevinvangelder I've created react-native(*) native module using $ create-react-native-module MyNativeModule --generate-example and build&run it on MacOS. So in theory I can implement in that module all that I can do in ordinary Objective-C application and connect it to react-native ui. Or I wrong?

---

• I've used 0.61.5+[iOS] Enabling RCTWebSocket on UIKitForMac (macOS Catalyst) facebook/react-native#27469 (0.62.x still have problem to run on macos)

[kevinvangelder]

@Andreychikov-Vasiliy Yes, in theory you should be able to write a Swift/Obj-C module using macOS APIs. You may run into shortcomings working with the react-native-macos bridge implementation (I don't know how complete it is in it's current state), but if you have issues now I would expect that they'll be resolved in the near future as Microsoft is putting a lot of time and effort into this.

[Andreychikov-Vasiliy]

So, for example I already see one limitation:

Sorry for maybe stupid question, but if NSAlert doesn't work with facebook/react-native & Catalyst but probably on microsoft/react-native fork it will work (now or in future)?

[amitojsingh]

I was trying to add mac Catalyst to my project. However, I am getting
error build: Undefined symbol: __swift_FORCE_LOAD_$_swiftUIKit
not sure what's wrong.