react-native-system-ui 0.0.4 → 0.0.6

package/dist/es/components/portal/PortalHost.js

@@ -1,37 +1,13 @@
-import React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DeviceEventEmitter, NativeEventEmitter, StyleSheet, View } from 'react-native';
 import { isNumber } from '../../utils';
+import { OverlayProvider } from '../overlay';
 import { PortalContext } from './PortalContext';
-class PortalLayer extends React.PureComponent {
-  state = {
-    entries: []
-  };
-  setEntries = entries => {
-    this.setState(prev => prev.entries === entries ? null : {
-      entries
-    });
-  };
-  render() {
-    const {
-      fixed
-    } = this.props;
-    const {
-      entries
-    } = this.state;
-    return /*#__PURE__*/React.createElement(View, {
-      pointerEvents: "box-none",
-      style: [styles.portalLayer, fixed && webFixedStyle],
-      collapsable: false
-    }, entries.map(entry => /*#__PURE__*/React.createElement(View, {
-      key: entry.key,
-      pointerEvents: "box-none",
-      collapsable: false,
-      style: [styles.portalEntry, isNumber(entry.zIndex) && {
-        zIndex: entry.zIndex
-      }]
-    }, entry.children)));
-  }
-}
+const ADD_EVENT = 'RNSU_PORTAL_ADD';
+const UPDATE_EVENT = 'RNSU_PORTAL_UPDATE';
+const REMOVE_EVENT = 'RNSU_PORTAL_REMOVE';
+const CLEAR_EVENT = 'RNSU_PORTAL_CLEAR';
+const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter();
 const getMaxZIndex = node => {
   if (!node) return undefined;
   if (Array.isArray(node)) {
@@ -59,156 +35,263 @@ const getMaxZIndex = node => {
   if (!isNumber(max)) return childMax;
   return Math.max(max, childMax);
 };
-const hostStack = [];
-const portalEntries = new Map();
-const emptyEntries = [];
-let nextPortalKey = 1;
-let snapshotDirty = true;
-let snapshotCache = emptyEntries;
-const markSnapshotDirty = () => {
-  snapshotDirty = true;
-};
-const getEntriesSnapshot = () => {
-  if (!snapshotDirty) return snapshotCache;
-  snapshotDirty = false;
-  snapshotCache = portalEntries.size === 0 ? emptyEntries : Array.from(portalEntries.values());
-  return snapshotCache;
-};
-const syncCurrentHost = () => {
-  const currentHost = hostStack[hostStack.length - 1];
-  if (currentHost) {
-    currentHost.setEntries(getEntriesSnapshot());
-  }
-};
-const setHostPresence = (host, present) => {
-  if (present) {
-    hostStack.push(host);
-    syncCurrentHost();
-    maybeTeardownAutoHost();
-    return;
-  }
-  const index = hostStack.lastIndexOf(host);
-  if (index >= 0) {
-    hostStack.splice(index, 1);
-  }
-  if (hostStack.length === 0) {
-    clearPortals();
-    return;
+const applyOperation = (manager, operation) => {
+  if (operation.type === 'mount') {
+    manager.mount(operation.children, operation.key);
+  } else if (operation.type === 'update') {
+    manager.update(operation.key, operation.children);
+  } else if (operation.type === 'clear') {
+    manager.clear();
+  } else {
+    manager.unmount(operation.key);
   }
-  syncCurrentHost();
-  maybeTeardownAutoHost();
 };
-const mountPortal = (children, key) => {
-  const resolvedKey = key ?? nextPortalKey++;
-  portalEntries.set(resolvedKey, {
-    key: resolvedKey,
-    children,
-    zIndex: getMaxZIndex(children)
-  });
-  markSnapshotDirty();
-  syncCurrentHost();
-  return resolvedKey;
-};
-const updatePortal = (key, children) => {
-  const prev = portalEntries.get(key);
-  if (prev) {
-    prev.children = children;
-    prev.zIndex = getMaxZIndex(children);
-  } else {
-    portalEntries.set(key, {
-      key,
+const PortalManagerView = /*#__PURE__*/React.forwardRef((_, ref) => {
+  const [entries, setEntries] = useState([]);
+  const keySeed = useRef(0);
+  const mount = useCallback((children, key) => {
+    const resolvedKey = key ?? ++keySeed.current;
+    if (isNumber(key) && key >= keySeed.current) {
+      keySeed.current = key + 1;
+    }
+    const entry = {
+      key: resolvedKey,
       children,
       zIndex: getMaxZIndex(children)
+    };
+    setEntries(prev => {
+      const index = prev.findIndex(item => item.key === resolvedKey);
+      if (index === -1) {
+        return [...prev, entry];
+      }
+      return [...prev.slice(0, index), entry, ...prev.slice(index + 1)];
     });
-  }
-  markSnapshotDirty();
-  syncCurrentHost();
-};
-const unmountPortal = key => {
-  if (portalEntries.delete(key)) {
-    markSnapshotDirty();
-    syncCurrentHost();
-    maybeTeardownAutoHost();
-  }
-};
-const scheduleTeardown = typeof queueMicrotask === 'function' ? queueMicrotask : task => {
-  Promise.resolve().then(task);
-};
-const teardownAutoHost = () => {
-  if (!autoHostRoot || teardownScheduled) return;
-  teardownScheduled = true;
-  scheduleTeardown(() => {
-    teardownScheduled = false;
-    if (!autoHostRoot) return;
-    if (hostStack.length > 1 || portalEntries.size === 0) {
-      const root = autoHostRoot;
-      const container = autoHostContainer;
-      autoHostRoot = null;
-      autoHostContainer = null;
-      root.unmount();
-      if (container?.parentNode) {
-        container.parentNode.removeChild(container);
+    return resolvedKey;
+  }, []);
+  const update = useCallback((key, children) => {
+    setEntries(prev => {
+      const index = prev.findIndex(item => item.key === key);
+      const entry = {
+        key,
+        children,
+        zIndex: getMaxZIndex(children)
+      };
+      if (index === -1) {
+        return [...prev, entry];
       }
+      return [...prev.slice(0, index), entry, ...prev.slice(index + 1)];
+    });
+  }, []);
+  const unmount = useCallback(key => {
+    setEntries(prev => prev.filter(item => item.key !== key));
+  }, []);
+  const clear = useCallback(() => {
+    setEntries([]);
+  }, []);
+  React.useImperativeHandle(ref, () => ({
+    mount,
+    update,
+    unmount,
+    clear
+  }), [mount, update, unmount, clear]);
+  if (entries.length === 0) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "box-none",
+    style: styles.portalLayer,
+    collapsable: false
+  }, entries.map(entry => /*#__PURE__*/React.createElement(View, {
+    key: entry.key,
+    pointerEvents: "box-none",
+    collapsable: false,
+    style: [styles.portalEntry, isNumber(entry.zIndex) && {
+      zIndex: entry.zIndex
+    }]
+  }, entry.children)));
+});
+let activeHostId = 0;
+let nextHostId = 1;
+let nextGlobalKey = 1;
+const globalManager = {
+  mount: (children, key) => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__ && activeHostId === 0) {
+      console.warn('[Portal] 请在根节点挂载 <PortalHost> 或 <ConfigProvider> 以启用静态组件能力。');
     }
-  });
-};
-const maybeTeardownAutoHost = () => {
-  if (!autoHostRoot) return;
-  if (hostStack.length > 1 || portalEntries.size === 0) {
-    teardownAutoHost();
-  }
-};
-const clearPortals = () => {
-  if (portalEntries.size > 0) {
-    portalEntries.clear();
-    markSnapshotDirty();
-    syncCurrentHost();
+    const resolvedKey = key ?? nextGlobalKey++;
+    if (isNumber(key) && key >= nextGlobalKey) {
+      nextGlobalKey = key + 1;
+    }
+    TopViewEventEmitter.emit(ADD_EVENT, {
+      key: resolvedKey,
+      children
+    });
+    return resolvedKey;
+  },
+  update: (key, children) => {
+    TopViewEventEmitter.emit(UPDATE_EVENT, {
+      key,
+      children
+    });
+  },
+  unmount: key => {
+    TopViewEventEmitter.emit(REMOVE_EVENT, {
+      key
+    });
   }
-  maybeTeardownAutoHost();
-};
-const globalManager = {
-  mount: mountPortal,
-  update: updatePortal,
-  unmount: unmountPortal
 };
-export class PortalHost extends React.Component {
-  layer = null;
-  componentWillUnmount() {
-    if (this.layer) {
-      setHostPresence(this.layer, false);
-      this.layer = null;
+export const PortalHost = ({
+  children
+}) => {
+  const hostIdRef = useRef(nextHostId++);
+  const managerRef = useRef(null);
+  const queueRef = useRef([]);
+  const nextKeyRef = useRef(1);
+  const enqueueOrRun = useCallback(operation => {
+    const manager = managerRef.current;
+    if (manager) {
+      applyOperation(manager, operation);
+    } else {
+      queueRef.current.push(operation);
     }
-  }
-  setLayerRef = layer => {
-    if (this.layer === layer) return;
-    if (this.layer) {
-      setHostPresence(this.layer, false);
+  }, []);
+  const scopedManager = useMemo(() => ({
+    mount: (children, key) => {
+      const resolvedKey = key ?? nextKeyRef.current++;
+      if (isNumber(key) && key >= nextKeyRef.current) {
+        nextKeyRef.current = key + 1;
+      }
+      enqueueOrRun({
+        type: 'mount',
+        key: resolvedKey,
+        children
+      });
+      return resolvedKey;
+    },
+    update: (key, children) => {
+      enqueueOrRun({
+        type: 'update',
+        key,
+        children
+      });
+    },
+    unmount: key => {
+      enqueueOrRun({
+        type: 'unmount',
+        key
+      });
     }
-    this.layer = layer;
-    if (layer) {
-      setHostPresence(layer, true);
+  }), [enqueueOrRun]);
+  const handleManagerRef = useCallback(manager => {
+    managerRef.current = manager;
+    if (manager) {
+      if (queueRef.current.length > 0) {
+        const pending = queueRef.current.splice(0, queueRef.current.length);
+        pending.forEach(operation => applyOperation(manager, operation));
+      }
+      if (activeHostId === 0 || activeHostId === hostIdRef.current) {
+        activeHostId = hostIdRef.current;
+        if (typeof __DEV__ !== 'undefined' && __DEV__) {
+          console.log('[PortalHost] activeHost', activeHostId);
+        }
+      } else if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.warn('[PortalHost] 检测到多个 Portal.Host，静态 API 仅会使用第一个挂载的 Host。建议全局只挂载一个。');
+      }
     }
-  };
-  render() {
-    const {
-      children,
-      fixed
-    } = this.props;
-    return /*#__PURE__*/React.createElement(PortalContext.Provider, {
-      value: globalManager
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.host,
-      collapsable: false
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.root,
-      collapsable: false,
-      pointerEvents: "box-none"
-    }, children), /*#__PURE__*/React.createElement(PortalLayer, {
-      ref: this.setLayerRef,
-      fixed: fixed
-    })));
-  }
-}
+  }, []);
+  useEffect(() => () => {
+    if (activeHostId === hostIdRef.current) {
+      activeHostId = 0;
+      queueRef.current = [];
+      portalStore.clear();
+    }
+  }, []);
+  useEffect(() => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.log('[PortalHost] mounted', {
+        hostId: hostIdRef.current,
+        activeHostId
+      });
+    }
+  }, []);
+  useEffect(() => {
+    const handleAdd = ({
+      key,
+      children
+    }) => {
+      if (activeHostId !== hostIdRef.current) return;
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[PortalHost] add', key);
+      }
+      enqueueOrRun({
+        type: 'mount',
+        key,
+        children
+      });
+    };
+    const handleUpdate = ({
+      key,
+      children
+    }) => {
+      if (activeHostId !== hostIdRef.current) return;
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[PortalHost] update', key);
+      }
+      enqueueOrRun({
+        type: 'update',
+        key,
+        children
+      });
+    };
+    const handleRemove = ({
+      key
+    }) => {
+      if (activeHostId !== hostIdRef.current) return;
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[PortalHost] remove', key);
+      }
+      enqueueOrRun({
+        type: 'unmount',
+        key
+      });
+    };
+    const handleClear = () => {
+      if (activeHostId !== hostIdRef.current) return;
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[PortalHost] clear');
+      }
+      queueRef.current = [];
+      enqueueOrRun({
+        type: 'clear'
+      });
+    };
+    const addSub = TopViewEventEmitter.addListener(ADD_EVENT, handleAdd);
+    const updateSub = TopViewEventEmitter.addListener(UPDATE_EVENT, handleUpdate);
+    const removeSub = TopViewEventEmitter.addListener(REMOVE_EVENT, handleRemove);
+    const clearSub = TopViewEventEmitter.addListener(CLEAR_EVENT, handleClear);
+    return () => {
+      addSub.remove?.();
+      updateSub.remove?.();
+      removeSub.remove?.();
+      clearSub.remove?.();
+      const emitter = TopViewEventEmitter;
+      emitter.removeListener?.(ADD_EVENT, handleAdd);
+      emitter.removeListener?.(UPDATE_EVENT, handleUpdate);
+      emitter.removeListener?.(REMOVE_EVENT, handleRemove);
+      emitter.removeListener?.(CLEAR_EVENT, handleClear);
+    };
+  }, [enqueueOrRun]);
+  return /*#__PURE__*/React.createElement(OverlayProvider, null, /*#__PURE__*/React.createElement(PortalContext.Provider, {
+    value: scopedManager
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.host,
+    collapsable: false
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.root,
+    collapsable: false,
+    pointerEvents: "box-none"
+  }, children), /*#__PURE__*/React.createElement(PortalManagerView, {
+    ref: handleManagerRef
+  }))));
+};
 const styles = StyleSheet.create({
   host: {
     position: 'relative',
@@ -224,47 +307,10 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject
   }
 });
