@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/utils/withLinkRouter.js

@@ -1,23 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _hasOwnProperty = _interopRequireDefault(require("./hasOwnProperty"));
-
-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; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import hasOwnProperty from './hasOwnProperty';
 
 /**
  * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
@@ -34,7 +17,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @example A LinkRouter component to be used with link-like components might look like:
  *
  * ```jsx
- * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ * const LinkLinkRouter = React.forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
  *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
  *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
  * })
@@ -47,51 +30,55 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
  * ```
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const withLinkRouter = Component => {
-  const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  const wrappedComponent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       LinkRouter,
       linkRouterProps,
       ...props
     } = _ref;
-    if (!LinkRouter) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props,
+    if (!LinkRouter) return /*#__PURE__*/_jsx(Component, {
+      ...props,
       ref: ref
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkRouter, {
+    return /*#__PURE__*/_jsx(LinkRouter, {
       linkRouterProps: linkRouterProps,
       Component: Component,
       ref: ref,
       ...props
     });
-  }); // Ensure the returned component has appropriate outer properties set:
+  });
 
+  // Ensure the returned component has appropriate outer properties set:
   /* eslint-disable-next-line react/forbid-foreign-prop-types */
-
   const {
     displayName,
     name,
     propTypes,
     ...otherProperties
-  } = Component; // Apply unique component name as a displayName
+  } = Component;
 
-  wrappedComponent.displayName = Component.displayName || Component.name; // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+  // Apply unique component name as a displayName
+  wrappedComponent.displayName = Component.displayName || Component.name;
 
-  wrappedComponent.propTypes = { ...Component.propTypes,
+  // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+  wrappedComponent.propTypes = {
+    ...Component.propTypes,
     ...withLinkRouter.propTypes
-  }; // Forward any other properties explicitly set e.g. Component.SubComponent
+  };
 
+  // Forward any other properties explicitly set e.g. Component.SubComponent
   Object.keys(otherProperties).forEach(key => {
     // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
-    if ((0, _hasOwnProperty.default)(Component, key) && !(0, _hasOwnProperty.default)(wrappedComponent, key)) {
+    if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
       wrappedComponent[key] = Component[key];
     }
   });
   return wrappedComponent;
 };
-
 withLinkRouter.propTypes = {
-  LinkRouter: _propTypes.default.elementType,
-  linkRouterProps: _propTypes.default.object
+  LinkRouter: PropTypes.elementType,
+  linkRouterProps: PropTypes.object
 };
-var _default = withLinkRouter;
-exports.default = _default;
+export default withLinkRouter;

package/package.json

@@ -3,6 +3,7 @@
   "browserslist": [
     "extends @telus-uds/browserslist-config"
   ],
+  "type": "module",
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
   },
@@ -10,44 +11,56 @@
     "@floating-ui/react-dom": "^1.0.1",
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.10.0",
+    "@react-native-picker/picker": "^2.9.0",
+    "@telus-uds/system-constants": "^2.0.0",
+    "@telus-uds/system-theme-tokens": "^3.0.0",
     "airbnb-prop-types": "^2.16.0",
+    "css-mediaquery": "^0.1.2",
+    "expo-document-picker": "~10.3.0",
+    "expo-linear-gradient": "^12.5.0",
+    "expo-modules-core": "^1.12.24",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
+    "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
-    "react-native-picker-select": "^8.0.4",
-    "semver": "^7.3.5"
+    "react-native-picker-select": "^9.3.1",
+    "semver": "7.5.2",
+    "string.prototype.matchall": "^4.0.9"
   },
   "description": "Base components",
   "devDependencies": {
-    "@telus-uds/browserslist-config": "^1.0.4",
+    "@babel/plugin-transform-private-methods": "^7.25.4",
+    "@telus-uds/browserslist-config": "^1.0.5",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react": "^13.3.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"
   },
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    },
+    "./server": {
+      "import": "./lib/server.js",
+      "default": "./lib/server.js"
+    }
   },
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "keywords": [
     "base"
   ],
-  "license": "UNLICENSED",
+  "license": "MIT",
   "main": "lib/index.js",
-  "module": "lib-module/index.js",
+  "module": "lib/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "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"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "^0.74.5",
+    "react-native-web": "^0.19.10"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -62,15 +75,12 @@
     "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
     "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
