react-native-system-ui 0.0.6 → 1.0.0

package/dist/cjs/hooks/gesture/useGestureScroll.js

@@ -18,52 +18,53 @@ function _reactNative() {
   };
   return data;
 }
-const DEFAULT_THROTTLE = 16;
-const VELOCITY_NORMALIZER = 1000;
 const useGestureScroll = (options = {}) => {
   const {
     axis = 'y',
-    scrollEventThrottle = DEFAULT_THROTTLE,
+    scrollEventThrottle = 16,
     onScroll,
     onScrollBeginDrag,
     onScrollEndDrag,
     onMomentumScrollBegin,
     onMomentumScrollEnd
   } = options;
+  const onScrollRef = (0, _react().useRef)(onScroll);
+  onScrollRef.current = onScroll;
+  const onBeginDragRef = (0, _react().useRef)(onScrollBeginDrag);
+  onBeginDragRef.current = onScrollBeginDrag;
+  const onEndDragRef = (0, _react().useRef)(onScrollEndDrag);
+  onEndDragRef.current = onScrollEndDrag;
+  const onMomBeginRef = (0, _react().useRef)(onMomentumScrollBegin);
+  onMomBeginRef.current = onMomentumScrollBegin;
+  const onMomEndRef = (0, _react().useRef)(onMomentumScrollEnd);
+  onMomEndRef.current = onMomentumScrollEnd;
   const scrollValue = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const lastOffsetRef = (0, _react().useRef)(0);
-  const lastTimestampRef = (0, _react().useRef)(null);
-  const velocityRef = (0, _react().useRef)(0);
-  const directionRef = (0, _react().useRef)(null);
+  const lastOffRef = (0, _react().useRef)(0);
+  const lastTsRef = (0, _react().useRef)(null);
+  const velRef = (0, _react().useRef)(0);
+  const dirRef = (0, _react().useRef)(null);
   const [direction, setDirection] = (0, _react().useState)(null);
   const [isDragging, setIsDragging] = (0, _react().useState)(false);
   const [isMomentum, setIsMomentum] = (0, _react().useState)(false);
-  const updateDirection = (0, _react().useCallback)(next => {
-    if (directionRef.current !== next) {
-      directionRef.current = next;
-      setDirection(next);
+  const updateDir = (0, _react().useCallback)(n => {
+    if (dirRef.current !== n) {
+      dirRef.current = n;
+      setDirection(n);
     }
   }, []);
-  const handleScroll = (0, _react().useCallback)(event => {
-    onScroll?.(event);
-    const contentOffset = event.nativeEvent.contentOffset;
-    const current = axis === 'x' ? contentOffset.x ?? 0 : contentOffset.y ?? 0;
-    const delta = current - lastOffsetRef.current;
-    const timestamp = event.timeStamp ?? Date.now();
-    if (delta > 0) {
-      updateDirection('forward');
-    } else if (delta < 0) {
-      updateDirection('backward');
-    }
-    if (lastTimestampRef.current != null) {
-      const elapsed = Math.max(timestamp - lastTimestampRef.current, 1);
-      velocityRef.current = delta / elapsed * VELOCITY_NORMALIZER;
-    }
-    lastTimestampRef.current = timestamp;
-    lastOffsetRef.current = current;
-  }, [axis, onScroll, updateDirection]);
-  const animatedScrollHandler = (0, _react().useMemo)(() => {
-    const mapping = axis === 'x' ? [{
+  const handleScroll = (0, _react().useCallback)(e => {
+    onScrollRef.current?.(e);
+    const o = e.nativeEvent.contentOffset;
+    const cur = axis === 'x' ? o.x ?? 0 : o.y ?? 0;
+    const delta = cur - lastOffRef.current;
+    const ts = e.timeStamp ?? Date.now();
+    if (delta > 0) updateDir('forward');else if (delta < 0) updateDir('backward');
+    if (lastTsRef.current != null) velRef.current = delta / Math.max(ts - lastTsRef.current, 1) * 1000;
+    lastTsRef.current = ts;
+    lastOffRef.current = cur;
+  }, [axis, updateDir]);
+  const animHandler = (0, _react().useMemo)(() => {
+    const m = axis === 'x' ? [{
       nativeEvent: {
         contentOffset: {
           x: scrollValue
@@ -76,53 +77,51 @@ const useGestureScroll = (options = {}) => {
         }
       }
     }];
-    return _reactNative().Animated.event(mapping, {
+    return _reactNative().Animated.event(m, {
       useNativeDriver: false,
       listener: handleScroll
     });
   }, [axis, handleScroll, scrollValue]);
-  const handleScrollBeginDrag = (0, _react().useCallback)(event => {
+  const hBeginDrag = (0, _react().useCallback)(e => {
     setIsDragging(true);
-    onScrollBeginDrag?.(event);
-  }, [onScrollBeginDrag]);
-  const handleScrollEndDrag = (0, _react().useCallback)(event => {
+    onBeginDragRef.current?.(e);
+  }, []);
+  const hEndDrag = (0, _react().useCallback)(e => {
     setIsDragging(false);
-    onScrollEndDrag?.(event);
-  }, [onScrollEndDrag]);
-  const handleMomentumBegin = (0, _react().useCallback)(event => {
+    onEndDragRef.current?.(e);
+  }, []);
+  const hMomBegin = (0, _react().useCallback)(e => {
     setIsMomentum(true);
-    onMomentumScrollBegin?.(event);
-  }, [onMomentumScrollBegin]);
-  const handleMomentumEnd = (0, _react().useCallback)(event => {
+    onMomBeginRef.current?.(e);
+  }, []);
+  const hMomEnd = (0, _react().useCallback)(e => {
     setIsMomentum(false);
-    onMomentumScrollEnd?.(event);
-  }, [onMomentumScrollEnd]);
-  const resetOffset = (0, _react().useCallback)((value = 0) => {
+    onMomEndRef.current?.(e);
+  }, []);
+  const resetOffset = (0, _react().useCallback)((v = 0) => {
     scrollValue.stopAnimation();
-    scrollValue.setValue(value);
-    lastOffsetRef.current = value;
-    lastTimestampRef.current = null;
-    velocityRef.current = 0;
-    updateDirection(null);
-  }, [scrollValue, updateDirection]);
-  const getVelocity = (0, _react().useCallback)(() => velocityRef.current, []);
-  const getCurrentOffset = (0, _react().useCallback)(() => lastOffsetRef.current, []);
+    scrollValue.setValue(v);
+    lastOffRef.current = v;
+    lastTsRef.current = null;
+    velRef.current = 0;
+    updateDir(null);
+  }, [scrollValue, updateDir]);
   const scrollProps = (0, _react().useMemo)(() => ({
-    onScroll: animatedScrollHandler,
+    onScroll: animHandler,
     scrollEventThrottle,
-    onScrollBeginDrag: handleScrollBeginDrag,
-    onScrollEndDrag: handleScrollEndDrag,
-    onMomentumScrollBegin: handleMomentumBegin,
-    onMomentumScrollEnd: handleMomentumEnd
-  }), [animatedScrollHandler, handleMomentumBegin, handleMomentumEnd, handleScrollBeginDrag, handleScrollEndDrag, scrollEventThrottle]);
+    onScrollBeginDrag: hBeginDrag,
+    onScrollEndDrag: hEndDrag,
+    onMomentumScrollBegin: hMomBegin,
+    onMomentumScrollEnd: hMomEnd
+  }), [animHandler, hBeginDrag, hEndDrag, hMomBegin, hMomEnd, scrollEventThrottle]);
   return {
     scrollValue,
     scrollProps,
     direction,
     isDragging,
     isMomentum,
-    getVelocity,
-    getCurrentOffset,
+    getVelocity: (0, _react().useCallback)(() => velRef.current, []),
+    getCurrentOffset: (0, _react().useCallback)(() => lastOffRef.current, []),
     resetOffset
   };
 };

package/dist/cjs/hooks/index.js

@@ -31,6 +31,18 @@ Object.keys(_useSafeAreaPadding).forEach(function (key) {
     }
   });
 });
+var _animation = require("./animation");
+Object.keys(_animation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _animation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _animation[key];
+    }
+  });
+});
 var _aria = require("./aria");
 Object.keys(_aria).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/hooks/overlay/OverlayStackStore.js