-const webFixedStyle = Platform.OS === 'web' ? {
-  position: 'fixed'
-} : undefined;
-let autoHostContainer = null;
-let autoHostRoot = null;
-let hostPromise = null;
-let teardownScheduled = false;
-export const ensureGlobalPortalHost = () => {
-  if (hostStack.length > 0) {
-    return Promise.resolve();
-  }
-  if (typeof document === 'undefined') {
-    return Promise.resolve();
-  }
-  if (autoHostRoot) return Promise.resolve();
-  if (hostPromise) return hostPromise;
-  hostPromise = Promise.resolve().then(async () => {
-    if (hostStack.length > 0 || autoHostRoot) return;
-    const doc = document;
-    const {
-      createRoot
-    } = await import('react-dom/client');
-    if (hostStack.length > 0 || autoHostRoot) return;
-    autoHostContainer = doc.createElement('div');
-    autoHostContainer.setAttribute('data-rnsu-portal-host', 'true');
-    doc.body.appendChild(autoHostContainer);
-    autoHostRoot = createRoot(autoHostContainer);
-    autoHostRoot.render(/*#__PURE__*/React.createElement(PortalHost, {
-      fixed: true
-    }));
-    maybeTeardownAutoHost();
-  }).catch(() => {
-    teardownAutoHost();
-  }).finally(() => {
-    hostPromise = null;
-  });
-  return hostPromise;
-};
 export const portalManager = globalManager;
 export const portalStore = {
-  clear: clearPortals,
-  getSnapshot: () => getEntriesSnapshot(),
-  hasHosts: () => hostStack.length > 0
+  clear: () => {
+    TopViewEventEmitter.emit(CLEAR_EVENT);
+  },
+  hasHosts: () => activeHostId !== 0
 };

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

