react-native-system-ui 0.0.5 → 0.0.6

package/dist/es/components/image/Image.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ActivityIndicator, Image as RNImage, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 import { isNumber, isString, isText } from '../../utils';
@@ -105,11 +105,11 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     container: containerLayoutStyle,
     image: imageStyleWithoutLayout
-  } = splitImageStyle(style);
-  const actualSource = source ? source : src ? {
+  } = useMemo(() => splitImageStyle(style), [style]);
+  const actualSource = useMemo(() => source ? source : src ? {
     uri: src
-  } : undefined;
-  const sourceKey = (() => {
+  } : undefined, [source, src]);
+  const sourceKey = useMemo(() => {
     if (source) {
       if (typeof source === 'number') return `res:${source}`;
       const uri = resolveSourceUri(source);
@@ -118,7 +118,7 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     if (src) return `src:${src}`;
     return 'none';
-  })();
+  }, [source, src]);
   const resolvedAccessibilityLabel = alt ?? accessibilityLabel ?? ariaLabel;
   const [status, setStatus] = useState(() => actualSource ? 'loading' : 'idle');
   useEffect(() => {
@@ -144,11 +144,11 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     });
   }, [handleError]);
-  const uri = resolveSourceUri(actualSource);
-  const normalizedUri = isString(uri) ? uri.toLowerCase() : undefined;
-  const isSvg = !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
-  const resolvedLoadingSize = isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
-  const resolvedErrorIconSize = iconSizeProp ?? tokens.defaults.iconSize;
+  const uri = useMemo(() => resolveSourceUri(actualSource), [actualSource]);
+  const normalizedUri = useMemo(() => isString(uri) ? uri.toLowerCase() : undefined, [uri]);
+  const isSvg = useMemo(() => !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?')), [normalizedUri]);
+  const resolvedLoadingSize = useMemo(() => isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize, [loadingSize, tokens.defaults.loadingIndicatorBaseSize]);
+  const resolvedErrorIconSize = useMemo(() => iconSizeProp ?? tokens.defaults.iconSize, [iconSizeProp, tokens.defaults.iconSize]);
   const containerRole = onPress ? 'button' : undefined;
   const pressableProps = onPress ? {
     onPress
@@ -170,7 +170,7 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }, node) : node;
   };
-  const containerStyles = [tokens.layout.container, {
+  const containerStyles = useMemo(() => [tokens.layout.container, {
     width: width,
     height: height,
     backgroundColor: tokens.colors.background
@@ -178,8 +178,12 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     borderRadius: tokens.defaults.roundRadius
   } : isNumber(radius) ? {
     borderRadius: radius
-  } : undefined, containerStyle, containerLayoutStyle];
+  } : undefined, containerStyle, containerLayoutStyle], [containerLayoutStyle, containerStyle, height, radius, round, tokens.colors.background, tokens.defaults.roundRadius, tokens.layout.container, width]);
   const imageAccessibilityLabel = !onPress ? resolvedAccessibilityLabel : undefined;
+  const webImageStyle = Platform.OS === 'web' ? {
+    height: 'revert-layer',
+    width: 'revert-layer'
+  } : undefined;
   const imageNode = actualSource ? isSvg && Platform.OS !== 'web' && uri ? /*#__PURE__*/React.createElement(SvgUri, _extends({
     width: "100%",
     height: "100%",
@@ -197,7 +201,7 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     accessibilityLabel: imageAccessibilityLabel
   }, rest, {
     source: actualSource,
-    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout],
+    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout, webImageStyle],
     resizeMode: resolveFitMode(fit),
     onLoad: handleLoad,
     onError: handleError

package/dist/es/components/image-preview/ImagePreview.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Image as RNImage, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import Popup from '../popup';
 import Swiper from '../swiper';
@@ -80,9 +80,9 @@ const ImagePreview = /*#__PURE__*/React.forwardRef((props, ref) => {
     beforeClose,
     onClose
   };
-  const resolvedImages = images.map(img => isString(img) ? {
+  const resolvedImages = useMemo(() => images.map(img => isString(img) ? {
     uri: img
-  } : img);
+  } : img), [images]);
   useEffect(() => {
     setActive(current => clampIndex(current, imagesLen));
   }, [imagesLen]);
@@ -180,45 +180,48 @@ const ImagePreview = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (dx * dx + dy * dy >= TAP_MOVE_THRESHOLD_SQ) return;
     handleImagePress();
   }, [handleImagePress, resetTap]);
