react-native-system-ui 0.0.3 → 0.0.4

package/dist/es/components/share-sheet/ShareSheet.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, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { createHairlineView } from '../../utils/hairline';
@@ -20,13 +20,13 @@ const ShareSheetOptionItem = ({
   tokens,
   onSelect
 }) => {
-  const optionWidthStyle = useMemo(() => ({
+  const optionWidthStyle = {
     width: `${100 / columns}%`
-  }), [columns]);
-  const iconStyle = useMemo(() => ({
+  };
+  const iconStyle = {
     width: tokens.sizing.icon,
     height: tokens.sizing.icon
-  }), [tokens.sizing.icon]);
+  };
   const press = useAriaPress({
     onPress: () => onSelect(option, index),
     extraProps: {
@@ -37,21 +37,26 @@ const ShareSheetOptionItem = ({
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     style: [styles.option, optionWidthStyle]
   }, press.interactionProps), /*#__PURE__*/React.createElement(View, {
-    style: [styles.icon, iconStyle]
+    style: [styles.icon, iconStyle, {
+      marginHorizontal: tokens.spacing.iconMarginHorizontal
+    }]
   }, option.icon), isValidNode(option.name) ? isText(option.name) ? /*#__PURE__*/React.createElement(Text, {
     style: [styles.optionText, {
       color: tokens.colors.option,
-      fontSize: tokens.typography.option
+      fontSize: tokens.typography.option,
+      paddingHorizontal: tokens.spacing.optionTextPaddingHorizontal
     }]
   }, option.name) : option.name : null, isValidNode(option.description) ? isText(option.description) ? /*#__PURE__*/React.createElement(Text, {
     style: [styles.optionDesc, {
       color: tokens.colors.optionDesc,
       marginTop: tokens.spacing.gap,
-      fontSize: tokens.typography.optionDesc
+      fontSize: tokens.typography.optionDesc,
+      paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
     }]
   }, option.description) : /*#__PURE__*/React.createElement(View, {
     style: [styles.optionDescNode, {
-      marginTop: tokens.spacing.gap
+      marginTop: tokens.spacing.gap,
+      paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
     }]
   }, option.description) : null);
 };
@@ -73,11 +78,14 @@ const ShareSheetCancel = ({
     }
   }, /*#__PURE__*/React.createElement(Pressable, _extends({
     style: [styles.cancel, {
-      backgroundColor: tokens.colors.background
+      backgroundColor: tokens.colors.background,
+      paddingVertical: tokens.spacing.cancelPaddingVertical,
+      marginTop: tokens.spacing.cancelMarginTop
     }]
   }, cancelPress.interactionProps), isText(cancelText) ? /*#__PURE__*/React.createElement(Text, {
     style: [styles.cancelText, {
-      color: tokens.colors.option
+      color: tokens.colors.option,
+      fontSize: tokens.typography.cancel
     }]
   }, cancelText) : cancelText));
 };
@@ -105,8 +113,8 @@ const ShareSheet = props => {
     ...popupProps
   } = props;
   const tokens = useShareSheetTokens(tokensOverride);
-  const groups = useMemo(() => normalizeOptions(options), [options]);
-  const resolvedColumns = useMemo(() => isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4, [columns]);
+  const groups = normalizeOptions(options);
+  const resolvedColumns = isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4;
   const hasTitle = isValidNode(title);
   const hasDescription = isValidNode(description);
   const hasCancelText = isValidNode(cancelText);
@@ -120,14 +128,14 @@ const ShareSheet = props => {
     if (closeOnSelect) close();
   }, [close, closeOnSelect, onSelect]);
   const onPopupClose = useCallback(() => close(true), [close]);
