Support Project Catalyst (running iPad apps on macOS) #131

brunolemos · 2019-06-03T19:10:05Z

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 · 2019-06-03T19:10:35Z

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

David-Melo · 2019-06-03T21:23:23Z

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

kelset · 2019-06-04T13:06:01Z

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 · 2019-06-04T14:20:15Z

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 · 2019-06-04T19:00:15Z

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 · 2019-06-05T17:34:43Z

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:

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 · 2019-06-14T11:58:22Z

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).

kelset · 2019-06-14T13:20:24Z

👋 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 · 2019-06-28T12:33:50Z

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

Summary: This PR adds initial support for Project Catalyst a.k.a. UIKitForMac. This is not yet meant for production, but this is enough for RNTester to successfully compile and mostly work :) Some APIs are not supported on the Mac -- e.g. telephony, and deprecated APIs are removed on Mac ��-- those had to be ifdef'd out via platform checks. The biggest limitation right now is that I couldn't get Web Socket code to successfully compile, and so there are a lot of temporary platform checks for that , and the RCTWebSocket.xcodeproj is marked as not supporting UIKitForMac. Again -- temporary, until someone with more knowledge knows how to fix this. react-native-community/discussions-and-proposals#131 ## Changelog [iOS] [Added] - Fixed compilation for macOS (Project Catalyst) -- not meant for production use yet Pull Request resolved: #25427 Test Plan: - Open RNTester/RNTester.xcodeproj with Xcode 10.2, run it like a normal iOS app -- make sure it compiles and runs correctly (no regression) - Open the same project with Xcode 11 beta 2 (or higher) on macOS Catalina beta, select "My Mac" as device target, and run -- see that it actually compiles and runs. **Note** there are unfortunately some required steps: - change build configuration to Release (because packager doesn't work correctly yet) - change development team to yours if Xcode tells you to - go to RNTester project → Build phases → Link binary with libraries, and change `platforms` for `libRCTWebSocket.a` to `iOS` (without Mac compatibility). I can't commit that change because it breaks compatibility with earlier Xcode versions The two extra steps for successful compile will disappear once web socket compilation for Catalyst is fixed Reviewed By: mmmulani Differential Revision: D16088263 Pulled By: sammy-SC fbshipit-source-id: 9c0b932b048e50a8e0f336eaa0612851b1909cae

brunolemos · 2019-08-06T07:54:24Z

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

radex · 2019-08-06T08:04:31Z

@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 · 2019-10-04T05:35:05Z

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

brunolemos · 2019-10-07T22:11:00Z

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 · 2019-10-08T05:14:40Z

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 · 2019-10-08T09:05:58Z

@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

kirill-konshin · 2019-10-08T23:54:39Z

@radex can you share more how you managed to do it?

radex · 2019-10-09T08:15:55Z

@kirill-konshin facebook/react-native#25427

fungilation · 2019-10-09T18:28:29Z

Which just landed in RN 0.61.2

eveningkid · 2019-10-09T19:42:47Z

@fungilation cool, is there any information about it somewhere?

djschilling · 2019-10-09T20:00:25Z

