How can I make the react-native-macos work with ios?

dev-johnny-gh commented 1 month ago

Description

I'm working on a project which needs to be compatible with both macOS and iOS. so I install react-native-macos with the iOS project together. but many React native packages only support iOS and Android.

So when I'm building an iOS project, everything works fine. but when I go to the mac project, it's broken.

Here is the actual steps i run on mac project:

install pods with new arch enabled

bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install --repo-update

open xcode and open macproject.xcworkspace
clean build cache folder and click to run the project
got some linking errors

So i tried to fix this issue and did a lot of search, and someone said that use the react-native.config.js to skip dependencies:

const isMac = (process.env.npm_lifecycle_script || process.env.PWD).includes(
  'macos',
);

module.exports = {
  project: {
    ios: {
      sourceDir: isMac ? 'macos' : 'ios',
    },
    android: {},
  },
  dependencies: isMac
    ? // prevent the mac build from using some incompatible package
      {
        'react-native-screens': {
          platforms: {
            ios: null,
          },
        },
        'react-native-simple-toast': {
          platforms: {
            ios: null,
          },
        },
        'react-native-safe-area-context': {
          platforms: {
            ios: null,
          },
        },
        'react-native-permissions': {
          platforms: {
            ios: null,
          },
        },
      }
    : {},
};

I did what he said and I still got those linking errors.

So, what should I do to skip these packages' auto-linking on react native macos?

React Native Version

0.73.2

Output of `npx react-native info`

info Fetching system and libraries information... System: OS: macOS 14.0 CPU: (8) arm64 Apple M1 Memory: 170.47 MB / 8.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.16.1 path: ~/.nvm/versions/node/v18.16.1/bin/node Yarn: version: 1.22.19 path: ~/.nvm/versions/node/v18.16.1/bin/yarn npm: version: 9.5.1 path: ~/.nvm/versions/node/v18.16.1/bin/npm Watchman: Not Found Managers: CocoaPods: version: 1.14.3 path: /Users/xxx/.rvm/gems/ruby-2.7.6/bin/pod SDKs: iOS SDK: Platforms:

DriverKit 23.4
iOS 17.4
macOS 14.4
tvOS 17.4
visionOS 1.1
watchOS 10.4 Android SDK: Not Found IDEs: Android Studio: 2023.2 AI-232.10227.8.2321.11479570 Xcode: version: 15.3/15E204a path: /usr/bin/xcodebuild Languages: Java: version: 17.0.10 path: /Users/xxx/.sdkman/candidates/java/current/bin/javac Ruby: version: 2.7.6 path: /Users/xxx/.rvm/rubies/ruby-2.7.6/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.73.2 wanted: 0.73.2 react-native-macos: installed: 0.73.13 wanted: ^0.73.13 npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: true iOS: hermesEnabled: true newArchEnabled: true

info React Native v0.74.1 is now available (your project is running on v0.73.2). info Changelog: https://github.com/facebook/react-native/releases/tag/v0.74.1 info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.1 info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Steps to reproduce

initialize a react native project
install react-native-macos on the same project and initialize it
install some packages only support ios (such as react-native-screens)
then run pod install on macos folder and build the mac project. the error will show up
uninstall the package and build the mac project again, everything works

Snack, code example, screenshot, or link to a repository

dev-johnny-gh commented 1 month ago

@Saadnajmi can you help me with this?

AdrianFahrbach commented 1 month ago

Are you sure that this is working? Looks a bit sketchy to me.

const isMac = (process.env.npm_lifecycle_script || process.env.PWD).includes(
  'macos',
);

Saadnajmi commented 1 month ago

@dev-johnny-gh So React Native macOS works for iOS, macOS, and visionOS. I'm not sure what you're doing with the isMac checks, but if you want to look at a multi-platform setup, I would look at our RNTester test app, or better yet, react-native-test-app.

Saadnajmi commented 1 month ago

That being said, I'm pretty sure React-Native-Screens doesn't support macOS

dev-johnny-gh commented 1 month ago

That being said, I'm pretty sure React-Native-Screens doesn't support macOS

Thanks for your reply @Saadnajmi

Yes, that's why I'm asking for help, I have an iOS project and a macOS project on the same repo, and they both use the same React native code.

So, for example, when I install "React-Native-Screens" package and run pod install in the iOS project, it will be installed and linked automatically, right? Then, I go to the macOS folder and run pod install, react native will install and link the packages for me. but I want to exclude the "React-Native-Screens" on the macOS project, how can I do it?

dev-johnny-gh commented 1 month ago

Are you sure that this is working? Looks a bit sketchy to me.
const isMac = (process.env.npm_lifecycle_script || process.env.PWD).includes(
  'macos',
);

@AdrianFahrbach it's weird but it can work. what I'm trying to do here is: I'm trying to exclude those packages that are not compatible with macOS on react-native.config.js. When I ran pod install, react-native.config.js got called and i try to exclude them by using

'xx-package': {
  platforms: {
    ios: null,
  },
},

but with no luck

microsoft / react-native-macos