Migrate to react-native-vector-icons 12.x (#3091)

* Update package.json * Update package-lock.json * Update Podfile * Update build.gradle * Update Podfile.lock * Update INatIcon.ts
2025-12-23 22:18:36 -05:00 · 2025-09-01 22:46:03 +02:00
parent 79c066dca9
commit f5e9a6d812
6 changed files with 162 additions and 59 deletions
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -14,13 +14,6 @@ apply plugin: "com.facebook.react"

 apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

-// add vector icons to project
-project.ext.vectoricons = [
-    iconFontNames: []
-]
-
-apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
-
 /**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -63,8 +63,6 @@ target "iNaturalistReactNative" do

  pod "react-native-config", path: "../node_modules/react-native-config"

-  pod "RNVectorIcons", path: "../node_modules/react-native-vector-icons"
-
  envfiles = {
    "Debug" => "$(PODS_ROOT)/../../.env.staging",
    "Release" => "$(PODS_ROOT)/../../.env"
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1929,27 +1929,6 @@ PODS:
    - React-Core
  - RNSVG (15.12.0):
    - React-Core
-  - RNVectorIcons (10.2.0):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
  - SocketRocket (0.7.1)
  - VisionCamera (4.7.0):
    - VisionCamera/Core (= 4.7.0)
@@ -2078,7 +2057,6 @@ DEPENDENCIES:
  - RNShareMenu (from `../node_modules/react-native-share-menu`)
  - RNStoreReview (from `../node_modules/react-native-store-review`)
  - RNSVG (from `../node_modules/react-native-svg`)
-  - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
  - VisionCamera (from `../node_modules/react-native-vision-camera`)
  - VisionCameraPluginInatVision (from `../node_modules/vision-camera-plugin-inatvision`)
  - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -2312,8 +2290,6 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native-store-review"
  RNSVG:
    :path: "../node_modules/react-native-svg"
-  RNVectorIcons:
-    :path: "../node_modules/react-native-vector-icons"
  VisionCamera:
    :path: "../node_modules/react-native-vision-camera"
  VisionCameraPluginInatVision:
@@ -2437,12 +2413,11 @@ SPEC CHECKSUMS:
  RNShareMenu: e1cdfa3b9af89416afc75a80377cfd0de4f30ded
  RNStoreReview: 613c43e9132998ed41a65946e20c223c91b36464
  RNSVG: ae1766b2492f8915a1ee25095871f00a4f132093
-  RNVectorIcons: f7a99433a71f4b38891c14c64b21fc521d064392
  SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
  VisionCamera: 1470a7fa013e22de7481640a4d9c597ad6f13919
  VisionCameraPluginInatVision: ad9a001b70676d2f9b0ea22f60c04d5fed3d3a52
  Yoga: eca8dd841b7cd47d82d66be58af8e3aeb819012f

-PODFILE CHECKSUM: 3877bea0ea18a99bd3e08a1a6dc6ff4eb7c6dd77
+PODFILE CHECKSUM: 5c7a85b8fc0a51e972a87e39194f661a51e0d872

 COCOAPODS: 1.15.2
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
        "@react-native-community/slider": "^4.5.0",
        "@react-native-google-signin/google-signin": "^13.1.0",
        "@react-native-picker/picker": "^2.11.1",
+        "@react-native-vector-icons/common": "^12.3.0",
        "@react-navigation/bottom-tabs": "^7.4.6",
        "@react-navigation/drawer": "^7.5.7",
        "@react-navigation/elements": "^2.6.3",
@@ -93,7 +94,6 @@
        "react-native-svg": "^15.12.0",
        "react-native-svg-transformer": "^1.3.0",
        "react-native-url-polyfill": "^2.0.0",
-        "react-native-vector-icons": "^10.2.0",
        "react-native-vision-camera": "^4.7.0",
        "react-native-volume-manager": "^1.10.0",
        "react-native-webview": "^13.15.0",
@@ -127,7 +127,6 @@
        "@types/markdown-it": "^14.1.2",
        "@types/react": "^19.0.0",
        "@types/react-dom": "^19.0.0",
-        "@types/react-native-vector-icons": "^6.4.18",
        "@types/react-test-renderer": "^19.0.0",
        "@types/sanitize-html": "^2.13.0",
        "@typescript-eslint/eslint-plugin": "^8.32.1",
@@ -4597,6 +4596,116 @@
        "react-native": "*"
      }
    },
+    "node_modules/@react-native-vector-icons/common": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/@react-native-vector-icons/common/-/common-12.3.0.tgz",
+      "integrity": "sha512-5GMBcLBkA0MuciweYcrSyvi9fYGanfVnE2J+pwHx1QiaVgTaoCm4rylJgSS77MVI5qUiGh7aJpqq5afSz2U4bw==",
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^7.0.0",
+        "picocolors": "^1.1.1",
+        "plist": "^3.1.0"
+      },
+      "bin": {
+        "rnvi-update-plist": "lib/commonjs/scripts/updatePlist.js"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "peerDependencies": {
+        "@react-native-vector-icons/get-image": "^12.2.0",
+        "react": "*",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-vector-icons/get-image": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-native-vector-icons/common/node_modules/find-up": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-7.0.0.tgz",
+      "integrity": "sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^7.2.0",
+        "path-exists": "^5.0.0",
+        "unicorn-magic": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-native-vector-icons/common/node_modules/locate-path": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
+      "integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^6.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-native-vector-icons/common/node_modules/p-limit": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^1.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-native-vector-icons/common/node_modules/p-locate": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz",
+      "integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-native-vector-icons/common/node_modules/path-exists": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
+      "integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/@react-native-vector-icons/common/node_modules/yocto-queue": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.1.tgz",
+      "integrity": "sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/@react-native/assets-registry": {
      "version": "0.78.3",
      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.78.3.tgz",
@@ -6472,25 +6581,6 @@
        "@types/react": "*"
      }
    },
-    "node_modules/@types/react-native-vector-icons": {
-      "version": "6.4.18",
-      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz",
-      "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*",
-        "@types/react-native": "^0.70"
-      }
-    },
-    "node_modules/@types/react-native-vector-icons/node_modules/@types/react-native": {
-      "version": "0.70.19",
-      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz",
-      "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
    "node_modules/@types/react-test-renderer": {
      "version": "19.1.0",
      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-19.1.0.tgz",
@@ -7465,6 +7555,15 @@
        "expect": "29.x.x || 28.x.x || ^27.2.5"
      }
    },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.11",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
+      "integrity": "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/@yarnpkg/lockfile": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
@@ -17523,6 +17622,20 @@
        "node": ">=6"
      }
    },
+    "node_modules/plist": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
+      "integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.8",
+        "base64-js": "^1.5.1",
+        "xmlbuilder": "^15.1.1"
+      },
+      "engines": {
+        "node": ">=10.4.0"
+      }
+    },
    "node_modules/pngjs": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
@@ -18706,6 +18819,7 @@
      "version": "10.2.0",
      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz",
      "integrity": "sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==",
+      "peer": true,
      "dependencies": {
        "prop-types": "^15.7.2",
        "yargs": "^16.1.1"
@@ -18721,6 +18835,7 @@
      "version": "7.0.4",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "peer": true,
      "dependencies": {
        "string-width": "^4.2.0",
        "strip-ansi": "^6.0.0",
@@ -18731,6 +18846,7 @@
      "version": "16.2.0",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "peer": true,
      "dependencies": {
        "cliui": "^7.0.2",
        "escalade": "^3.1.1",
@@ -18748,6 +18864,7 @@
      "version": "20.2.9",
      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "peer": true,
      "engines": {
        "node": ">=10"
      }
@@ -21130,6 +21247,18 @@
        "node": ">=4"
      }
    },
+    "node_modules/unicorn-magic": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",
+      "integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/universalify": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -21641,6 +21770,15 @@
        }
      }
    },
+    "node_modules/xmlbuilder": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
+      "integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
    "node_modules/xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
    "@react-native-community/slider": "^4.5.0",
    "@react-native-google-signin/google-signin": "^13.1.0",
    "@react-native-picker/picker": "^2.11.1",
+    "@react-native-vector-icons/common": "^12.3.0",
    "@react-navigation/bottom-tabs": "^7.4.6",
    "@react-navigation/drawer": "^7.5.7",
    "@react-navigation/elements": "^2.6.3",
@@ -127,7 +128,6 @@
    "react-native-svg": "^15.12.0",
    "react-native-svg-transformer": "^1.3.0",
    "react-native-url-polyfill": "^2.0.0",
-    "react-native-vector-icons": "^10.2.0",
    "react-native-vision-camera": "^4.7.0",
    "react-native-volume-manager": "^1.10.0",
    "react-native-webview": "^13.15.0",
@@ -161,7 +161,6 @@
    "@types/markdown-it": "^14.1.2",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
-    "@types/react-native-vector-icons": "^6.4.18",
    "@types/react-test-renderer": "^19.0.0",
    "@types/sanitize-html": "^2.13.0",
    "@typescript-eslint/eslint-plugin": "^8.32.1",
--- a/src/components/SharedComponents/INatIcon/INatIcon.ts
+++ b/src/components/SharedComponents/INatIcon/INatIcon.ts
@@ -1,4 +1,4 @@
-import { createIconSet } from "react-native-vector-icons";
+import { createIconSet } from "@react-native-vector-icons/common";

 import glyphmap from "./glyphmap.json";