feat: add react-native-macos support #513
Conversation
|
I’m not sure we’re able to downgrade react native, as we only super fabric on 0.74 |
|
@Saadnajmi @tido64 would |
It should. The reason we don't recommend it is because it will introduce duplicates of CLI, Metro, etc. It can be confusing to debug because we don't know which is being used. |
|
I'll also add that maybe adding a separate |
|
A separate Sidenote: Does macOS support actually do anything, as in, are we respecting like the safe area of the MacBook notch? If the blocker is that a project that depends on this iOS only project shows ups in macOS projects, then RN 0.74 has a change to not do that, where codegen will ifdef out platforms not supported in the podspec: facebook/react-native#42047 |
|
For macOS Fabric support, we're close. I think it's suitable enough to test. RNM 0.74 will come, soon. We're actively working on it, my plan is for it to come before 0.75 releases, but I'm hesitant to guess a better timeline than that. |
|
@Saadnajmi @tido64 I'm not even sure I can get RNTestApp to build at this rate. The RNTestApp iOS example app runs fine, but I cannot get it to build for macOS. Have you seen this "Cannot create I tried making some post-install changes to |
That's the approach I took in FormidableLabs/react-native-app-auth#1002, but I found integrating into a monorepo is really hard and RNTA was quite attractive for handling that for me (and Tommy's video walkthrough was a blessing). When you say a "separate |
I'm not entirely sure. I just mirrored the iOS code:
So, perhaps it does something except for windows.
I'm not sure why I've not run into that codegen problem, but react-native-safe-area-context does actually build and run on react-native-macos; it's implemented via CompatNativeSafeAreaProvider, a fully JS solution. My goal with this PR was to make a NativeSafeAreaProvider for macOS, even if it always passed zero insets, to replace the CompatNativeSafeAreaProvider, as it's causing errors to spew in the CLI upon window resize:
So it's blocking my usage of Stack in React Navigation (unless I freeze the window size). |
Try setting the deployment targets in the diff --git a/react-native-safe-area-context.podspec b/react-native-safe-area-context.podspec
index 8b98104..18dccdc 100644
--- a/react-native-safe-area-context.podspec
+++ b/react-native-safe-area-context.podspec
@@ -18,6 +18,10 @@ Pod::Spec.new do |s|
s.source_files = "ios/**/*.{h,m,mm}"
s.exclude_files = "ios/Fabric"
+ s.ios.deployment_target = "12.4"
+ s.osx.deployment_target = "10.15"
+ s.visionos.deployment_target = "1.0"
+
s.dependency "React-Core"
if fabric_enabledWe should target macOS 11.0 instead to get rid of this warning:
diff --git a/example/macos/Podfile b/example/macos/Podfile
index a9ec924..c16ad9e 100644
--- a/example/macos/Podfile
+++ b/example/macos/Podfile
@@ -6,24 +6,6 @@ require "#{ws_dir}/node_modules/react-native-test-app/macos/test_app.rb"
workspace 'SafeAreaContextExample.xcworkspace'
-my_post_install_function = ->(installer) {
- puts "Running custom post_install with installer: #{installer}"
- installer.pods_project.targets.each do |target|
- case target.name
- when "react-native-safe-area-context"
- target.build_configurations.each do |config|
- # For some reason it gets set as 10.6 if we don't do this.
- config.build_settings[MACOSX_DEPLOYMENT_TARGET] = '10.15'
- end
- when /\AReact/, /\ARCT/
- target.build_configurations.each do |config|
- config.build_settings['CLANG_ENABLE_OBJC_WEAK'] = 'YES'
- config.build_settings['CLANG_ENABLE_OBJC_ARC'] = 'YES'
- config.build_settings['CLANG_CXX_LANGUAGE_STANDARD'] = 'C++20'
- end
- else
- end
- end
-}
+platform :osx, '11.0'
-use_test_app!({ post_install: my_post_install_function })
\ No newline at end of file
+use_test_app!
diff --git a/react-native-safe-area-context.podspec b/react-native-safe-area-context.podspec
index 8b98104..3d1e5c6 100644
--- a/react-native-safe-area-context.podspec
+++ b/react-native-safe-area-context.podspec
@@ -12,12 +12,16 @@ Pod::Spec.new do |s|
s.authors = package['author']
s.homepage = package['homepage']
- s.platforms = { :ios => "12.4", :tvos => "12.4", :visionos => "1.0", :macos => "10.15" }
+ s.platforms = { :ios => "12.4", :tvos => "12.4", :visionos => "1.0", :macos => "11.0" }
s.source = { :git => "https://github.com/th3rdwave/react-native-safe-area-context.git", :tag => "v#{s.version}" }
s.source_files = "ios/**/*.{h,m,mm}"
s.exclude_files = "ios/Fabric"
+ s.ios.deployment_target = "12.4"
+ s.osx.deployment_target = "11.0"
+ s.visionos.deployment_target = "1.0"
+
s.dependency "React-Core"
if fabric_enabledI got the app building, but it's blank?
If there are a lot of example code, having an |
|
Woah, thanks! I'll give this a spin today and look into why it's just showing a white screen. I've never understood why Podspec supports both Due to the need to maintain a Fabric dev environment for iOS, I guess I should refactor this to remove RNTestApp and put a bespoke But won't that approach give us two CLIs and two Metros all the same? I don't quite understand how it's any better than just continuing to use RNTestApp with |
In this repo, In app-auth's case, you can "workaround" dupes by explicitly running |
|
@tido64 That worked great, thanks! 
I recognise this. Your screenshot is a blank window only because at your time of day, it's dark mode and AppKit has helpfully chosen to turn the text white 😄 I'm not sure how to open this "dev menu" on macOS 🤔 |
I think right-clicking anywhere should open it. |
|
Aha! You focus the Metro CLI and press 'D' to bring up the examples. Pretty smart! 
That green gutter seems to indicate the scrollbar insets. Unclear whether that counts as safe area; I think not, because of the next example. 
It's always reporting zero for the insets here, which may well be true as macOS tends to have no unsafe insets, except maybe the notch. Anyway, its compiling and running, and it doesn't spew errors in the CLI when I resize the window (though I note it didn't either with the compat components enabled, so I guess it's some weird interaction between React Navigation and the provider that I was bumping into). |
🤦 |
|
@Saadnajmi @tido64 I've restored the original example app back to its initial state and removed RNTestApp. I've also added I'm running |
|
I think the main code changes seem fine. They seem to be the standard way of doing this. I didn't see any issues there I'm not too certain on introducing a second example just for macOS - and presumably, react-native-macos will update one day to 0.74. @janicduplessis what do you think? |
Wait, why did you have to remove RNTA? You could've kept it for
It looks like you've called your component |
Just misunderstanding the request 😅 so we're happy to use RNTA for the macOS app, and just want it in a separate folder of its own rather than integrating it into the existing I'll make that change later.
Ah, thanks. I often run into this error and had no idea
From the above discussions, it sounds like our options are:
Please advise on how I should proceed. |
I'd be happy with |
|
@tido64 so is your position:
|
Yes, as long as the maintainers are happy with it. |
shirakaba
changed the title
|
Where are we standing with this today? What version is react-native-macos on now? |
|
@jacobp100 We just updated to version 0.75 |
|
Is it now possible to remove the extra example folder here? |
Co-authored-by: Tommy Nguyen <[email protected]>
I temporarily renamed the "name" field in package.json to "RNSACExample", then ran `npx react-native-macos-init` to generate a project by that name.
|
Now that I note that #538 is also in progress, based on RNTA and If a maintainer (@janicduplessis?) could just specify what would make them happy to merge this, I'd like to get this across the line! |
|
@shirakaba Thanks for pushing this forward. I think it looks good overall. One thing I would like, but can be done in a follow up is add a macos build to the github action CI. Also do macos supports the new arch? Currently it seems like these changes only apply to old arch. |
|
Can you also run yarn format:write |
| const escape = require('escape-string-regexp'); | ||
| const exclusionList = require('metro-config/src/defaults/exclusionList'); | ||
| const pak = require('../package.json'); | ||
| const path = require('node:path'); |
There was a problem hiding this comment.
Are these changes needed or leftover from example changes?
There was a problem hiding this comment.
The default metro.config.js that comes with React Native iOS/Android apps, and the modified one currently on main, does not support out-of-tree platforms. A few changes are needed to do things like alias react-native to react-native-macos on macOS. Additional changes would be needed if supporting react-native-windows in future.
One could express all that without @rnx-kit/metro-config, but it's not pretty. Here's the metro.config.js that you'd get if you set up a brand new React Native v0.75 project with both macOS and Windows support. It's rather verbose even before adding the support needed by this library-plus-example repo (referencing the where to find react-native-safe-area-context):
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const fs = require('fs');
const path = require('path');
const exclusionList = require('metro-config/src/defaults/exclusionList');
const rnwPath = fs.realpathSync(
path.resolve(require.resolve('react-native-windows/package.json'), '..'),
);
//
/**
* Metro configuration
* https://facebook.github.io/metro/docs/configuration
*
* @type {import('metro-config').MetroConfig}
*/
const config = {
//
resolver: {
blockList: exclusionList([
// This stops "react-native run-windows" from causing the metro server to crash if its already running
new RegExp(
`${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
),
// This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
new RegExp(`${rnwPath}/build/.*`),
new RegExp(`${rnwPath}/target/.*`),
/.*\.ProjectImports\.zip/,
]),
//
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);@rnx-kit/metro-config does all that under the hood, as well giving some other goodies like better monorepo support and supporting extending Expo's metro config.
Done!
Got it 👌
The last update on October 24th was that they aren't quite ready to turn it on by default, but they're working on it. As this PR is just a bunch of ifdefs around the iOS implementation, I've not thought too deeply about the New Architecture. Could you point me at the bits that iOS is doing specifically to support new arch? Either way, I'd be happy to come back for New Arch as a follow-up if that'd be alright! |
|
https://github.com/th3rdwave/react-native-safe-area-context/tree/main/ios/Fabric, we can do that in a follow up so can test properly. |
Summary
Adds react-native-macos support and integrates react-native-test-app.Downside: downgradesreact-nativefrom^0.74.2to~0.73.9in order to keep all React Native versions on the same minor (which reduces the chance of duplicated dependencies like Metro).Update:
example-macos, based on react-native-test-app. This is a compromise to allow us to continue to develop Fabric onreact-nativev0.74 whilst still having access toreact-native-macoswhich is limited to v0.73 for now. Mixing them in the same folder would result in clashes of tooling like the CLI and Metro, as discussed below.Test Plan
I've ported the existing iOS sample app to macOS so we can test it manually. Not sure whether this repo has automated tests.
Status
PR now ready for review as the following tasks have been completed.
See now-complete checklist of tasks
/Users/jamie/Documents/git/react-native-safe-area-context/example/macos/Pods/Headers/Public/React-Core/React/RCTBridgeModule.h:172:1 Property with 'retain (or strong)' attribute must be of object type. It sounds like this issue, but I've not been able to figure out how to fix it._providerViewand_bridgebeing unavailable. Perhaps due to the same root cause.10.6. It's specified in the generatedexample/macos/Pods/Pods.xcodeproj/project.pbxproj, but I'm not sure how to configure that declaratively.In future
Once
[email protected]is available, it would be nice to use a single example directory again and use React Native Test App to manage all the platforms.