-    "build": "npm run build:code && npm run build:docs",
-    "build:main": "babel src -d lib",
-    "build:module": "babel src -d lib-module --env-name module",
-    "build:code": "npm run build:main && npm run build:module",
-    "build:docs": "babel-node --plugins=@telus-uds/babel-plugin-react-docgen generate-component-docs.js"
+    "build": "babel src -d lib --env-name module"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "2.0.0"
+  "version": "2.0.1",
+  "types": "types/index.d.ts"
 }

package/src/A11yInfoProvider/index.jsx

@@ -1,15 +1,16 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { AccessibilityInfo, Platform } from 'react-native'
 
-const ScreenReaderContext = createContext(false)
-const ReducedMotionContext = createContext(false)
+const ScreenReaderContext = React.createContext(false)
+const ReducedMotionContext = React.createContext(false)
 
-const A11yInfoProvider = ({ children }) => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
+// eslint-disable-next-line no-unused-vars
+const A11yInfoProvider = React.forwardRef(({ children }, _) => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false)
+  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false)
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (process.env.NODE_ENV === 'test') {
       // On Jest these effects do nothing but can cause `act` state change warnings
       // and "...after the Jest environment has been torn down" errors, so skip them.
@@ -20,10 +21,6 @@ const A11yInfoProvider = ({ children }) => {
       'reduceMotionChanged',
       setReduceMotionEnabled
     )
-    const screenReaderSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      setScreenReaderEnabled
-    )
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([
@@ -50,12 +47,6 @@ const A11yInfoProvider = ({ children }) => {
       } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
         AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled)
       }
-
-      if (typeof screenReaderSubscription?.remove === 'function') {
-        screenReaderSubscription?.remove()
-      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
-        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled)
-      }
     }
   }, [])
 
@@ -66,7 +57,9 @@ const A11yInfoProvider = ({ children }) => {
       </ScreenReaderContext.Provider>
     </ReducedMotionContext.Provider>
   )
