@telus-uds/components-base 1.15.0 → 1.17.0

package/lib/BaseProvider/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _portal = require("@gorhom/portal");
+
 var _A11yInfoProvider = _interopRequireDefault(require("../A11yInfoProvider"));
 
 var _ViewportProvider = _interopRequireDefault(require("../ViewportProvider"));
@@ -32,7 +34,9 @@ const BaseProvider = _ref => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
         defaultTheme: defaultTheme,
         themeOptions: themeOptions,
-        children: children
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.PortalProvider, {
+          children: children
+        })
       })
     })
   });

package/lib/Button/ButtonBase.js

@@ -195,11 +195,12 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
 const selectItemIconTokens = _ref8 => {
   let {
     color,
+    iconColor,
     iconSize
   } = _ref8;
   return {
     size: iconSize,
-    color
+    color: iconColor || color
   };
 };
 

package/lib/Carousel/Carousel.js

@@ -41,6 +41,10 @@ var _CarouselStepTracker = _interopRequireDefault(require("./CarouselStepTracker
 
 var _CarouselThumbnailNavigation = _interopRequireDefault(require("./CarouselThumbnailNavigation"));
 
+var _CarouselTabsPanel = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanel"));
+
+var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanelItem"));
+
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -166,7 +170,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onAnimationEnd,
     onIndexChanged,
     skipLinkHref,
-    refocus,
+    tabs,
+    refocus = Boolean(tabs),
     title = 'carousel',
     springConfig = undefined,
     thumbnails = undefined,
@@ -189,6 +194,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     nextIcon,
     showPreviousNextNavigation,
     showPanelNavigation,
+    showPanelTabs,
     spaceBetweenSlideAndPreviousNextNavigation
   } = themeTokens;
 
@@ -442,6 +448,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
   }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
 
+  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
+    items: tabs
+  }) : panelNavigation;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
     activeIndex: activeIndex,
     goTo: goTo,
@@ -517,7 +526,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
       })]
-    }), showPanelNavigation ? panelNavigation : null]
+    }), showPanelNavigation ? activePanelNavigation : null]
   });
 });
 
@@ -599,6 +608,13 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    */
   skipLinkHref: _propTypes.default.string,
 
+  /**
+   * If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.
+   *
+   * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
+   */
+  tabs: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.default.propTypes || {})),
+
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *

package/lib/Carousel/CarouselTabs/CarouselTabs.js

@@ -13,8 +13,6 @@ var _utils = require("../../utils");
 
 var _Carousel = _interopRequireDefault(require("../Carousel"));
 
