react-native-system-ui 0.0.1 → 0.0.3

package/dist/cjs/components/image/Image.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -25,16 +25,22 @@ function _reactNativeSvg() {
   };
   return data;
 }
-var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const FIT_MODE_MAP = {
-  fill: 'stretch',
-  'scale-down': 'contain',
-  none: 'center'
+const resolveFitMode = fit => {
+  switch (fit) {
+    case 'fill':
+      return 'stretch';
+    case 'scale-down':
+      return 'contain';
+    case 'none':
+      return 'center';
+    default:
+      return fit;
+  }
 };
-const resolveFitMode = fit => FIT_MODE_MAP[fit] || (fit ?? 'cover');
 const LAYOUT_STYLE_KEYS = new Set(['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'alignSelf', 'aspectRatio', 'position', 'top', 'right', 'bottom', 'left', 'start', 'end', 'opacity', 'borderRadius']);
 const isLayoutStyleKey = key => LAYOUT_STYLE_KEYS.has(key) || key === 'backgroundColor' || key.startsWith('margin') || key.startsWith('padding') || key.startsWith('border') || key.endsWith('Radius');
 const splitImageStyle = style => {
@@ -42,18 +48,19 @@ const splitImageStyle = style => {
     container: undefined,
     image: undefined
   };
-  const flattened = _reactNative().StyleSheet.flatten(style);
+  const flattened = _reactNative().StyleSheet.flatten(style) ?? {};
+  const flattenedRecord = flattened;
   const container = {};
   const image = {};
-  Object.keys(flattened).forEach(key => {
-    const value = flattened[key];
-    if (value === undefined) return;
+  for (const key of Object.keys(flattenedRecord)) {
+    const value = flattenedRecord[key];
+    if (value === undefined) continue;
     if (isLayoutStyleKey(key)) {
       container[key] = value;
     } else {
       image[key] = value;
     }
-  });
+  }
   return {
     container: Object.keys(container).length ? container : undefined,
     image: Object.keys(image).length ? image : undefined
@@ -68,6 +75,22 @@ const PRESERVE_ASPECT_RATIO_MAP = {
   center: 'xMidYMid meet'
 };
 const resolvePreserveAspectRatio = fit => PRESERVE_ASPECT_RATIO_MAP[fit] || 'xMidYMid slice';
+const resolveSourceUri = source => {
+  if (!source) return undefined;
+  if (typeof source === 'number') return undefined;
+  if (Array.isArray(source)) {
+    for (const item of source) {
+      if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') {
+        return item.uri;
+      }
+    }
+    return undefined;
+  }
+  if (typeof source === 'object' && 'uri' in source && typeof source.uri === 'string') {
+    return source.uri;
+  }
+  return undefined;
+};
 const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const {
     src,
@@ -88,6 +111,8 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     fallback,
     onPress,
     alt,
+    accessibilityLabel,
+    ['aria-label']: ariaLabel,
     containerStyle,
     style,
     children,
@@ -105,57 +130,59 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const {
     container: containerLayoutStyle,
     image: imageStyleWithoutLayout
-  } = _react().default.useMemo(() => splitImageStyle(style), [style]);
-  const resolvedAccessibilityLabel = alt ?? rest.accessibilityLabel ?? rest['aria-label'];
-  const actualSource = _react().default.useMemo(() => {
+  } = (0, _react().useMemo)(() => splitImageStyle(style), [style]);
+  const actualSource = (0, _react().useMemo)(() => {
     if (source) return source;
     if (src) return {
       uri: src
     };
     return undefined;
   }, [source, src]);
-  const [status, setStatus] = _react().default.useState(() => actualSource ? 'loading' : 'idle');
-  _react().default.useEffect(() => {
+  const resolvedAccessibilityLabel = alt ?? accessibilityLabel ?? ariaLabel;
+  const [status, setStatus] = (0, _react().useState)(() => actualSource ? 'loading' : 'idle');
+  (0, _react().useEffect)(() => {
     setStatus(actualSource ? 'loading' : 'idle');
   }, [actualSource]);
-  const handleLoad = _react().default.useCallback(event => {
+  const handleLoad = (0, _react().useCallback)(event => {
     setStatus('loaded');
     onLoad?.(event);
   }, [onLoad]);
-  const handleError = _react().default.useCallback(event => {
+  const handleError = (0, _react().useCallback)(event => {
     setStatus('error');
     onError?.(event);
   }, [onError]);
-  const handleSvgLoad = _react().default.useCallback(() => {
+  const handleSvgLoad = (0, _react().useCallback)(() => {
     handleLoad({
       nativeEvent: {}
     });
   }, [handleLoad]);
-  const handleSvgError = _react().default.useCallback(error => {
+  const handleSvgError = (0, _react().useCallback)(error => {
     handleError({
       nativeEvent: {
         error
       }
     });
   }, [handleError]);
-  const uri = actualSource?.uri;
-  const isSvg = _react().default.useMemo(() => {
-    const normalizedUri = (0, _validate.isString)(uri) ? uri.toLowerCase() : undefined;
-    return (0, _validate.isString)(normalizedUri) && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
+  const uri = resolveSourceUri(actualSource);
+  const isSvg = (0, _react().useMemo)(() => {
+    const normalizedUri = (0, _utils.isString)(uri) ? uri.toLowerCase() : undefined;
+    return (0, _utils.isString)(normalizedUri) && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
   }, [uri]);
-  const resolvedLoadingSize = (0, _validate.isNumber)(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
+  const resolvedLoadingSize = (0, _utils.isNumber)(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
   const resolvedErrorIconSize = iconSizeProp ?? tokens.defaults.iconSize;
-  const Container = onPress ? _reactNative().Pressable : _reactNative().View;
   const containerRole = onPress ? 'button' : undefined;
+  const pressableProps = onPress ? {
+    onPress
+  } : null;
   const renderLabel = (node, color, marginTop) => {
     if (node == null || node === false) return null;
-    if ((0, _validate.isText)(node)) {
+    if ((0, _utils.isText)(node)) {
       return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
         style: [tokens.layout.label, {
           color
         }, marginTop ? {
           marginTop
-        } : null]
+        } : undefined]
       }, node);
     }
     return marginTop ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -164,38 +191,23 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       }
     }, node) : node;
   };
-  return /*#__PURE__*/_react().default.createElement(Container, {
-    onPress: onPress,
-    accessibilityRole: containerRole,
-    accessibilityLabel: alt,
-    style: [tokens.layout.container, {
-      width,
-      height,
-      backgroundColor: tokens.colors.background
-    }, round ? {
-      borderRadius: tokens.defaults.roundRadius
-    } : (0, _validate.isNumber)(radius) ? {
-      borderRadius: radius
-    } : undefined, containerStyle, containerLayoutStyle]
-  }, status === 'loading' && showLoading ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.overlay,
-    pointerEvents: "none",
-    testID: "rv-image-loading"
-  }, loadingIcon || /*#__PURE__*/_react().default.createElement(_reactNative().ActivityIndicator, {
-    color: tokens.colors.text,
-    size: (0, _validate.isString)(loadingSize) ? loadingSize : 'small',
-    style: {
-      transform: [{
-        scale: resolvedLoadingSize / tokens.defaults.loadingIndicatorBaseSize
-      }]
-    }
-  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)) : null, actualSource ? isSvg && _reactNative().Platform.OS !== 'web' ? /*#__PURE__*/_react().default.createElement(_reactNativeSvg().SvgUri, _extends({
+  const containerStyles = [tokens.layout.container, {
+    width: width,
+    height: height,
+    backgroundColor: tokens.colors.background
+  }, round ? {
+    borderRadius: tokens.defaults.roundRadius
+  } : (0, _utils.isNumber)(radius) ? {
+    borderRadius: radius
+  } : undefined, containerStyle, containerLayoutStyle];
+  const imageAccessibilityLabel = !onPress ? resolvedAccessibilityLabel : undefined;
+  const imageNode = actualSource ? isSvg && _reactNative().Platform.OS !== 'web' && uri ? /*#__PURE__*/_react().default.createElement(_reactNativeSvg().SvgUri, _extends({
     width: "100%",
     height: "100%",
-    uri: actualSource.uri,
+    uri: uri,
     preserveAspectRatio: resolvePreserveAspectRatio(fit),
     accessible: !onPress,
-    accessibilityLabel: !onPress ? alt : undefined
+    accessibilityLabel: imageAccessibilityLabel
   }, rest, {
     style: [tokens.layout.absoluteFill, imageStyleWithoutLayout],
     onLoad: handleSvgLoad,
@@ -203,14 +215,27 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   })) : /*#__PURE__*/_react().default.createElement(_reactNative().Image, _extends({
     ref: ref,
     accessible: !onPress,
-    accessibilityLabel: !onPress ? alt : undefined
+    accessibilityLabel: imageAccessibilityLabel
   }, rest, {
     source: actualSource,
     style: [tokens.layout.absoluteFill, imageStyleWithoutLayout],
     resizeMode: resolveFitMode(fit),
     onLoad: handleLoad,
     onError: handleError
-  })) : null, status === 'error' && showError ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  })) : null;
+  const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, status === 'loading' && showLoading ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.overlay,
+    pointerEvents: "none",
+    testID: "rv-image-loading"
+  }, loadingIcon || /*#__PURE__*/_react().default.createElement(_reactNative().ActivityIndicator, {
+    color: tokens.colors.text,
+    size: (0, _utils.isString)(loadingSize) ? loadingSize : 'small',
+    style: {
+      transform: [{
+        scale: resolvedLoadingSize / tokens.defaults.loadingIndicatorBaseSize
+      }]
+    }
+  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)) : null, imageNode, status === 'error' && showError ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.overlay,
     pointerEvents: "none",
     testID: "rv-image-error"
@@ -220,6 +245,14 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       height: resolvedErrorIconSize
     }]
   }, errorIcon) : null, fallback !== undefined && fallback !== null && fallback !== false ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)) : null, children);
+  return pressableProps ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, pressableProps, {
+    accessibilityRole: containerRole,
+    accessibilityLabel: resolvedAccessibilityLabel,
+    style: containerStyles
+  }), content) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    accessibilityLabel: resolvedAccessibilityLabel,
+    style: containerStyles
+  }, content);
 });
 Image.displayName = 'Image';
 var _default = exports.default = Image;

