oblador/react-native-vector-icons

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

michelcrypt4d4mus opened this issue · 8 comments

michelcrypt4d4mus commented
  • "@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 commented

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

  • 👀1
michelcrypt4d4mus commented

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 commented

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 commented

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 commented

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:

Screenshot 2024-05-30 at 6 57 36 PM
michelcrypt4d4mus commented

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

Screenshot 2024-05-30 at 7 11 54 PM
antonburmester commented

Having the same error on OSX 14.5:(

johnf commented

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 #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.

  • 👍1