Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
brunolemos opened this issue Jun 3, 2019 · 46 comments
Closed

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

brunolemos opened this issue Jun 3, 2019 · 46 comments
Labels
🗣 Discussion This label identifies an ongoing discussion on a subject

Comments

@brunolemos
Copy link

brunolemos commented Jun 3, 2019

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/

image

@brunolemos
Copy link
Author

brunolemos commented Jun 3, 2019

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

@David-Melo
Copy link

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

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

kelset commented Jun 4, 2019

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
Copy link
Member

pvinis commented Jun 4, 2019

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
Copy link

wbroek commented Jun 4, 2019

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
Copy link

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
Copy link
Member

radex commented Jun 14, 2019

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
Copy link
Member

kelset commented Jun 14, 2019

👋 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
Copy link
Member

radex commented Jun 28, 2019

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

facebook-github-bot pushed a commit to facebook/react-native that referenced this issue Jul 4, 2019
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
Copy link
Author

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

@radex
Copy link
Member

radex commented Aug 6, 2019

@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
Copy link

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

@brunolemos
Copy link
Author

brunolemos commented Oct 7, 2019

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
Copy link

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
Copy link
Member

radex commented Oct 8, 2019

@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
Copy link

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

@radex
Copy link
Member

radex commented Oct 9, 2019

@fungilation
Copy link

Which just landed in RN 0.61.2

@eveningkid
Copy link

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

@djschilling
Copy link

djschilling commented Oct 9, 2019

@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
Copy link

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
Copy link
Author

brunolemos commented Oct 14, 2019

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
Copy link

@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
Copy link
Author

@ruimagalhaes thanks, that make the build work!

But the app only runs on Release mode, right?

On Development mode I get this:

Screen Shot 2019-10-19 at 14 58 51

@brunolemos
Copy link
Author

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:

Kapture 2019-10-19 at 16 00 49

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

@petrbela
Copy link

petrbela commented Oct 19, 2019

@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)
    Screen Shot 2019-10-19 at 9 22 13 PM
  • change your scheme's Run > Build configuration to Release
    Screen Shot 2019-10-19 at 9 25 20 PM
  • and change in Pods > React-Core > Build Phases > Compile Sources > RCTWebSocketModule.m to iOS only
    Screen Shot 2019-10-19 at 9 26 26 PM
    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
Copy link

kaiyes commented Oct 20, 2019

Thanks a lot @petrbela & @ruimagalhaes . It worked 😄 A vanilla fresh React-native init project on 61.2, macOs - catalina and xcode 11
Screenshot 2019-10-20 at 8 09 12 am

@Zorgatone
Copy link

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

@djschilling
Copy link

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
Copy link

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
Copy link

kaiyes commented Dec 11, 2019

facebook/react-native#27469 (review)

@charpeni
Copy link
Member

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

@mgcrea
Copy link

mgcrea commented Feb 14, 2020

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
Copy link

corasan commented Feb 17, 2020

@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
Copy link

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
Copy link
Member

@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
Copy link

@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
Copy link

@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
Copy link

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
Copy link

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
Copy link

mgcrea commented Apr 3, 2020

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
Copy link

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


@kevinvangelder
Copy link

@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
Copy link

So, for example I already see one limitation:
image
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)?

@kelset kelset closed this as completed Jun 10, 2021
@react-native-community react-native-community locked and limited conversation to collaborators Jun 10, 2021

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
🗣 Discussion This label identifies an ongoing discussion on a subject
Projects
None yet
Development

No branches or pull requests