zkit-ui 2.0.4 → 2.0.6

package/ios/NativeImagePreview/NativeImagePreviewViewerTransitionCoordinator.swift

@@ -0,0 +1,312 @@
+import UIKit
+
+private final class NativeImagePreviewTransitionSnapshotView: UIView {
+    private let imageView = UIImageView()
+
+    init(image: UIImage) {
+        super.init(frame: .zero)
+        backgroundColor = .clear
+        clipsToBounds = true
+        isUserInteractionEnabled = false
+
+        imageView.image = image
+        imageView.backgroundColor = .clear
+        imageView.contentMode = .scaleToFill
+        addSubview(imageView)
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    func updateImage(_ image: UIImage) {
+        imageView.image = image
+    }
+
+    func applyContentFrame(_ frame: CGRect) {
+        imageView.frame = frame
+    }
+}
+
+final class NativeImagePreviewViewerTransitionCoordinator {
+    private weak var containerView: UIView?
+    private weak var hiddenAnchorView: UIView?
+    private weak var hiddenPageView: NativeImagePreviewViewerPageView?
+    private var activeSnapshotView: UIView?
+
+    init(containerView: UIView) {
+        self.containerView = containerView
+    }
+
+    static func aspectFitRect(for imageSize: CGSize, in bounds: CGRect) -> CGRect {
+        guard imageSize.width > 0, imageSize.height > 0 else { return bounds }
+
+        let widthRatio = bounds.width / imageSize.width
+        let heightRatio = bounds.height / imageSize.height
+        let scale = min(widthRatio, heightRatio)
+        let fittedSize = CGSize(
+            width: imageSize.width * scale,
+            height: imageSize.height * scale
+        )
+
+        return CGRect(
+            x: bounds.midX - fittedSize.width * 0.5,
+            y: bounds.midY - fittedSize.height * 0.5,
+            width: fittedSize.width,
+            height: fittedSize.height
+        )
+    }
+
+    func performOpenTransition(
+        from sourceView: UIImageView?,
+        to pageView: NativeImagePreviewViewerPageView?,
+        backgroundView: UIView,
+        contentView: UIView,
+        completion: @escaping () -> Void
+    ) {
+        guard let containerView = containerView else {
+            completion()
+            return
+        }
+
+        restoreHiddenViews()
+        activeSnapshotView?.removeFromSuperview()
+        activeSnapshotView = nil
+
+        backgroundView.alpha = 0
+        contentView.alpha = 0
+
+        flushLayoutForSharedElementSampling(of: sourceView)
+        guard let sourceView = sourceView, let sourceState = sourceView.nativeImagePreviewSharedElementState() else {
+            animateSimpleAppearance(
+                backgroundView: backgroundView,
+                contentView: contentView,
+                completion: completion
+            )
+            return
+        }
+
+        let snapshotView = makeSnapshot(from: sourceState)
+        apply(sourceState.geometry, to: snapshotView)
+        containerView.addSubview(snapshotView)
+        activeSnapshotView = snapshotView
+
+        hiddenAnchorView = sourceView
+        sourceView.alpha = 0
+        pageView?.setMediaHidden(true)
+        hiddenPageView = pageView
+
+        let animateIntoPage: (Bool) -> Void = { [weak self] isReady in
+            guard let self = self, let containerView = self.containerView else {
+                completion()
+                return
+            }
+
+            let windowBounds = containerView.window?.bounds ?? UIScreen.main.bounds
+            let targetGeometry: NativeImagePreviewSharedElementGeometry
+            if isReady, let pageState = pageView?.sharedElementState() {
+                targetGeometry = pageState.geometry
+            } else if let pageView = pageView {
+                targetGeometry = pageView.defaultTransitionGeometry(in: windowBounds)
+            } else {
+                targetGeometry = self.defaultGeometry(for: sourceState.image.size, in: windowBounds)
+            }
+
+            UIView.animate(
+                withDuration: 0.32,
+                delay: 0,
+                usingSpringWithDamping: 0.94,
+                initialSpringVelocity: 0.08,
+                options: [.curveEaseInOut, .allowUserInteraction]
+            ) {
+                backgroundView.alpha = 1
+                self.apply(targetGeometry, to: snapshotView)
+            } completion: { _ in
+                self.restoreHiddenViews()
+                contentView.alpha = 1
+                snapshotView.removeFromSuperview()
+                self.activeSnapshotView = nil
+                completion()
+            }
+        }
+
+        guard let pageView = pageView else {
+            animateIntoPage(false)
+            return
+        }
+
+        waitUntilReady(pageView: pageView, timeout: 0.42) { ready in
+            animateIntoPage(ready)
+        }
+    }
+
+    func performCloseTransition(
+        from pageView: NativeImagePreviewViewerPageView?,
+        to anchorView: UIImageView?,
+        backgroundView: UIView,
+        contentView: UIView,
+        completion: @escaping () -> Void
+    ) {
+        guard let containerView = containerView else {
+            completion()
+            return
+        }
+
+        restoreHiddenViews()
+        activeSnapshotView?.removeFromSuperview()
+        activeSnapshotView = nil
+
+        guard
+            let pageView,
+            let pageState = pageView.sharedElementState()
+        else {
+            animateSimpleDismissal(
+                backgroundView: backgroundView,
+                contentView: contentView,
+                completion: completion
+            )
+            return
+        }
+
+        let snapshotView = makeSnapshot(from: pageState)
+        apply(pageState.geometry, to: snapshotView)
+        containerView.addSubview(snapshotView)
+        activeSnapshotView = snapshotView
+
+        hiddenPageView = pageView
+        pageView.setMediaHidden(true)
+
+        var targetGeometry: NativeImagePreviewSharedElementGeometry?
+        flushLayoutForSharedElementSampling(of: anchorView)
+        if let anchorView = anchorView, let anchorState = anchorView.nativeImagePreviewSharedElementState() {
+            hiddenAnchorView = anchorView
+            anchorView.alpha = 0
+            targetGeometry = anchorState.geometry
+        }
+
+        UIView.animate(
+            withDuration: 0.24,
+            delay: 0,
+            options: [.curveEaseInOut, .allowUserInteraction]
+        ) {
+            backgroundView.alpha = 0
+            contentView.alpha = 0
+            if let targetGeometry = targetGeometry {
+                self.apply(targetGeometry, to: snapshotView)
+            } else {
+                snapshotView.alpha = 0
+                snapshotView.transform = CGAffineTransform(scaleX: 0.92, y: 0.92)
+            }
+        } completion: { [weak self] _ in
+            self?.restoreHiddenViews()
+            snapshotView.removeFromSuperview()
+            self?.activeSnapshotView = nil
+            completion()
+        }
+    }
+
+    private func animateSimpleAppearance(
+        backgroundView: UIView,
+        contentView: UIView,
+        completion: @escaping () -> Void
+    ) {
+        UIView.animate(
+            withDuration: 0.18,
+            delay: 0,
+            options: [.curveEaseOut, .allowUserInteraction]
+        ) {
+            backgroundView.alpha = 1
+            contentView.alpha = 1
+        } completion: { _ in
+            completion()
+        }
+    }
+
+    private func animateSimpleDismissal(
+        backgroundView: UIView,
+        contentView: UIView,
+        completion: @escaping () -> Void
+    ) {
+        UIView.animate(
+            withDuration: 0.18,
+            delay: 0,
+            options: [.curveEaseIn, .allowUserInteraction]
+        ) {
+            backgroundView.alpha = 0
+            contentView.alpha = 0
+        } completion: { _ in
+            completion()
+        }
+    }
+
+    private func waitUntilReady(
+        pageView: NativeImagePreviewViewerPageView,
+        timeout: TimeInterval,
+        completion: @escaping (Bool) -> Void
+    ) {
+        let deadline = CACurrentMediaTime() + timeout
+        var lastStableState: NativeImagePreviewSharedElementState?
+        var stableFrameCount = 0
+
+        func poll() {
+            pageView.layoutIfNeeded()
+            if let currentState = pageView.sharedElementState() {
+                if let lastStableState = lastStableState, lastStableState.approximatelyEquals(currentState) {
+                    stableFrameCount += 1
+                } else {
+                    lastStableState = currentState
+                    stableFrameCount = 1
+                }
+
+                if stableFrameCount >= 2 {
+                    completion(true)
+                    return
+                }
+            }
+            if CACurrentMediaTime() >= deadline {
+                completion(false)
+                return
+            }
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.016, execute: poll)
+        }
+
+        poll()
+    }
+
+    private func frameInContainer(fromWindowFrame windowFrame: CGRect) -> CGRect {
+        guard let containerView = containerView else { return windowFrame }
+        return containerView.convert(windowFrame, from: nil)
+    }
+
+    private func flushLayoutForSharedElementSampling(of imageView: UIImageView?) {
+        imageView?.superview?.layoutIfNeeded()
+        imageView?.layoutIfNeeded()
+        containerView?.layoutIfNeeded()
+    }
+
+    private func makeSnapshot(from state: NativeImagePreviewSharedElementState) -> NativeImagePreviewTransitionSnapshotView {
+        NativeImagePreviewTransitionSnapshotView(image: state.image)
+    }
+
+    private func apply(_ geometry: NativeImagePreviewSharedElementGeometry, to snapshotView: NativeImagePreviewTransitionSnapshotView) {
+        snapshotView.frame = frameInContainer(fromWindowFrame: geometry.visibleFrameInWindow)
+        snapshotView.applyContentFrame(geometry.contentFrameInVisibleBounds)
+        snapshotView.layer.cornerRadius = geometry.cornerRadius
+    }
+
+    private func defaultGeometry(for imageSize: CGSize, in windowBounds: CGRect) -> NativeImagePreviewSharedElementGeometry {
+        let visibleFrame = Self.aspectFitRect(for: imageSize, in: windowBounds)
+        return NativeImagePreviewSharedElementGeometry(
+            visibleFrameInWindow: visibleFrame,
+            contentFrameInVisibleBounds: CGRect(origin: .zero, size: visibleFrame.size),
+            cornerRadius: 0
+        )
+    }
+
+    private func restoreHiddenViews() {
+        hiddenAnchorView?.alpha = 1
+        hiddenAnchorView = nil
+        hiddenPageView?.setMediaHidden(false)
+        hiddenPageView = nil
+    }
+}