@@ -13,95 +13,79 @@ function _reactNative() {
 }
 var _platform = require("../../platform");
 var _utils = require("../../utils");
-const DEFAULT_BASE_Z_INDEX = 1000;
-const DEFAULT_Z_INDEX_STEP = 2;
 class OverlayStackStore {
   listeners = new Set();
   entries = [];
   keySeed = 0;
-  constructor(baseZIndex = DEFAULT_BASE_Z_INDEX, zIndexStep = DEFAULT_Z_INDEX_STEP) {
-    this.baseZIndex = baseZIndex;
-    this.zIndexStep = zIndexStep;
+  constructor(baseZ = 1000, zStep = 2) {
+    this.baseZ = baseZ;
+    this.zStep = zStep;
   }
-  subscribe = listener => {
-    this.listeners.add(listener);
+  subscribe = l => {
+    this.listeners.add(l);
     return () => {
-      this.listeners.delete(listener);
+      this.listeners.delete(l);
     };
   };
   getSnapshot = () => this.entries;
-  mount = options => {
-    const key = ++this.keySeed;
+  peek = () => this.entries[this.entries.length - 1];
+  size = () => this.entries.length;
+  getBaseZIndex = () => this.baseZ;
+  mount = o => {
     const entry = {
-      key,
-      zIndex: this.resolveZIndex(options.zIndex),
-      onClose: options.onClose,
-      closeOnBack: options.closeOnBack,
-      lockScroll: options.lockScroll,
-      type: options.type,
-      meta: options.meta
+      key: ++this.keySeed,
+      zIndex: this.resolveZ(o.zIndex),
+      onClose: o.onClose,
+      closeOnBack: o.closeOnBack,
+      lockScroll: o.lockScroll,
+      type: o.type,
+      meta: o.meta
     };
     this.entries = [...this.entries, entry];
     this.emit();
     return entry;
   };
-  update = (key, options) => {
-    const index = this.entries.findIndex(item => item.key === key);
-    if (index === -1) return undefined;
-    const prev = this.entries[index];
+  update = (key, o) => {
+    const i = this.entries.findIndex(e => e.key === key);
+    if (i === -1) return undefined;
     const next = {
-      ...prev,
-      ...options,
-      zIndex: (0, _utils.isNumber)(options.zIndex) ? this.resolveZIndex(options.zIndex) : prev.zIndex
+      ...this.entries[i],
+      ...o,
+      zIndex: (0, _utils.isNumber)(o.zIndex) ? this.resolveZ(o.zIndex) : this.entries[i].zIndex
     };
-    this.entries = [...this.entries.slice(0, index), next, ...this.entries.slice(index + 1)];
+    this.entries = [...this.entries.slice(0, i), next, ...this.entries.slice(i + 1)];
     this.emit();
     return next;
   };
   unmount = key => {
-    const next = this.entries.filter(entry => entry.key !== key);
-    if (next.length === this.entries.length) {
-      return;
+    const next = this.entries.filter(e => e.key !== key);
+    if (next.length !== this.entries.length) {
+      this.entries = next;
+      this.emit();
     }
-    this.entries = next;
-    this.emit();
   };
-  peek = () => this.entries[this.entries.length - 1];
-  size = () => this.entries.length;
-  getBaseZIndex = () => this.baseZIndex;
-  resolveZIndex = provided => {
-    if ((0, _utils.isNumber)(provided)) {
-      if (!Number.isFinite(provided) || provided < 0) {
-        return this.baseZIndex;
-      }
-      return provided >= this.baseZIndex ? provided : this.baseZIndex + provided;
-    }
+  resolveZ = v => {
+    if ((0, _utils.isNumber)(v)) return !Number.isFinite(v) || v < 0 ? this.baseZ : v >= this.baseZ ? v : this.baseZ + v;
     const top = this.peek();
-    if (!top) {
-      return this.baseZIndex;
-    }
-    return top.zIndex + this.zIndexStep;
+    return top ? top.zIndex + this.zStep : this.baseZ;
   };
   emit = () => {
-    this.listeners.forEach(listener => {
-      listener();
-    });
+    this.listeners.forEach(l => l());
   };
 }
 exports.OverlayStackStore = OverlayStackStore;
 const overlayStackStore = exports.overlayStackStore = new OverlayStackStore();
-let backHandlerSubscription = null;
-const syncBackHandler = () => {
+let backSub = null;
+const syncBack = () => {
   if (_reactNative().Platform.OS === 'web') return;
   const entries = overlayStackStore.getSnapshot();
-  const hasClosable = entries.some(entry => entry.closeOnBack && entry.onClose);
-  if (hasClosable && !backHandlerSubscription && _reactNative().BackHandler?.addEventListener) {
-    backHandlerSubscription = _reactNative().BackHandler.addEventListener('hardwareBackPress', () => {
-      const currentEntries = overlayStackStore.getSnapshot();
-      for (let i = currentEntries.length - 1; i >= 0; i -= 1) {
-        const entry = currentEntries[i];
-        if (entry.closeOnBack && entry.onClose) {
-          entry.onClose();
+  const has = entries.some(e => e.closeOnBack && e.onClose);
+  if (has && !backSub && _reactNative().BackHandler?.addEventListener) {
+    backSub = _reactNative().BackHandler.addEventListener('hardwareBackPress', () => {
+      const cur = overlayStackStore.getSnapshot();
+      for (let i = cur.length - 1; i >= 0; i--) {
+        if (cur[i].closeOnBack && cur[i].onClose) {
+          cur[i].onClose();
           return true;
         }
       }
@@ -109,18 +93,14 @@ const syncBackHandler = () => {
     });
     return;
   }
-  if (!hasClosable && backHandlerSubscription) {
-    backHandlerSubscription.remove();
-    backHandlerSubscription = null;
+  if (!has && backSub) {
+    backSub.remove();
+    backSub = null;
   }
 };
-const syncScrollLock = () => {
-  const shouldLock = overlayStackStore.getSnapshot().some(entry => entry.lockScroll);
-  (0, _platform.setBodyScrollLocked)(shouldLock);
-};
-const handleStoreChange = () => {
-  syncBackHandler();
-  syncScrollLock();
+const onChange = () => {
+  syncBack();
+  (0, _platform.setBodyScrollLocked)(overlayStackStore.getSnapshot().some(e => e.lockScroll));
 };
-overlayStackStore.subscribe(handleStoreChange);
-handleStoreChange();
+overlayStackStore.subscribe(onChange);
+onChange();

package/dist/cjs/hooks/overlay/useOverlayStack.js

@@ -12,18 +12,16 @@ function _react() {
   return data;
 }
 var _OverlayStackStore = require("./OverlayStackStore");
-const useOverlayEntries = () => (0, _react().useSyncExternalStore)(_OverlayStackStore.overlayStackStore.subscribe, _OverlayStackStore.overlayStackStore.getSnapshot, _OverlayStackStore.overlayStackStore.getSnapshot);
+const useEntries = () => (0, _react().useSyncExternalStore)(_OverlayStackStore.overlayStackStore.subscribe, _OverlayStackStore.overlayStackStore.getSnapshot, _OverlayStackStore.overlayStackStore.getSnapshot);
 const useOverlayStack = ({
   visible,
   ...options
 }) => {
-  const entries = useOverlayEntries();
+  const entries = useEntries();
   const entryRef = (0, _react().useRef)(null);
-  const optionsRef = (0, _react().useRef)(options);
-  if (optionsRef.current.onClose !== options.onClose || optionsRef.current.closeOnBack !== options.closeOnBack || optionsRef.current.lockScroll !== options.lockScroll || optionsRef.current.zIndex !== options.zIndex || optionsRef.current.type !== options.type || optionsRef.current.meta !== options.meta) {
-    optionsRef.current = options;
-  }
-  const stableOptions = optionsRef.current;
+  const optRef = (0, _react().useRef)(options);
+  if (optRef.current.onClose !== options.onClose || optRef.current.closeOnBack !== options.closeOnBack || optRef.current.lockScroll !== options.lockScroll || optRef.current.zIndex !== options.zIndex || optRef.current.type !== options.type || optRef.current.meta !== options.meta) optRef.current = options;
+  const opts = optRef.current;
   (0, _react().useEffect)(() => {
     if (!visible) {
       if (entryRef.current) {
@@ -32,8 +30,7 @@ const useOverlayStack = ({
       }
       return;
     }
-    const entry = _OverlayStackStore.overlayStackStore.mount(stableOptions);
-    entryRef.current = entry;
+    entryRef.current = _OverlayStackStore.overlayStackStore.mount(opts);
     return () => {
       if (entryRef.current) {
         _OverlayStackStore.overlayStackStore.unmount(entryRef.current.key);
@@ -42,18 +39,15 @@ const useOverlayStack = ({
     };
   }, [visible]);
   (0, _react().useEffect)(() => {
-    if (!visible || !entryRef.current) {
-      return;
-    }
-    _OverlayStackStore.overlayStackStore.update(entryRef.current.key, stableOptions);
-  }, [stableOptions, visible]);
-  const current = entryRef.current;
-  const snapshotEntry = current ? entries.find(entry => entry.key === current.key) : undefined;
+    if (visible && entryRef.current) _OverlayStackStore.overlayStackStore.update(entryRef.current.key, opts);
+  }, [opts, visible]);
+  const cur = entryRef.current;
+  const snap = cur ? entries.find(e => e.key === cur.key) : undefined;
   const top = entries[entries.length - 1];
   return {
-    entryKey: snapshotEntry?.key ?? null,
-    zIndex: snapshotEntry?.zIndex ?? stableOptions.zIndex,
-    isTopMost: !!snapshotEntry && !!top && top.key === snapshotEntry.key
+    entryKey: snap?.key ?? null,
+    zIndex: snap?.zIndex ?? opts.zIndex,
+    isTopMost: !!snap && !!top && top.key === snap.key
   };
 };
 exports.useOverlayStack = useOverlayStack;

package/dist/cjs/hooks/useControllableValue.js

@@ -20,33 +20,22 @@ function useControllableValue(props = {}, options = {}) {
     valuePropName = 'value',
     trigger = 'onChange'
   } = options;
-  const propsRecord = props;
+  const p = props;
   const isControlled = hasProp(props, valuePropName);
-  const value = propsRecord[valuePropName];
+  const value = p[valuePropName];
   const [internalValue, setInternalValue] = (0, _react().useState)(() => {
-    if (isControlled) {
-      return value;
-    }
-    if (hasProp(props, defaultValuePropName)) {
-      return propsRecord[defaultValuePropName];
-    }
+    if (isControlled) return value;
+    if (hasProp(props, defaultValuePropName)) return p[defaultValuePropName];
     return defaultValue;
   });
-  const mergedValue = isControlled ? value : internalValue;
-  const handlerRef = (0, _react().useRef)(propsRecord[trigger]);
+  const handlerRef = (0, _react().useRef)(p[trigger]);
   (0, _react().useEffect)(() => {
-    handlerRef.current = propsRecord[trigger];
+    handlerRef.current = p[trigger];
   }, [props, trigger]);
-  const triggerChange = (0, _react().useCallback)((nextValue, ...args) => {
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    const handler = handlerRef.current;
-    if ((0, _validate.isFunction)(handler)) {
-      ;
-      handler(nextValue, ...args);
-    }
+  const triggerChange = (0, _react().useCallback)((next, ...args) => {
+    if (!isControlled) setInternalValue(next);
+    if ((0, _validate.isFunction)(handlerRef.current)) handlerRef.current(next, ...args);
   }, [isControlled]);
-  return [mergedValue, triggerChange];
+  return [isControlled ? value : internalValue, triggerChange];
 }
 var _default = exports.default = useControllableValue;

package/dist/cjs/hooks/useCountDown.js

@@ -13,19 +13,14 @@ function _react() {
 }
 var _validate = require("../utils/validate");
 const parseTime = time => {
-  const total = Math.max(time, 0);
-  const days = Math.floor(total / (24 * 60 * 60 * 1000));
-  const hours = Math.floor(total % (24 * 60 * 60 * 1000) / (60 * 60 * 1000));
-  const minutes = Math.floor(total % (60 * 60 * 1000) / (60 * 1000));
-  const seconds = Math.floor(total % (60 * 1000) / 1000);
-  const milliseconds = total % 1000;
+  const t = Math.max(time, 0);
   return {
-    total,
-    days,
-    hours,
-    minutes,
-    seconds,
-    milliseconds
+    total: t,
+    days: Math.floor(t / 86400000),
+    hours: Math.floor(t % 86400000 / 3600000),
+    minutes: Math.floor(t % 3600000 / 60000),
+    seconds: Math.floor(t % 60000 / 1000),
+    milliseconds: t % 1000
   };
 };
 exports.parseTime = parseTime;
@@ -37,11 +32,11 @@ const useCountDown = options => {
     onFinish
   } = options;
   const timeRef = (0, _react().useRef)(time);
-  const millisecondRef = (0, _react().useRef)(millisecond);
+  const msRef = (0, _react().useRef)(millisecond);
   const onChangeRef = (0, _react().useRef)(onChange);
   const onFinishRef = (0, _react().useRef)(onFinish);
   timeRef.current = time;
-  millisecondRef.current = millisecond;
+  msRef.current = millisecond;
   onChangeRef.current = onChange;
   onFinishRef.current = onFinish;
   const remainRef = (0, _react().useRef)(Math.max(0, time));
@@ -72,10 +67,7 @@ const useCountDown = options => {
     const remain = Math.max(endTimeRef.current - Date.now(), 0);
     update(remain);
     if (remain <= 0) return;
-    const delay = millisecondRef.current ? Math.max(1, Math.min(30, remain)) : Math.max(1, Math.min(remain, remain % 1000 + 1));
-    timerRef.current = setTimeout(() => {
-      tick();
-    }, delay);
+    timerRef.current = setTimeout(tick, msRef.current ? Math.max(1, Math.min(30, remain)) : Math.max(1, Math.min(remain, remain % 1000 + 1)));
   }, [clearTimer, update]);
   const start = (0, _react().useCallback)(() => {
     if (countingRef.current || remainRef.current <= 0) return;
@@ -91,10 +83,10 @@ const useCountDown = options => {
   }, [clearTimer]);
   const reset = (0, _react().useCallback)(newTime => {
     pause();
-    const next = Math.max(0, (0, _validate.isNumber)(newTime) ? newTime : timeRef.current);
-    remainRef.current = next;
-    endTimeRef.current = Date.now() + next;
-    setCurrent(parseTime(next));
+    const n = Math.max(0, (0, _validate.isNumber)(newTime) ? newTime : timeRef.current);
+    remainRef.current = n;
+    endTimeRef.current = Date.now() + n;
+    setCurrent(parseTime(n));
   }, [pause]);
   (0, _react().useEffect)(() => () => clearTimer(), [clearTimer]);
   return {

package/dist/cjs/hooks/useHairline.js

@@ -27,32 +27,20 @@ const useHairline = ({
   color,
   width,
   defaultPaddingHorizontal = 0
-}) => {
-  return (0, _react().useMemo)(() => {
-    if (!show) return null;
-    const flattened = _reactNative().StyleSheet.flatten(containerStyle);
-    const paddingHorizontal = (0, _validate.isNumber)(flattened?.paddingHorizontal) ? flattened.paddingHorizontal : undefined;
-    const resolveInset = (primary, secondary) => (0, _validate.isNumber)(primary) ? primary : (0, _validate.isNumber)(secondary) ? secondary : (0, _validate.isNumber)(paddingHorizontal) ? paddingHorizontal : defaultPaddingHorizontal;
-    const resolvedPadding = {
-      left: resolveInset(flattened?.paddingLeft, flattened?.paddingStart),
-      right: resolveInset(flattened?.paddingRight, flattened?.paddingEnd)
-    };
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [styles.hairline, (0, _hairline.createHairlineView)({
-        position: 'bottom',
-        color,
-        left: resolvedPadding.left,
-        right: resolvedPadding.right,
-        enabled: width > 0,
-        width
-      })]
-    });
-  }, [show, containerStyle, color, width, defaultPaddingHorizontal]);
-};
-exports.useHairline = useHairline;
-const styles = _reactNative().StyleSheet.create({
-  hairline: {
-    position: 'absolute',
-    bottom: 0
-  }
-});
+}) => (0, _react().useMemo)(() => {
+  if (!show) return null;
+  const f = _reactNative().StyleSheet.flatten(containerStyle);
+  const ph = (0, _validate.isNumber)(f?.paddingHorizontal) ? f.paddingHorizontal : undefined;
+  const r = (a, b) => (0, _validate.isNumber)(a) ? a : (0, _validate.isNumber)(b) ? b : (0, _validate.isNumber)(ph) ? ph : defaultPaddingHorizontal;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _hairline.createHairlineView)({
+      position: 'bottom',
+      color,
+      left: r(f?.paddingLeft, f?.paddingStart),
+      right: r(f?.paddingRight, f?.paddingEnd),
+      enabled: width > 0,
+      width
+    })
+  });
+}, [show, containerStyle, color, width, defaultPaddingHorizontal]);
+exports.useHairline = useHairline;

package/dist/cjs/hooks/useSafeAreaPadding.js

@@ -21,10 +21,7 @@ function _reactNativeSafeAreaContext() {
 function useSafeAreaPadding(min) {
   const insets = (0, _reactNativeSafeAreaContext().useSafeAreaInsets)();
   if (_reactNative().Platform.OS === 'web') {
-    const t = min?.top ?? 0,
-      b = min?.bottom ?? 0,
-      l = min?.left ?? 0,
-      r = min?.right ?? 0;
+    const [t, b, l, r] = [min?.top ?? 0, min?.bottom ?? 0, min?.left ?? 0, min?.right ?? 0];
     return {
       paddingTop: `max(env(safe-area-inset-top, 0px), ${t}px)`,
       paddingBottom: `max(env(safe-area-inset-bottom, 0px), ${b}px)`,