package/dist/cjs/components/image-preview/ImagePreview.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -23,6 +23,7 @@ var _swiper = _interopRequireDefault(require("../swiper"));
 var _tokens = require("./tokens");
 var _validate = require("../../utils/validate");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const clampIndex = (index, total) => total <= 0 ? 0 : Math.max(0, Math.min(total - 1, index));
 const IS_WEB = _reactNative().Platform.OS === 'web';
@@ -66,6 +67,8 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     closeOnPopstate,
     zIndex,
     duration,
+    safeAreaInsetTop = true,
+    safeAreaInsetBottom = true,
     onChange,
     onClose,
     onClosed,
@@ -74,13 +77,14 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const {
     colors
   } = (0, _tokens.useImagePreviewTokens)(tokensOverride);
-  const swiperRef = _react().default.useRef(null);
-  const popupCloseReason = _react().default.useRef('close');
-  const tapStartRef = _react().default.useRef(null);
-  const tapMovedRef = _react().default.useRef(false);
-  const [active, setActive] = _react().default.useState(() => clampIndex(startPosition, images.length));
-  const safeActive = clampIndex(active, images.length);
-  const latestRef = _react().default.useRef({
+  const swiperRef = (0, _react().useRef)(null);
+  const popupCloseReason = (0, _react().useRef)('close');
+  const tapStartRef = (0, _react().useRef)(null);
+  const tapMovedRef = (0, _react().useRef)(false);
+  const imagesLen = images.length;
+  const [active, setActive] = (0, _react().useState)(() => clampIndex(startPosition, imagesLen));
+  const safeActive = clampIndex(active, imagesLen);
+  const latestRef = (0, _react().useRef)({
     images,
     index: safeActive,
     beforeClose,
@@ -92,15 +96,15 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     beforeClose,
     onClose
   };
-  const resolvedImages = _react().default.useMemo(() => images.map(img => (0, _validate.isString)(img) ? {
+  const resolvedImages = (0, _react().useMemo)(() => images.map(img => (0, _validate.isString)(img) ? {
     uri: img
   } : img), [images]);
-  _react().default.useEffect(() => {
-    setActive(current => clampIndex(current, images.length));
-  }, [images.length]);
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
+    setActive(current => clampIndex(current, imagesLen));
+  }, [imagesLen]);
+  (0, _react().useEffect)(() => {
     if (!visible) return;
-    const next = clampIndex(startPosition, images.length);
+    const next = clampIndex(startPosition, imagesLen);
     setActive(next);
     if (typeof requestAnimationFrame !== 'undefined') {
       const raf = requestAnimationFrame(() => {
@@ -108,8 +112,8 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       });
       return () => cancelAnimationFrame(raf);
     }
-  }, [images.length, startPosition, visible]);
-  const runBeforeClose = _react().default.useCallback(async reason => {
+  }, [imagesLen, startPosition, visible]);
+  const runBeforeClose = (0, _react().useCallback)(async reason => {
     const {
       beforeClose: currentBeforeClose,
       images: currentImages,
@@ -123,7 +127,7 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     });
     return result !== false;
   }, []);
-  const emitClose = _react().default.useCallback(async (reason, bypassCheck = false) => {
+  const emitClose = (0, _react().useCallback)(async (reason, bypassCheck = false) => {
     const {
       onClose: currentOnClose,
       images: currentImages,
@@ -138,42 +142,42 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       image: currentImages[index]
     });
   }, [runBeforeClose]);
-  const handlePopupBeforeClose = _react().default.useCallback(async reason => {
+  const handlePopupBeforeClose = (0, _react().useCallback)(async reason => {
     const mapped = reason === 'close-icon' ? 'close-icon' : reason === 'overlay' ? 'overlay' : 'close';
     popupCloseReason.current = mapped;
     return runBeforeClose(mapped);
   }, [runBeforeClose]);
-  const handlePopupClose = _react().default.useCallback(() => {
+  const handlePopupClose = (0, _react().useCallback)(() => {
     void emitClose(popupCloseReason.current, true);
   }, [emitClose]);
-  _react().default.useImperativeHandle(ref, () => ({
+  (0, _react().useImperativeHandle)(ref, () => ({
     swipeTo: (index, animated = true) => {
-      const next = clampIndex(index, images.length);
+      const next = clampIndex(index, imagesLen);
       setActive(next);
       swiperRef.current?.swipeTo(next, animated);
     }
-  }));
-  const handleSwiperChange = idx => {
+  }), [imagesLen]);
+  const handleSwiperChange = (0, _react().useCallback)(idx => {
     if (safeActive === idx) return;
     setActive(idx);
     onChange?.(idx);
-  };
-  const handleImagePress = () => {
+  }, [onChange, safeActive]);
+  const handleImagePress = (0, _react().useCallback)(() => {
     if (closeOnlyClickCloseIcon) return;
     void emitClose('content');
-  };
-  const resetTap = _react().default.useCallback(() => {
+  }, [closeOnlyClickCloseIcon, emitClose]);
+  const resetTap = (0, _react().useCallback)(() => {
     tapStartRef.current = null;
     tapMovedRef.current = false;
   }, []);
-  const markTapStart = _react().default.useCallback((x, y) => {
+  const markTapStart = (0, _react().useCallback)((x, y) => {
     tapStartRef.current = {
       x,
       y
     };
     tapMovedRef.current = false;
   }, []);
-  const markTapMove = _react().default.useCallback((x, y) => {
+  const markTapMove = (0, _react().useCallback)((x, y) => {
     const start = tapStartRef.current;
     if (!start) return;
     const dx = x - start.x;
@@ -182,7 +186,7 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       tapMovedRef.current = true;
     }
   }, []);
-  const tryTapEnd = _react().default.useCallback((x, y) => {
+  const tryTapEnd = (0, _react().useCallback)((x, y) => {
     const start = tapStartRef.current;
     const moved = tapMovedRef.current;
     resetTap();
@@ -192,66 +196,68 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     if (dx * dx + dy * dy >= TAP_MOVE_THRESHOLD_SQ) return;
     handleImagePress();
   }, [handleImagePress, resetTap]);
-  const pressableHandlers = _react().default.useMemo(() => {
+  const pressableHandlers = (0, _react().useMemo)(() => {
     const handlers = {
       onTouchStart: e => {
-        const ne = e?.nativeEvent;
-        if (ne?.pageX != null && ne?.pageY != null) markTapStart(ne.pageX, ne.pageY);
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        if (pageX != null && pageY != null) markTapStart(pageX, pageY);
       },
       onTouchMove: e => {
-        const ne = e?.nativeEvent;
-        if (ne?.pageX != null && ne?.pageY != null) markTapMove(ne.pageX, ne.pageY);
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        if (pageX != null && pageY != null) markTapMove(pageX, pageY);
       },
       onTouchEnd: e => {
-        const ne = e?.nativeEvent;
-        if (ne?.pageX != null && ne?.pageY != null) tryTapEnd(ne.pageX, ne.pageY);
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        if (pageX != null && pageY != null) tryTapEnd(pageX, pageY);
       },
       onTouchCancel: resetTap
     };
     if (IS_WEB) {
       handlers.onMouseDown = e => {
-        const ne = e?.nativeEvent;
+        const ne = e.nativeEvent;
         if (ne?.pageX != null && ne?.pageY != null) markTapStart(ne.pageX, ne.pageY);
       };
       handlers.onMouseMove = e => {
-        const ne = e?.nativeEvent;
+        const ne = e.nativeEvent;
         if (ne?.buttons !== 1) return;
         if (ne?.pageX != null && ne?.pageY != null) markTapMove(ne.pageX, ne.pageY);
       };
       handlers.onMouseUp = e => {
-        const ne = e?.nativeEvent;
+        const ne = e.nativeEvent;
         if (ne?.pageX != null && ne?.pageY != null) tryTapEnd(ne.pageX, ne.pageY);
       };
     }
     return handlers;
   }, [markTapMove, markTapStart, resetTap, tryTapEnd]);
-  const indexNode = showIndex && images.length ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.index,
-    testID: "rv-image-preview-index"
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.indexBadge, {
-      backgroundColor: colors.indexBackground
-    }]
-  }, indexRender ? indexRender({
-    index: safeActive,
-    len: images.length
-  }) : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.indexText, {
-      color: colors.indexText
-    }]
-  }, `${safeActive + 1} / ${images.length}`))) : null;
+  const renderIndex = (0, _react().useCallback)((current, total) => {
+    if (!showIndex || total === 0) return null;
+    const indexText = `${current + 1} / ${total}`;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: styles.index,
+      testID: "rv-image-preview-index"
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [styles.indexBadge, {
+        backgroundColor: colors.indexBackground
+      }]
+    }, indexRender ? indexRender({
+      index: current,
+      len: total
+    }) : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [styles.indexText, {
+        color: colors.indexText
+      }]
+    }, indexText)));
+  }, [colors.indexBackground, colors.indexText, indexRender, showIndex]);
   const lazyBuffer = lazyRender ? Math.max(0, lazyRenderBuffer | 0) : 0;
-  const indicatorsNode = showIndicators && images.length > 1 ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    testID: "rv-image-preview-indicators"
-  }, /*#__PURE__*/_react().default.createElement(_swiper.default.PagIndicator, {
-    total: images.length,
-    current: safeActive,
-    activeColor: colors.indicatorActive,
-    inactiveColor: colors.indicatorInactive,
-    style: {
-      bottom: 32
-    }
-  })) : null;
   return /*#__PURE__*/_react().default.createElement(_popup.default, {
     visible: visible,
     overlay: overlay,
@@ -266,6 +272,8 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     closeIconPosition: closeIconPosition,
     stopPropagation: false,
     round: false,
+    safeAreaInsetTop: safeAreaInsetTop,
+    safeAreaInsetBottom: safeAreaInsetBottom,
     overlayTestID: "rv-image-preview-overlay",
     style: styles.popup,
     beforeClose: handlePopupBeforeClose,
@@ -275,18 +283,27 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     style: [styles.content, {
       backgroundColor: colors.background
     }]
-  }, indexNode, images.length === 0 ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, imagesLen === 1 ? renderIndex(0, 1) : null, imagesLen === 0 ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: styles.empty,
     testID: "rv-image-preview-empty"
   }) : /*#__PURE__*/_react().default.createElement(_swiper.default, {
     ref: swiperRef,
     style: styles.swiper,
-    initialSwipe: clampIndex(startPosition, images.length),
+    initialSwipe: clampIndex(startPosition, imagesLen),
     loop: false,
     autoplay: false,
     duration: swipeDuration,
-    touchable: images.length > 1,
-    indicator: false,
+    touchable: imagesLen > 1,
+    indicator: (total, current) => /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, renderIndex(current, total), showIndicators && total > 1 && /*#__PURE__*/_react().default.createElement(_swiper.default.PagIndicator, {
+      total: total,
+      current: current,
+      activeColor: colors.indicatorActive,
+      inactiveColor: colors.indicatorInactive,
+      style: {
+        bottom: 32
+      },
+      testID: "rv-image-preview-indicators"
+    })),
     onChange: handleSwiperChange,
     testID: "rv-image-preview-swiper"
   }, resolvedImages.map((source, idx) => /*#__PURE__*/_react().default.createElement(_swiper.default.Item, {
@@ -297,7 +314,7 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     source: source,
     rendered: !lazyRender || Math.abs(idx - safeActive) <= lazyBuffer,
     pressableHandlers: pressableHandlers
-  })))), indicatorsNode));
+  }))))));
 });
 ImagePreview.displayName = 'ImagePreview';
 var _default = exports.default = ImagePreview;
