@hero-design/rn 8.141.0 → 8.141.2-expo-snack

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#5652](https://github.com/Thinkei/hero-design/pull/5652) [`fdf82a6`](https://github.com/Thinkei/hero-design/commit/fdf82a6ff5136ae788041dcd0039951656799d0f) Thanks [@haudao-eh](https://github.com/haudao-eh)! - [Icon] Update stop-outlined mobile icon
+
 ## 8.141.0
 
 ### Minor 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.0",
+  "version": "8.141.2-expo-snack",
   "license": "MIT",
   "main": "lib/index.js",
-  "module": "es/index.js",
   "types": "types/index.d.ts",
   "typesVersions": {
     "*": {
@@ -12,7 +11,6 @@
       ]
     }
   },
-  "react-native": "src/index.ts",
   "scripts": {
     "lint": "eslint src --quiet",
     "type-check": "tsc --noEmit",
@@ -24,6 +22,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/package.json.bak

@@ -0,0 +1,118 @@
+{
+  "name": "@hero-design/rn",
+  "version": "8.141.2",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "types": "types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "locales/*": [
+        "types/locales/*"
+      ]
+    }
+  },
+  "react-native": "src/index.ts",
+  "scripts": {
+    "lint": "eslint src --quiet",
+    "type-check": "tsc --noEmit",
+    "test": "jest --runInBand",
+    "test:watch": "jest --runInBand --watch",
+    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage",
+    "build:js": "rollup -c",
+    "build:types": "tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json",
+    "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": {
+    "@emotion/native": "^11.9.3",
+    "@emotion/react": "^11.9.3",
+    "@hero-design/colors": "8.47.3",
+    "d3": "^7.8.5",
+    "date-fns": "^4.4.0",
+    "hero-editor": "^1.17.0",
+    "nanoid": "^5.0.9"
+  },
+  "peerDependencies": {
+    "@hero-design/react-native-month-year-picker": "^8.46.1",
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
+    "@react-native-community/datetimepicker": "^8.4.4",
+    "@react-native-community/slider": "^5.0.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "expo-linear-gradient": ">=14.0.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-pager-view": "^6.7.0",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-svg": "^15.11.2",
+    "react-native-vector-icons": "^9.1.0",
+    "react-native-webview": "^13.10.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@babel/runtime": "^7.29.7",
+    "@emotion/jest": "^11.11.0",
+    "@eslint/compat": "^1.1.1",
+    "@eslint/js": "^9.8.0",
+    "@hero-design/eslint-plugin": "10.0.0",
+    "@hero-design/react-native-month-year-picker": "^8.46.1",
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
+    "@react-native-community/datetimepicker": "8.4.4",
+    "@react-native-community/slider": "^5.0.1",
+    "@react-native-masked-view/masked-view": "0.3.2",
+    "@react-native/babel-preset": "0.81.5",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@testing-library/jest-native": "^5.4.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^13.0.0",
+    "@types/d3": "^7.4.3",
+    "@types/events": "^3.0.3",
+    "@types/jest": "^29.5.3",
+    "@types/react": "^19.0.0",
+    "@types/react-native-vector-icons": "^6.4.10",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "babel-plugin-inline-import": "^3.0.0",
+    "core-js": "^3.33.0",
+    "eslint": "^9.0.0",
+    "eslint-config-hd": "8.42.7",
+    "expo-linear-gradient": "55.0.9",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.2.1",
+    "jest-junit": "^17.0.0",
+    "prettier-config-hd": "8.42.4",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-pager-view": "6.9.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-native-vector-icons": "^9.1.0",
+    "react-native-webview": "13.15.0",
+    "react-test-renderer": "19.1.0",
+    "rollup": "^4.57.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-flow": "^1.1.1",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.7.3"
+  },
+  "engines": {
+    "node": "^20.0.0 || ^22.0.0"
+  },
+  "prettier": "prettier-config-hd"
+}

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}