@hero-design/rn 8.141.1 → 8.141.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.141.2
+
+### Patch Changes
+
+- [#5698](https://github.com/Thinkei/hero-design/pull/5698) [`e0047fb`](https://github.com/Thinkei/hero-design/commit/e0047fb662d104e68e63b390648d8b3cd6712729) Thanks [@ttkien](https://github.com/ttkien)! - expo snack for documentation website
+
 ## 8.141.1
 
 ### Patch Changes

package/jest.config.js

@@ -16,7 +16,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   setupFiles: ['<rootDir>/testUtils/setup.tsx'],
   setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
-  roots: ['<rootDir>/src'],
+  roots: ['<rootDir>/src', '<rootDir>/scripts'],
   snapshotSerializers: ['@emotion/jest/serializer'],
   transformIgnorePatterns: [
     'node_modules/(?!((jest-)?@react-native|@emotion/.*|react-native|react-native-pager-view|@react-native-community|@react-native-masked-view|expo-linear-gradient|nanoid|d3|d3-.*|internmap|delaunator|robust-predicates|date-fns)/)',

package/lib/index.js

@@ -9,8 +9,6 @@ var Svg = require('react-native-svg');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var reactNativeMonthYearPicker = require('@hero-design/react-native-month-year-picker');
 var DateTimePicker = require('@react-native-community/datetimepicker');
-var RnSlider = require('@react-native-community/slider');
-var MultiSlider = require('@ptomasroos/react-native-multi-slider');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var PagerView = require('react-native-pager-view');
 var events = require('events');
@@ -41,8 +39,6 @@ var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 var MaskedView__default = /*#__PURE__*/_interopDefaultCompat(MaskedView);
 var Svg__default = /*#__PURE__*/_interopDefaultCompat(Svg);
 var DateTimePicker__default = /*#__PURE__*/_interopDefaultCompat(DateTimePicker);
-var RnSlider__default = /*#__PURE__*/_interopDefaultCompat(RnSlider);
-var MultiSlider__default = /*#__PURE__*/_interopDefaultCompat(MultiSlider);
 var PagerView__default = /*#__PURE__*/_interopDefaultCompat(PagerView);
 
 function _arrayLikeToArray(r, a) {
@@ -2204,10 +2200,9 @@ styleSheet.flush()
 - empties the stylesheet of all its contents
 
 */
-// $FlowFixMe
+
 function sheetForTag(tag) {
   if (tag.sheet) {
-    // $FlowFixMe
     return tag.sheet;
   } // this weirdness brought to you by firefox
 
@@ -2215,10 +2210,12 @@ function sheetForTag(tag) {
 
   for (var i = 0; i < document.styleSheets.length; i++) {
     if (document.styleSheets[i].ownerNode === tag) {
-      // $FlowFixMe
       return document.styleSheets[i];
     }
-  }
+  } // this function should always return with a value
+  // TS can't understand it though so we make it stop complaining here
+
+  return undefined;
 }
 function createStyleElement(options) {
   var tag = document.createElement('style');
@@ -2250,7 +2247,7 @@ var StyleSheet = /*#__PURE__*/function () {
       _this.container.insertBefore(tag, before);
       _this.tags.push(tag);
     };
-    this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
+    this.isSpeedy = options.speedy === undefined ? true : options.speedy;
     this.tags = [];
     this.ctr = 0;
     this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
@@ -2279,17 +2276,16 @@ var StyleSheet = /*#__PURE__*/function () {
         // this is the ultrafast version, works across browsers
         // the big drawback is that the css won't be editable in devtools
         sheet.insertRule(rule, sheet.cssRules.length);
-      } catch (e) {
-      }
+      } catch (e) {}
     } else {
       tag.appendChild(document.createTextNode(rule));
     }
     this.ctr++;
   };
   _proto.flush = function flush() {
-    // $FlowFixMe
     this.tags.forEach(function (tag) {
-      return tag.parentNode && tag.parentNode.removeChild(tag);
+      var _tag$parentNode;
+      return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
     });
     this.tags = [];
     this.ctr = 0;
@@ -2885,11 +2881,11 @@ function rulesheet(callback) {
 }
 
 var weakMemoize = function weakMemoize(func) {
-  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
   var cache = new WeakMap();
   return function (arg) {
     if (cache.has(arg)) {
-      // $FlowFixMe
+      // Use non-null assertion because we just checked that the cache `has` it
+      // This allows us to remove `undefined` from the return value
       return cache.get(arg);
     }
     var ret = func(arg);
@@ -2898,6 +2894,15 @@ var weakMemoize = function weakMemoize(func) {
   };
 };
 
+function memoize(fn) {
+  var cache = Object.create(null);
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+var isBrowser = typeof document !== 'undefined';
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
   var previous = 0;
   var character = 0;
@@ -2964,8 +2969,8 @@ var compat = function compat(element) {
   element.length < 1) {
     return;
   }
-  var value = element.value,
-    parent = element.parent;
+  var value = element.value;
+  var parent = element.parent;
   var isImplicitRule = element.column === parent.column && element.line === parent.line;
   while (parent.type !== 'rule') {
     parent = parent.parent;
@@ -3210,10 +3215,15 @@ var prefixer = function prefixer(element, index, children, callback) {
       });
   }
 };
+var getServerStylisCache = isBrowser ? undefined : weakMemoize(function () {
+  return memoize(function () {
+    return {};
+  });
+});
 var defaultStylisPlugins = [prefixer];
 var createCache = function createCache(options) {
   var key = options.key;
-  if (key === 'css') {
+  if (isBrowser && key === 'css') {
     var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
     // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
     // note this very very intentionally targets all style elements regardless of the key to ensure
@@ -3238,14 +3248,13 @@ var createCache = function createCache(options) {
   var inserted = {};
   var container;
   var nodesToHydrate = [];
-  {
+  if (isBrowser) {
     container = options.container || document.head;
     Array.prototype.forEach.call(
     // this means we will ignore elements which don't have a space in them which
     // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
     document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
-      var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe
-
+      var attrib = node.getAttribute("data-emotion").split(' ');
       for (var i = 1; i < attrib.length; i++) {
         inserted[attrib[i]] = true;
       }
@@ -3254,7 +3263,7 @@ var createCache = function createCache(options) {
   }
   var _insert;
   var omnipresentPlugins = [compat, removeLabel];
-  {
+  if (!getServerStylisCache) {
     var currentSheet;
     var finalizingPlugins = [stringify, rulesheet(function (rule) {
       currentSheet.insert(rule);
@@ -3270,6 +3279,46 @@ var createCache = function createCache(options) {
         cache.inserted[serialized.name] = true;
       }
     };
+  } else {
+    var _finalizingPlugins = [stringify];
+    var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
+    var _stylis = function _stylis(styles) {
+      return serialize(compile(styles), _serializer);
+    };
+    var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
+    var getRules = function getRules(selector, serialized) {
+      var name = serialized.name;
+      if (serverStylisCache[name] === undefined) {
+        serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+      }
+      return serverStylisCache[name];
+    };
+    _insert = function _insert(selector, serialized, sheet, shouldCache) {
+      var name = serialized.name;
+      var rules = getRules(selector, serialized);
+      if (cache.compat === undefined) {
+        // in regular mode, we don't set the styles on the inserted cache
+        // since we don't need to and that would be wasting memory
+        // we return them so that they are rendered in a style tag
+        if (shouldCache) {
+          cache.inserted[name] = true;
+        }
+        return rules;
+      } else {
+        // in compat mode, we put the styles on the inserted cache so
+        // that emotion-server can pull out the styles
+        // except when we don't want to cache it which was in Global but now
+        // is nowhere but we don't want to do a major right now
+        // and just in case we're going to leave the case here
+        // it's also not affecting client side bundle size
+        // so it's really not a big deal
+        if (shouldCache) {
+          cache.inserted[name] = rules;
+        } else {
+          return rules;
+        }
+      }
+    };
   }
   var cache = {
     key: key,
@@ -27244,6 +27293,46 @@ var Progress = {
   Step: ProgressStep
 };
 
+// Function/class components, or exotic ones such as memo/forwardRef (objects with `$$typeof`)
+var isComponent = function isComponent(value) {
+  return typeof value === 'function' || _typeof(value) === 'object' && value !== null && '$$typeof' in value;
+};
+var getLinkingError = function getLinkingError(packageName) {
+  return "The package '".concat(packageName, "' doesn't seem to be linked. Make sure: \n\n").concat(reactNative.Platform.select({
+    ios: "- You have run 'pod install'\n",
+    "default": ''
+  }), "- You rebuilt the app after installing the package\n");
+};
+/**
+ * Loads a component from a package that needs native linking.
+ * When the package can't be loaded (e.g. in Expo Snack), returns a component
+ * that renders a linking error instead of crashing the whole library.
+ *
+ * `load` must contain a literal `require('<packageName>')` so Metro can resolve it statically.
+ */
+var loadNativeComponent = function loadNativeComponent(packageName, load) {
+  try {
+    var nativeModule = load();
+    // Depending on the bundler's interop, the component is either `default` or the module itself
+    var defaultExport = nativeModule["default"];
+    var component = isComponent(defaultExport) ? defaultExport : nativeModule;
+    if (isComponent(component)) {
+      return component;
+    }
+  } catch (_unused) {
+    // package not linked, fall through to the linking error component
+  }
+  var LinkingError = function LinkingError() {
+    return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.Text, null, getLinkingError(packageName)));
+  };
+  return LinkingError;
+};
+
+var SliderComponent = loadNativeComponent('@react-native-community/slider',
+// eslint-disable-next-line global-require, @typescript-eslint/no-require-imports
+function () {
+  return require('@react-native-community/slider');
+});
 var Slider$2 = function Slider(_ref) {
   var _ref$minimumValue = _ref.minimumValue,
     minimumValue = _ref$minimumValue === void 0 ? 0 : _ref$minimumValue,
@@ -27265,7 +27354,7 @@ var Slider$2 = function Slider(_ref) {
     selectedTrack = _theme$__hd__$slider$.selectedTrack,
     thumb = _theme$__hd__$slider$.thumb,
     unselectedTrack = _theme$__hd__$slider$.unselectedTrack;
-  return /*#__PURE__*/React__namespace.default.createElement(RnSlider__default.default, {
+  return /*#__PURE__*/React__namespace.default.createElement(SliderComponent, {
     minimumValue: minimumValue,
     maximumValue: maximumValue,
     step: step,
@@ -27293,6 +27382,11 @@ var StyledMarker = index$c(reactNative.View)(function (_ref) {
   }, theme.__hd__.slider.shadows.marker);
 });
 
+var MultiSlider = loadNativeComponent('@ptomasroos/react-native-multi-slider',
+// eslint-disable-next-line global-require, @typescript-eslint/no-require-imports
+function () {
+  return require('@ptomasroos/react-native-multi-slider');
+});
 var Slider$1 = function Slider(_ref) {
   var minimumValue = _ref.minimumValue,
     maximumValue = _ref.maximumValue,
@@ -27391,7 +27485,7 @@ var Slider$1 = function Slider(_ref) {
     accessibilityState: {
       disabled: disabled
     }
-  }, /*#__PURE__*/React__namespace.default.createElement(MultiSlider__default.default, {
+  }, /*#__PURE__*/React__namespace.default.createElement(MultiSlider, {
     values: nativeValue,
     onValuesChange: handleTwoWaySliderChange,
     onValuesChangeStart: handleOnValueChangeStart,

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.141.1",
+  "version": "8.141.2",
   "license": "MIT",
   "main": "lib/index.js",
-  "module": "es/index.js",
   "types": "types/index.d.ts",
   "typesVersions": {
     "*": {
@@ -24,6 +23,7 @@
     "build": "yarn build:js && yarn build:types",
     "build:watch": "yarn build:js -w & yarn build:types -w",
     "publish:npm": "yarn publish --access public",
+    "publish:expo-snack": "node scripts/publish-expo-snack.js",
     "set-dev-env": "npm pkg set react-native=src/index.ts"
   },
   "dependencies": {

package/rollup.config.mjs

@@ -26,11 +26,6 @@ export default [
         format: 'cjs',
         interop: 'compat',
       },
-      {
-        file: pkg.module,
-        format: 'es',
-        interop: 'compat',
-      },
     ],
     external: [
       '@react-native-masked-view/masked-view',
@@ -52,7 +47,7 @@ export default [
       replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
       }),
-      nodeResolve({ extensions, browser: true }),
+      nodeResolve({ extensions, browser: false }),
       flow(),
       commonjs(),
       json(),
@@ -68,11 +63,11 @@ export default [
       }),
       ...(generateBuildStats
         ? [
-            visualizer({
-              filename: fileName,
-              template: bundleTemplate,
-            }),
-          ]
+          visualizer({
+            filename: fileName,
+            template: bundleTemplate,
+          }),
+        ]
         : []),
     ],
   },

package/scripts/publish-expo-snack.js

@@ -0,0 +1,110 @@
+/**
+ * Publishes the Expo Snack flavour of `@hero-design/rn`:
+ * - version: `{version}-expo-snack`
+ * - no `react-native` field, so Metro/Snack resolves the built `lib/index.js`
+ *   (`main`) instead of the TypeScript source (`src/index.ts`)
+ * - npm dist-tag `expo-snack`, so it never becomes `latest`
+ *
+ * Requires `lib/` to be built. Idempotent: does nothing if the version exists.
+ * Set DRY_RUN=true to only print the manifest that would be published.
+ */
+const childProcess = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+const SNACK_DIST_TAG = 'expo-snack';
+
+// Resolve npm next to the running node binary instead of searching PATH
+const NPM_BIN = path.join(path.dirname(process.execPath), 'npm');
+
+const getSnackVersion = (version) => `${version}-expo-snack`;
+
+const buildSnackManifest = (pkg) => {
+  const { 'react-native': _reactNative, ...rest } = pkg;
+
+  return { ...rest, version: getSnackVersion(pkg.version) };
+};
+
+const versionExists = (name, version, runNpm) => {
+  try {
+    const output = runNpm(['view', `${name}@${version}`, 'version'], {
+      encoding: 'utf8',
+      stdio: ['ignore', 'pipe', 'ignore'],
+    });
+
+    return String(output).trim() === version;
+  } catch {
+    // `npm view` exits non-zero when the version does not exist
+    return false;
+  }
+};
+
+const publishExpoSnack = ({
+  packageJsonPath,
+  dryRun = false,
+  runNpm = (args, options) => childProcess.execFileSync(NPM_BIN, args, options),
+  log = console.log,
+}) => {
+  const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  const snackManifest = buildSnackManifest(pkg);
+  const snackVersion = snackManifest.version;
+
+  if (versionExists(pkg.name, snackVersion, runNpm)) {
+    log(`${pkg.name}@${snackVersion} already published, skipping`);
+
+    return 'skipped';
+  }
+
+  const backupPath = `${packageJsonPath}.bak`;
+  fs.copyFileSync(packageJsonPath, backupPath);
+
+  try {
+    fs.writeFileSync(
+      packageJsonPath,
+      `${JSON.stringify(snackManifest, null, 2)}\n`
+    );
+
+    if (dryRun) {
+      log(`DRY_RUN: would publish ${pkg.name}@${snackVersion}`);
+      log(
+        JSON.stringify(
+          {
+            name: snackManifest.name,
+            version: snackManifest.version,
+            main: snackManifest.main,
+            'react-native': snackManifest['react-native'],
+          },
+          null,
+          2
+        )
+      );
+
+      return 'dry-run';
+    }
+
+    runNpm(['publish', '--access', 'public', '--tag', SNACK_DIST_TAG], {
+      stdio: 'inherit',
+    });
+
+    return 'published';
+  } finally {
+    fs.copyFileSync(backupPath, packageJsonPath);
+    fs.rmSync(backupPath);
+  }
+};
+
+module.exports = {
+  buildSnackManifest,
+  getSnackVersion,
+  publishExpoSnack,
+  SNACK_DIST_TAG,
+  versionExists,
+};
+
+/* istanbul ignore next -- thin CLI wrapper */
+if (require.main === module) {
+  publishExpoSnack({
+    packageJsonPath: path.resolve(__dirname, '../package.json'),
+    dryRun: process.env.DRY_RUN === 'true',
+  });
+}

package/src/components/Slider/RangeSlider.tsx

@@ -1,15 +1,24 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import MultiSlider from '@ptomasroos/react-native-multi-slider';
 
 import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import { View } from 'react-native';
+import type MultiSliderComponent from '@ptomasroos/react-native-multi-slider';
 import { useTheme } from '../../theme';
+import loadNativeComponent from '../../utils/loadNativeComponent';
 import { StyledMarker } from './StyledRangeSlider';
 import {
   DISABLED_UNSELECTED_TRACK_OPACITY,
   DISABLED_SELECTED_TRACK_OPACITY,
 } from './constants';
 
+type MultiSliderProps = React.ComponentProps<typeof MultiSliderComponent>;
+
+const MultiSlider = loadNativeComponent<MultiSliderProps>(
+  '@ptomasroos/react-native-multi-slider',
+  // eslint-disable-next-line global-require, @typescript-eslint/no-require-imports
+  () => require('@ptomasroos/react-native-multi-slider')
+);
+
 export type SliderRangeValue = {
   start: number;
   end: number;

package/src/components/Slider/SingleSlider.tsx

@@ -1,7 +1,16 @@
-import RnSlider from '@react-native-community/slider';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type RnSliderComponent from '@react-native-community/slider';
 import { useTheme } from '../../theme';
+import loadNativeComponent from '../../utils/loadNativeComponent';
+
+type RnSliderProps = React.ComponentProps<typeof RnSliderComponent>;
+
+const SliderComponent = loadNativeComponent<RnSliderProps>(
+  '@react-native-community/slider',
+  // eslint-disable-next-line global-require, @typescript-eslint/no-require-imports
+  () => require('@react-native-community/slider')
+);
 
 export interface SingleSliderProps {
   /**
@@ -70,7 +79,7 @@ const Slider = ({
   const { selectedTrack, thumb, unselectedTrack } = theme.__hd__.slider.colors;
 
   return (
-    <RnSlider
+    <SliderComponent
       minimumValue={minimumValue}
       maximumValue={maximumValue}
       step={step}

package/src/utils/loadNativeComponent.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Platform, Text, View } from 'react-native';
+
+type NativeModule<P> = React.ComponentType<P> | { default?: unknown };
+
+// Function/class components, or exotic ones such as memo/forwardRef (objects with `$$typeof`)
+const isComponent = (value: unknown): boolean =>
+  typeof value === 'function' ||
+  (typeof value === 'object' && value !== null && '$$typeof' in value);
+
+const getLinkingError = (packageName: string) =>
+  `The package '${packageName}' doesn't seem to be linked. Make sure: \n\n${Platform.select(
+    { ios: `- You have run 'pod install'\n`, default: '' }
+  )}- You rebuilt the app after installing the package\n`;
+
+/**
+ * Loads a component from a package that needs native linking.
+ * When the package can't be loaded (e.g. in Expo Snack), returns a component
+ * that renders a linking error instead of crashing the whole library.
+ *
+ * `load` must contain a literal `require('<packageName>')` so Metro can resolve it statically.
+ */
+const loadNativeComponent = <P,>(
+  packageName: string,
+  load: () => NativeModule<P>
+): React.ComponentType<P> => {
+  try {
+    const nativeModule = load();
+    // Depending on the bundler's interop, the component is either `default` or the module itself
+    const { default: defaultExport } = nativeModule as { default?: unknown };
+    const component = isComponent(defaultExport) ? defaultExport : nativeModule;
+
+    if (isComponent(component)) {
+      return component as React.ComponentType<P>;
+    }
+  } catch {
+    // package not linked, fall through to the linking error component
+  }
+
+  const LinkingError = () => (
+    <View>
+      <Text>{getLinkingError(packageName)}</Text>
+    </View>
+  );
+
+  return LinkingError;
+};
+
+export default loadNativeComponent;

package/types/components/TextInput/index.d.ts

@@ -134,7 +134,7 @@ export declare const renderSuffix: ({ state, loading, suffix, }: {
     state: State;
     loading: boolean;
     suffix?: IconName | React.ReactElement;
-}) => "number" | "search" | "bold" | "filter" | "swag" | "wallet" | React.JSX.Element | "menu" | "image" | "switch" | "warning" | "list" | "directory" | "document" | "feed" | "italic" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "antenna" | "archive" | "assignment-warning" | "bank" | "bell" | "billing" | "bolt" | "bookmark-added" | "bookmark-checked" | "bookmark" | "box-check" | "box" | "bpay" | "buildings" | "cake" | "calendar-clock" | "calendar" | "candy-box-menu" | "caret-down-small" | "caret-down" | "caret-left-small" | "caret-left" | "caret-right-small" | "caret-right" | "caret-up-small" | "caret-up" | "check-radio" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock-3" | "clock" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "dollar-coin-shine" | "dot" | "double-buildings" | "edit-template" | "envelope" | "exclude" | "expand-content" | "expense" | "explore_nearby" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "file" | "folder-user" | "folder" | "format-bold" | "format-heading1" | "format-heading2" | "format-italic" | "format-list-bulleted" | "format-list-numbered" | "format-underlined" | "funnel-filter" | "global-dollar" | "global-pound" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "hero-points" | "home" | "import" | "incident-siren" | "instapay-daily" | "instapay-now" | "instapay" | "loading-2" | "loading" | "location-on" | "location" | "lock" | "looks-one" | "looks-two" | "media-content" | "money-notes" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "near-me" | "node" | "open-folder" | "paperclip-vertical" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane-up" | "plane" | "play-arrow" | "play-circle" | "pound-coin-shine" | "pound-sign" | "print" | "raising-hands" | "reply-arrow" | "reply" | "reschedule" | "rocket-launch" | "rostering" | "salary-sacrifice" | "save" | "schedule-send" | "schedule" | "search-person" | "send" | "speaker" | "star-award" | "star-badge" | "star-circle" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "surfing" | "survey" | "swag-pillar-benefit" | "swag-pillar-career" | "swag-pillar-money" | "swag-pillar-work" | "swipe-right" | "tag" | "target" | "teams" | "thumb-down" | "thumb-up" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "user" | "video-1" | "video-2" | "academic-hat-outlined" | "accommodation-outlined" | "activate-outlined" | "add-credit-card-outlined" | "add-emoji-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "afternoon-outlined" | "ai-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "application-outlined" | "archive-outlined" | "arrow-down" | "arrow-downwards" | "arrow-left" | "arrow-leftwards" | "arrow-right" | "arrow-rightwards" | "arrow-up" | "arrow-upwards" | "article-outlined" | "assignment-warning-outlined" | "at-sign" | "auto-graph-outlined" | "automotive-outlined" | "bakery-outlined" | "bank-outlined" | "bar-outlined" | "beauty-outlined" | "beer-outlined" | "bell-outlined" | "bell-slash-outlined" | "bill-management-outlined" | "billing-outlined" | "body-outlined" | "bolt-outlined" | "book-outlined" | "bookmark-added-outlined" | "bookmark-checked-outlined" | "bookmark-outlined" | "box-1-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calculator-outlined" | "calendar-clock-outlined" | "calendar-dates-outlined" | "calendar-edit-outlined" | "calendar-outlined" | "calendar-star-outlined" | "call-outlined" | "call-split-outlined" | "camera-outlined" | "cancel" | "car-forward-outlined" | "cashback-outlined" | "charging-station-outlined" | "chat-bubble-outlined" | "chat-unread-outlined" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-check-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-3-outlined" | "clock-in-outlined" | "clock-out-outlined" | "clock-outlined" | "cloud-download-outlined" | "cog-outlined" | "coin-outlined" | "coin-super-outlined" | "comment-outlined" | "contacts-outlined" | "contacts-user-outlined" | "credit-card-outlined" | "cultural-site-outlined" | "cup-outlined" | "dentistry-outlined" | "diamond-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-box-outlined" | "dollar-card-outlined" | "dollar-coin-shine-outlined" | "dollar-credit-card-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-box-outlined" | "download-outlined" | "edit-template-outlined" | "edit-user-outlined" | "electronics-outlined" | "email-outlined" | "end-break-outlined" | "enter-arrow" | "entertainment-outlined" | "envelope-outlined" | "evening-outlined" | "expense-approval-outlined" | "expense-outlined" | "explore-outlined" | "extension-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "fastfood-outlined" | "feed-outlined" | "feedbacks-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-dollar-certified-outlined" | "file-dollar-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-pound-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-statutory-outlined" | "file-verified-outlined" | "filter-outlined" | "fitness-outlined" | "folder-outlined" | "folder-upload-outlined" | "folder-user-outlined" | "form-outlined" | "funnel-filter-outline" | "goal-outlined" | "graph-outlined" | "grocery-outlined" | "hand-holding-user-outlined" | "handshake-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "history-outlined" | "home-outlined" | "id-card-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "job-search-outlined" | "leave-approval-outlined" | "lighting-outlined" | "link-1" | "link-2" | "list-outlined" | "live-help-outlined" | "local_mall_outlined" | "location-on-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "mail-outlined" | "map-outlined" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "mic-outlined" | "mic-slash-outlined" | "mobile-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "morning-outlined" | "multiple-folders-outlined" | "multiple-users-outlined" | "near-me-outlined" | "node-outlined" | "number-points" | "overview-outlined" | "park-outlined" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "pound-box-outlined" | "pound-card-outlined" | "pound-coin-shine-outlined" | "pound-credit-card-outlined" | "print-outlined" | "profile-2user-outlined" | "propane-tank-outlined" | "qr-code-outlined" | "qualification-outlined" | "question-mark" | "raising-hands-outlined" | "re-assign" | "redeem" | "refresh" | "remove" | "reply-outlined" | "restart" | "restaurant-outlined" | "resume-outlined" | "return-arrow" | "rocket-launch-outlined" | "rostering-outlined" | "safety-outlined" | "save-outlined" | "schedule-outlined" | "schedule-send-outlined" | "search-outlined" | "search-secured-outlined" | "send-outlined" | "share-1" | "share-2" | "share-outlined-2" | "share-outlined" | "shield-check-outlined" | "shop-outlined" | "shopping_basket_outlined" | "show-chart-outlined" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "smart-match-outlined" | "sparkle-2-outlined" | "sparkle-outlined" | "speaker-outlined" | "star-award-outlined" | "star-badge-outlined" | "star-circle-outlined" | "star-medal-outlined" | "star-outlined" | "start-break-outlined" | "stash-outlined" | "stop-outlined" | "stopwatch-outlined" | "strikethrough" | "styler-outlined" | "suitcase-clock-outlined" | "suitcase-outlined" | "survey-outlined" | "switch-outlined" | "sync" | "tablet-outlined" | "tag-outlined" | "target-outlined" | "teams-outlined" | "tennis-outlined" | "thumb-down-outlined" | "thumb-up-outlined" | "ticket-outlined" | "timesheet-outlined" | "timesheets-outlined" | "today-outlined" | "transfer" | "transportation-outlined" | "trash-bin-outlined" | "umbrela-outlined" | "unavailability-outlined" | "unavailable" | "underline" | "union-outlined" | "unlock-outlined" | "upload-outlined" | "user-add-outlined" | "user-circle-outlined" | "user-gear-outlined" | "user-out-outlined" | "user-outlined" | "user-rectangle-outlined" | "video-1-outlined" | "video-2-outlined" | "volunteer-outlined" | "wallet-outlined" | "warning-outlined" | "wellness-outlined" | undefined;
+}) => "number" | "search" | "bold" | "filter" | React.JSX.Element | "swag" | "wallet" | "menu" | "image" | "switch" | "warning" | "list" | "directory" | "document" | "feed" | "italic" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "antenna" | "archive" | "assignment-warning" | "bank" | "bell" | "billing" | "bolt" | "bookmark-added" | "bookmark-checked" | "bookmark" | "box-check" | "box" | "bpay" | "buildings" | "cake" | "calendar-clock" | "calendar" | "candy-box-menu" | "caret-down-small" | "caret-down" | "caret-left-small" | "caret-left" | "caret-right-small" | "caret-right" | "caret-up-small" | "caret-up" | "check-radio" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock-3" | "clock" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "dollar-coin-shine" | "dot" | "double-buildings" | "edit-template" | "envelope" | "exclude" | "expand-content" | "expense" | "explore_nearby" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "file" | "folder-user" | "folder" | "format-bold" | "format-heading1" | "format-heading2" | "format-italic" | "format-list-bulleted" | "format-list-numbered" | "format-underlined" | "funnel-filter" | "global-dollar" | "global-pound" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "hero-points" | "home" | "import" | "incident-siren" | "instapay-daily" | "instapay-now" | "instapay" | "loading-2" | "loading" | "location-on" | "location" | "lock" | "looks-one" | "looks-two" | "media-content" | "money-notes" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "near-me" | "node" | "open-folder" | "paperclip-vertical" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane-up" | "plane" | "play-arrow" | "play-circle" | "pound-coin-shine" | "pound-sign" | "print" | "raising-hands" | "reply-arrow" | "reply" | "reschedule" | "rocket-launch" | "rostering" | "salary-sacrifice" | "save" | "schedule-send" | "schedule" | "search-person" | "send" | "speaker" | "star-award" | "star-badge" | "star-circle" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "surfing" | "survey" | "swag-pillar-benefit" | "swag-pillar-career" | "swag-pillar-money" | "swag-pillar-work" | "swipe-right" | "tag" | "target" | "teams" | "thumb-down" | "thumb-up" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "user" | "video-1" | "video-2" | "academic-hat-outlined" | "accommodation-outlined" | "activate-outlined" | "add-credit-card-outlined" | "add-emoji-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "afternoon-outlined" | "ai-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "application-outlined" | "archive-outlined" | "arrow-down" | "arrow-downwards" | "arrow-left" | "arrow-leftwards" | "arrow-right" | "arrow-rightwards" | "arrow-up" | "arrow-upwards" | "article-outlined" | "assignment-warning-outlined" | "at-sign" | "auto-graph-outlined" | "automotive-outlined" | "bakery-outlined" | "bank-outlined" | "bar-outlined" | "beauty-outlined" | "beer-outlined" | "bell-outlined" | "bell-slash-outlined" | "bill-management-outlined" | "billing-outlined" | "body-outlined" | "bolt-outlined" | "book-outlined" | "bookmark-added-outlined" | "bookmark-checked-outlined" | "bookmark-outlined" | "box-1-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calculator-outlined" | "calendar-clock-outlined" | "calendar-dates-outlined" | "calendar-edit-outlined" | "calendar-outlined" | "calendar-star-outlined" | "call-outlined" | "call-split-outlined" | "camera-outlined" | "cancel" | "car-forward-outlined" | "cashback-outlined" | "charging-station-outlined" | "chat-bubble-outlined" | "chat-unread-outlined" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-check-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-3-outlined" | "clock-in-outlined" | "clock-out-outlined" | "clock-outlined" | "cloud-download-outlined" | "cog-outlined" | "coin-outlined" | "coin-super-outlined" | "comment-outlined" | "contacts-outlined" | "contacts-user-outlined" | "credit-card-outlined" | "cultural-site-outlined" | "cup-outlined" | "dentistry-outlined" | "diamond-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-box-outlined" | "dollar-card-outlined" | "dollar-coin-shine-outlined" | "dollar-credit-card-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-box-outlined" | "download-outlined" | "edit-template-outlined" | "edit-user-outlined" | "electronics-outlined" | "email-outlined" | "end-break-outlined" | "enter-arrow" | "entertainment-outlined" | "envelope-outlined" | "evening-outlined" | "expense-approval-outlined" | "expense-outlined" | "explore-outlined" | "extension-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "fastfood-outlined" | "feed-outlined" | "feedbacks-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-dollar-certified-outlined" | "file-dollar-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-pound-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-statutory-outlined" | "file-verified-outlined" | "filter-outlined" | "fitness-outlined" | "folder-outlined" | "folder-upload-outlined" | "folder-user-outlined" | "form-outlined" | "funnel-filter-outline" | "goal-outlined" | "graph-outlined" | "grocery-outlined" | "hand-holding-user-outlined" | "handshake-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "history-outlined" | "home-outlined" | "id-card-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "job-search-outlined" | "leave-approval-outlined" | "lighting-outlined" | "link-1" | "link-2" | "list-outlined" | "live-help-outlined" | "local_mall_outlined" | "location-on-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "mail-outlined" | "map-outlined" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "mic-outlined" | "mic-slash-outlined" | "mobile-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "morning-outlined" | "multiple-folders-outlined" | "multiple-users-outlined" | "near-me-outlined" | "node-outlined" | "number-points" | "overview-outlined" | "park-outlined" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "pound-box-outlined" | "pound-card-outlined" | "pound-coin-shine-outlined" | "pound-credit-card-outlined" | "print-outlined" | "profile-2user-outlined" | "propane-tank-outlined" | "qr-code-outlined" | "qualification-outlined" | "question-mark" | "raising-hands-outlined" | "re-assign" | "redeem" | "refresh" | "remove" | "reply-outlined" | "restart" | "restaurant-outlined" | "resume-outlined" | "return-arrow" | "rocket-launch-outlined" | "rostering-outlined" | "safety-outlined" | "save-outlined" | "schedule-outlined" | "schedule-send-outlined" | "search-outlined" | "search-secured-outlined" | "send-outlined" | "share-1" | "share-2" | "share-outlined-2" | "share-outlined" | "shield-check-outlined" | "shop-outlined" | "shopping_basket_outlined" | "show-chart-outlined" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "smart-match-outlined" | "sparkle-2-outlined" | "sparkle-outlined" | "speaker-outlined" | "star-award-outlined" | "star-badge-outlined" | "star-circle-outlined" | "star-medal-outlined" | "star-outlined" | "start-break-outlined" | "stash-outlined" | "stop-outlined" | "stopwatch-outlined" | "strikethrough" | "styler-outlined" | "suitcase-clock-outlined" | "suitcase-outlined" | "survey-outlined" | "switch-outlined" | "sync" | "tablet-outlined" | "tag-outlined" | "target-outlined" | "teams-outlined" | "tennis-outlined" | "thumb-down-outlined" | "thumb-up-outlined" | "ticket-outlined" | "timesheet-outlined" | "timesheets-outlined" | "today-outlined" | "transfer" | "transportation-outlined" | "trash-bin-outlined" | "umbrela-outlined" | "unavailability-outlined" | "unavailable" | "underline" | "union-outlined" | "unlock-outlined" | "upload-outlined" | "user-add-outlined" | "user-circle-outlined" | "user-gear-outlined" | "user-out-outlined" | "user-outlined" | "user-rectangle-outlined" | "video-1-outlined" | "video-2-outlined" | "volunteer-outlined" | "wallet-outlined" | "warning-outlined" | "wellness-outlined" | undefined;
 export declare const renderPrefix: ({ state, prefix, }: {
     state: State;
     prefix?: IconName | React.ReactElement;

package/types/utils/loadNativeComponent.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type NativeModule<P> = React.ComponentType<P> | {
+    default?: unknown;
+};
+/**
+ * Loads a component from a package that needs native linking.
+ * When the package can't be loaded (e.g. in Expo Snack), returns a component
+ * that renders a linking error instead of crashing the whole library.
+ *
+ * `load` must contain a literal `require('<packageName>')` so Metro can resolve it statically.
+ */
+declare const loadNativeComponent: <P>(packageName: string, load: () => NativeModule<P>) => React.ComponentType<P>;
+export default loadNativeComponent;