@@ -0,0 +1,5 @@
+import { createComponentTokensHook } from '../../design-system';
+const createPortalTokens = _foundations => {
+  return {};
+};
+export const usePortalTokens = createComponentTokensHook('portal', createPortalTokens);

package/dist/es/components/progress/Progress.js

@@ -1,9 +1,44 @@
 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, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Platform, Text, View } from 'react-native';
 import { clamp, parseNumberLike, parsePercentage, isString, isText } from '../../utils';
 import { useProgressTokens } from './tokens';
 const GRADIENT_REGEX = /linear-gradient|radial-gradient|conic-gradient/i;
+const ProgressContext = /*#__PURE__*/React.createContext(null);
+export const ProgressFilledTrack = ({
+  style
+}) => {
+  const context = useContext(ProgressContext);
+  if (!context) return null;
+  const indicatorSize = useMemo(() => context.animatedValue.interpolate({
+    inputRange: [0, 100],
+    outputRange: ['0%', '100%']
+  }), [context.animatedValue]);
+  const sizeStyle = useMemo(() => context.orientation === 'vertical' ? {
+    width: context.height,
+    height: indicatorSize,
+    bottom: 0,
+    left: 0,
+    position: 'absolute'
+  } : {
+    height: context.height,
+    width: indicatorSize
+  }, [context.height, context.orientation, indicatorSize]);
+  const baseStyle = [context.orientation === 'vertical' ? {
+    position: 'absolute',
+    left: 0,
+    bottom: 0
+  } : context.layoutIndicator, {
+    backgroundColor: context.indicatorColor,
+    borderRadius: context.height / 2,
+    ...(context.isGradient && context.gradientColor ? {
+      backgroundImage: context.gradientColor
+    } : null)
+  }, sizeStyle, context.indicatorStyle, style];
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: baseStyle
+  });
+};
 export const Progress = /*#__PURE__*/memo(props => {
   const {
     tokensOverride,
@@ -22,22 +57,25 @@ export const Progress = /*#__PURE__*/memo(props => {
     style,
     pivotStyle,
     indicatorStyle,
+    orientation: orientationProp,
+    children,
     ...rest
   } = props;
   const tokens = useProgressTokens(tokensOverride);
-  const percentage = clamp(parsePercentage(percentageProp ?? tokens.defaults.percentage), 0, 100);
-  const height = parseNumberLike(strokeWidth, tokens.sizing.height) ?? tokens.sizing.height;
-  const inactive = inactiveProp ?? tokens.defaults.inactive;
-  const showPivot = showPivotProp ?? tokens.defaults.showPivot;
-  const shouldAnimate = (animated ?? transitionProp ?? tokens.defaults.transition) && !inactive;
-  const duration = Math.max(0, animationDurationProp ?? tokens.defaults.animationDuration);
+  const percentage = useMemo(() => clamp(parsePercentage(percentageProp ?? tokens.defaults.percentage), 0, 100), [percentageProp, tokens.defaults.percentage]);
+  const height = useMemo(() => parseNumberLike(strokeWidth, tokens.sizing.height) ?? tokens.sizing.height, [strokeWidth, tokens.sizing.height]);
+  const inactive = useMemo(() => inactiveProp ?? tokens.defaults.inactive, [inactiveProp, tokens.defaults.inactive]);
+  const orientation = orientationProp ?? 'horizontal';
+  const showPivot = useMemo(() => orientation === 'vertical' ? false : showPivotProp ?? tokens.defaults.showPivot, [orientation, showPivotProp, tokens.defaults.showPivot]);
+  const shouldAnimate = useMemo(() => (animated ?? transitionProp ?? tokens.defaults.transition) && !inactive, [animated, inactive, tokens.defaults.transition, transitionProp]);
+  const duration = useMemo(() => Math.max(0, animationDurationProp ?? tokens.defaults.animationDuration), [animationDurationProp, tokens.defaults.animationDuration]);
   const isGradient = Platform.OS === 'web' && isString(color) && GRADIENT_REGEX.test(color);
-  const resolvedTrackColor = trackColor ?? tokens.colors.track;
-  const resolvedIndicatorColor = inactive ? tokens.colors.track : !isGradient ? color ?? tokens.colors.indicator : undefined;
-  const resolvedPivotBg = pivotColor ?? (isGradient ? inactive ? tokens.colors.track : tokens.colors.indicator : resolvedIndicatorColor);
-  const resolvedPivotTextColor = textColor ?? tokens.colors.pivotText;
-  const pivotContent = pivotText ?? `${percentage}%`;
-  const hasPivot = showPivot && pivotContent !== null && pivotContent !== false;
+  const resolvedTrackColor = useMemo(() => trackColor ?? tokens.colors.track, [tokens.colors.track, trackColor]);
+  const resolvedIndicatorColor = useMemo(() => inactive ? tokens.colors.track : !isGradient ? color ?? tokens.colors.indicator : undefined, [color, inactive, isGradient, tokens.colors.indicator, tokens.colors.track]);
+  const resolvedPivotBg = useMemo(() => pivotColor ?? (isGradient ? inactive ? tokens.colors.track : tokens.colors.indicator : resolvedIndicatorColor), [inactive, isGradient, pivotColor, resolvedIndicatorColor, tokens.colors.indicator, tokens.colors.track]);
+  const resolvedPivotTextColor = useMemo(() => textColor ?? tokens.colors.pivotText, [textColor, tokens.colors.pivotText]);
+  const pivotContent = useMemo(() => pivotText ?? `${percentage}%`, [percentage, pivotText]);
+  const hasPivot = useMemo(() => showPivot && pivotContent !== null && pivotContent !== false, [pivotContent, showPivot]);
   const animatedValue = useRef(new Animated.Value(percentage)).current;
   useEffect(() => {
     if (shouldAnimate && duration > 0) {
@@ -70,13 +108,18 @@ export const Progress = /*#__PURE__*/memo(props => {
       pivot: width
     });
   }, []);
-  const trackStyle = [tokens.layout.track, {
+  const trackStyle = useMemo(() => [tokens.layout.track, orientation === 'vertical' ? {
+    width: height,
+    height: '100%',
+    backgroundColor: resolvedTrackColor,
+    borderRadius: height / 2
+  } : {
     height,
     backgroundColor: resolvedTrackColor,
     borderRadius: height / 2
-  }];
-  let pivotNode = null;
-  if (hasPivot) {
+  }], [height, orientation, resolvedTrackColor, tokens.layout.track]);
+  const pivotNode = useMemo(() => {
+    if (!hasPivot) return null;
     const {
       track: trackW,
       pivot: pivotW
@@ -111,7 +154,7 @@ export const Progress = /*#__PURE__*/memo(props => {
         };
       }
     }
-    pivotNode = /*#__PURE__*/React.createElement(Animated.View, {
+    return /*#__PURE__*/React.createElement(Animated.View, {
       style: [pivotContainerStyle, transformStyle],
       pointerEvents: "none",
       onLayout: onPivotLayout
@@ -121,12 +164,20 @@ export const Progress = /*#__PURE__*/memo(props => {
         fontSize: tokens.typography.pivotFontSize
       }, pivotStyle]
     }, pivotContent) : pivotContent);
-  }
-  const indicatorWidth = animatedValue.interpolate({
-    inputRange: [0, 100],
-    outputRange: ['0%', '100%']
-  });
-  return /*#__PURE__*/React.createElement(View, _extends({
+  }, [animatedValue, hasPivot, height, layout, onPivotLayout, pivotContent, pivotStyle, resolvedPivotBg, resolvedPivotTextColor, tokens.layout.pivot, tokens.layout.pivotText, tokens.sizing.pivotPaddingHorizontal, tokens.sizing.pivotPaddingVertical, tokens.typography.pivotFontSize]);
+  const progressContextValue = useMemo(() => ({
+    animatedValue,
+    orientation,
+    height,
+    indicatorColor: resolvedIndicatorColor,
+    indicatorStyle: indicatorStyle,
+    isGradient,
+    gradientColor: isGradient ? color : undefined,
+    layoutIndicator: tokens.layout.indicator
+  }), [animatedValue, color, height, indicatorStyle, isGradient, orientation, resolvedIndicatorColor, tokens.layout.indicator]);
+  return /*#__PURE__*/React.createElement(ProgressContext.Provider, {
+    value: progressContextValue
+  }, /*#__PURE__*/React.createElement(View, _extends({
     style: style,
     accessibilityRole: "progressbar",
     accessibilityValue: {
@@ -137,18 +188,7 @@ export const Progress = /*#__PURE__*/memo(props => {
   }, rest), /*#__PURE__*/React.createElement(View, {
     style: trackStyle,
     onLayout: hasPivot ? onTrackLayout : undefined
-  }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: [tokens.layout.indicator, {
-      height,
-      backgroundColor: resolvedIndicatorColor,
-      borderRadius: height / 2,
-      ...(isGradient && {
-        backgroundImage: color
-      })
-    }, indicatorStyle, {
-      width: indicatorWidth
-    }]
-  })), pivotNode);
+  }, children ?? /*#__PURE__*/React.createElement(ProgressFilledTrack, null)), pivotNode));
 });
 Progress.displayName = 'Progress';
 export default Progress;

package/dist/es/components/progress/index.js

@@ -1,2 +1,3 @@
-import { Progress } from './Progress';
+import { Progress, ProgressFilledTrack } from './Progress';
+export { ProgressFilledTrack };
 export default Progress;