@radex i tried to run my application with react-native 0.61.2. but i still get the error described by @brunolemos

Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_RCTSRWebSocket", referenced from:
      l_OBJC_$_CATEGORY_RCTSRWebSocket_$_React in libReact-Core.a(RCTWebSocketModule.o)
      objc-class-ref in libReact-Core.a(RCTWebSocketModule.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

I did the steps you mentioned in the Pull Request.
The last step to change the platforms for libRCTWebSocket.a to iOS was not possible.
The lib was not showing up in my setup.

Can this be the problem?

fungilation · 2019-10-13T08:09:19Z

With my app, while I can build on RN 0.61.2 with the new Mac target checked off in Xcode 11.1. Running the app would crash with this in log:

2019-10-13 01:02:39.076931-0700 wonderswipe[1815:480708]  - <AppMeasurement>[I-ACS036002] Analytics screen reporting is enabled. Call +[FIRAnalytics setScreenName:setScreenClass:] to set the screen name or override the default screen class name. To disable screen reporting, set the flag FirebaseScreenReportingEnabled to NO (boolean) in the Info.plist
2019-10-13 01:02:41.009396-0700 wonderswipe[1815:480508] 
[CodePush] Loading JS bundle from file:///private/var/containers/Bundle/Application/1C135C34-D15C-443E-9D27-D5746CBB3A2F/wonderswipe.app/main.jsbundle
2019-10-13 01:02:41.014 [info][tid:main][RCTRootView.m:293] Running application wonderswipe ({
    initialProps =     {
    };
    rootTag = 1;
})
2019-10-13 01:02:41.540029-0700 wonderswipe[1815:480508] [Crashlytics] Version 3.14.0 (144)
2019-10-13 01:02:41.718366-0700 wonderswipe[1815:480733] 6.5.0 - [Firebase/Analytics][I-ACS023007] Analytics v.60004000 started
2019-10-13 01:02:41.718953-0700 wonderswipe[1815:480733] 6.5.0 - [Firebase/Analytics][I-ACS023008] To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled (see http://goo.gl/RfcP7r)
2019-10-13 01:02:41.738126-0700 wonderswipe[1815:480734] 6.5.0 - [Firebase/Messaging][I-FCM001000] FIRMessaging Remote Notifications proxy enabled, will swizzle remote notification receiver handlers. If you'd prefer to manually integrate Firebase Messaging, add "FirebaseAppDelegateProxyEnabled" to your Info.plist, and set it to NO. Follow the instructions at:
https://firebase.google.com/docs/cloud-messaging/ios/client#method_swizzling_in_firebase_messaging
to ensure proper integration.
2019-10-13 01:02:41.760808-0700 wonderswipe[1815:480725] [Assert] Unsupported use of UIKit API off the main thread: UIAccessibilityIsAssistiveTouchRunning()
2019-10-13 01:02:41.764113-0700 wonderswipe[1815:480725] [Assert] Unsupported use of UIKit API off the main thread: UIAccessibilityIsGuidedAccessEnabled()
2019-10-13 01:02:42.549130-0700 wonderswipe[1815:480719] Creating client/daemon connection: 85A15761-0B94-4B20-9A18-85AF1F9085F0
2019-10-13 01:02:42.752213-0700 wonderswipe[1815:480719] Got the query meta data reply for: com.apple.MobileAsset.MacinTalkVoiceAssets, response: 0
2019-10-13 01:02:42.756586-0700 wonderswipe[1815:480719] Consumed extension
2019-10-13 01:02:42.804277-0700 wonderswipe[1815:480719] Got the query meta data reply for: com.apple.MobileAsset.MacinTalkVoiceAssets, response: 0
2019-10-13 01:02:43.332164-0700 wonderswipe[1815:480722] [Fabric] failed to download settings Error Domain=FABNetworkError Code=-5 "(null)" UserInfo={status_code=403, type=2, request_id=369edc1957b9d5ae63919d6fc910e561, content_type=application/json; charset=utf-8}
2019-10-13 01:02:43.334224-0700 wonderswipe[1815:480508] Sentry Started -- Version: 4.4.0
2019-10-13 01:02:54.780 [fatal][tid:com.facebook.react.CodePushQueue] NSInvalidArgumentException: *** -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from objects[0]
2019-10-13 01:02:54.780741-0700 wonderswipe[1815:480820] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from objects[0]'
*** First throw call stack:
(0x18fbd498c 0x18f8fd0a4 0x18fc2a3f8 0x18fc3375c 0x18fac15dc 0x18fab3470 0x104275b40 0x104271ec8 0x18fbdad90 0x18faaabd0 0x18faab7a8 0x104523ae8 0x104525bf8 0x10452595c 0x105a2d828 0x105a2ec04 0x105a35b74 0x105a36710 0x105a41ae4 0x18f8f1fa4 0x18f8f4ae0)
libc++abi.dylib: terminating with uncaught exception of type NSException

brunolemos · 2019-10-14T18:14:01Z

I can build

@fungilation New projects have a huge Podfile referencing a lot of modules, like React-cxxreact, etc. I suppose your setup is still the old one, without this huge Podfile, that's why you can build. Correct?

I don't think the build is working for people using the new setup.

the app would crash with this in log

You have Firebase running, but the Firebase sdk doesn't support targeting mac yet. They are working on it. (invertase/react-native-firebase#2698, firebase/firebase-ios-sdk#3144)

ruimagalhaes · 2019-10-19T17:30:49Z

@kaiyes I was having the same issue and eventually I got the app running by selecting the Pods Project on Xcode -> select the React-Core target -> Build Phases -> Compile Sources -> Change the platform of RCTWebSocketExecutor.m and RCTWebSocketModule.m to iOS only.

Hope it helps!

brunolemos · 2019-10-19T18:22:18Z

@ruimagalhaes thanks, that make the build work!

But the app only runs on Release mode, right?

On Development mode I get this:

brunolemos · 2019-10-19T19:19:51Z

Oh my god, it works! Even the swipe gestures using react-native-gesture-handler work great!

Here's DevHub running as a native macOS app:

Tweeted a more complete video here: twitter.com/brunolemos/status/1185636022346043392

petrbela · 2019-10-19T19:32:25Z

@brunolemos Correct, since development connects to the packager via a websocket (to enable hot reloading), and websockets don't work yet, you need to build in Release mode for Mac.

To reiterate, to get your app working:

make sure you're using RN >=0.61.2 (and macOS Catalina + Xcode 11 obviously)
select the Mac target (you also need to select iPad)
change your scheme's Run > Build configuration to Release
and change in Pods > React-Core > Build Phases > Compile Sources > RCTWebSocketModule.m to iOS only

If you're getting Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_RCTSRWebSocket" compilation error, repeat the last step (needs to happen every time you update your dependencies).

kaiyes · 2019-10-20T02:10:45Z

Thanks a lot @petrbela & @ruimagalhaes . It worked 😄 A vanilla fresh React-native init project on 61.2, macOs - catalina and xcode 11

Zorgatone · 2019-10-20T19:48:08Z

What needs to be done till web sockets will work in debug scheme on Mac Catalina?

djschilling · 2019-10-20T20:31:11Z

Thats a good question.

My app builds now, but at some point something fails in the js code and i don't know how to debug it in the release version.

wavejumper · 2019-10-27T21:57:57Z

In Clojurescript, I was able to work around this issue by implementing my own custom WebSockets module in Swift, I documented the process here

Some of the code above might be of use for JS people, however, I suspect React Native core requires the WebSocket module before you could overload/shim it...

kaiyes · 2019-12-11T01:38:31Z

facebook/react-native#27469 (review)

charpeni · 2019-12-11T14:43:04Z

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

mgcrea · 2020-02-14T10:23:05Z

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 · 2020-02-17T03:28:31Z

@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 · 2020-02-25T23:19:11Z

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 · 2020-03-21T07:55:34Z

@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 · 2020-03-23T22:13:06Z

@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 · 2020-03-23T23:52:56Z

@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 · 2020-04-02T06:32:53Z

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 · 2020-04-02T21:59:23Z

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 · 2020-04-03T09:32:59Z

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 · 2020-04-04T08:21:28Z

@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 · 2020-04-04T08:28:23Z

@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 · 2020-04-04T09:00:36Z

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)?

brunolemos mentioned this issue Jun 3, 2019

Support Project Catalyst (running iPad apps on macOS) facebook/react-native#25133

Closed

kelset added the 🗣 Discussion This label identifies an ongoing discussion on a subject label Jun 4, 2019

fungilation mentioned this issue Jun 5, 2019

Project Catalyst. Does it truly deprecates this RN fork? ptmt/react-native-macos#244

Closed

hramos mentioned this issue Jun 6, 2019

☂️ Supporting Xcode 11 and iOS 13 Beta facebook/react-native#25181

Closed

3 tasks

brunolemos mentioned this issue Jun 12, 2019

"What do you dislike about React Native?" June 2019 Edition #134

Closed

radex mentioned this issue Jun 28, 2019

[iOS] Initial UIKitForMac support facebook/react-native#25427

Closed

brunolemos mentioned this issue Oct 7, 2019

Build fails when targeting Mac (Project Catalyst) invertase/react-native-firebase#2698

Closed

11 tasks

wreiske mentioned this issue Nov 4, 2019

[NEW] Tablet support RocketChat/Rocket.Chat.ReactNative#1300

Merged

thesba mentioned this issue Nov 8, 2019

Undefined symbols for architecture x86_64 (React Native 0.61.2, Mac Catalyst) facebook/react-native#27166

Closed

Mogikan mentioned this issue Feb 11, 2020

[xcode11-feature] Add support for Catalyst/UIKitForMac xamarin/xamarin-macios#6210

Closed

kelset mentioned this issue Feb 14, 2020

0.62.x RC Discussion react-native-community/releases#157

Closed

6 tasks

robertying mentioned this issue Feb 21, 2020

[Feature request] run-ios supports mac catalyst target react-native-community/cli#998

Closed

saghul mentioned this issue Jul 15, 2020

Support for mac Catalyst jitsi/jitsi-meet#7319

Closed

kelset closed this as completed Jun 10, 2021

react-native-community locked and limited conversation to collaborators Jun 10, 2021

This issue was moved to a discussion.

Support Project Catalyst (running iPad apps on macOS) #131

Support Project Catalyst (running iPad apps on macOS) #131

Comments

brunolemos commented Jun 3, 2019 • edited Loading

brunolemos commented Jun 3, 2019 • edited Loading

David-Melo commented Jun 3, 2019

kelset commented Jun 4, 2019 • edited Loading

pvinis commented Jun 4, 2019

wbroek commented Jun 4, 2019

fungilation commented Jun 5, 2019

radex commented Jun 14, 2019

kelset commented Jun 14, 2019

radex commented Jun 28, 2019

brunolemos commented Aug 6, 2019

radex commented Aug 6, 2019

kirill-konshin commented Oct 4, 2019

brunolemos commented Oct 7, 2019 • edited Loading

xiao99xiao commented Oct 8, 2019

radex commented Oct 8, 2019

kirill-konshin commented Oct 8, 2019

radex commented Oct 9, 2019

fungilation commented Oct 9, 2019

eveningkid commented Oct 9, 2019

djschilling commented Oct 9, 2019 • edited Loading

fungilation commented Oct 13, 2019

brunolemos commented Oct 14, 2019 • edited Loading

ruimagalhaes commented Oct 19, 2019

brunolemos commented Oct 19, 2019

brunolemos commented Oct 19, 2019

petrbela commented Oct 19, 2019 • edited Loading

kaiyes commented Oct 20, 2019

Zorgatone commented Oct 20, 2019

djschilling commented Oct 20, 2019

wavejumper commented Oct 27, 2019

kaiyes commented Dec 11, 2019

charpeni commented Dec 11, 2019

mgcrea commented Feb 14, 2020

corasan commented Feb 17, 2020

kirill-konshin commented Feb 25, 2020

Naturalclar commented Mar 21, 2020

kirill-konshin commented Mar 23, 2020

robertying commented Mar 23, 2020

Andreychikov-Vasiliy commented Apr 2, 2020

kevinvangelder commented Apr 2, 2020

mgcrea commented Apr 3, 2020

Andreychikov-Vasiliy commented Apr 4, 2020

kevinvangelder commented Apr 4, 2020

Andreychikov-Vasiliy commented Apr 4, 2020

This issue was moved to a discussion.

brunolemos commented Jun 3, 2019 •

edited

Loading

brunolemos commented Jun 3, 2019 •

edited

Loading

kelset commented Jun 4, 2019 •

edited

Loading

brunolemos commented Oct 7, 2019 •

edited

Loading

djschilling commented Oct 9, 2019 •

edited

Loading

brunolemos commented Oct 14, 2019 •

edited

Loading

petrbela commented Oct 19, 2019 •

edited

Loading