react-native-system-ui 0.0.7 → 1.0.0

package/dist/cjs/components/nav-bar/NavBar.js

@@ -26,13 +26,15 @@ function _reactNativeSystemIcon() {
   return data;
 }
 var _hooks = require("../../hooks");
+var _useLocale = require("../config-provider/useLocale");
+var _useDirection = require("../config-provider/useDirection");
 var _hairline = require("../../utils/hairline");
-var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 var _safeAreaView = require("../safe-area-view");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); }
-const NavBarBase = props => {
+const NavBarBaseImpl = props => {
   const {
     tokensOverride,
     title,
@@ -60,6 +62,8 @@ const NavBarBase = props => {
     style,
     ...rest
   } = props;
+  const locale = (0, _useLocale.useLocale)();
+  const dir = (0, _useDirection.useDirection)();
   const tokens = (0, _tokens.useNavBarTokens)(tokensOverride);
   const leftArrow = leftArrowProp ?? tokens.defaults.leftArrow;
   const fixed = fixedProp ?? tokens.defaults.fixed;
@@ -79,14 +83,12 @@ const NavBarBase = props => {
   }, [enablePlaceholder]);
   const resolvedColor = tintColor ?? tokens.colors.text;
   const sideColor = tintColor ?? tokens.colors.icon;
-  const leftAccessibilityLabel = (0, _validate.isText)(leftText) ? String(leftText) : '返回';
-  const rightAccessibilityLabel = (0, _validate.isText)(rightText) ? String(rightText) : '操作';
   const leftPress = (0, _hooks.useAriaPress)({
     disabled: !handlePressLeft,
     onPress: handlePressLeft,
     extraProps: {
       accessibilityRole: 'button',
-      accessibilityLabel: leftAccessibilityLabel
+      accessibilityLabel: (0, _utils.isText)(leftText) ? `${leftText}` : locale?.vanNavBar?.back ?? 'Back'
     }
   });
   const rightPress = (0, _hooks.useAriaPress)({
@@ -94,63 +96,40 @@ const NavBarBase = props => {
     onPress: handlePressRight,
     extraProps: {
       accessibilityRole: 'button',
-      accessibilityLabel: rightAccessibilityLabel
+      accessibilityLabel: (0, _utils.isText)(rightText) ? `${rightText}` : locale?.vanNavBar?.action ?? 'Actions'
     }
   });
-  const renderLeft = () => {
-    const arrowNode = leftArrow === true ? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().ArrowLeft, {
+  const renderSide = side => {
+    const isLeft = side === 'left';
+    const sideText = isLeft ? leftText : rightText;
+    const sideIcon = isLeft ? leftIcon : rightIcon;
+    const press = isLeft ? leftPress : rightPress;
+    const handler = isLeft ? handlePressLeft : handlePressRight;
+    const arrowNode = isLeft ? leftArrow === true ? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().ArrowLeft, {
       size: 18,
       fill: sideColor,
-      color: sideColor
-    }) : (0, _validate.isRenderable)(leftArrow) && leftArrow;
-    const hasAction = !!handlePressLeft || (0, _validate.isRenderable)(arrowNode) || (0, _validate.isRenderable)(leftText) || (0, _validate.isRenderable)(leftIcon);
-    if (!hasAction) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: tokens.layout.sidePlaceholder
-      });
-    }
-    const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, arrowNode, leftIcon, (0, _validate.isRenderable)(leftText) ? (0, _validate.isText)(leftText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      numberOfLines: 1,
-      style: [tokens.layout.sideText, {
-        color: sideColor
-      }]
-    }, leftText) : leftText : null);
-    if (!handlePressLeft) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        testID: "rv-navbar-left",
-        style: [tokens.layout.side, sideStyle]
-      }, content);
-    }
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-      hitSlop: {
-        top: 8,
-        right: 8,
-        bottom: 8,
-        left: 8
-      },
-      testID: "rv-navbar-left",
-      style: [tokens.layout.side, sideStyle]
-    }, leftPress.interactionProps), content);
-  };
-  const renderRight = () => {
-    const hasAction = !!handlePressRight || (0, _validate.isRenderable)(rightText) || (0, _validate.isRenderable)(rightIcon);
-    if (!hasAction) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: tokens.layout.sidePlaceholder
-      });
-    }
-    const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, (0, _validate.isRenderable)(rightText) ? (0, _validate.isText)(rightText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      color: sideColor,
+      style: dir === 'rtl' ? {
+        transform: [{
+          scaleX: -1
+        }]
+      } : undefined
+    }) : (0, _utils.isRenderable)(leftArrow) && leftArrow : null;
+    const hasAction = !!handler || (0, _utils.isRenderable)(arrowNode) || (0, _utils.isRenderable)(sideText) || (0, _utils.isRenderable)(sideIcon);
+    if (!hasAction) return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: tokens.layout.sidePlaceholder
+    });
+    const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, arrowNode, sideIcon, (0, _utils.isRenderable)(sideText) ? (0, _utils.isText)(sideText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       numberOfLines: 1,
       style: [tokens.layout.sideText, {
         color: sideColor
       }]
-    }, rightText) : rightText : null, rightIcon);
-    if (!handlePressRight) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        testID: "rv-navbar-right",
-        style: [tokens.layout.side, tokens.layout.rightAlign, sideStyle]
-      }, content);
-    }
+    }, sideText) : sideText : null);
+    const sideStyles = [tokens.layout.side, !isLeft && tokens.layout.rightAlign, sideStyle];
+    if (!handler) return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      testID: `rv-navbar-${side}`,
+      style: sideStyles
+    }, content);
     return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
       hitSlop: {
         top: 8,
@@ -158,51 +137,57 @@ const NavBarBase = props => {
         bottom: 8,
         left: 8
       },
-      testID: "rv-navbar-right",
-      style: [tokens.layout.side, tokens.layout.rightAlign, sideStyle]
-    }, rightPress.interactionProps), content);
+      testID: `rv-navbar-${side}`,
+      style: sideStyles
+    }, press.interactionProps), content);
   };