-  const pressableHandlers = {
-    onTouchStart: e => {
-      const {
-        pageX,
-        pageY
-      } = e.nativeEvent;
-      if (pageX != null && pageY != null) markTapStart(pageX, pageY);
-    },
-    onTouchMove: e => {
-      const {
-        pageX,
-        pageY
-      } = e.nativeEvent;
-      if (pageX != null && pageY != null) markTapMove(pageX, pageY);
-    },
-    onTouchEnd: e => {
-      const {
-        pageX,
-        pageY
-      } = e.nativeEvent;
-      if (pageX != null && pageY != null) tryTapEnd(pageX, pageY);
-    },
-    onTouchCancel: resetTap
-  };
-  if (IS_WEB) {
-    pressableHandlers.onMouseDown = e => {
-      const ne = e.nativeEvent;
-      if (ne?.pageX != null && ne?.pageY != null) markTapStart(ne.pageX, ne.pageY);
-    };
-    pressableHandlers.onMouseMove = e => {
-      const ne = e.nativeEvent;
-      if (ne?.buttons !== 1) return;
-      if (ne?.pageX != null && ne?.pageY != null) markTapMove(ne.pageX, ne.pageY);
-    };
-    pressableHandlers.onMouseUp = e => {
-      const ne = e.nativeEvent;
-      if (ne?.pageX != null && ne?.pageY != null) tryTapEnd(ne.pageX, ne.pageY);
+  const pressableHandlers = useMemo(() => {
+    const handlers = {
+      onTouchStart: e => {
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        if (pageX != null && pageY != null) markTapStart(pageX, pageY);
+      },
+      onTouchMove: e => {
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        if (pageX != null && pageY != null) markTapMove(pageX, pageY);
+      },
+      onTouchEnd: e => {
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        if (pageX != null && pageY != null) tryTapEnd(pageX, pageY);
+      },
+      onTouchCancel: resetTap
     };
-  }
+    if (IS_WEB) {
+      handlers.onMouseDown = e => {
+        const ne = e.nativeEvent;
+        if (ne?.pageX != null && ne?.pageY != null) markTapStart(ne.pageX, ne.pageY);
+      };
+      handlers.onMouseMove = e => {
+        const ne = e.nativeEvent;
+        if (ne?.buttons !== 1) return;
+        if (ne?.pageX != null && ne?.pageY != null) markTapMove(ne.pageX, ne.pageY);
+      };
+      handlers.onMouseUp = e => {
+        const ne = e.nativeEvent;
+        if (ne?.pageX != null && ne?.pageY != null) tryTapEnd(ne.pageX, ne.pageY);
+      };
+    }
+    return handlers;
+  }, [markTapMove, markTapStart, resetTap, tryTapEnd]);
   const renderIndex = useCallback((current, total) => {
     if (!showIndex || total === 0) return null;
     const indexText = `${current + 1} / ${total}`;
@@ -283,7 +286,6 @@ const ImagePreview = /*#__PURE__*/React.forwardRef((props, ref) => {
     initialSwipe: clampIndex(startPosition, imagesLen),
     loop: false,
     autoplay: false,
-    duration: swipeDuration,
     touchable: imagesLen > 1,
     indicator: (total, current) => /*#__PURE__*/React.createElement(React.Fragment, null, renderIndex(current, total), showIndicators && total > 1 && /*#__PURE__*/React.createElement(Swiper.PagIndicator, {
       total: total,

package/dist/es/components/index.js

@@ -49,8 +49,6 @@ export { default as Slider } from './slider';
 export { useSliderTokens } from './slider/tokens';
 export { default as Stepper } from './stepper';
 export { useStepperTokens } from './stepper/tokens';
-export { default as Rate } from './rate';
-export { useRateTokens } from './rate/tokens';
 export { default as Selector } from './selector';
 export { useSelectorTokens } from './selector/tokens';
 export { default as Search } from './search';
@@ -64,8 +62,7 @@ export { default as Collapse } from './collapse';
 export { useCollapseTokens } from './collapse/tokens';
 export { default as Popup } from './popup';
 export { usePopupTokens } from './popup/tokens';
-export { default as Overlay } from './overlay';
-export { useOverlayTokens } from './overlay/tokens';
+export { default as Overlay, OverlayProvider } from './overlay';
 export { default as Dialog } from './dialog';
 export { useDialogTokens } from './dialog/tokens';
 export { default as Toast } from './toast';
@@ -92,32 +89,20 @@ export { default as NavBar } from './nav-bar';
 export { useNavBarTokens } from './nav-bar/tokens';
 export { default as Sidebar } from './sidebar';
 export { useSidebarTokens } from './sidebar/tokens';
-export { default as IndexBar } from './index-bar';
-export { useIndexBarTokens } from './index-bar/tokens';
 export { default as ActionSheet } from './action-sheet';
 export { useActionSheetTokens } from './action-sheet/tokens';
 export { default as ShareSheet } from './share-sheet';
 export { useShareSheetTokens } from './share-sheet/tokens';
-export { default as DropdownMenu } from './dropdown-menu';
-export { useDropdownMenuTokens } from './dropdown-menu/tokens';
 export { default as Area } from './area';
-export { default as List } from './list';
-export { useListTokens } from './list/tokens';
-export { default as PullRefresh } from './pull-refresh';
-export { usePullRefreshTokens } from './pull-refresh/tokens';
 export { default as ImagePreview } from './image-preview';
 export { useImagePreviewTokens } from './image-preview/tokens';
 export { default as Swiper } from './swiper';
 export { SwiperItem } from './swiper';
 export { SwiperPagIndicator } from './swiper';
 export { useSwiperPagIndicatorTokens } from './swiper';
-export { default as Uploader } from './uploader';
-export { useUploaderTokens } from './uploader';
 export { default as Skeleton } from './skeleton';
 export { useSkeletonTokens } from './skeleton';
 export { default as CountDown } from './count-down';
 export { useCountDownTokens } from './count-down/tokens';
 export { default as WaterMark } from './water-mark';
-export { useWaterMarkTokens } from './water-mark/tokens';
-export { default as Pagination } from './pagination';
-export { usePaginationTokens } from './pagination/tokens';
+export { useWaterMarkTokens } from './water-mark/tokens';

package/dist/es/components/input/Input.js

@@ -1,9 +1,21 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useImperativeHandle, useRef } from 'react';
+import React, { useCallback, useImperativeHandle, useRef, useMemo } from 'react';
 import { isBoolean, isFiniteNumber } from '../../utils/validate';
 import Field from '../field';
 import { useFieldTokens } from '../field/tokens';
 import { useInputTokens } from './tokens';
+const mapKeyboardType = type => {
+  switch (type) {
+    case 'number':
+      return 'decimal-pad';
+    case 'digit':
+      return 'number-pad';
+    case 'tel':
+      return 'phone-pad';
+    default:
+      return undefined;
+  }
+};
 const InputComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     type,
@@ -15,6 +27,7 @@ const InputComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
     onChangeText,
     showWordLimit,
     style,
+    inputStyle,
     fieldTokensOverride,
     tokensOverride,
     ...rest
@@ -35,12 +48,12 @@ const InputComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), []);
   const resolvedInputAlign = align ?? inputAlignProp ?? tokens.defaults.inputAlign;
   const resolvedClearTrigger = clearTriggerOverride ?? tokens.defaults.clearTrigger;
-  const resolvedKeyboardType = keyboardTypeProp ?? (type === 'number' ? 'decimal-pad' : undefined);
-  const fieldStyle = [{
+  const resolvedKeyboardType = keyboardTypeProp ?? mapKeyboardType(type);
+  const fieldStyle = useMemo(() => [{
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
     backgroundColor: tokens.colors.background
-  }, style];
+  }, style], [style, tokens.colors.background, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
   return /*#__PURE__*/React.createElement(Field, _extends({
     ref: inputRef
   }, rest, {
@@ -51,6 +64,7 @@ const InputComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
     inputAlign: resolvedInputAlign,
     clearTrigger: resolvedClearTrigger,
     style: fieldStyle,
+    inputStyle: inputStyle,
     showWordLimit: showWordLimit,
     onChangeText: handleChangeText
   }));
@@ -67,14 +81,14 @@ const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (!isFiniteNumber(height) || height <= 0) return undefined;
     return Math.max(1, Math.round(height / lineHeight));
   }, [lineHeight]);
-  const resolvedAutoSize = !autoSize || isBoolean(autoSize) ? autoSize : (() => {
+  const resolvedAutoSize = useMemo(() => !autoSize || isBoolean(autoSize) ? autoSize : (() => {
     const minRows = toRows(autoSize.minHeight);
     const maxRows = toRows(autoSize.maxHeight);
     return minRows || maxRows ? {
       minRows,
       maxRows
     } : undefined;
-  })();
+  })(), [autoSize, toRows]);
   return /*#__PURE__*/React.createElement(InputComponent, _extends({
     ref: ref
   }, rest, {

package/dist/es/components/loading/Loading.js

@@ -1,8 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, Text, View } from 'react-native';
-import { nativeDriverEnabled } from '../../platform';
-import { withAlpha } from '../../utils/color';
+import React from 'react';
+import { ActivityIndicator, Text, View } from 'react-native';
 import { isText } from '../../utils/validate';
 import { useLoadingTokens } from './tokens';
 export const Loading = props => {
@@ -12,8 +10,9 @@ export const Loading = props => {
     size: sizeProp,
     textSize: textSizeProp,
     textColor: textColorProp,
-    type: typeProp,
     vertical: verticalProp,
+    accessibilityLabel,
+    ['aria-label']: ariaLabel,
     style,
     textStyle,
     contentStyle,
@@ -25,142 +24,14 @@ export const Loading = props => {
   const size = sizeProp ?? tokens.defaults.size;
   const textSize = textSizeProp ?? tokens.defaults.textSize;
   const textColor = textColorProp ?? tokens.colors.text;
-  const type = typeProp ?? tokens.defaults.type;
   const vertical = verticalProp ?? tokens.defaults.vertical;
-  const spinValue = useRef(new Animated.Value(0)).current;
-  useEffect(() => {
-    if (type === 'spinner' || type === 'circular' || type === 'ball') {
-      spinValue.setValue(0);
-      const animation = Animated.loop(Animated.timing(spinValue, {
-        toValue: 1,
-        duration: 1000,
-        easing: Easing.linear,
-        useNativeDriver: nativeDriverEnabled
-      }));
-      animation.start();
-      return () => animation.stop();
-    }
-    return undefined;
-  }, [type]);
-  const rotateValue = spinValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg']
+  const resolvedAccessibilityLabel = ariaLabel ?? accessibilityLabel ?? 'loading';
+  const indicator = /*#__PURE__*/React.createElement(ActivityIndicator, {
+    testID: "rv-loading-spinner",
+    size: size,
+    color: color,
+    accessibilityLabel: resolvedAccessibilityLabel
   });
-  const renderCircular = () => {
-    const thickness = Math.max(2, Math.min(size / 8, 6));
-    const trackColor = withAlpha(color, 0.2);
-    return /*#__PURE__*/React.createElement(Animated.View, {
-      testID: "rv-loading-circular",
-      style: {
-        width: size,
-        height: size,
-        transform: [{
-          rotate: rotateValue
-        }]
-      }
-    }, /*#__PURE__*/React.createElement(View, {
-      pointerEvents: "none",
-      style: {
-        width: size,
-        height: size,
-        borderRadius: size / 2,
-        borderWidth: thickness,
-        borderColor: trackColor,
-        borderTopColor: color
-      }
-    }));
-  };
-  const renderSpinner = () => {
-    const innerGap = Math.min(size / 2 - 1, Math.max(0, tokens.sizing.spinner.innerGapRatio * size));
-    const lineWidth = Math.max(1, Math.min(size / 3, size / tokens.defaults.size * tokens.sizing.spinner.lineWidth));
-    const scaledLength = size / tokens.defaults.size * tokens.sizing.spinner.lineLength;
-    const maxLength = Math.max(2, size / 2 - innerGap);
-    const lineLength = Math.max(2, Math.min(maxLength, Math.max(tokens.sizing.spinner.lineLength, scaledLength)));
-    return /*#__PURE__*/React.createElement(Animated.View, {
-      testID: "rv-loading-spinner",
-      style: {
-        width: size,
-        height: size,
-        transform: [{
-          rotate: rotateValue
-        }]
-      }
-    }, Array.from({
-      length: tokens.sizing.spinner.itemCount
-    }, (_, index) => {
-      const angle = index * 360 / tokens.sizing.spinner.itemCount;
-      const opacity = 0.2 + index / tokens.sizing.spinner.itemCount * 0.8;
-      return /*#__PURE__*/React.createElement(View, {
-        key: index,
-        pointerEvents: "none",
-        style: [tokens.layout.spinnerItem, {
-          transform: [{
-            rotate: `${angle}deg`
-          }]
-        }]
-      }, /*#__PURE__*/React.createElement(View, {
-        style: [{
-          width: lineWidth,
-          height: lineLength,
-          borderRadius: lineWidth / 2,
-          backgroundColor: color,
-          opacity,
-          marginTop: size / 2 - lineLength - innerGap
-        }]
-      }));
-    }));
-  };
-  const renderBall = () => {
-    const itemCount = tokens.sizing.ball.itemCount;
-    const dotSize = Math.max(2, Math.round(size * tokens.sizing.ball.dotSizeRatio));
-    const gap = Math.max(1, Math.round(size * tokens.sizing.ball.gapRatio));
-    const totalWidth = dotSize * itemCount + gap * (itemCount - 1);
-    const pulseWidth = 0.4 / itemCount;
-    return /*#__PURE__*/React.createElement(View, {
-      testID: "rv-loading-ball",
-      style: {
-        width: totalWidth,
-        height: size,
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    }, /*#__PURE__*/React.createElement(View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      }
-    }, Array.from({
-      length: itemCount
-    }, (_, index) => {
-      const center = (index + 0.5) / itemCount;
-      const left = Math.max(0, center - pulseWidth);
-      const right = Math.min(1, center + pulseWidth);
-      const scale = spinValue.interpolate({
-        inputRange: [0, left, center, right, 1],
-        outputRange: [tokens.sizing.ball.dotScaleMin, tokens.sizing.ball.dotScaleMin, 1, tokens.sizing.ball.dotScaleMin, tokens.sizing.ball.dotScaleMin]
-      });
-      const opacity = spinValue.interpolate({
-        inputRange: [0, left, center, right, 1],
-        outputRange: [0.4, 0.4, 1, 0.4, 0.4]
-      });
-      return /*#__PURE__*/React.createElement(Animated.View, {
-        key: index,
-        pointerEvents: "none",
-        style: {
-          width: dotSize,
-          height: dotSize,
-          borderRadius: dotSize / 2,
-          backgroundColor: color,
-          marginRight: index === itemCount - 1 ? 0 : gap,
-          opacity,
-          transform: [{
-            scale
-          }]
-        }
-      });
-    })));
-  };
-  const indicator = type === 'spinner' ? renderSpinner() : type === 'ball' ? renderBall() : renderCircular();
   const hasChildren = children !== undefined && children !== null && children !== false;
   const textSpacingStyle = {
     marginLeft: vertical ? 0 : tokens.spacing.gap,

package/dist/es/components/loading/tokens.js

@@ -1,7 +1,6 @@
 import { createComponentTokensHook } from '../../design-system';
 export const createLoadingTokens = foundations => ({
   defaults: {
-    type: 'circular',
     size: 30,
     textSize: foundations.fontSize.sm,
     vertical: false
@@ -10,15 +9,6 @@ export const createLoadingTokens = foundations => ({
     container: {
       alignItems: 'center'
     },
-    spinnerItem: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      alignItems: 'center',
-      justifyContent: 'flex-start'
-    },
     text: {
       includeFontPadding: false,
       textAlignVertical: 'center'
@@ -28,20 +18,6 @@ export const createLoadingTokens = foundations => ({
     indicator: foundations.palette.default[400],
     text: foundations.palette.default[500]
   },
-  sizing: {
-    spinner: {
-      lineWidth: 2,
-      lineLength: 8,
-      itemCount: 12,
-      innerGapRatio: 0.25
-    },
-    ball: {
-      itemCount: 3,
-      dotSizeRatio: 0.2,
-      dotScaleMin: 0.4,
-      gapRatio: 0.25
-    }
-  },
   spacing: {
     gap: foundations.spacing.sm
   }

package/dist/es/components/notice-bar/NoticeBar.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View, Platform } from 'react-native';
 import { Arrow, Close } from 'react-native-system-icon';
 import { useAriaPress } from '../../hooks';
@@ -58,15 +58,15 @@ export const NoticeBar = props => {
   const resolvedSpeed = parseNumber(speed, 60);
   const resolvedVerticalInterval = Math.max(0, parseNumber(verticalInterval, 3000));
   const resolvedVerticalDuration = Math.max(0, parseNumber(verticalDuration, 300));
-  const verticalItems = (() => {
+  const verticalItems = useMemo(() => {
     if (!isVertical) return [];
     if (items && items.length) return items;
     const childArray = React.Children.toArray(children);
     if (childArray.length) return childArray;
     return text !== undefined ? [text] : [];
-  })();
+  }, [children, isVertical, items, text]);
   const hasVerticalLoop = isVertical && verticalItems.length > 1;
-  const verticalTrackItems = hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems;
+  const verticalTrackItems = useMemo(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
   const verticalTranslateY = useRef(new Animated.Value(0)).current;
   const [itemHeight, setItemHeight] = useState(0);
   const setContentWidthSafe = useCallback(next => {
@@ -94,7 +94,7 @@ export const NoticeBar = props => {
       accessibilityRole: 'button'
     } : undefined
   });
-  const rightNode = mode === 'closeable' ? /*#__PURE__*/React.createElement(Pressable, _extends({
+  const rightNode = useMemo(() => mode === 'closeable' ? /*#__PURE__*/React.createElement(Pressable, _extends({
     hitSlop: 8
   }, closePress.interactionProps), /*#__PURE__*/React.createElement(Close, {
     size: 16,
@@ -104,7 +104,7 @@ export const NoticeBar = props => {
     size: 16,
     fill: resolvedColor,
     color: resolvedColor
-  }) : rightIcon || null;
+  }) : rightIcon || null, [closePress.interactionProps, mode, resolvedColor, rightIcon]);
   const hasLeft = isRenderable(leftIcon);
   const hasRight = Boolean(rightNode);
   const effectiveContainerWidth = Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0));
@@ -185,44 +185,48 @@ export const NoticeBar = props => {
     if (!height) return;
     setItemHeight(prev => prev === 0 || Math.abs(prev - height) >= 0.5 ? height : prev);
   }, []);
-  const verticalContentNode = !isVertical || verticalTrackItems.length === 0 ? null : !hasVerticalLoop ? (() => {
-    const single = verticalTrackItems[0];
-    if (isText(single)) {
-      return /*#__PURE__*/React.createElement(Text, _extends({
-        onLayout: textOnLayout,
-        style: [styles.text, {
-          color: resolvedColor,
-          fontSize: tokens.typography.fontSize
-        }],
-        numberOfLines: 1,
-        ellipsizeMode: "tail"
-      }, restTextProps), single);
+  const verticalContentNode = useMemo(() => {
+    if (!isVertical || verticalTrackItems.length === 0) return null;
+    if (!hasVerticalLoop) {
+      const single = verticalTrackItems[0];
+      if (isText(single)) {
+        return /*#__PURE__*/React.createElement(Text, _extends({
+          onLayout: textOnLayout,
+          style: [styles.text, {
+            color: resolvedColor,
+            fontSize: tokens.typography.fontSize
+          }],
+          numberOfLines: 1,
+          ellipsizeMode: "tail"
+        }, restTextProps), single);
+      }
+      return single;
     }
-    return single;
-  })() : /*#__PURE__*/React.createElement(View, {
-    style: [styles.verticalViewport, itemHeight ? {
-      height: itemHeight
-    } : undefined],
-    pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: [styles.verticalTrack, {
-      transform: [{
-        translateY: verticalTranslateY
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.verticalViewport, itemHeight ? {
+        height: itemHeight
+      } : undefined],
+      pointerEvents: "none"
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [styles.verticalTrack, {
+        transform: [{
+          translateY: verticalTranslateY
+        }]
       }]
-    }]
-  }, verticalTrackItems.map((item, index) => /*#__PURE__*/React.createElement(View, {
-    key: index,
-    onLayout: index === 0 ? handleItemLayout : undefined,
-    style: styles.verticalItem
-  }, isText(item) ? /*#__PURE__*/React.createElement(Text, _extends({
-    onLayout: textOnLayout,
-    style: [styles.text, {
-      color: resolvedColor,
-      fontSize: tokens.typography.fontSize
-    }],
-    numberOfLines: 1,
-    ellipsizeMode: "tail"
-  }, restTextProps), item) : item))));
+    }, verticalTrackItems.map((item, index) => /*#__PURE__*/React.createElement(View, {
+      key: index,
+      onLayout: index === 0 ? handleItemLayout : undefined,
+      style: styles.verticalItem
+    }, isText(item) ? /*#__PURE__*/React.createElement(Text, _extends({
+      onLayout: textOnLayout,
+      style: [styles.text, {
+        color: resolvedColor,
+        fontSize: tokens.typography.fontSize
+      }],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, restTextProps), item) : item))));
+  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
   const handleContainerLayout = useCallback(event => {
     setContainerWidthSafe(event.nativeEvent.layout.width);
   }, [setContainerWidthSafe]);