-var _CarouselTabsPanel = _interopRequireDefault(require("./CarouselTabsPanel"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
@@ -25,22 +23,23 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * @deprecated Please use Carousel and pass the `tabs` prop.
+ */
 const CarouselTabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     items,
     refocus = true,
     ...carouselProps
   } = _ref;
-  const panelNavigation = (0, _utils.useResponsiveProp)({
-    md: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
-      items: items
-    })
+  const tabs = (0, _utils.useResponsiveProp)({
+    md: items
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.default, {
     refocus: refocus,
     ...carouselProps,
     ref: ref,
-    panelNavigation: panelNavigation,
+    tabs: tabs,
     children: items.map(_ref2 => {
       let {
         title,

package/lib/List/List.js

@@ -15,8 +15,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
-var _ListItem = _interopRequireDefault(require("./ListItem"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,11 +24,20 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+const isListItem = element => {
+  var _element$type, _element$type2;
+
+  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name); // Match our own ListItem, and also, custom list items
+
+  return Boolean(elementName.match(/Item/));
+};
 /**
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
 
+
 const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
@@ -45,12 +52,8 @@ const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = _ref;
 
   const items = _react.Children.map(children, (child, index) => {
-    var _child$type, _child$type2;
-
     // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
-    const isListItem = componentName => Boolean(componentName === _ListItem.default.displayName);
-
-    if (isListItem(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || isListItem(child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name)) {
+    if (isListItem(child)) {
       return /*#__PURE__*/(0, _react.cloneElement)(child, {
         showDivider,
         isLastItem: index + 1 === _react.Children.count(children),
@@ -74,7 +77,7 @@ List.displayName = 'List';
 List.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,
-  children: (0, _utils.componentPropType)('ListItem'),
+  children: _propTypes.default.node,
 
   /**
    * In case it is not the last item allow display divider

package/lib/List/PressableListItemBase.js

@@ -21,9 +21,9 @@ var _utils = require("../utils");
 
 var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
 
-var _ListItemContent = _interopRequireWildcard(require("./ListItemContent"));
+var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
 
-var _ListItemMark = _interopRequireWildcard(require("./ListItemMark"));
+var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -82,9 +82,10 @@ const PressableListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
     onPress
   });
 
+  const listItemTokens = (0, _utils.selectTokens)('List', typeof tokens === 'function' ? tokens() : tokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
     ref: listItemRef,
-    tokens: tokens(),
+    tokens: listItemTokens,
     ...listItemProps,
     children: _ref3 => {
       let {
@@ -125,17 +126,12 @@ const staticStyles = _StyleSheet.default.create({
   itemContainer: {
     flexDirection: 'row',
     flex: 1
-  },
-  tokens: { ..._ListItemContent.tokenTypes,
-    ..._ListItemMark.tokenTypes
   }
 });
 
-PressableListItemBase.propTypes = {
+PressableListItemBase.propTypes = { ..._utils.withLinkRouter.propTypes,
   href: _propTypes.default.string,
   onPress: _propTypes.default.func,
-  // TODO - type this better, maybe import the subcomponent token types and run it through util
-  // eslint-disable-next-line react/forbid-prop-types
   tokens: _propTypes.default.any,
   icon: _propTypes.default.elementType,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),

package/lib/QuickLinks/QuickLinks.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _utils = require("../utils");
+
+var _List = _interopRequireDefault(require("../List"));
+
+var _StackWrap = _interopRequireDefault(require("../StackView/StackWrap"));
+
+var _QuickLinksCard = _interopRequireDefault(require("./QuickLinksCard"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * QuickLinks renders a list of interactive items. How it renders these items depends on theme options:
+ *  - If the theme returns `list` token as true, it renders an ordered list based on List
+ *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
+ *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
+ */
+const QuickLinks = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    listTokens,
+    cardTokens,
+    children,
+    tag = 'ul',
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    dividers,
+    list,
+    card,
+    stackSpace,
+    stackGap,
+    stackJustify
+  } = (0, _ThemeProvider.useThemeTokens)('QuickLinks', tokens, variant, {
+    viewport
+  });
+  const content = list && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
+    ref: ref,
+    tokens: listTokens,
+    showDivider: dividers,
+    tag: tag,
+    ...rest,
+    children: children
+  }) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.default, {
+    space: stackSpace,
+    gap: stackGap,
+    tokens: {
+      justifyContent: stackJustify
+    },
+    tag: tag,
+    ...rest,
+    children: children
+  });
+  return card ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuickLinksCard.default, {
+    tokens: cardTokens,
+    children: content
+  }) : content;
+});
+QuickLinks.displayName = 'QuickLinks';
+QuickLinks.propTypes = {
+  tokens: (0, _utils.getTokensPropType)('QuickLinks'),
+  cardTokens: (0, _utils.getTokensPropType)('Card'),
+  listTokens: (0, _utils.getTokensPropType)('QuickLinksList'),
+  tag: _propTypes.default.string,
+  variant: _utils.variantProp.propType,
+  children: _propTypes.default.node
+};
+var _default = QuickLinks;
+exports.default = _default;

package/lib/QuickLinks/QuickLinksCard.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _CardBase = _interopRequireDefault(require("../Card/CardBase"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Private subcomponent for use within QuickLinks.
+ *
+ * Restyled Card with identical behaviour to Card, but themed according to the
+ * QuickLinksCard theme rather than the Card theme.
+ */
+const QuickLinksList = _ref => {
+  let {
+    tokens,
+    variant,
+    children
+  } = _ref;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('QuickLinksCard', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+    tokens: themeTokens,
+    children: children
+  });
+};
+
+QuickLinksList.propTypes = {
+  tokens: (0, _utils.getTokensPropType)('QuickLinksCard'),
+  variant: _utils.variantProp.propType,
+  children: _propTypes.default.node
+};
+var _default = QuickLinksList;
+exports.default = _default;

package/lib/QuickLinks/QuickLinksItem.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../utils");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _PressableListItemBase = _interopRequireDefault(require("../List/PressableListItemBase"));
+
+var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
+ *
+ * Receives props injected by QuickLinks and renders the appropriate child component.
+ */
+const QuickLinksItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    list
+  } = (0, _ThemeProvider.useThemeTokens)('QuickLinks', tokens, variant, {
+    viewport
+  });
+  const themeName = list ? 'QuickLinksList' : 'QuickLinksButton';
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)(themeName, tokens, variant);
+  return list ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableListItemBase.default, {
+    ref: ref,
+    tokens: getTokens,
+    ...rest,
+    children: children
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    tokens: getTokens,
+    ...rest,
+    children: children
+  });
+});
+QuickLinksItem.displayName = 'QuickLinksItem';
+QuickLinksItem.propTypes = { ..._utils.withLinkRouter.propTypes,
+  ..._PressableListItemBase.default.propTypes,
+  ..._ButtonBase.default.propTypes,
+  tokens: (0, _utils.getTokensPropType)('QuickLinksList', 'QuickLinksButton'),
+  variant: _utils.variantProp.propType,
+  children: _propTypes.default.node
+};
+
+var _default = (0, _utils.withLinkRouter)(QuickLinksItem);
+
+exports.default = _default;

