react-native-system-ui 0.0.7 → 1.0.1

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

@@ -3,19 +3,21 @@ 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';
+import { useLocale } from '../config-provider/useLocale';
+import { useDirection } from '../config-provider/useDirection';
 import { parseNumber } from '../../utils/number';
 import { isRenderable, isText } from '../../utils/validate';
+import { renderTextOrNode } from '../../utils';
 import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from '../../hooks/animation';
 import { useNoticeBarTokens } from './tokens';
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const IS_WEB = 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;
 }
-export const NoticeBar = props => {
+const NoticeBarImpl = props => {
   const {
     text,
     children,
@@ -40,6 +42,9 @@ export const NoticeBar = props => {
     style,
     ...rest
   } = props;
+  const locale = useLocale();
+  const layoutDir = useDirection();
+  const reducedMotion = useReducedMotion();
   const tokens = useNoticeBarTokens(tokensOverride);
   const resolvedColor = color ?? tokens.colors.text;
   const resolvedBackground = background ?? tokens.colors.background;
@@ -61,11 +66,11 @@ export const NoticeBar = props => {
   const verticalItems = useMemo(() => {
     if (!isVertical) return [];
     if (items && items.length) return items;
-    const childArray = React.Children.toArray(children);
-    if (childArray.length) return childArray;
+    const arr = React.Children.toArray(children);
+    if (arr.length) return arr;
     return text !== undefined ? [text] : [];
   }, [children, isVertical, items, text]);
-  const hasVerticalLoop = isVertical && verticalItems.length > 1;
+  const hasVerticalLoop = !reducedMotion && isVertical && verticalItems.length > 1;
   const verticalTrackItems = useMemo(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
   const verticalTranslateY = useRef(new Animated.Value(0)).current;
   const [itemHeight, setItemHeight] = useState(0);
@@ -75,16 +80,20 @@ export const NoticeBar = props => {
   const setContainerWidthSafe = useCallback(next => {
     setContainerWidth(prev => Math.abs(prev - next) < 0.5 ? prev : next);
   }, []);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const onReplayRef = useRef(onReplay);
+  onReplayRef.current = onReplay;
   const handleClose = useCallback(() => {
     setVisible(false);
-    onClose?.();
-  }, [onClose]);
+    onCloseRef.current?.();
+  }, []);
   const closePress = useAriaPress({
     disabled: mode !== 'closeable' || !visible,
     onPress: handleClose,
     extraProps: {
       accessibilityRole: 'button',
-      accessibilityLabel: '关闭'
+      accessibilityLabel: locale?.vanNoticeBar?.close ?? 'Close'
     }
   });
   const barPress = useAriaPress({
@@ -94,7 +103,7 @@ export const NoticeBar = props => {
       accessibilityRole: 'button'
     } : undefined
   });
-  const rightNode = useMemo(() => mode === 'closeable' ? /*#__PURE__*/React.createElement(Pressable, _extends({
+  const rightNode = mode === 'closeable' ? /*#__PURE__*/React.createElement(Pressable, _extends({
     hitSlop: 8
   }, closePress.interactionProps), /*#__PURE__*/React.createElement(Close, {
     size: 16,
@@ -104,42 +113,36 @@ export const NoticeBar = props => {
     size: 16,
     fill: resolvedColor,
     color: resolvedColor
-  }) : rightIcon || null, [closePress.interactionProps, mode, resolvedColor, rightIcon]);
+  }) : rightIcon || null;
   const hasLeft = 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);
   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);
       Animated.sequence([Animated.delay(resolvedDelay * 1000), Animated.timing(translateX, {
-        toValue: -contentWidth,
+        toValue: -rtlSign * contentWidth,
         duration,
         easing: Easing.linear,
-        useNativeDriver: nativeDriverEnabled
+        useNativeDriver: nativeDriverEnabled,
+        isInteraction: false
       })]).start(({
         finished
       }) => {
         if (finished && !cancelled) {
-          onReplay?.();
+          onReplayRef.current?.();
           run(false);
         }
       });
@@ -149,7 +152,7 @@ export 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]);
   useEffect(() => {
     if (!visible) {
       verticalTranslateY.stopAnimation();
@@ -165,13 +168,15 @@ export const NoticeBar = props => {
         toValue: -itemHeight * i,
         duration: resolvedVerticalDuration,
         easing: Easing.linear,
-        useNativeDriver: nativeDriverEnabled
+        useNativeDriver: nativeDriverEnabled,
+        isInteraction: false
       }));
     }
     steps.push(Animated.timing(verticalTranslateY, {
       toValue: 0,
       duration: 0,
-      useNativeDriver: nativeDriverEnabled
+      useNativeDriver: nativeDriverEnabled,
+      isInteraction: false
     }));
     const loopAnimation = Animated.loop(Animated.sequence(steps));
     loopAnimation.start();
@@ -187,28 +192,23 @@ export const NoticeBar = props => {
   }, []);
   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;
-    }
+    if (!hasVerticalLoop) return renderTextOrNode(verticalTrackItems[0], [S.text, {
+      color: resolvedColor,
+      fontFamily: tokens.typography.fontFamily,
+      fontSize: tokens.typography.fontSize
+    }], {
+      numberOfLines: 1,
+      ...restTextProps
+    });
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles.verticalViewport, itemHeight ? {
+      style: [S.vViewport, itemHeight ? {
         height: itemHeight
       } : undefined],
       pointerEvents: "none"
     }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: [styles.verticalTrack, {
+      renderToHardwareTextureAndroid: true,
+      shouldRasterizeIOS: true,
+      style: [S.vTrack, {
         transform: [{
           translateY: verticalTranslateY
         }]
@@ -216,17 +216,16 @@ export const NoticeBar = props => {
     }, 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
-      }],
+      style: S.vItem
+    }, renderTextOrNode(item, [S.text, {
+      color: resolvedColor,
+      fontFamily: tokens.typography.fontFamily,
+      fontSize: tokens.typography.fontSize
+    }], {
       numberOfLines: 1,
-      ellipsizeMode: "tail"
-    }, restTextProps), item) : item))));
-  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
+      ...restTextProps
+    })))));
+  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontFamily, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
   const handleContainerLayout = useCallback(event => {
     setContainerWidthSafe(event.nativeEvent.layout.width);
   }, [setContainerWidthSafe]);
