@telus-uds/components-base 1.15.0 → 1.17.0

package/lib-module/utils/props/a11yProps.js

@@ -36,54 +36,57 @@ const nativeA11yPropTypes = {
   onAccessibilityEscape: PropTypes.func,
   onAccessibilityTap: PropTypes.func
 };
-const a11yPropTypes = Platform.select({
+const a11yPropTypes = { ...nativeA11yPropTypes,
   // React Native Web adds many a11y props that alias aria-* attributes
   // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-  web: { ...nativeA11yPropTypes,
-    accessibilityActiveDescendant: PropTypes.string,
-    accessibilityAtomic: PropTypes.bool,
-    accessibilityAutoComplete: PropTypes.string,
-    accessibilityBusy: PropTypes.bool,
-    accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
-    accessibilityColumnCount: PropTypes.number,
-    accessibilityColumnIndex: PropTypes.number,
-    accessibilityColumnSpan: PropTypes.number,
-    accessibilityControls: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
-    accessibilityDescribedBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityDetails: PropTypes.string,
-    accessibilityDisabled: PropTypes.bool,
-    accessibilityErrorMessage: PropTypes.string,
-    accessibilityExpanded: PropTypes.bool,
-    accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityHasPopup: PropTypes.string,
-    accessibilityHidden: PropTypes.bool,
-    accessibilityInvalid: PropTypes.bool,
-    accessibilityKeyShortcuts: PropTypes.string,
-    accessibilityLabelledBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityLevel: PropTypes.number,
-    accessibilityModal: PropTypes.bool,
-    accessibilityMultiline: PropTypes.bool,
-    accessibilityMultiSelectable: PropTypes.bool,
-    accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
-    accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityPlaceholder: PropTypes.string,
-    accessibilityPosInSet: PropTypes.number,
-    accessibilityPressed: PropTypes.bool,
-    accessibilityReadOnly: PropTypes.bool,
-    accessibilityRequired: PropTypes.bool,
-    accessibilityRoleDescription: PropTypes.string,
-    accessibilityRowCount: PropTypes.number,
-    accessibilityRowIndex: PropTypes.number,
-    accessibilityRowSpan: PropTypes.number,
-    accessibilitySelected: PropTypes.bool,
-    accessibilitySetSize: PropTypes.number,
-    accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
-    accessibilityValueMax: PropTypes.number,
-    accessibilityValueMin: PropTypes.number,
-    accessibilityValueNow: PropTypes.number,
-    accessibilityValueText: PropTypes.string
-  },
+  accessibilityActiveDescendant: PropTypes.string,
+  accessibilityAtomic: PropTypes.bool,
+  accessibilityAutoComplete: PropTypes.string,
+  accessibilityBusy: PropTypes.bool,
+  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: PropTypes.number,
+  accessibilityColumnIndex: PropTypes.number,
+  accessibilityColumnSpan: PropTypes.number,
+  accessibilityControls: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityDetails: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  accessibilityErrorMessage: PropTypes.string,
+  accessibilityExpanded: PropTypes.bool,
+  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityHasPopup: PropTypes.string,
+  accessibilityHidden: PropTypes.bool,
+  accessibilityInvalid: PropTypes.bool,
+  accessibilityKeyShortcuts: PropTypes.string,
+  accessibilityLabelledBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityLevel: PropTypes.number,
+  accessibilityModal: PropTypes.bool,
+  accessibilityMultiline: PropTypes.bool,
+  accessibilityMultiSelectable: PropTypes.bool,
+  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityPlaceholder: PropTypes.string,
+  accessibilityPosInSet: PropTypes.number,
+  accessibilityPressed: PropTypes.bool,
+  accessibilityReadOnly: PropTypes.bool,
+  accessibilityRequired: PropTypes.bool,
+  accessibilityRoleDescription: PropTypes.string,
+  accessibilityRowCount: PropTypes.number,
+  accessibilityRowIndex: PropTypes.number,
+  accessibilityRowSpan: PropTypes.number,
+  accessibilitySelected: PropTypes.bool,
+  accessibilitySetSize: PropTypes.number,
+  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: PropTypes.number,
+  accessibilityValueMin: PropTypes.number,
+  accessibilityValueNow: PropTypes.number,
+  accessibilityValueText: PropTypes.string
+};
+const a11yPropTypesByPlatform = Platform.select({
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  web: a11yPropTypes,
   // Ignore web-only props in native builds
   default: nativeA11yPropTypes
 }); // These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
@@ -255,7 +258,7 @@ export default {
    * then spread the returned object into the component's props (usually its outer container).
    */
   select: getPropSelector( // Allow all React Native accessibility props
-  a11yPropTypes, // Allow any `aria-*` attribute on web; ignore them on native
+  a11yPropTypesByPlatform, // Allow any `aria-*` attribute on web; ignore them on native
   Platform.OS === 'web' && /^aria-/, // For the props added and deprecated in React Native Web 0.18, convert them to
   // a form that is platform-appropriate and RNW-version safe
   (key, value) => {

package/package.json

@@ -7,9 +7,10 @@
     "url": "https://github.com/telus/universal-design-system/issues"
   },
   "dependencies": {
-    "airbnb-prop-types": "^2.16.0",
+    "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.4.0",
+    "@telus-uds/system-theme-tokens": "^2.6.0",
+    "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
@@ -21,10 +22,10 @@
     "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/react-native": "11.0.0",
-    "react-test-renderer": "~18.0.0",
     "@testing-library/react-hooks": "~7.0.1",
+    "@testing-library/react-native": "11.0.0",
     "@testing-library/react-native-17": "npm:@testing-library/react-native@7.2.0",
+    "react-test-renderer": "~18.0.0",
     "react-test-renderer-17": "npm:react-test-renderer@17.0.2",
     "webpack": "5.x"
   },
@@ -41,8 +42,8 @@
   "module": "lib-module/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": "^17.0.2 || ~18.0.0",
-    "react-dom": "^17.0.2 || ~18.0.0",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0",
     "react-native": "*",
     "react-native-web": "~0.17.7 || ~0.18.7"
   },
@@ -66,5 +67,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.15.0"
+  "version": "1.17.0"
 }

package/src/BaseProvider/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { PortalProvider } from '@gorhom/portal'
 import A11yInfoProvider from '../A11yInfoProvider'
 import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
@@ -8,7 +9,7 @@ const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
   <A11yInfoProvider>
     <ViewportProvider>
       <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
-        {children}
+        <PortalProvider>{children}</PortalProvider>
       </ThemeProvider>
     </ViewportProvider>
   </A11yInfoProvider>

package/src/Button/ButtonBase.jsx

@@ -148,9 +148,9 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
   })
 }
 