package/lib/QuickLinks/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));
+
+var _QuickLinksItem = _interopRequireDefault(require("./QuickLinksItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_QuickLinks.default.Item = _QuickLinksItem.default;
+var _default = _QuickLinks.default;
+exports.default = _default;

package/lib/Skeleton/Skeleton.js

@@ -11,6 +11,10 @@ var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
@@ -36,14 +40,12 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectSkeletonStyles = _ref => {
   let {
     color,
-    radius,
-    fadeAnimation
+    radius
   } = _ref;
   return {
     backgroundColor: color,
     borderRadius: radius,
-    maxWidth: '100%',
-    ...fadeAnimation
+    maxWidth: '100%'
   };
 };
 
@@ -101,12 +103,15 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
   const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
 
-  const getAnimationBaseOnPlatform = () => {
-    if (_Platform.default.OS !== 'web') {
-      return nativeAnimation;
-    }
+  const getAnimationBasedOnPlatform = () => {
+    const animation = _Platform.default.OS === 'web' ? _skeletonWebAnimation.default : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    // @see https://github.com/necolas/react-native-web/issues/2387
+
+    const styles = _StyleSheet.default.create({
+      animation
+    });
 
-    return _skeletonWebAnimation.default;
+    return styles.animation;
   };
 
   const getLineWidth = () => {
@@ -140,11 +145,11 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
 
   const renderSkeleton = function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+    // @see https://github.com/necolas/react-native-web/issues/2387
+    const Component = _Platform.default.OS === 'web' ? _View.default : _Animated.default.View;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
       testID: "skeleton",
-      style: [selectSkeletonStyles({ ...themeTokens,
-        fadeAnimation: getAnimationBaseOnPlatform()
-      }), getStyledBasedOnShape()]
+      style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
     }, "skeleton-".concat(index + 1));
   };
 

package/lib/Skeleton/useSkeletonNativeAnimation.js

@@ -9,6 +9,8 @@ var _react = require("react");
 
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _skeleton = require("./skeleton.constant");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,11 +21,11 @@ const useSkeletonNativeAnimation = () => {
     const fade = _Animated.default.sequence([_Animated.default.timing(fadeAnimation, {
       toValue: _skeleton.OPACITY_STOP,
       duration: _skeleton.ANIMATION_DURATION,
-      useNativeDriver: true
+      useNativeDriver: _Platform.default.OS !== 'web'
     }), _Animated.default.timing(fadeAnimation, {
       toValue: _skeleton.DEFAULT_OPACITY,
       duration: _skeleton.ANIMATION_DURATION,
-      useNativeDriver: true
+      useNativeDriver: _Platform.default.OS !== 'web'
     })]);
 
     _Animated.default.loop(fade).start();