ERROR TypeError: Cannot read property 'get Image Source Sync' of undefined, js engine: hermes

[phil-hudson]

• [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

Environment

    "react-native-vector-icons": "^10.0.2",
    "@types/react-native-vector-icons": "^6.4.18",

npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22621
  CPU: "(16) x64 AMD Ryzen 7 5800X 8-Core Processor             "
  Memory: 15.25 GB / 31.92 GB
Binaries:
  Node:
    version: 18.12.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.21
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 9.7.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-223.8836.35.2231.11090377
  Visual Studio: Not Found
Languages:
  Java:
    version: 11.0.20
    path: C:\Program Files\OpenLogic\jdk-11.0.20.8-hotspot\bin\javac.EXE
  Ruby:
    version: 3.2.2
    path: C:\Ruby32-x64\bin\ruby.EXE
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.7
    wanted: 0.72.7
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Description

Describe your issue in detail. Include screenshots if needed.

Static methods on the icon class look to be undefined - possibly a resolution issue?

Example code:

import {OptionsTopBarButton} from 'react-native-navigation';
import  Ionicons   from 'react-native-vector-icons/Ionicons';

const ICON_SIZE = 30;

const _navButtonIds = ['inc', 'dec', 'save', 'settings'] as const;
export type NavButton = typeof _navButtonIds[number];

export const navButtons: Record<NavButton, OptionsTopBarButton> = {
  inc: {
    id: 'inc',
    text: 'Inc',
  },
  dec: {
    id: 'dec',
    text: 'Dec',
  },
  save: {
    id: 'save',
    text: 'Save',
  },
  settings: {
    id: 'settings',
    icon: Ionicons.getImageSourceSync('settings-outline', ICON_SIZE),
  },
};

ERROR TypeError: _Ionicons.default.getImageSourceSync is not a function (it is undefined), js engine: hermes

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

[vladp]

I am seeing this too, I am trying to troubleshoot why my old toolbar wrapper class on Android stopped working. So I just plugged in the Android toolbar example that's in this package's README, and I am getting the same error as above. And I am on the same version of React-native as the above comment, and also using Hermes

[vladp]

@phil-hudson were you able to fix this error? I thought it would get resolved by making sure that expo-presets babel plugin is eliminated (as it tries to substitute react-native-vector-icons package with its own branch). But that did not help. I also migrated to RN 0.73.2 and that did not help either.

[vladp]

@phil-hudson I tracked down my issue to an incorrect import statement (not sure if this something i changed accidentally, or something changed in RN Vector icons in the latest releases) But I had used { } to import Icon class, and instead it should have been simply (as per documentation): ''' import Icon from 'react-native-vector-icons/dist/Ionicons'; '''

Without the correct import any function called on the Icon object instance (eg getImageSource or getImageSourceSync, or even .hasName) would fail. I started debugging it by checking if Icon.getImageSource is even a type of function -- and it was returning me 'no'. That's how I realized that the Icon object instance was missing function signatures.

I double checked that my android gradle and settings.gradle are correctly setup. then I also double-checked that expo is not overriding the react-native-vector-icons with its own copy of react-native-vector-icons (unfortunately this happens by default, when babel-preset-expo preset is used in babel config).

Once I eliminated the above potential setup issues, I just noticed the import statement issue, fixed that -- and it is working.

So I can confirm that react native vector icons on Android works in the presence of expo 50.0.11 and React-native 0.73.4

[johnf]

@phil-hudson if @vladp fix doesn't work for you can you reopen