-  const centerContent = (0, _validate.isRenderable)(children) ? children : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  const centerContent = (0, _utils.isRenderable)(children) ? children : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.titleWrapper
-  }, (0, _validate.isRenderable)(title) ? (0, _validate.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [tokens.layout.title, {
-      color: resolvedColor,
-      fontSize: tokens.typography.titleSize,
-      fontWeight: tokens.typography.titleWeight
-    }, titleStyle],
+  }, (0, _utils.isRenderable)(title) && (0, _utils.renderTextOrNode)(title, [tokens.layout.title, {
+    color: resolvedColor,
+    fontSize: tokens.typography.titleSize,
+    fontWeight: tokens.typography.titleWeight
+  }, titleStyle], {
     numberOfLines: 1
-  }, title) : title : null, (0, _validate.isRenderable)(description) ? (0, _validate.isText)(description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [tokens.layout.description, {
-      color: tintColor ?? tokens.colors.description,
-      fontSize: tokens.typography.descriptionSize
-    }, descriptionStyle],
+  }), (0, _utils.isRenderable)(description) && (0, _utils.renderTextOrNode)(description, [tokens.layout.description, {
+    color: tintColor ?? tokens.colors.description,
+    fontSize: tokens.typography.descriptionSize
+  }, descriptionStyle], {
     numberOfLines: 1
-  }, description) : description : null);
-  const bar = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }));
+  const navbarBar = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.bar, {
       backgroundColor: background
-    }, border ? (0, _hairline.createHairlineBorderBottom)(tokens.colors.border) : null],
+    }],
     onLayout: safeAreaInsetTop ? undefined : handleLayout
-  }, renderLeft(), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, renderSide('left'), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.center
-  }, centerContent), renderRight());
-  const wrapped = safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
+  }, centerContent), renderSide('right'), border && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _hairline.createHairlineView)({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0
+    })
+  }));
+  const wrappedBar = safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
     onLayout: handleLayout,
     style: {
       backgroundColor: background
     }
-  }, bar) : bar;
-  const navContent = /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
-    style: [tokens.layout.container, fixed && [tokens.layout.fixed, {
-      zIndex
-    }], style]
-  }), wrapped);
-  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, enablePlaceholder ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, navbarBar) : navbarBar;
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, enablePlaceholder && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     testID: "rv-navbar-placeholder",
     style: {
       height
     }
-  }) : null, navContent);
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
+    accessibilityRole: 'navigation',
+    style: [tokens.layout.container, fixed && [tokens.layout.fixed, {
+      zIndex
+    }], style]
+  }), wrappedBar));
 };
+const NavBarBase = /*#__PURE__*/_react().default.memo(NavBarBaseImpl);
 NavBarBase.displayName = 'NavBar';
 var _default = exports.default = NavBarBase;

package/dist/cjs/components/nav-bar/tokens.js