-}
+})
+
+A11yInfoProvider.displayName = 'A11yInfoProvider'
 
 A11yInfoProvider.propTypes = {
   children: PropTypes.node.isRequired
@@ -75,8 +68,8 @@ A11yInfoProvider.propTypes = {
 export default A11yInfoProvider
 
 export const useA11yInfo = () => {
-  const screenReaderEnabled = useContext(ScreenReaderContext)
-  const reduceMotionEnabled = useContext(ReducedMotionContext)
+  const screenReaderEnabled = React.useContext(ScreenReaderContext)
+  const reduceMotionEnabled = React.useContext(ReducedMotionContext)
 
   return {
     reduceMotionEnabled,

package/src/A11yText/index.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -12,7 +12,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
+const A11yText = React.forwardRef(({ text, heading, role = 'text', ...rest }, ref) => {
   const selectedProps = selectProps({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
@@ -20,7 +20,7 @@ const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
     // see https://github.com/facebook/react-native/issues/30851#issuecomment-790165489
     accessible: Platform.OS === 'ios',
     accessibilityLabel: text,
-    accessibilityRole: heading ? 'header' : 'text',
+    accessibilityRole: heading ? 'header' : role,
     ...rest
   })
 
@@ -31,8 +31,18 @@ A11yText.displayName = 'A11yText'
 
 A11yText.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Text to be read by screen readers
+   */
   text: PropTypes.string.isRequired,
-  heading: PropTypes.bool
+  /**
+   * Whether text should be rendered as a heading
+   */
+  heading: PropTypes.bool,
+  /**
+   * Role of the element
+   */
+  role: PropTypes.string
 }
 
 const styles = StyleSheet.create({

package/src/ActionCard/ActionCard.jsx

@@ -0,0 +1,306 @@
+import React from 'react'
+import { Animated, View, StyleSheet, Text } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  wrapStringsInText,
+  clickProps,
+  hrefAttrsProp,
+  linkProps
+} from '../utils'
+import Icon from '../Icon'
+import Card from '../Card'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+
+const selectCardStyles = (styles) =>
+  ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
+    if (styles[key]) acc[key] = styles[key]
+    return acc
+  }, {})
+
+const selectInteractiveCardStyles = ({
+  backgroundColor,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop
+}) => ({
+  ...(backgroundColor && { backgroundColor }),
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop
+})
+
+const selectIconStyles = ({
+  iconMarginBottom,
+  iconMarginLeft,
+  iconMarginRight,
+  iconMarginTop
+}) => ({
+  marginBottom: iconMarginBottom,
+  marginLeft: iconMarginLeft,
+  marginRight: iconMarginRight,
+  marginTop: iconMarginTop
+})
+
+const selectIconProps = ({ icon, iconBackgroundColor, iconColor }) => ({
+  icon,
+  variant: { background: true, padding: 'small' },
+  tokens: { backgroundColor: iconBackgroundColor, color: iconColor }
+})
+
+const selectTitleStyles = ({
+  titleMarginBottom,
+  titleMarginLeft,
+  titleMarginRight,
+  titleMarginTop
+}) => ({
+  marginBottom: titleMarginBottom,
+  marginLeft: titleMarginLeft,
+  marginRight: titleMarginRight,
+  marginTop: titleMarginTop
+})
+
+const selectTitleTextStyles = ({
+  titleFontColor,
+  titleFontName,
+  titleFontSize,
+  titleFontWeight,
+  titleLineHeight
+}) =>
+  applyTextStyles({
+    fontColor: titleFontColor,
+    fontName: titleFontName,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  })
+
+const selectContentStyles = ({
+  contentMarginBottom,
+  contentMarginLeft,
+  contentMarginRight,
+  contentMarginTop
+}) => ({
+  marginBottom: contentMarginBottom,
+  marginLeft: contentMarginLeft,
+  marginRight: contentMarginRight,
+  marginTop: contentMarginTop
+})
+
+const selectContentTextStyles = ({
+  contentFontColor,
+  contentFontName,
+  contentFontSize,
+  contentFontWeight,
+  contentLineHeight
+}) =>
+  applyTextStyles({
+    fontColor: contentFontColor,
+    fontName: contentFontName,
+    fontSize: contentFontSize,
+    fontWeight: contentFontWeight,
+    lineHeight: contentLineHeight
+  })
+
+const selectStatusIconProps = ({ statusIcon, statusIconColor }) => ({
+  icon: statusIcon,
+  tokens: { color: statusIconColor },
+  variant: { size: 'micro' }
+})
+
+const selectActionIconStyles = ({
+  actionIconMarginBottom,
+  actionIconMarginLeft,
+  actionIconMarginRight,
+  actionIconMarginTop
+}) => ({
+  marginBottom: actionIconMarginBottom,
+  marginLeft: actionIconMarginLeft,
+  marginRight: actionIconMarginRight,
+  marginTop: actionIconMarginTop
+})
+
+const selectActionIconProps = ({ actionIcon, actionIconColor }) => ({
+  icon: actionIcon,
+  tokens: { color: actionIconColor }
+})
+
+const ACTION_ICON_ANIMATION_DURATION = 100
+
+/**
+ * ActionCard component represents a card with an action that can be triggered by the user.
+ *
+ * @component
+ * @example
+ * return (
+ *   <ActionCard
+ *     icon={<Icon icon={Icons.EyeMasked} />}
+ *     title="Like"
+ *     href="/like"
+ *     accessibilityRole="link"
+ *     tokens={themeTokens}
+ *     variant={{validation: 'warning'}}
+ *     onPress={() => handleLike()}
+ *   >
+ *    Click here to like the post
+ *   </ActionCard>
+ * )
+ */
+const ActionCard = React.forwardRef(
+  (
+    { icon, title, children, href, direction = true, accessibilityRole, tokens, variant, ...rest },
+    ref
+  ) => {
+    const themeTokens = useThemeTokens('ActionCard', tokens, variant)
+
+    const actionIconAnimation = React.useRef(new Animated.Value(0)).current
+
+    const { onPress, ...props } = clickProps.toPressProps(rest)
+    const { hrefAttrs, rawRest } = hrefAttrsProp.bundle(props)
+    const selectedProps = selectProps({
+      accessibilityRole,
+      href,
+      onPress: linkProps.handleHref({ href, onPress }),
+      hrefAttrs,
+      ...rawRest
+    })
+
+    return (
+      <Card
+        ref={ref}
+        interactiveCard={{
+          body: (pressableState) => {
+            const animate = pressableState.pressed || pressableState.hover || pressableState.focus
+            Animated.timing(actionIconAnimation, {
+              toValue: animate ? themeTokens.actionIconTranslate : 0,
+              duration: ACTION_ICON_ANIMATION_DURATION,
+              useNativeDriver: false
+            }).start()
+
+            return (
+              <View style={staticStyles.container}>
+                {icon && (
+                  <View style={selectIconStyles(themeTokens)}>
+                    <Icon
+                      {...selectIconProps({
+                        icon,
+                        ...themeTokens
+                      })}
+                    />
+                  </View>
+                )}
+                <View style={staticStyles.content}>
+                  <View style={staticStyles.header}>
+                    <View style={[selectTitleStyles(themeTokens), staticStyles.title]}>
+                      <Text>
+                        {wrapStringsInText(title, { style: selectTitleTextStyles(themeTokens) })}
+                        {themeTokens.statusIcon && (
+                          <View style={staticStyles.statusIcon}>
+                            <Icon {...selectStatusIconProps(themeTokens)} />
+                          </View>
+                        )}
+                      </Text>
+                    </View>
+                    <View style={staticStyles.icons}>
+                      {direction && (
+                        <Animated.View
+                          style={[
+                            selectActionIconStyles(themeTokens),
+                            { transform: [{ translateX: actionIconAnimation }] }
+                          ]}
+                        >
+                          <Icon {...selectActionIconProps(themeTokens)} />
+                        </Animated.View>
+                      )}
+                    </View>
+                  </View>
+                  <View style={[staticStyles.body, selectContentStyles(themeTokens)]}>
+                    {typeof children === 'string'
+                      ? wrapStringsInText(children, {
+                          style: selectContentTextStyles(themeTokens)
+                        })
+                      : children}
+                  </View>
+                </View>
+              </View>
+            )
+          },
+          tokens: selectInteractiveCardStyles(themeTokens)
+        }}
+        tokens={selectCardStyles(themeTokens)}
+        {...selectedProps}
+      />
+    )
+  }
+)
+
+ActionCard.displayName = 'ActionCard'
+
+ActionCard.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('ActionCard'),
+  variant: variantProp.propType,
+  /**
+   * Icon for the ActionCard
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Title for the ActionCard
+   */
+  title: PropTypes.string,
+  /**
+   * Children for the ActionCard
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  /**
+   * href for the ActionCard
+   */
+  href: PropTypes.string,
+  /**
+   * Enable or disable the direction of the ActionCard
+   */
+  direction: PropTypes.bool,
+  /**
+   * AccesibilityRole for the ActionCard
+   */
+  accessibilityRole: PropTypes.string
+}
+
+const staticStyles = StyleSheet.create({
+  body: {
+    flexDirection: 'column'
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'column'
+  },
+  icons: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  title: {
+    flexShrink: 1
+  },
+  statusIcon: {
+    marginLeft: 4
+  }
+})
+
+export default ActionCard

package/src/ActionCard/index.js

@@ -0,0 +1,3 @@
+import ActionCard from './ActionCard'
+
+export default ActionCard

package/src/ActivityIndicator/Spinner.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 import { useA11yInfo } from '../A11yInfoProvider'
 
@@ -21,7 +21,7 @@ const bezierProps = {
 }
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
+const Spinner = React.forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { reduceMotionEnabled } = useA11yInfo()
   const reduceMotion = reduceMotionEnabled || isStatic
   return (
@@ -53,6 +53,7 @@ const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false },
           r="20"
           strokeDasharray={reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]}
           strokeDashoffset={0}
+          vectorEffect="non-scaling-stroke"
         >
           {reduceMotion ? null : (
             <>

package/src/ActivityIndicator/Spinner.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Animated, Easing, StyleSheet, View } from 'react-native'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 import { useA11yInfo } from '../A11yInfoProvider'
@@ -6,7 +6,7 @@ import { useA11yInfo } from '../A11yInfoProvider'
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
-const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
+const Spinner = React.forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
   const { reduceMotionEnabled } = useA11yInfo()
   const reduceMotion = reduceMotionEnabled || isStatic