@@ -305,8 +322,15 @@ const styles = _reactNative().StyleSheet.create({
   popup: {
     padding: 0,
     borderRadius: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     width: '100%',
     height: '100%',
+    maxWidth: '100%',
+    maxHeight: '100%',
     backgroundColor: 'transparent'
   },
   content: {

package/dist/cjs/components/image-preview/imperative.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImagePreviewImperative = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -14,6 +14,7 @@ function _react() {
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
 var _ImagePreview = _interopRequireDefault(require("./ImagePreview"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const activeKeys = new Set();
 const closers = new Map();
@@ -34,11 +35,11 @@ const ImagePreviewPortal = ({
   id,
   options
 }) => {
-  const [visible, setVisible] = _react().default.useState(true);
-  const close = _react().default.useCallback(() => {
+  const [visible, setVisible] = (0, _react().useState)(true);
+  const close = (0, _react().useCallback)(() => {
     setVisible(false);
   }, []);
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
     closers.set(id, close);
     return () => {
       const current = closers.get(id);
@@ -47,11 +48,11 @@ const ImagePreviewPortal = ({
       }
     };
   }, [close, id]);
-  const handleClose = _react().default.useCallback(params => {
+  const handleClose = (0, _react().useCallback)(params => {
     options.onClose?.(params);
     setVisible(false);
   }, [options]);
-  const handleClosed = _react().default.useCallback(() => {
+  const handleClosed = (0, _react().useCallback)(() => {
     options.onClosed?.();
     removeInstance(id);
   }, [id, options]);