-  const wrapperStyle = useMemo(() => [styles.wrapper, {
+  const wrapperStyle = [styles.wrapper, {
     backgroundColor: tokens.colors.background
-  }], [tokens.colors.background]);
-  const groupRowStyle = useMemo(() => [styles.optionsRow, {
+  }];
+  const groupRowStyle = [styles.optionsRow, {
     paddingLeft: tokens.spacing.gap,
     paddingVertical: 12
-  }], [tokens.spacing.gap]);
-  const groupNodes = useMemo(() => {
+  }];
+  const groupNodes = (() => {
     if (!groups.length) return null;
     let globalIndex = 0;
     return groups.map((group, groupIndex) => /*#__PURE__*/React.createElement(View, {
@@ -152,27 +160,34 @@ const ShareSheet = props => {
         onSelect: handleSelect
       });
     }))));
-  }, [groupRowStyle, groups, handleSelect, resolvedColumns, tokens, tokens.colors.border, tokens.spacing.horizontal]);
-  const headerNode = useMemo(() => {
-    if (!hasTitle && !hasDescription) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      style: styles.header
-    }, hasTitle ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
-      style: [styles.title, {
-        color: tokens.colors.title,
-        fontSize: tokens.typography.title
-      }]
-    }, title) : /*#__PURE__*/React.createElement(View, {
-      style: styles.node
-    }, title) : null, hasDescription ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
-      style: [styles.description, {
-        color: tokens.colors.description,
-        fontSize: tokens.typography.description
-      }]
-    }, description) : /*#__PURE__*/React.createElement(View, {
-      style: styles.node
-    }, description) : null);
-  }, [description, hasDescription, hasTitle, title, tokens.colors.description, tokens.colors.title, tokens.typography.description, tokens.typography.title]);
+  })();
+  const headerNode = !hasTitle && !hasDescription ? null : /*#__PURE__*/React.createElement(View, {
+    style: [styles.header, {
+      paddingTop: tokens.spacing.headerPaddingTop,
+      paddingHorizontal: tokens.spacing.headerPaddingHorizontal,
+      paddingBottom: tokens.spacing.headerPaddingBottom
+    }]
+  }, hasTitle ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.title, {
+      color: tokens.colors.title,
+      fontSize: tokens.typography.title,
+      marginTop: tokens.spacing.titleMarginTop
+    }]
+  }, title) : /*#__PURE__*/React.createElement(View, {
+    style: [styles.node, {
+      marginTop: tokens.spacing.nodeMarginTop
+    }]
+  }, title) : null, hasDescription ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.description, {
+      color: tokens.colors.description,
+      fontSize: tokens.typography.description,
+      marginTop: tokens.spacing.descriptionMarginTop
+    }]
+  }, description) : /*#__PURE__*/React.createElement(View, {
+    style: [styles.node, {
+      marginTop: tokens.spacing.nodeMarginTop
+    }]
+  }, description) : null);
   return /*#__PURE__*/React.createElement(Popup, _extends({}, popupProps, {
     visible: visible,
     placement: "bottom",
@@ -181,7 +196,9 @@ const ShareSheet = props => {
     overlay: overlay,
     lockScroll: lockScroll,
     onClose: onPopupClose,
-    style: [styles.popupOverride, popupStyle]
+    style: [styles.popupOverride, {
+      padding: tokens.spacing.popupPadding
+    }, popupStyle]
   }), /*#__PURE__*/React.createElement(View, {
     style: wrapperStyle
   }, headerNode, groupNodes, children, hasCancelText ? /*#__PURE__*/React.createElement(ShareSheetCancel, {
@@ -191,30 +208,22 @@ const ShareSheet = props => {
   }) : null));
 };
 const styles = StyleSheet.create({
-  popupOverride: {
-    padding: 0
-  },
+  popupOverride: {},
   wrapper: {
     width: '100%'
   },
   header: {
-    paddingTop: 8,
-    paddingHorizontal: 16,
-    paddingBottom: 12,
     alignItems: 'center'
   },
   title: {
     fontWeight: 'normal',
-    textAlign: 'center',
-    marginTop: 4
+    textAlign: 'center'
   },
   description: {
-    textAlign: 'center',
-    marginTop: 4
+    textAlign: 'center'
   },
   node: {
-    alignItems: 'center',
-    marginTop: 4
+    alignItems: 'center'
   },
   optionsRow: {
     flexDirection: 'row',
@@ -226,29 +235,22 @@ const styles = StyleSheet.create({
   },
   icon: {
     alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 12
+    justifyContent: 'center'
   },
   optionText: {
     fontWeight: '500',
-    textAlign: 'center',
-    paddingHorizontal: 4
+    textAlign: 'center'
   },
   optionDesc: {
-    textAlign: 'center',
-    paddingHorizontal: 16
+    textAlign: 'center'
   },
   optionDescNode: {
-    alignItems: 'center',
-    paddingHorizontal: 16
+    alignItems: 'center'
   },
   cancel: {
-    paddingVertical: 14,
-    marginTop: 8,
     alignItems: 'center'
   },
   cancelText: {
-    fontSize: 16,
     fontWeight: '500'
   }
 });

package/dist/es/components/share-sheet/tokens.js

@@ -18,7 +18,19 @@ const createTokens = foundations => {
     spacing: {
       horizontal: spacing.md,
       vertical: spacing.sm,
-      gap: spacing.xs
+      gap: spacing.xs,
+      popupPadding: 0,
+      headerPaddingTop: spacing.sm,
+      headerPaddingHorizontal: spacing.lg,
+      headerPaddingBottom: spacing.md,
+      titleMarginTop: spacing.xs,
+      descriptionMarginTop: spacing.xs,
+      nodeMarginTop: spacing.xs,
+      iconMarginHorizontal: spacing.md,
+      optionTextPaddingHorizontal: spacing.xs,
+      optionDescPaddingHorizontal: spacing.lg,
+      cancelPaddingVertical: 14,
+      cancelMarginTop: spacing.sm
     },
     sizing: {
       icon: 48
@@ -27,7 +39,8 @@ const createTokens = foundations => {
       title: fontSize.md,
       description: fontSize.xs,
       option: fontSize.xs,
-      optionDesc: fontSize.xxs
+      optionDesc: fontSize.xxs,
+      cancel: fontSize.md
     }
   };
 };

package/dist/es/components/sidebar/Sidebar.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, { useMemo } from 'react';
+import React from 'react';
 import { Text, View } from 'react-native';
 import { mergeTokensOverride } from '../../design-system';
 import { useControllableValue } from '../../hooks';
@@ -15,7 +15,7 @@ const SidebarBase = props => {
     ...rest
   } = props;
   const tokens = useSidebarTokens(tokensOverride);
-  const items = useMemo(() => {
+  const items = (() => {
     const out = [];
     const list = React.Children.toArray(children);
     for (let i = 0; i < list.length; i++) {
@@ -27,7 +27,7 @@ const SidebarBase = props => {
       });
     }
     return out;
-  }, [children]);
+  })();
   const firstIndex = items[0]?.index ?? 0;
   const [activeIndex, setActiveIndex] = useControllableValue(props, {
     defaultValue: firstIndex,
@@ -42,24 +42,20 @@ const SidebarBase = props => {
       break;
     }
   }
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     activeIndex: currentIndex,
     onSelect: setActiveIndex
-  }), [currentIndex, setActiveIndex]);
-  const clonedItems = useMemo(() => {
-    return items.map(item => {
-      const key = item.element.key ?? item.index;
-      const merged = mergeTokensOverride(tokensOverride, item.element.props.tokensOverride);
-      return /*#__PURE__*/React.cloneElement(item.element, {
-        key,
-        index: item.index,
-        tokensOverride: merged
-      });
+  };
+  const clonedItems = items.map(item => {
+    const key = item.element.key ?? item.index;
+    const merged = mergeTokensOverride(tokensOverride, item.element.props.tokensOverride);
+    return /*#__PURE__*/React.cloneElement(item.element, {
+      key,
+      index: item.index,
+      tokensOverride: merged
     });
-  }, [items, tokensOverride]);
-  const activeItem = useMemo(() => {
-    return items.find(item => item.index === currentIndex)?.element;
-  }, [currentIndex, items]);
+  });
+  const activeItem = items.find(item => item.index === currentIndex)?.element;
   const activeContentStyle = activeItem?.props?.contentStyle;
   const activeContent = activeItem?.props?.children;
   const activeContentNode = activeContent == null || activeContent === false ? null : isText(activeContent) ? /*#__PURE__*/React.createElement(Text, null, activeContent) : activeContent;

package/dist/es/components/sidebar/SidebarItem.js

@@ -25,9 +25,6 @@ const SidebarItem = props => {
   const tokens = useSidebarTokens(tokensOverride);
   const context = useSidebarContext();
   if (!context) {
-    if (typeof __DEV__ !== 'undefined' && __DEV__) {
-      console.warn('[SidebarItem] 需要作为 Sidebar 子节点使用。');
-    }
     return null;
   }
   const disabled = disabledProp ?? tokens.defaults.disabled;

package/dist/es/components/skeleton/Skeleton.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, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 import { nativeDriverEnabled } from '../../platform';
 import { isFiniteNumber, isString } from '../../utils';
@@ -39,18 +39,18 @@ const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const row = rowProp ?? tokens.defaults.rowCount;
   const rowWidth = rowWidthProp ?? tokens.defaults.rowWidth;
   const round = roundProp ?? false;
-  const rows = useMemo(() => isFiniteNumber(row) ? Math.max(0, Math.floor(row)) : 0, [row]);
-  const rowWidths = useMemo(() => {
+  const rows = isFiniteNumber(row) ? Math.max(0, Math.floor(row)) : 0;
+  const rowWidths = (() => {
     const widths = resolveSeries(rows, rowWidth, tokens.defaults.rowWidth);
     if (!Array.isArray(rowWidth) && rows > 1 && (props.rowWidth === undefined || isString(props.rowWidth) && props.rowWidth.trim() === '100%')) {
       widths[rows - 1] = tokens.defaults.lastRowWidth;
     }
     return widths;
-  }, [props.rowWidth, rowWidth, rows, tokens.defaults.lastRowWidth, tokens.defaults.rowWidth]);
-  const rowHeights = useMemo(() => resolveSeries(rows, rowHeight, tokens.defaults.rowHeight), [rowHeight, rows, tokens.defaults.rowHeight]);
-  const titleHeight = useMemo(() => rowHeights[0] ?? tokens.defaults.rowHeight, [rowHeights, tokens.defaults.rowHeight]);
-  const resolvedAvatarSize = useMemo(() => normalize(avatarSize, tokens.defaults.avatarSize), [avatarSize, tokens.defaults.avatarSize]);
-  const resolvedTitleWidth = useMemo(() => normalize(titleWidth, tokens.defaults.titleWidth), [titleWidth, tokens.defaults.titleWidth]);
+  })();
+  const rowHeights = resolveSeries(rows, rowHeight, tokens.defaults.rowHeight);
+  const titleHeight = rowHeights[0] ?? tokens.defaults.rowHeight;
+  const resolvedAvatarSize = normalize(avatarSize, tokens.defaults.avatarSize);
+  const resolvedTitleWidth = normalize(titleWidth, tokens.defaults.titleWidth);
   const animated = useRef(new Animated.Value(0)).current;
   useEffect(() => {
     if (!loading || !animate || tokens.animation.duration <= 0) {
@@ -69,56 +69,44 @@ const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
     loop.start();
     return () => loop.stop();
   }, [animate, animated, loading, tokens.animation.duration]);
-  const animatedStyle = useMemo(() => {
-    if (!loading || !animate) return undefined;
-    return {
-      opacity: animated.interpolate({
-        inputRange: [0, 1],
-        outputRange: [tokens.animation.minOpacity, tokens.animation.maxOpacity]
-      })
-    };
-  }, [animate, animated, loading, tokens.animation.maxOpacity, tokens.animation.minOpacity]);
-  const containerStyles = useMemo(() => [styles.container, {
+  const animatedStyle = !loading || !animate ? undefined : {
+    opacity: animated.interpolate({
+      inputRange: [0, 1],
+      outputRange: [tokens.animation.minOpacity, tokens.animation.maxOpacity]
+    })
+  };
+  const containerStyles = [styles.container, {
     gap: tokens.spacing.containerGap
-  }, style], [style, tokens.spacing.containerGap]);
-  const avatarNode = useMemo(() => {
-    if (!avatar) return null;
-    return /*#__PURE__*/React.createElement(Animated.View, {
-      style: [{
-        width: resolvedAvatarSize,
-        height: resolvedAvatarSize,
-        borderRadius: avatarShape === 'round' ? 999 : tokens.radius,
-        backgroundColor: tokens.colors.block
-      }, animatedStyle]
-    });
-  }, [animatedStyle, avatar, avatarShape, resolvedAvatarSize, tokens.colors.block, tokens.radius]);
-  const titleNode = useMemo(() => {
-    if (!title) return null;
-    return /*#__PURE__*/React.createElement(Animated.View, {
-      style: [{
-        width: resolvedTitleWidth,
-        height: titleHeight,
-        backgroundColor: tokens.colors.block,
-        borderRadius: round ? tokens.radius : 0
-      }, animatedStyle]
-    });
-  }, [animatedStyle, round, resolvedTitleWidth, title, titleHeight, tokens.colors.block, tokens.radius]);
-  const rowNodes = useMemo(() => {
-    if (rows <= 0) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      style: styles.rows
-    }, rowWidths.map((width, index) => /*#__PURE__*/React.createElement(Animated.View, {
-      key: index,
-      testID: `rv-skeleton-row-${index}`,
-      style: [{
-        width: width,
-        height: rowHeights[index],
-        marginTop: index === 0 && !title ? 0 : tokens.spacing.rowGap,
-        backgroundColor: tokens.colors.block,
-        borderRadius: round ? tokens.radius : 0
-      }, animatedStyle]
-    })));
-  }, [animatedStyle, rowHeights, rowWidths, round, rows, title, tokens.colors.block, tokens.radius, tokens.spacing.rowGap]);
+  }, style];
+  const avatarNode = !avatar ? null : /*#__PURE__*/React.createElement(Animated.View, {
+    style: [{
+      width: resolvedAvatarSize,
+      height: resolvedAvatarSize,
+      borderRadius: avatarShape === 'round' ? 999 : tokens.radius,
+      backgroundColor: tokens.colors.block
+    }, animatedStyle]
+  });
+  const titleNode = !title ? null : /*#__PURE__*/React.createElement(Animated.View, {
+    style: [{
+      width: resolvedTitleWidth,
+      height: titleHeight,
+      backgroundColor: tokens.colors.block,
+      borderRadius: round ? tokens.radius : 0
+    }, animatedStyle]
+  });
+  const rowNodes = rows <= 0 ? null : /*#__PURE__*/React.createElement(View, {
+    style: styles.rows
+  }, rowWidths.map((width, index) => /*#__PURE__*/React.createElement(Animated.View, {
+    key: index,
+    testID: `rv-skeleton-row-${index}`,
+    style: [{
+      width: width,
+      height: rowHeights[index],
+      marginTop: index === 0 && !title ? 0 : tokens.spacing.rowGap,
+      backgroundColor: tokens.colors.block,
+      borderRadius: round ? tokens.radius : 0
+    }, animatedStyle]
+  })));
   if (!loading) {
     return /*#__PURE__*/React.createElement(View, _extends({
       ref: ref,

package/dist/es/components/slider/Slider.js

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import { useSlider, useSliderThumb } from '@react-native-aria/slider';
 import { isRTL } from '@react-native-aria/utils';
 import { useSliderState } from '@react-stately/slider';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { useSliderTokens } from './tokens';
 import { parseNumber } from '../../utils/number';
@@ -43,38 +43,35 @@ const ThumbNode = /*#__PURE__*/React.memo(({
   }, state, ariaReverse);
   const rawThumbViewProps = thumbProps;
   const handlers = enhanceHandlers(rawThumbViewProps, index) ?? rawThumbViewProps ?? {};
-  const translate = useMemo(() => -size / 2, [size]);
-  const thumbStyle = useMemo(() => {
-    const next = {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      borderColor: activeColor,
-      transform: [{
-        translateX: translate
-      }, {
-        translateY: translate
-      }]
-    };
-    if (orientation === 'vertical') {
-      next.top = `${visualPercent}%`;
-      next.left = '50%';
-    } else {
-      next.left = `${visualPercent}%`;
-      next.top = '50%';
-    }
-    if (!content) {
-      next.backgroundColor = thumbBackgroundColor;
-      next.elevation = thumbElevation;
-    }
-    return next;
-  }, [activeColor, content, orientation, size, thumbBackgroundColor, thumbElevation, translate, visualPercent]);
-  const indicatorStyle = useMemo(() => ({
+  const translate = -size / 2;
+  const thumbStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    borderColor: activeColor,
+    transform: [{
+      translateX: translate
+    }, {
+      translateY: translate
+    }]
+  };
+  if (orientation === 'vertical') {
+    thumbStyle.top = `${visualPercent}%`;
+    thumbStyle.left = '50%';
+  } else {
+    thumbStyle.left = `${visualPercent}%`;
+    thumbStyle.top = '50%';
+  }
+  if (!content) {
+    thumbStyle.backgroundColor = thumbBackgroundColor;
+    thumbStyle.elevation = thumbElevation;
+  }
+  const indicatorStyle = {
     width: indicatorSize,
     height: indicatorSize,
     borderRadius: indicatorSize / 2,
     backgroundColor: indicatorColor
-  }), [indicatorColor, indicatorSize]);
+  };
   const accessibilityProps = createAccessibilityProps(inputProps);
   return /*#__PURE__*/React.createElement(View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
@@ -131,7 +128,7 @@ export const Slider = props => {
   const resolvedActiveColor = activeColor ?? tokens.colors.active;
   const resolvedInactiveColor = inactiveColor ?? tokens.colors.inactive;
   const scope = Math.max(resolvedMax - resolvedMin, 0.00001);
-  const normalized = useMemo(() => normalizeValue(valueProp, range, resolvedMin, resolvedMax), [valueProp, range, resolvedMin, resolvedMax]);
+  const normalized = normalizeValue(valueProp, range, resolvedMin, resolvedMax);
   const isControlled = valueProp !== undefined;
   const formatOutput = useCallback(values => toSliderValue(values, range, resolvedMin), [range, resolvedMin]);
   const handleStateChange = useCallback(values => {
@@ -140,7 +137,7 @@ export const Slider = props => {
   const handleStateChangeEnd = useCallback(values => {
     onChangeAfter?.(formatOutput(values));
   }, [formatOutput, onChangeAfter]);
-  const sliderStateOptions = useMemo(() => ({
+  const sliderStateOptions = {
     minValue: resolvedMin,
     maxValue: resolvedMax,
     step: resolvedStep,
@@ -151,7 +148,7 @@ export const Slider = props => {
     defaultValue: !isControlled ? normalized : undefined,
     onChange: handleStateChange,
     onChangeEnd: handleStateChangeEnd
-  }), [ariaDisabled, handleStateChange, handleStateChangeEnd, isControlled, normalized, orientation, resolvedMax, resolvedMin, resolvedStep]);
+  };
   const state = useSliderState(sliderStateOptions);
   const [trackLayout, setTrackLayout] = useState({
     width: 0,
@@ -360,9 +357,9 @@ export const Slider = props => {
     return wrapped;
   }, [onDragStart, onDragEnd]);
   const values = state.values;
-  const thumbPercents = useMemo(() => values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100), [resolvedMin, scope, values]);
-  const thumbVisualPercents = useMemo(() => thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent), [orientation, reverse, reverseX, thumbPercents]);
-  const activeRange = useMemo(() => {
+  const thumbPercents = values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100);
+  const thumbVisualPercents = thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent);
+  const activeRange = (() => {
     const first = thumbVisualPercents[0] ?? 0;
     const second = thumbVisualPercents[1] ?? first;
     return range && thumbVisualPercents.length > 1 ? {
@@ -375,33 +372,30 @@ export const Slider = props => {
       offset: first,
       size: 100 - first
     };
-  }, [orientation, range, reverse, reverseX, thumbVisualPercents]);
-  const activeTrackStyle = useMemo(() => {
-    const next = {
-      backgroundColor: resolvedActiveColor,
-      borderRadius: tokens.track.radius
-    };
-    if (orientation === 'vertical') {
-      next.left = 0;
-      next.width = '100%';
-      next.height = `${Math.max(activeRange.size, 0)}%`;
-      next.top = `${Math.max(activeRange.offset, 0)}%`;
-    } else {
-      next.top = 0;
-      next.height = '100%';
-      next.width = `${Math.max(activeRange.size, 0)}%`;
-      next.left = `${Math.max(activeRange.offset, 0)}%`;
-    }
-    return next;
-  }, [activeRange.offset, activeRange.size, orientation, resolvedActiveColor, tokens.track.radius]);
-  const trackBaseStyle = useMemo(() => orientation === 'vertical' ? [styles.trackVertical, {
+  })();
+  const activeTrackStyle = {
+    backgroundColor: resolvedActiveColor,
+    borderRadius: tokens.track.radius
+  };
+  if (orientation === 'vertical') {
+    activeTrackStyle.left = 0;
+    activeTrackStyle.width = '100%';
+    activeTrackStyle.height = `${Math.max(activeRange.size, 0)}%`;
+    activeTrackStyle.top = `${Math.max(activeRange.offset, 0)}%`;
+  } else {
+    activeTrackStyle.top = 0;
+    activeTrackStyle.height = '100%';
+    activeTrackStyle.width = `${Math.max(activeRange.size, 0)}%`;
+    activeTrackStyle.left = `${Math.max(activeRange.offset, 0)}%`;
+  }
+  const trackBaseStyle = orientation === 'vertical' ? [styles.trackVertical, {
     width: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor,
     alignSelf: 'center'
   }] : [styles.trackHorizontal, {
     height: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor
-  }], [orientation, resolvedInactiveColor, resolvedTrackHeight]);
+  }];
   const isButtonFunction = isFunction(button);
   const sharedThumb = isButtonFunction ? button({
     value: currentValue
@@ -409,21 +403,21 @@ export const Slider = props => {
   const leftThumbContent = leftButton ?? leftThumb ?? sharedThumb;
   const rightThumbContent = rightButton ?? rightThumb ?? sharedThumb;
   const resolveThumbContent = useCallback((index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : sharedThumb, [leftThumbContent, rightThumbContent, sharedThumb]);
-  const webGestureStyle = useMemo(() => Platform.OS === 'web' ? {
+  const webGestureStyle = Platform.OS === 'web' ? {
     touchAction: orientation === 'horizontal' ? 'pan-y' : 'none',
     userSelect: 'none'
-  } : undefined, [orientation]);
-  const baseTrackPressableStyle = useMemo(() => [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle], [orientation, webGestureStyle]);
+  } : undefined;
+  const baseTrackPressableStyle = [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle];
   const trackPressableStyleFn = useCallback(pressableState => [baseTrackPressableStyle, trackAriaStyle(pressableState)], [baseTrackPressableStyle, trackAriaStyle]);
-  const trackPressableStyle = useMemo(() => trackAriaStyle && isFunction(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle], [baseTrackPressableStyle, trackAriaStyle, trackPressableStyleFn]);
-  const containerStyles = useMemo(() => [styles.container, {
+  const trackPressableStyle = trackAriaStyle && isFunction(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle];
+  const containerStyles = [styles.container, {
     paddingVertical: tokens.spacing.containerPaddingVertical
   }, orientation === 'vertical' && [styles.verticalContainer, {
     minHeight: tokens.layout.verticalMinHeight,
     width: tokens.layout.verticalWidth
   }], disabled && {
     opacity: tokens.states.disabledOpacity
-  }, style], [disabled, orientation, style, tokens.layout.verticalMinHeight, tokens.layout.verticalWidth, tokens.spacing.containerPaddingVertical, tokens.states.disabledOpacity]);
+  }, style];
   return /*#__PURE__*/React.createElement(View, _extends({
     style: containerStyles,
     onLayout: containerOnLayout