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

[dev-johnny-gh]

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]

related: #414

[dev-johnny-gh]

@Saadnajmi can you help me with this?

[AdrianFahrbach]

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]

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

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

[dev-johnny-gh]

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]

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