Drop support for React < 18 (#501)

bin/build/targets/react/resources/icon-template.js

@@ -18,7 +18,7 @@ export function getTemplate(native, iconoirContextPath) {
     return tpl`
   ${useClientDirective}
   ${variables.imports};
-  ${iconoirContextImport};
+  ${iconoirContextImport}
  
   ${variables.interfaces};
   

examples/react-native/.gitignore

@@ -7,6 +7,7 @@ node_modules/
 .expo/
 dist/
 web-build/
+expo-env.d.ts
 
 # Native
 *.orig.*

examples/react-native/app.json

@@ -1,13 +1,21 @@
 {
   "expo": {
     "name": "Iconoir",
-    "slug": "react-native-expo",
+    "slug": "example-react-native",
     "version": "1.0.0",
     "orientation": "portrait",
     "userInterfaceStyle": "light",
-    "assetBundlePatterns": ["**/*"],
+    "newArchEnabled": true,
+    "splash": {
+      "backgroundColor": "#ffffff"
+    },
     "ios": {
       "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#ffffff"
+      }
     }
   }
 }

examples/react-native/babel.config.js

@@ -1,7 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-
-  return {
-    presets: ['babel-preset-expo'],
-  };
-};

examples/react-native/index.ts

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

examples/react-native/metro.config.js

@@ -0,0 +1,31 @@
+/*
+ * Workaround to be able to import iconoir lib from workspace.
+ * See also: https://github.com/pnpm/pnpm/issues/4286
+ */
+
+const { makeMetroConfig } = require('@rnx-kit/metro-config');
+const MetroSymlinksResolver = require('@rnx-kit/metro-resolver-symlinks');
+const { getDefaultConfig } = require('expo/metro-config');
+
+const symlinksResolver = MetroSymlinksResolver({
+  remapModule: (_context, moduleName) => {
+    if (moduleName === 'iconoir-react-native') {
+      return require.resolve(moduleName);
+    }
+
+    return moduleName;
+  },
+},
+);
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const expoConfig = getDefaultConfig(__dirname);
+
+/** @type {import('expo/metro-config').MetroConfig} */
+module.exports = makeMetroConfig({
+  ...expoConfig,
+  resolver: {
+    ...expoConfig.resolver,
+    resolveRequest: symlinksResolver,
+  },
+});

examples/react-native/package.json

@@ -1,25 +1,30 @@
 {
   "name": "example-react-native",
+  "version": "1.0.0",
   "private": true,
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "index.ts",
   "scripts": {
+    "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "start": "expo start",
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/webpack-config": "^19.0.0",
-    "expo": "^49.0.21",
-    "expo-status-bar": "~1.6.0",
-    "iconoir-react-native": "^7.2.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-svg": "^13.9.0",
-    "react-native-web": "~0.19.6"
+    "expo": "^52.0.19",
+    "expo-status-bar": "^2.0.0",
+    "iconoir-react-native": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "^0.76.5",
+    "react-native-svg": "^15.10.1",
+    "react-native-web": "^0.19.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.6"
+    "@babel/core": "^7.25.2",
+    "@react-native/metro-config": "^0.76.5",
+    "@rnx-kit/metro-config": "^2.0.1",
+    "@rnx-kit/metro-resolver-symlinks": "^0.2.1",
+    "@types/react": "^18.3.12",
+    "typescript": "~5.7.2"
   }
 }

examples/react-native/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}

iconoir.com/package.json

@@ -8,8 +8,8 @@
     "lint": "next lint"
   },
   "devDependencies": {
-    "@nodesecure/npm-registry-sdk": "3.0.0",
-    "@octokit/rest": "21.0.2",
+    "@nodesecure/npm-registry-sdk": "^3.0.0",
+    "@octokit/rest": "^21.0.2",
     "@react-aria/focus": "^3.19.0",
     "@react-aria/i18n": "^3.12.4",
     "@react-aria/slider": "^3.7.14",
@@ -19,13 +19,13 @@
     "@react-types/slider": "^3.7.7",
     "@types/animejs": "^3.1.12",
     "@types/lodash": "^4.17.13",
-    "@types/node": "22.10.2",
+    "@types/node": "^22.10.2",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@types/react-window": "^1.8.8",
     "animejs": "^3.2.2",
     "csvtojson": "^2.0.10",
-    "eslint-config-next": "15.1.0",
+    "eslint-config-next": "^15.1.0",
     "iconoir-react": "workspace:*",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
@@ -33,12 +33,12 @@
     "next-mdx-remote": "^5.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-window": "^1.8.10",
-    "remark-gfm": "4.0.0",
+    "react-window": "^1.8.11",
+    "remark-gfm": "^4.0.0",
     "remark-prism": "^1.3.6",
     "scule": "^1.3.0",
     "styled-components": "^6.1.13",
-    "typescript": "5.7.2",
+    "typescript": "~5.7.2",
     "use-resize-observer": "^9.1.0"
   }
 }

package.json

@@ -55,8 +55,17 @@
     "scule": "^1.3.0",
     "semver": "^7.6.3",
     "types-tsconfig": "2.1.1",
-    "typescript": "^5.7.2",
+    "typescript": "~5.7.2",
     "vite": "^6.0.3",
     "vite-plugin-dts": "^4.3.0"
+  },
+  "pnpm": {
+    "packageExtensions": {
+      "react-native-svg": {
+        "peerDependencies": {
+          "@types/react": "18"
+        }
+      }
+    }
   }
 }

packages/iconoir-react-native/package.json

@@ -41,11 +41,11 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": "^16.8.6 || ^17 || ^18",
-    "react-native": ">=0.50.0"
+    "react": "18",
+    "react-native": ">=0.73.0",
+    "react-native-svg": "^15.8.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.45",
-    "react-native-svg": "^13.14.0"
+    "@types/react": "^18.3.17"
   }
 }

packages/iconoir-react/package.json

@@ -41,7 +41,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": "^16.8.6 || ^17 || ^18 || ^19"
+    "react": "18 || 19"
   },
   "devDependencies": {
     "@types/react": "^19.0.1"

pnpm-workspace.yaml

@@ -1,5 +1,4 @@
 packages:
   - packages/*
   - examples/*
-  - '!examples/react-native'
   - iconoir.com