package/ios/NativeImagePreviewModule.swift

@@ -0,0 +1,46 @@
+import ExpoModulesCore
+
+public class NativeImagePreviewModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ZKitNativeImagePreview")
+
+    View(NativeImagePreviewView.self) {
+      Events("onIndexChange")
+
+      OnViewDidUpdateProps { (view) in
+        view.setupImageView()
+      }
+
+      Prop("urls") { (view, urls: [String]?) in
+        view.urls = urls
+      }
+
+      Prop("items") { (view, items: [[String: Any]]?) in
+        view.items = items
+      }
+
+      Prop("index") { (view, index: Int?) in
+        view.initialIndex = index
+      }
+
+      Prop("previewGroupId") { (view, previewGroupId: String?) in
+        view.previewGroupId = previewGroupId
+      }
+
+      Prop("theme") { (view, theme: Theme?) in
+        view.theme = theme ?? .dark
+      }
+      Prop("closeIconName") { (view, closeIconName: String?) in
+        view.closeIconName = closeIconName
+      }
+      Prop("rightNavItemIconName") { (view, rightNavItemIconName: String) in
+        view.rightNavItemIconName = rightNavItemIconName
+      }
+
+    }
+  }
+
+  func onIndexChange(index: Int) {
+    sendEvent("onIndexChange", ["currentIndex": index])
+  }
+}