@@ -4,20 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useNavBarTokens = exports.createNavBarTokens = void 0;
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
 var _designSystem = require("../../design-system");
 const createNavBarTokens = ({
   palette,
   spacing,
   fontSize
 }) => {
-  const fixedPosition = _reactNative().Platform.OS === 'web' ? 'fixed' : 'absolute';
   return {
     defaults: {
       fixed: false,
@@ -69,7 +61,7 @@ const createNavBarTokens = ({
         includeFontPadding: false
       },
       fixed: {
-        position: fixedPosition,
+        position: 'absolute',
         top: 0,
         left: 0,
         right: 0

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

@@ -26,9 +26,13 @@ function _reactNativeSystemIcon() {
   return data;
 }
 var _hooks = require("../../hooks");
+var _useLocale = require("../config-provider/useLocale");
+var _useDirection = require("../config-provider/useDirection");
 var _number = require("../../utils/number");
 var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 var _platform = require("../../platform");
+var _animation = require("../../hooks/animation");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); }
@@ -36,11 +40,9 @@ const AnimatedText = _reactNative().Animated.createAnimatedComponent(_reactNativ
 const IS_WEB = _reactNative().Platform.OS === 'web';
 if (IS_WEB) {
   const globalObj = typeof globalThis !== 'undefined' ? globalThis : window;
-  if (globalObj.global === undefined) {
-    globalObj.global = globalObj;
-  }
+  if (globalObj.global === undefined) globalObj.global = globalObj;
 }
-const NoticeBar = props => {
+const NoticeBarImpl = props => {
   const {
     text,
     children,
@@ -65,6 +67,9 @@ const NoticeBar = props => {
     style,
     ...rest
   } = props;
+  const locale = (0, _useLocale.useLocale)();
+  const layoutDir = (0, _useDirection.useDirection)();
+  const reducedMotion = (0, _animation.useReducedMotion)();
   const tokens = (0, _tokens.useNoticeBarTokens)(tokensOverride);
   const resolvedColor = color ?? tokens.colors.text;
   const resolvedBackground = background ?? tokens.colors.background;
@@ -90,7 +95,7 @@ const NoticeBar = props => {
     if (childArray.length) return childArray;
     return text !== undefined ? [text] : [];
   }, [children, isVertical, items, text]);
-  const hasVerticalLoop = isVertical && verticalItems.length > 1;
+  const hasVerticalLoop = !reducedMotion && isVertical && verticalItems.length > 1;
   const verticalTrackItems = (0, _react().useMemo)(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
   const verticalTranslateY = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
   const [itemHeight, setItemHeight] = (0, _react().useState)(0);
@@ -100,16 +105,20 @@ const NoticeBar = props => {
   const setContainerWidthSafe = (0, _react().useCallback)(next => {
     setContainerWidth(prev => Math.abs(prev - next) < 0.5 ? prev : next);
   }, []);
+  const onCloseRef = (0, _react().useRef)(onClose);
+  onCloseRef.current = onClose;
+  const onReplayRef = (0, _react().useRef)(onReplay);
+  onReplayRef.current = onReplay;
   const handleClose = (0, _react().useCallback)(() => {
     setVisible(false);
-    onClose?.();
-  }, [onClose]);
+    onCloseRef.current?.();
+  }, []);
   const closePress = (0, _hooks.useAriaPress)({
     disabled: mode !== 'closeable' || !visible,
     onPress: handleClose,
     extraProps: {
       accessibilityRole: 'button',
-      accessibilityLabel: '关闭'
+      accessibilityLabel: locale?.vanNoticeBar?.close ?? 'Close'
     }
   });
   const barPress = (0, _hooks.useAriaPress)({
@@ -119,7 +128,7 @@ const NoticeBar = props => {
       accessibilityRole: 'button'
     } : undefined
   });
-  const rightNode = (0, _react().useMemo)(() => mode === 'closeable' ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+  const rightNode = mode === 'closeable' ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     hitSlop: 8
   }, closePress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
     size: 16,
@@ -129,42 +138,36 @@ const NoticeBar = props => {
     size: 16,
     fill: resolvedColor,
     color: resolvedColor
-  }) : rightIcon || null, [closePress.interactionProps, mode, resolvedColor, rightIcon]);
+  }) : rightIcon || null;
   const hasLeft = (0, _validate.isRenderable)(leftIcon);
   const hasRight = Boolean(rightNode);
   const effectiveContainerWidth = Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0));
