react-native-macos: Not supported (help wanted)

[michelcrypt4d4mus]

• [x] Review the documentation: https://github.com/oblador/react-native-vector-icons
• [x] Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

• "@react-native-vector-icons/common": "^0.0.1-alpha.6" (Using monorepo branch)
• "@react-native-vector-icons/fontawesome": "^4.7.0-alpha.9",
• npm --version: 10.5.0
• node --version: v21.7.2

package.json:

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "lint": "eslint .",
    "macos": "react-native run-macos",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-vector-icons/common": "^0.0.1-alpha.6",
    "@react-native-vector-icons/fontawesome": "^4.7.0-alpha.9",
    "@react-native-vector-icons/fontawesome6": "^6.5.2-alpha.12",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@react-navigation/stack": "^6.3.29",
    "@reduxjs/toolkit": "^2.2.5",
    "formik": "^2.4.6",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-native": "^0.73.8",
    "react-native-macos": "^0.73.27",
    "react-native-menubar-extra": "^0.3.1",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.31.1",
    "react-native-select-dropdown": "^4.0.1",
    "react-redux": "^9.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "metro-hermes-compiler": "^0.73.10",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Description

Followed the install instructions, including a full re-install and rebuild of all node_modules and pod install from scratch, launched with a single page (see below), got this error:

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found. Verify that a module by this name is registered in the native binary.Bridgeless mode: false. TurboModule interop: false. Modules loaded: {"NativeModules":["PlatformConstants","LogBox","Timing","AppState","SourceCode","BlobModule","WebSocketModule","RedBox","DevSettings","Networking","Appearance","DevLoadingView","UIManager","DeviceInfo"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","BugReporting","HeadlessJsTaskSupport","VectorIcons"]}

Reproducible Demo

App.js:

import { View } from 'react-native';
import AppConfigPanel from './src/app/components/app_config_panel';

function App(initialProps) {
    return <View><AppConfigPanel /></View>
};

src/app/components/app_config_panel.js:

import { View } from 'react-native';
import Icon from '@react-native-vector-icons/fontawesome';

export default function AppConfigPanel() {
    return <View />;
};

[johnf]

@michelcrypt4d4mus We haven't tested on react-native-macos yet.

I wanted to check first, did you rebuild the app? The error message seems to indicate that the common module isn't linked.

[michelcrypt4d4mus]

yes. as i said:

_Followed the install instructions, including a full re-install and rebuild of all node_modules and pod install from scratch, launched with a single page (see below), got this error:_

just to double check i did a full rebuild again including making sure i did a total purge of xcode's build files and got the same result.

The error message seems to indicate that the common module isn't linked.

yes i noticed this and assume it is some issue with the pod configuration i didn't delve too far into it because i'm not super knowledgeable about cocoapods but i was considering going in there and manually editing some of the pod related files to try to work around this.

[michelcrypt4d4mus]

i checked in my macos/Podfile.lock file and there's no reference to VectorIcons so it seems for some reason cd macos && pod install isn't picking up this package.

[michelcrypt4d4mus]

i added this line to my Podfile:

  pod 'react-native-vector-icons', :path => '../node_modules/@react-native-vector-icons/common'

and then got a new error trying to run pod install:

[!] The platform of the target `CanaryCastle-macOS` (macOS 10.15) is not compatible with 
`react-native-vector-icons (0.0.1-alpha.6)`, which does not support `macOS`.

[michelcrypt4d4mus]

i was able to get a bit further by editing the podspec file to replace the line

s.platforms    = { :ios => "12.0", :tvos => "9.0" }

with

s.platforms    = { :ios => "12.0", :tvos => "9.0", :osx => "10.15" }

That at least got pod install to complete successfully but then Xcode failed to build, presumably because of the use of UIColor instead of NSColor. Here's the Xcode alerts on VectorIcons.h:

[michelcrypt4d4mus]

Changing the types from UIColor to NSColor got past that error but then it failed on running the Copy Fonts script:

[antonburmester]

Having the same error on OSX 14.5:(

[johnf]

OK it looks like a bit more work to get Mac OS support then simply adding the platform.

It looks like someone had a go at this a very long time ago in https://github.com/oblador/react-native-vector-icons/pull/173

This is a bit past my expertise and I don't have access to a Mac for the next 5 weeks.

Happy to accept a PR if someone can get this all working. I'll update the README to point at this issue.