package/ios/NativeImagePreviewView.swift

@@ -0,0 +1,252 @@
+import ExpoModulesCore
+import UIKit
+
+class NativeImagePreviewView: ExpoView {
+  private var childImageView: UIImageView?
+  private weak var registeredAnchorImageView: UIImageView?
+  private var registeredPreviewGroupId: String?
+  private var registeredIndex: Int?
+
+  deinit {
+    unregisterCurrentAnchor()
+  }
+
+  override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil {
+      unregisterCurrentAnchor()
+    } else {
+      registerCurrentAnchorIfNeeded()
+    }
+  }
+
+  func getChildImageView() -> UIImageView? {
+    var reactSubviews: [UIView]? = nil
+    if RCTIsNewArchEnabled() {
+      reactSubviews = self.subviews
+    } else {
+      reactSubviews = self.reactSubviews()
+    }
+
+    guard let reactSubviews = reactSubviews else { return nil }
+
+    for reactSubview in reactSubviews {
+      if let iv = findImageView(in: reactSubview) {
+        childImageView = iv
+        return iv
+      }
+    }
+
+    return nil
+  }
+
+  private func findImageView(in view: UIView) -> UIImageView? {
+    if let imageView = view as? UIImageView { return imageView }
+    for subview in view.subviews {
+      if let imageView = subview as? UIImageView { return imageView }
+      if let nested = findImageView(in: subview) { return nested }
+    }
+    return nil
+  }
+
+  #if !RCT_NEW_ARCH_ENABLED
+    override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+      super.insertReactSubview(subview, at: atIndex)
+      setupImageView()
+    }
+  #endif
+
+  #if RCT_NEW_ARCH_ENABLED
+    // Cleanup gesture recognizers from the image view to work with Fabric view recycling.
+    override func unmountChildComponentView(_ childComponentView: UIView, index: Int) {
+      unregisterCurrentAnchor()
+      childImageView?.removeNativeImagePreviewViewerInteraction()
+      childImageView = nil
+      super.unmountChildComponentView(childComponentView, index: index)
+    }
+  #endif
+
+  var theme: Theme = .dark
+  var urls: [String]?
+  var items: [[String: Any]]?
+  var initialIndex: Int?
+  var previewGroupId: String?
+  var closeIconName: String?
+  var rightNavItemIconName: String?
+  let onPressRightNavItemIcon = EventDispatcher()
+  let onIndexChange = EventDispatcher()
+
+  public func setupImageView() {
+    registerCurrentAnchorIfNeeded()
+    guard let childImage = getChildImageView() else {
+      return
+    }
+
+    if let items = self.items, let initialIndex = self.initialIndex {
+      setupViewerWithItems(childImage, items: items, initialIndex: initialIndex)
+    } else if let urls = self.urls, let initialIndex = self.initialIndex {
+      setupViewerWithUrls(childImage, urls: urls, initialIndex: initialIndex)
+    } else {
+      setupViewerWithSingleImage(childImage)
+    }
+  }
+
+  private func setupViewerWithItems(
+    _ childImage: UIImageView,
+    items: [[String: Any]],
+    initialIndex: Int
+  ) {
+    let configuration = buildViewerConfiguration()
+
+    let imageItems: [NativeImagePreviewMediaItem] = items.compactMap { item in
+        guard let type = item["type"] as? String else { return nil }
+
+        if type == "video", let urlStr = item["url"] as? String, let url = URL(string: urlStr) {
+            var posterUrl: URL? = nil
+            if let posterStr = item["poster"] as? String {
+                posterUrl = URL(string: posterStr)
+            }
+            return NativeImagePreviewMediaItem.video(url: url, poster: posterUrl)
+        } else if type == "image", let urlStr = item["url"] as? String {
+             if urlStr.hasPrefix("http://") || urlStr.hasPrefix("https://") || urlStr.hasPrefix("file://") {
+                if let url = URL(string: urlStr) {
+                    return NativeImagePreviewMediaItem.imageURL(url, placeholder: nil)
+                }
+             } else {
+                return NativeImagePreviewMediaItem.imageURL(URL(fileURLWithPath: urlStr), placeholder: nil)
+             }
+        }
+        return nil
+    }
+
+    let datasource = NativeImagePreviewArrayDataSource(items: imageItems)
+    childImage.setupNativeImagePreviewViewer(
+      dataSource: datasource,
+      initialIndex: initialIndex,
+      configuration: configuration,
+      previewGroupId: previewGroupId)
+  }
+
+
+  private func setupViewerWithUrls(
+    _ childImage: UIImageView,
+    urls: [String],
+    initialIndex: Int
+  ) {
+    let configuration = buildViewerConfiguration()
+
+    let urlObjects: [URL] = urls.compactMap { string in
+      if string.hasPrefix("http://") || string.hasPrefix("https://") || string.hasPrefix("file://") {
+        return URL(string: string)
+      }
+      return URL(fileURLWithPath: string)
+    }
+
+    childImage.setupNativeImagePreviewViewer(
+      urls: urlObjects,
+      initialIndex: initialIndex,
+      configuration: configuration,
+      previewGroupId: previewGroupId)
+  }
+
+  private func setupViewerWithSingleImage(_ childImage: UIImageView) {
+    guard let img = childImage.image else {
+      print("Missing image in childImage: \(childImage)")
+      return
+    }
+    let configuration = buildViewerConfiguration()
+
+    childImage.setupNativeImagePreviewViewer(images: [img], configuration: configuration, previewGroupId: previewGroupId)
+  }
+
+  private func buildViewerConfiguration() -> NativeImagePreviewViewerConfiguration {
+    var configuration = NativeImagePreviewViewerConfiguration(theme: theme.toViewerTheme())
+    let iconColor = theme.iconColor()
+
+    if let closeIconName = closeIconName,
+      let closeIconImage = UIImage(systemName: closeIconName)?.withTintColor(
+        iconColor, renderingMode: .alwaysOriginal)
+    {
+      configuration.closeIcon = closeIconImage
+    }
+
+    if let rightIconName = rightNavItemIconName,
+      let rightIconImage = UIImage(systemName: rightIconName)?.withTintColor(
+        iconColor, renderingMode: .alwaysOriginal)
+    {
+      configuration.rightBarButton = .icon(
+        rightIconImage,
+        onTap: { index in
+          self.onPressRightNavItemIcon(["index": index])
+        })
+    }
+
+    configuration.onIndexChange = { [weak self] index in
+      self?.onIndexChange(["currentIndex": index])
+    }
+    return configuration
+  }
+
+  private func registerCurrentAnchorIfNeeded() {
+    guard
+      window != nil,
+      let previewGroupId,
+      let initialIndex,
+      let childImage = getChildImageView()
+    else {
+      unregisterCurrentAnchor()
+      return
+    }
+
+    if
+      let registeredAnchorImageView,
+      (registeredAnchorImageView !== childImage
+        || registeredPreviewGroupId != previewGroupId
+        || registeredIndex != initialIndex)
+    {
+      unregisterCurrentAnchor()
+    }
+
+    NativeImagePreviewSourceViewRegistry.shared.register(
+      childImage,
+      previewGroupId: previewGroupId,
+      index: initialIndex)
+    registeredAnchorImageView = childImage
+    registeredPreviewGroupId = previewGroupId
+    registeredIndex = initialIndex
+  }
+
+  private func unregisterCurrentAnchor() {
+    if let registeredAnchorImageView = registeredAnchorImageView {
+      NativeImagePreviewSourceViewRegistry.shared.unregister(
+        registeredAnchorImageView,
+        previewGroupId: registeredPreviewGroupId,
+        index: registeredIndex)
+    }
+    registeredAnchorImageView = nil
+    registeredPreviewGroupId = nil
+    registeredIndex = nil
+  }
+}
+
+enum Theme: String, Enumerable {
+  case dark
+  case light
+
+  func toViewerTheme() -> NativeImagePreviewViewerTheme {
+    switch self {
+    case .dark:
+      return .dark
+    case .light:
+      return .light
+    }
+  }
+  func iconColor() -> UIColor {
+    switch self {
+    case .dark:
+      return .white
+    case .light:
+      return .black
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkit-ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -87,6 +87,11 @@
       "react-native": "./dist/ui/LinkedScroll/index.js",
       "default": "./dist/ui/LinkedScroll/index.js"
     },
+    "./native-image-preview": {
+      "types": "./dist/ui/NativeImagePreview/index.d.ts",
+      "react-native": "./dist/ui/NativeImagePreview/index.js",
+      "default": "./dist/ui/NativeImagePreview/index.js"
+    },
     "./loading-spinner": {
       "types": "./dist/ui/LoadingSpinner/index.d.ts",
       "react-native": "./dist/ui/LoadingSpinner/index.js",
@@ -165,7 +170,10 @@
     "./assets/*": "./dist/assets/*",
     "./package.json": "./package.json"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Concur-max/zkit.git",
@@ -176,7 +184,10 @@
     "url": "https://github.com/Concur-max/zkit/issues"
   },
   "files": [
+    "android/build.gradle",
+    "android/src",
     "dist",
+    "expo-module.config.json",
     "src",
     "ios",
     "react-native.config.js",
@@ -197,6 +208,7 @@
   "dependencies": {
     "@vant/area-data": "^2.1.0",
     "dayjs": "^1.11.13",
+    "react-native-is-edge-to-edge": "^1.1.6",
     "react-native-toast-message": "^2.3.3",
     "zkit-tools": "1.0.1"
   },
@@ -204,6 +216,7 @@
     "@expo/vector-icons": "*",
     "@lodev09/react-native-true-sheet": "*",
     "@shopify/flash-list": "*",
+    "expo": "*",
     "expo-image": "*",
     "expo-linear-gradient": "*",
     "lottie-react-native": "*",
@@ -222,6 +235,7 @@
     "@shopify/flash-list": "^2.3.1",
     "@types/react": "~19.1.17",
     "dayjs": "^1.11.13",
+    "expo": "~54.0.31",
     "expo-image": "~3.0.11",
     "expo-linear-gradient": "~15.0.8",
     "lottie-react-native": "7.3.2",

package/src/all.ts

@@ -238,6 +238,24 @@ export type {
   LinkedScrollSectionRenderContext,
   LinkedScrollValue,
 } from './ui/LinkedScroll/index';
+export { NativeImagePreview } from './ui/NativeImagePreview/index';
+export type {
+  NativeImagePreviewChangeEvent,
+  NativeImagePreviewChangeEventPayload,
+  NativeImagePreviewChangeMeta,
+  NativeImagePreviewChangeReason,
+  NativeImagePreviewColorScheme,
+  NativeImagePreviewComponent,
+  NativeImagePreviewItem,
+  NativeImagePreviewItemDescriptor,
+  NativeImagePreviewItemProps,
+  NativeImagePreviewMediaType,
+  NativeImagePreviewNativeProps,
+  NativeImagePreviewProps,
+  NativeImagePreviewResolvedItem,
+  NativeImagePreviewResolvedColorScheme,
+  NativeImagePreviewSource,
+} from './ui/NativeImagePreview/index';
 export { ThemeProvider } from './theme/ThemeProvider';
 export { useTheme } from './theme/useTheme';
 export type { Theme, ThemeOverride } from './theme/types';