-  const shouldScroll = !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth);
+  const shouldScroll = !reducedMotion && !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth);
   (0, _react().useEffect)(() => {
-    if (!visible) {
-      translateX.stopAnimation();
-      return;
-    }
-    if (isVertical) {
+    if (!visible || isVertical) {
       translateX.stopAnimation();
       return;
     }
-    if (!shouldScroll || contentWidth === 0 || containerWidth === 0) {
-      translateX.setValue(0);
-      return;
-    }
-    if (resolvedSpeed <= 0 || !Number.isFinite(resolvedSpeed)) {
+    if (!shouldScroll || contentWidth === 0 || containerWidth === 0 || resolvedSpeed <= 0 || !Number.isFinite(resolvedSpeed)) {
       translateX.setValue(0);
       return;
     }
     let cancelled = false;
     const duration = (contentWidth + containerWidth) / resolvedSpeed * 1000;
+    const rtlSign = layoutDir === 'rtl' ? -1 : 1;
     const run = initial => {
-      translateX.setValue(initial ? 0 : containerWidth);
+      translateX.setValue(initial ? 0 : rtlSign * containerWidth);
       _reactNative().Animated.sequence([_reactNative().Animated.delay(resolvedDelay * 1000), _reactNative().Animated.timing(translateX, {
-        toValue: -contentWidth,
+        toValue: -rtlSign * contentWidth,
         duration,
         easing: _reactNative().Easing.linear,
-        useNativeDriver: _platform.nativeDriverEnabled
+        useNativeDriver: _platform.nativeDriverEnabled,
+        isInteraction: false
       })]).start(({
         finished
       }) => {
         if (finished && !cancelled) {
-          onReplay?.();
+          onReplayRef.current?.();
           run(false);
         }
       });
@@ -174,7 +177,7 @@ const NoticeBar = props => {
       cancelled = true;
       translateX.stopAnimation();
     };
-  }, [shouldScroll, translateX, visible, resolvedDelay, resolvedSpeed, contentWidth, containerWidth, onReplay, isVertical]);
+  }, [shouldScroll, translateX, visible, resolvedDelay, resolvedSpeed, contentWidth, containerWidth, isVertical, layoutDir]);
   (0, _react().useEffect)(() => {
     if (!visible) {
       verticalTranslateY.stopAnimation();
@@ -190,13 +193,15 @@ const NoticeBar = props => {
         toValue: -itemHeight * i,
         duration: resolvedVerticalDuration,
         easing: _reactNative().Easing.linear,
-        useNativeDriver: _platform.nativeDriverEnabled
+        useNativeDriver: _platform.nativeDriverEnabled,
+        isInteraction: false
       }));
     }
     steps.push(_reactNative().Animated.timing(verticalTranslateY, {
       toValue: 0,
       duration: 0,
-      useNativeDriver: _platform.nativeDriverEnabled
+      useNativeDriver: _platform.nativeDriverEnabled,
+      isInteraction: false
     }));
     const loopAnimation = _reactNative().Animated.loop(_reactNative().Animated.sequence(steps));
     loopAnimation.start();
@@ -212,28 +217,22 @@ const NoticeBar = props => {
   }, []);
   const verticalContentNode = (0, _react().useMemo)(() => {
     if (!isVertical || verticalTrackItems.length === 0) return null;
-    if (!hasVerticalLoop) {
-      const single = verticalTrackItems[0];
-      if ((0, _validate.isText)(single)) {
-        return /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
-          onLayout: textOnLayout,
-          style: [styles.text, {
-            color: resolvedColor,
-            fontSize: tokens.typography.fontSize
-          }],
-          numberOfLines: 1,
-          ellipsizeMode: "tail"
-        }, restTextProps), single);
-      }
-      return single;
-    }
+    if (!hasVerticalLoop) return (0, _utils.renderTextOrNode)(verticalTrackItems[0], [S.text, {
+      color: resolvedColor,
+      fontSize: tokens.typography.fontSize
+    }], {
+      numberOfLines: 1,
+      ...restTextProps
+    });
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [styles.verticalViewport, itemHeight ? {
+      style: [S.vViewport, itemHeight ? {
         height: itemHeight
       } : undefined],
       pointerEvents: "none"
     }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-      style: [styles.verticalTrack, {
+      renderToHardwareTextureAndroid: true,
+      shouldRasterizeIOS: true,
+      style: [S.vTrack, {
         transform: [{
           translateY: verticalTranslateY
         }]
@@ -241,16 +240,14 @@ const NoticeBar = props => {
     }, verticalTrackItems.map((item, index) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       key: index,
       onLayout: index === 0 ? handleItemLayout : undefined,
-      style: styles.verticalItem
-    }, (0, _validate.isText)(item) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
-      onLayout: textOnLayout,
-      style: [styles.text, {
-        color: resolvedColor,
-        fontSize: tokens.typography.fontSize
-      }],
+      style: S.vItem
+    }, (0, _utils.renderTextOrNode)(item, [S.text, {
+      color: resolvedColor,
+      fontSize: tokens.typography.fontSize
+    }], {
       numberOfLines: 1,
-      ellipsizeMode: "tail"
-    }, restTextProps), item) : item))));
+      ...restTextProps
+    })))));
   }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
   const handleContainerLayout = (0, _react().useCallback)(event => {
     setContainerWidthSafe(event.nativeEvent.layout.width);
@@ -260,11 +257,9 @@ const NoticeBar = props => {
     textOnLayout?.(event);
   }, [setContentWidthSafe, textOnLayout]);
   const handleNodeLayout = (0, _react().useCallback)(event => setContentWidthSafe(event.nativeEvent.layout.width), [setContentWidthSafe]);
-  if (!visible) {
-    return null;
-  }
+  if (!visible) return null;
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    style: [styles.container, {
+    style: [S.ctr, {
       backgroundColor: resolvedBackground,
       paddingHorizontal: tokens.spacing.paddingHorizontal,
       paddingVertical: wrapable ? tokens.spacing.wrapPaddingVertical : tokens.spacing.paddingVertical,
@@ -272,13 +267,13 @@ const NoticeBar = props => {
       borderRadius: tokens.layout.radius
     }, style],
     disabled: barPress.states.disabled
-  }, barPress.interactionProps, rest), hasLeft ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.sideSection, {
+  }, barPress.interactionProps, rest), hasLeft && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [S.side, {
       minWidth: tokens.layout.sideMinWidth
     }]
-  }, leftIcon) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, leftIcon), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     onLayout: handleContainerLayout,
-    style: [styles.content, wrapable && styles.contentWrap, hasLeft && {
+    style: [S.content, wrapable && S.contentWrap, hasLeft && {
       paddingLeft: tokens.spacing.sidePadding
     }, hasRight && {
       paddingRight: tokens.spacing.sidePadding
@@ -286,7 +281,7 @@ const NoticeBar = props => {
     pointerEvents: "none"
   }, isVertical ? verticalContentNode : shouldScroll ? isTextContent ? /*#__PURE__*/_react().default.createElement(AnimatedText, _extends({
     onLayout: handleTextLayout,
-    style: [styles.text, styles.scrollText, {
+    style: [S.text, S.scrollText, {
       color: resolvedColor,
       fontSize: tokens.typography.fontSize,
       transform: [{
@@ -298,35 +293,36 @@ const NoticeBar = props => {
     ellipsizeMode: 'clip'
   }, restTextProps), content) : /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
     onLayout: handleNodeLayout,
-    style: [styles.text, {
+    renderToHardwareTextureAndroid: true,
+    shouldRasterizeIOS: true,
+    style: [S.text, {
       transform: [{
         translateX
       }]
     }]
   }, content) : isTextContent ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
     onLayout: handleTextLayout,
-    style: [styles.text, {
+    style: [S.text, {
       color: resolvedColor,
       fontSize: tokens.typography.fontSize
-    }, wrapable && styles.wrapText],
+    }, wrapable && S.wrapText],
     numberOfLines: wrapable ? undefined : 1,
     ellipsizeMode: wrapable ? 'tail' : 'clip'
   }, restTextProps), content) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     onLayout: handleNodeLayout,
-    style: [styles.text, wrapable && styles.wrapText]
-  }, content)), rightNode ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.sideSection, {
+    style: [S.text, wrapable && S.wrapText]
+  }, content)), rightNode && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [S.side, {
       minWidth: tokens.layout.sideMinWidth
     }]
-  }, rightNode) : null);
+  }, rightNode));
 };
-exports.NoticeBar = NoticeBar;
-const styles = _reactNative().StyleSheet.create({
-  container: {
+const S = _reactNative().StyleSheet.create({
+  ctr: {
     flexDirection: 'row',
     alignItems: 'center'
   },
-  sideSection: {
+  side: {
     alignItems: 'center',
     justifyContent: 'center'
   },
@@ -352,17 +348,18 @@ const styles = _reactNative().StyleSheet.create({
   contentWrap: {
     flexDirection: 'column'
   },
-  verticalViewport: {
+  vViewport: {
     width: '100%',
     overflow: 'hidden'
   },
-  verticalTrack: {
+  vTrack: {
     flexDirection: 'column',
     width: '100%'
   },
-  verticalItem: {
+  vItem: {
     width: '100%',
     justifyContent: 'center'
   }
 });
+const NoticeBar = exports.NoticeBar = /*#__PURE__*/_react().default.memo(NoticeBarImpl);
 NoticeBar.displayName = 'NoticeBar';