-const selectItemIconTokens = ({ color, iconSize }) => ({
+const selectItemIconTokens = ({ color, iconColor, iconSize }) => ({
   size: iconSize,
-  color
+  color: iconColor || color
 })
 
 const ButtonBase = forwardRef(

package/src/Carousel/Carousel.jsx

@@ -22,6 +22,8 @@ import SkipLink from '../SkipLink'
 import A11yText from '../A11yText'
 import CarouselStepTracker from './CarouselStepTracker'
 import CarouselThumbnailNavigation from './CarouselThumbnailNavigation'
+import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel'
+import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
 import dictionary from './dictionary'
 
 const staticStyles = StyleSheet.create({
@@ -150,7 +152,8 @@ const Carousel = React.forwardRef(
       onAnimationEnd,
       onIndexChanged,
       skipLinkHref,
-      refocus,
+      tabs,
+      refocus = Boolean(tabs),
       title = 'carousel',
       springConfig = undefined,
       thumbnails = undefined,
@@ -177,6 +180,7 @@ const Carousel = React.forwardRef(
       nextIcon,
       showPreviousNextNavigation,
       showPanelNavigation,
+      showPanelTabs,
       spaceBetweenSlideAndPreviousNextNavigation
     } = themeTokens
     const [activeIndex, setActiveIndex] = React.useState(0)
@@ -415,6 +419,9 @@ const Carousel = React.forwardRef(
       [activeIndex, childrenArray.length, itemLabel, getCopy, title]
     )
 
+    const activePanelNavigation =
+      tabs && showPanelTabs ? <CarouselTabsPanel items={tabs} /> : panelNavigation
+
     return (
       <CarouselProvider
         activeIndex={activeIndex}
@@ -511,7 +518,7 @@ const Carousel = React.forwardRef(
             </View>
           )}
         </View>
-        {showPanelNavigation ? panelNavigation : null}
+        {showPanelNavigation ? activePanelNavigation : null}
       </CarouselProvider>
     )
   }
@@ -587,6 +594,12 @@ Carousel.propTypes = {
    * with the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`.
    */
   skipLinkHref: PropTypes.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.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *

package/src/Carousel/CarouselTabs/CarouselTabs.jsx

@@ -3,13 +3,15 @@ import PropTypes from 'prop-types'
 
 import { useResponsiveProp } from '../../utils'
 import Carousel from '../Carousel'
-import CarouselTabsPanel from './CarouselTabsPanel'
 
+/**
+ * @deprecated Please use Carousel and pass the `tabs` prop.
+ */
 const CarouselTabs = forwardRef(({ items, refocus = true, ...carouselProps }, ref) => {
-  const panelNavigation = useResponsiveProp({ md: <CarouselTabsPanel items={items} /> })
+  const tabs = useResponsiveProp({ md: items })
 
   return (
-    <Carousel refocus={refocus} {...carouselProps} ref={ref} panelNavigation={panelNavigation}>
+    <Carousel refocus={refocus} {...carouselProps} ref={ref} tabs={tabs}>
       {items.map(({ title, content }) => (
         <React.Fragment key={title}>{content}</React.Fragment>
       ))}

package/src/List/List.jsx

@@ -1,18 +1,16 @@
 import React, { cloneElement, forwardRef, Children } from 'react'
 import { View, Platform } from 'react-native'
 import PropTypes from 'prop-types'
-import {
-  a11yProps,
-  componentPropType,
-  getTokensPropType,
-  selectSystemProps,
-  variantProp,
-  viewProps
-} from '../utils'
-import ListItem from './ListItem'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const isListItem = (element) => {
+  const elementName = element?.type?.displayName || element?.type?.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
@@ -31,9 +29,7 @@ const List = forwardRef(
   ) => {
     const items = Children.map(children, (child, index) => {
       // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
-      const isListItem = (componentName) => Boolean(componentName === ListItem.displayName)
-
-      if (isListItem(child?.type?.displayName) || isListItem(child?.type?.name)) {
+      if (isListItem(child)) {
         return cloneElement(child, {
           showDivider,
           isLastItem: index + 1 === Children.count(children),
@@ -58,7 +54,7 @@ List.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
-  children: componentPropType('ListItem'),
+  children: PropTypes.node,
   /**
    * In case it is not the last item allow display divider
    */

package/src/List/PressableListItemBase.jsx

@@ -9,12 +9,13 @@ import {
   clickProps,
   linkProps,
   hrefAttrsProp,
+  selectTokens,
   withLinkRouter
 } from '../utils'
 
 import ListItemBase from './ListItemBase'
-import ListItemContent, { tokenTypes as contentTokenTypes } from './ListItemContent'
-import ListItemMark, { tokenTypes as markTokenTypes } from './ListItemMark'
+import ListItemContent from './ListItemContent'
+import ListItemMark from './ListItemMark'
 
 const selectPressableStyles = ({
   backgroundColor,
@@ -39,8 +40,10 @@ const PressableListItemBase = forwardRef(
     const { hrefAttrs, rest: listItemProps } = hrefAttrsProp.bundle(props)
     const handlePress = linkProps.handleHref({ href, onPress })
 
+    const listItemTokens = selectTokens('List', typeof tokens === 'function' ? tokens() : tokens)
+
     return (
-      <ListItemBase ref={listItemRef} tokens={tokens()} {...listItemProps}>
+      <ListItemBase ref={listItemRef} tokens={listItemTokens} {...listItemProps}>
         {({ isLastItem }) => {
           const getTokens = (pressableState) =>
             resolvePressableTokens(tokens, pressableState, { last: isLastItem })
@@ -81,18 +84,13 @@ const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',
     flex: 1
-  },
-  tokens: {
-    ...contentTokenTypes,
-    ...markTokenTypes
   }
 })
 
 PressableListItemBase.propTypes = {
+  ...withLinkRouter.propTypes,
   href: PropTypes.string,
   onPress: PropTypes.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.any,
   icon: PropTypes.elementType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

package/src/QuickLinks/QuickLinks.jsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import { useThemeTokens } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
+import { getTokensPropType, variantProp } from '../utils'
+
+import List from '../List'
+import StackWrap from '../StackView/StackWrap'
+import QuickLinksCard from './QuickLinksCard'
+
+/**
+ * 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 = forwardRef(
+  ({ tokens, variant, listTokens, cardTokens, children, tag = 'ul', ...rest }, ref) => {
+    const viewport = useViewport()
+    const { dividers, list, card, stackSpace, stackGap, stackJustify } = useThemeTokens(
+      'QuickLinks',
+      tokens,
+      variant,
+      {
+        viewport
+      }
+    )
+
+    const content = (list && (
+      <List ref={ref} tokens={listTokens} showDivider={dividers} tag={tag} {...rest}>
+        {children}
+      </List>
+    )) || (
+      <StackWrap
+        space={stackSpace}
+        gap={stackGap}
+        tokens={{ justifyContent: stackJustify }}
+        tag={tag}
+        {...rest}
+      >
+        {children}
+      </StackWrap>
+    )
+
+    return card ? <QuickLinksCard tokens={cardTokens}>{content}</QuickLinksCard> : content
+  }
+)
+
+QuickLinks.displayName = 'QuickLinks'
+
+QuickLinks.propTypes = {
+  tokens: getTokensPropType('QuickLinks'),
+  cardTokens: getTokensPropType('Card'),
+  listTokens: getTokensPropType('QuickLinksList'),
+  tag: PropTypes.string,
+  variant: variantProp.propType,
+  children: PropTypes.node
+}
+
+export default QuickLinks

package/src/QuickLinks/QuickLinksCard.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useThemeTokens } from '../ThemeProvider'
+import { getTokensPropType, variantProp } from '../utils'
+import CardBase from '../Card/CardBase'
+
+/**
+ * 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 = ({ tokens, variant, children }) => {
+  const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant)
+
+  return <CardBase tokens={themeTokens}>{children}</CardBase>
+}
+
+QuickLinksList.propTypes = {
+  tokens: getTokensPropType('QuickLinksCard'),
+  variant: variantProp.propType,
+  children: PropTypes.node
+}
+
+export default QuickLinksList

package/src/QuickLinks/QuickLinksItem.jsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import { getTokensPropType, variantProp, withLinkRouter } from '../utils'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
+
+import PressableListItemBase from '../List/PressableListItemBase'
+import ButtonBase from '../Button/ButtonBase'
+
+/**
+ * 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 = forwardRef(({ tokens, variant, children, ...rest }, ref) => {
+  const viewport = useViewport()
+  const { list } = useThemeTokens('QuickLinks', tokens, variant, { viewport })
+
+  const themeName = list ? 'QuickLinksList' : 'QuickLinksButton'
+
+  const getTokens = useThemeTokensCallback(themeName, tokens, variant)
+
+  return list ? (
+    <PressableListItemBase ref={ref} tokens={getTokens} {...rest}>
+      {children}
+    </PressableListItemBase>
+  ) : (
+    <ButtonBase ref={ref} tokens={getTokens} {...rest}>
+      {children}
+    </ButtonBase>
+  )
+})
+
+QuickLinksItem.displayName = 'QuickLinksItem'
+
+QuickLinksItem.propTypes = {
+  ...withLinkRouter.propTypes,
+  ...PressableListItemBase.propTypes,
+  ...ButtonBase.propTypes,
+  tokens: getTokensPropType('QuickLinksList', 'QuickLinksButton'),
+  variant: variantProp.propType,
+  children: PropTypes.node
+}
+
+export default withLinkRouter(QuickLinksItem)

package/src/QuickLinks/index.js

@@ -0,0 +1,6 @@
+import QuickLinks from './QuickLinks'
+import QuickLinksItem from './QuickLinksItem'
+
+QuickLinks.Item = QuickLinksItem
+
+export default QuickLinks

package/src/Skeleton/Skeleton.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Animated, Platform } from 'react-native'
+import { Animated, Platform, StyleSheet, View } from 'react-native'
 import propTypes from 'prop-types'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
@@ -19,11 +19,10 @@ import skeletonWebAnimation from './skeletonWebAnimation'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectSkeletonStyles = ({ color, radius, fadeAnimation }) => ({
+const selectSkeletonStyles = ({ color, radius }) => ({
   backgroundColor: color,
   borderRadius: radius,
-  maxWidth: '100%',
-  ...fadeAnimation
+  maxWidth: '100%'
 })
 
 const selectLineStyles = ({ skeletonHeight, lineWidth }) => ({
@@ -66,12 +65,13 @@ const Skeleton = forwardRef(
     const skeletonHeight = useSpacingScale(spacingScaleValue)
     const nativeAnimation = useSkeletonNativeAnimation()
 
-    const getAnimationBaseOnPlatform = () => {
-      if (Platform.OS !== 'web') {
-        return nativeAnimation
-      }
+    const getAnimationBasedOnPlatform = () => {
+      const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation
+      // We must pass the animation styles through `StyleSheet.create`
+      // @see https://github.com/necolas/react-native-web/issues/2387
+      const styles = StyleSheet.create({ animation })
 
-      return skeletonWebAnimation
+      return styles.animation
     }
 
     const getLineWidth = () => {
@@ -97,16 +97,22 @@ const Skeleton = forwardRef(
       return selectLineStyles({ skeletonHeight, lineWidth: getLineWidth() })
     }
 
-    const renderSkeleton = (index = 0) => (
-      <Animated.View
-        testID="skeleton"
-        key={`skeleton-${index + 1}`}
-        style={[
-          selectSkeletonStyles({ ...themeTokens, fadeAnimation: getAnimationBaseOnPlatform() }),
-          getStyledBasedOnShape()
-        ]}
-      />
-    )
+    const renderSkeleton = (index = 0) => {
+      // @see https://github.com/necolas/react-native-web/issues/2387
+      const Component = Platform.OS === 'web' ? View : Animated.View
+
+      return (
+        <Component
+          testID="skeleton"
+          key={`skeleton-${index + 1}`}
+          style={[
+            selectSkeletonStyles(themeTokens),
+            getAnimationBasedOnPlatform(),
+            getStyledBasedOnShape()
+          ]}
+        />
+      )
+    }
 
     return (
       <StackView space={themeTokens.spaceBetweenLines} ref={ref} {...selectProps(rest)}>

package/src/Skeleton/useSkeletonNativeAnimation.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { Animated } from 'react-native'
+import { Animated, Platform } from 'react-native'
 import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
 
 const useSkeletonNativeAnimation = () => {
@@ -10,12 +10,12 @@ const useSkeletonNativeAnimation = () => {
       Animated.timing(fadeAnimation, {
         toValue: OPACITY_STOP,
         duration: ANIMATION_DURATION,
-        useNativeDriver: true
+        useNativeDriver: Platform.OS !== 'web'
       }),
       Animated.timing(fadeAnimation, {
         toValue: DEFAULT_OPACITY,
         duration: ANIMATION_DURATION,
-        useNativeDriver: true
+        useNativeDriver: Platform.OS !== 'web'
       })
     ])
     Animated.loop(fade).start()