@@ -235,11 +234,9 @@ export const NoticeBar = props => {
     textOnLayout?.(event);
   }, [setContentWidthSafe, textOnLayout]);
   const handleNodeLayout = useCallback(event => setContentWidthSafe(event.nativeEvent.layout.width), [setContentWidthSafe]);
-  if (!visible) {
-    return null;
-  }
+  if (!visible) return null;
   return /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [styles.container, {
+    style: [S.ctr, {
       backgroundColor: resolvedBackground,
       paddingHorizontal: tokens.spacing.paddingHorizontal,
       paddingVertical: wrapable ? tokens.spacing.wrapPaddingVertical : tokens.spacing.paddingVertical,
@@ -247,13 +244,13 @@ export const NoticeBar = props => {
       borderRadius: tokens.layout.radius
     }, style],
     disabled: barPress.states.disabled
-  }, barPress.interactionProps, rest), hasLeft ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.sideSection, {
+  }, barPress.interactionProps, rest), hasLeft && /*#__PURE__*/React.createElement(View, {
+    style: [S.side, {
       minWidth: tokens.layout.sideMinWidth
     }]
-  }, leftIcon) : null, /*#__PURE__*/React.createElement(View, {
+  }, leftIcon), /*#__PURE__*/React.createElement(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
@@ -261,8 +258,9 @@ export const NoticeBar = props => {
     pointerEvents: "none"
   }, isVertical ? verticalContentNode : shouldScroll ? isTextContent ? /*#__PURE__*/React.createElement(AnimatedText, _extends({
     onLayout: handleTextLayout,
-    style: [styles.text, styles.scrollText, {
+    style: [S.text, S.scrollText, {
       color: resolvedColor,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize,
       transform: [{
         translateX
@@ -273,34 +271,37 @@ export const NoticeBar = props => {
     ellipsizeMode: 'clip'
   }, restTextProps), content) : /*#__PURE__*/React.createElement(Animated.View, {
     onLayout: handleNodeLayout,
-    style: [styles.text, {
+    renderToHardwareTextureAndroid: true,
+    shouldRasterizeIOS: true,
+    style: [S.text, {
       transform: [{
         translateX
       }]
     }]
   }, content) : isTextContent ? /*#__PURE__*/React.createElement(Text, _extends({
     onLayout: handleTextLayout,
-    style: [styles.text, {
+    style: [S.text, {
       color: resolvedColor,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize
-    }, wrapable && styles.wrapText],
+    }, wrapable && S.wrapText],
     numberOfLines: wrapable ? undefined : 1,
     ellipsizeMode: wrapable ? 'tail' : 'clip'
   }, restTextProps), content) : /*#__PURE__*/React.createElement(View, {
     onLayout: handleNodeLayout,
-    style: [styles.text, wrapable && styles.wrapText]
-  }, content)), rightNode ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.sideSection, {
+    style: [S.text, wrapable && S.wrapText]
+  }, content)), rightNode && /*#__PURE__*/React.createElement(View, {
+    style: [S.side, {
       minWidth: tokens.layout.sideMinWidth
     }]
-  }, rightNode) : null);
+  }, rightNode));
 };
-const styles = StyleSheet.create({
-  container: {
+const S = StyleSheet.create({
+  ctr: {
     flexDirection: 'row',
     alignItems: 'center'
   },
-  sideSection: {
+  side: {
     alignItems: 'center',
     justifyContent: 'center'
   },
@@ -326,17 +327,18 @@ const styles = StyleSheet.create({
   contentWrap: {
     flexDirection: 'column'
   },
-  verticalViewport: {
+  vViewport: {
     width: '100%',
     overflow: 'hidden'
   },
-  verticalTrack: {
+  vTrack: {
     flexDirection: 'column',
     width: '100%'
   },
-  verticalItem: {
+  vItem: {
     width: '100%',
     justifyContent: 'center'
   }
 });
+export const NoticeBar = /*#__PURE__*/React.memo(NoticeBarImpl);
 NoticeBar.displayName = 'NoticeBar';

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

@@ -4,7 +4,8 @@ export const createNoticeBarTokens = foundations => {
     palette,
     fontSize,
     spacing,
-    radii
+    radii,
+    typography
   } = foundations;
   return {
     colors: {
@@ -12,6 +13,7 @@ export const createNoticeBarTokens = foundations => {
       background: palette.warning[50]
     },
     typography: {
+      fontFamily: typography.fontFamily,
       fontSize: fontSize.sm
     },
     layout: {

package/dist/es/components/notify/Notify.js

@@ -1,13 +1,14 @@
 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, useMemo } from 'react';
-import { Animated, Easing, Platform, Pressable, Text, View } from 'react-native';
-import { isFunction, isText } from '../../utils';
-import { useAriaPress, useSafeAreaPadding } from '../../hooks';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Platform, Pressable, View } from 'react-native';
+import { isFunction, isText, renderTextOrNode } from '../../utils';
+import { isRenderable } from '../../utils/validate';
+import { useAriaPress, useSafeAreaPadding, useOverlayStack } from '../../hooks';
 import Portal from '../portal/Portal';
-import { useOverlayStack } from '../../hooks';
 import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from '../../hooks/animation';
 import { useNotifyTokens } from './tokens';
-export const NotifyContent = props => {
+const NotifyContentImpl = props => {
   const {
     visible,
     message,
@@ -29,7 +30,7 @@ export const NotifyContent = props => {
     onClosed
   } = props;
   const tokens = useNotifyTokens(tokensOverride);
-  const paddingVertical = tokens.spacing.paddingVertical;
+  const reducedMotion = useReducedMotion();
   const safeAreaPadding = useSafeAreaPadding({
     top: 0,
     bottom: 0
@@ -39,30 +40,38 @@ export const NotifyContent = props => {
   const closeOnClick = closeOnClickProp ?? tokens.defaults.closeOnClick;
   const safeAreaInsetTop = props.safeAreaInsetTop ?? (position === 'top' ? tokens.defaults.safeAreaInsetTop : false);
   const safeAreaInsetBottom = props.safeAreaInsetBottom ?? (position === 'bottom' ? tokens.defaults.safeAreaInsetBottom : false);
-  const safeTop = safeAreaInsetTop && position === 'top' ? safeAreaPadding.paddingTop : 0;
-  const safeBottom = safeAreaInsetBottom && position === 'bottom' ? safeAreaPadding.paddingBottom : 0;
+  const safeAreaTopValue = safeAreaInsetTop && position === 'top' ? safeAreaPadding.paddingTop : 0;
+  const safeAreaBottomValue = safeAreaInsetBottom && position === 'bottom' ? safeAreaPadding.paddingBottom : 0;
   const offset = typeof offsetProp === 'number' && Number.isFinite(offsetProp) ? Math.max(0, offsetProp) : 0;
   const addOffset = (value, delta) => typeof value === 'string' ? `calc(${value} + ${delta}px)` : value + delta;
-  const safeBottomInset = safeAreaInsetBottom && position === 'bottom' && typeof safeBottom === 'number' ? safeBottom + offset : offset;
-  const webTopPadding = Platform.OS === 'web' && position === 'top' ? addOffset(safeTop, offset) : undefined;
-  const webBottomPadding = Platform.OS === 'web' && safeAreaInsetBottom && position === 'bottom' ? addOffset(safeBottom, offset) : undefined;
+  const safeAreaBottomInset = safeAreaInsetBottom && position === 'bottom' && typeof safeAreaBottomValue === 'number' ? safeAreaBottomValue + offset : offset;
+  const webTopPadding = Platform.OS === 'web' && position === 'top' ? addOffset(safeAreaTopValue, offset) : undefined;
+  const webBottomPadding = Platform.OS === 'web' && safeAreaInsetBottom && position === 'bottom' ? addOffset(safeAreaBottomValue, offset) : undefined;
   const variant = tokens.colors.variants[type];
   const resolvedBackground = background ?? variant.background;
   const resolvedTextColor = color ?? variant.text;
   const resolvedDuration = durationProp ?? tokens.defaults.duration;
-  const [barHeight, setBarHeight] = React.useState(0);
-  const handleLayout = useCallback(event => {
-    const height = event.nativeEvent.layout.height;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const onOpenRef = useRef(onOpen);
+  onOpenRef.current = onOpen;
+  const onOpenedRef = useRef(onOpened);
+  onOpenedRef.current = onOpened;
+  const onClosedRef = useRef(onClosed);
+  onClosedRef.current = onClosed;
+  const onClickRef = useRef(onClick);
+  onClickRef.current = onClick;
+  const [barHeight, setBarHeight] = useState(0);
+  const handleLayout = useCallback(e => {
+    const height = e.nativeEvent.layout.height;
     if (!height) return;
     setBarHeight(prev => prev === height ? prev : height);
   }, []);
-
-  // 关键：静态调用时 Notify 初次挂载的 visible=true，需要执行进入动画
   const canAnimate = barHeight > 0;
-  const [mounted, setMounted] = React.useState(visible);
-  const animated = React.useRef(new Animated.Value(0)).current;
-  const animationRef = React.useRef(null);
-  const animationIdRef = React.useRef(0);
+  const [mounted, setMounted] = useState(visible);
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const animationRef = useRef(null);
+  const animationIdRef = useRef(0);
   const {
     zIndex: stackZIndex
   } = useOverlayStack({
@@ -71,22 +80,22 @@ export const NotifyContent = props => {
     zIndex
   });
   const resolvedZIndex = stackZIndex ?? zIndex;
-  const prevVisibleRef = React.useRef(visible);
-  const closingRef = React.useRef(false);
-  React.useEffect(() => {
+  const previousVisibleRef = useRef(visible);
+  const closingRef = useRef(false);
+  useEffect(() => {
     animationIdRef.current += 1;
     const animationId = animationIdRef.current;
     animationRef.current?.stop();
-    const durationValue = tokens.defaults.animationDuration;
+    const d = reducedMotion ? 0 : tokens.defaults.animationDuration;
     if (visible) {
       setMounted(true);
       if (!canAnimate) {
-        animated.setValue(0);
+        animatedValue.setValue(0);
         return;
       }
-      animationRef.current = Animated.timing(animated, {
+      animationRef.current = Animated.timing(animatedValue, {
         toValue: 1,
-        duration: durationValue,
+        duration: d,
         easing: Easing.out(Easing.cubic),
         useNativeDriver: nativeDriverEnabled,
         isInteraction: false
@@ -94,13 +103,13 @@ export const NotifyContent = props => {
       animationRef.current.start();
     } else {
       if (!canAnimate) {
-        animated.setValue(0);
+        animatedValue.setValue(0);
         setMounted(false);
         return;
       }
-      animationRef.current = Animated.timing(animated, {
+      animationRef.current = Animated.timing(animatedValue, {
         toValue: 0,
-        duration: durationValue,
+        duration: d,
         easing: Easing.out(Easing.cubic),
         useNativeDriver: nativeDriverEnabled,
         isInteraction: false
@@ -112,51 +121,47 @@ export const NotifyContent = props => {
         setMounted(false);
       });
     }
-  }, [animated, canAnimate, tokens.defaults.animationDuration, visible]);
-  React.useEffect(() => () => {
+  }, [animatedValue, canAnimate, reducedMotion, tokens.defaults.animationDuration, visible]);
+  useEffect(() => () => {
     animationRef.current?.stop();
   }, []);
-  React.useEffect(() => {
-    let openedTimer = null;
+  const resolvedAnimDuration = reducedMotion ? 0 : tokens.defaults.animationDuration;
+  useEffect(() => {
     if (visible) {
       closingRef.current = false;
-      if (!prevVisibleRef.current) {
-        onOpen?.();
-        if (onOpened) openedTimer = setTimeout(onOpened, tokens.defaults.animationDuration);
+      if (!previousVisibleRef.current) {
+        onOpenRef.current?.();
+        if (onOpenedRef.current) {
+          const cb = onOpenedRef.current;
+          const t = setTimeout(cb, resolvedAnimDuration);
+          previousVisibleRef.current = visible;
+          return () => clearTimeout(t);
+        }
       }
-    } else if (prevVisibleRef.current) {
-      closingRef.current = true;
-    }
-    prevVisibleRef.current = visible;
-    return () => {
-      if (openedTimer) clearTimeout(openedTimer);
-    };
-  }, [onOpen, onOpened, tokens.defaults.animationDuration, visible]);
-  React.useEffect(() => {
+    } else if (previousVisibleRef.current) closingRef.current = true;
+    previousVisibleRef.current = visible;
+  }, [resolvedAnimDuration, visible]);
+  useEffect(() => {
     if (!mounted && closingRef.current) {
       closingRef.current = false;
-      onClosed?.();
-    }
-  }, [mounted, onClosed]);
-  React.useEffect(() => {
-    let timer = null;
-    if (visible && resolvedDuration > 0) {
-      timer = setTimeout(() => {
-        onClose?.();
-      }, resolvedDuration);
+      onClosedRef.current?.();
     }
-    return () => {
-      if (timer) clearTimeout(timer);
-    };
-  }, [onClose, resolvedDuration, visible]);
+  }, [mounted]);
+  useEffect(() => {
+    if (!visible || resolvedDuration <= 0) return;
+    const timeout = setTimeout(() => {
+      onCloseRef.current?.();
+    }, resolvedDuration);
+    return () => clearTimeout(timeout);
+  }, [resolvedDuration, visible]);
   const contentHeight = barHeight > 0 ? barHeight : tokens.sizing.minHeight;
   const interactive = closeOnClick || isFunction(onClick);
   const handlePress = useCallback(() => {
-    onClick?.();
-    if (closeOnClick) onClose?.();
-  }, [closeOnClick, onClick, onClose]);
+    onClickRef.current?.();
+    if (closeOnClick) onCloseRef.current?.();
+  }, [closeOnClick]);
   const accessibilityRole = interactive ? 'button' : 'alert';
-  const press = useAriaPress({
+  const pressProps = useAriaPress({
     disabled: !interactive,
     onPress: handlePress,
     extraProps: {
@@ -164,17 +169,17 @@ export const NotifyContent = props => {
       accessibilityLiveRegion: 'assertive'
     }
   });
-  const translateY = useMemo(() => position === 'bottom' ? animated.interpolate({
+  const translateY = useMemo(() => position === 'bottom' ? animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [contentHeight, 0]
-  }) : animated.interpolate({
+  }) : animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [-contentHeight, 0]
-  }), [animated, contentHeight, position]);
-  const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
-  const bar = useMemo(() => /*#__PURE__*/React.createElement(View, {
+  }), [animatedValue, contentHeight, position]);
+  const hasMessage = isRenderable(message) && (typeof message !== 'string' || message !== '');
+  const barRender = useMemo(() => /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.container, position === 'top' ? {
-      paddingTop: webTopPadding ?? addOffset(safeTop, offset)
+      paddingTop: webTopPadding ?? addOffset(safeAreaTopValue, offset)
     } : null, webBottomPadding !== undefined ? {
       paddingBottom: webBottomPadding
     } : null]
@@ -187,9 +192,11 @@ export const NotifyContent = props => {
     testID: "rv-notify-bar",
     accessibilityRole: !interactive ? accessibilityRole : undefined,
     accessibilityLiveRegion: !interactive ? 'assertive' : undefined,
+    renderToHardwareTextureAndroid: true,
+    shouldRasterizeIOS: true,
     onLayout: handleLayout,
     style: [tokens.layout.container, {
-      opacity: animated,
+      opacity: animatedValue,
       transform: [{
         translateY
       }]
@@ -201,20 +208,19 @@ export const NotifyContent = props => {
   }, /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.content, {
       paddingHorizontal: tokens.spacing.paddingHorizontal,
-      paddingVertical,
+      paddingVertical: tokens.spacing.paddingVertical,
       minHeight: tokens.sizing.minHeight
     }]
-  }, hasMessage ? isText(message) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.text, {
-      color: resolvedTextColor,
-      fontSize: tokens.typography.fontSize,
-      lineHeight: tokens.typography.lineHeight
-    }, textStyle]
-  }, message) : message : null)))), position === 'bottom' ? /*#__PURE__*/React.createElement(View, {
+  }, hasMessage && (isText(message) ? renderTextOrNode(message, [tokens.layout.text, {
+    color: resolvedTextColor,
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.fontSize,
+    lineHeight: tokens.typography.lineHeight
+  }, textStyle]) : message))))), position === 'bottom' && /*#__PURE__*/React.createElement(View, {
     style: {
-      height: safeBottomInset
+      height: safeAreaBottomInset
     }
-  }) : null), [accessibilityRole, animated, contentHeight, handleLayout, hasMessage, interactive, message, offset, paddingVertical, position, resolvedBackground, resolvedTextColor, safeBottomInset, safeTop, style, textStyle, tokens.layout.container, tokens.layout.content, tokens.layout.text, tokens.sizing.minHeight, tokens.spacing.paddingHorizontal, tokens.typography.fontSize, tokens.typography.lineHeight, translateY, webBottomPadding, webTopPadding]);
+  })), [accessibilityRole, animatedValue, contentHeight, handleLayout, hasMessage, interactive, message, offset, resolvedBackground, resolvedTextColor, safeAreaBottomInset, safeAreaTopValue, style, textStyle, tokens.layout.container, tokens.layout.content, tokens.layout.text, tokens.sizing.minHeight, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.lineHeight, translateY, webBottomPadding, webTopPadding, position]);
   if (!mounted) return null;
   return /*#__PURE__*/React.createElement(View, {
     testID: "rv-notify",
@@ -223,14 +229,14 @@ export const NotifyContent = props => {
       bottom: 0
     } : {
       top: 0
-    }, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
+    }, resolvedZIndex != null ? {
       zIndex: resolvedZIndex
     } : null]
-  }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, press.interactionProps, {
+  }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, pressProps.interactionProps, {
     disabled: !interactive
-  }), bar) : bar);
+  }), barRender) : barRender);
 };
-export const Notify = props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(NotifyContent, props));
-NotifyContent.displayName = 'NotifyContent';
-Notify.displayName = 'Notify';
+export const NotifyContent = /*#__PURE__*/React.memo(NotifyContentImpl);
+const NotifyImpl = props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(NotifyContent, props));
+export const Notify = /*#__PURE__*/React.memo(NotifyImpl);
 export default Notify;