LNPopupUI

You can opt-in to image transitions by applying the .popupTransitionTarget() modifier to a single Image view within your popup content. The system uses this image as the source/target for the transition.

Requirements & Limitations:

• There must be exactly one .popupTransitionTarget() call in the content view.
• Transitions are only available when using the drag interaction style.
• Supported modifiers on the target image: .clipShape() (basic shapes) and a single .shadow().
• Caution: Complex clip shapes or multiple shadows may cause undefined behavior.

.popup(isBarPresented: $isPopupPresented, isPopupOpen: $isPopupOpen) {
  Image("genre_image")
    .resizable()
    .popupTransitionTarget()
    .aspectRatio(contentMode: .fit)
    .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
    .shadow(color: .indigo, radius: 20)
}

You can add LNPopupUI to your project using Xcode's built-in SPM support or by manually editing your Package.swift file.

Via Xcode:

1. Click File → Add Package Dependencies….
2. Enter https://github.com/LeoNatan/LNPopupUI.
3. Select your desired version.

Via Package.swift: Add the package to your dependencies and the target:

// Add to dependencies
.package(url: "https://github.com/LeoNatan/LNPopupUI.git", from: "2.5.0")

// Add to your target
.target(name: "MyExampleApp", dependencies: ["LNPopupUI"])

After installation, import the module in your Swift files:

import LNPopupUI

To display a single, non-paginated piece of information on the popup bar, use the .popupItem(popupItem:) modifier with a PopupItem instance.

TabView {
  //Container content  
}
.popup(isBarPresented: $isPopupBarPresented, isPopupOpen: $isPopupOpen) {
  popupContent()
    .popupItem {
      PopupItem(id: "intro", image: Image("MyImage")) {
        Text("Welcome to ") + Text("LNPopupUI").fontWeight(.heavy) + Text("!")
      } buttons: {
        ToolbarItemGroup(placement: .popupBar) {
          Link(destination: url) {
            Label("LNPopupUI", systemImage: "suit.heart.fill")
          }
        }
      }
    }
}

To create a paginated popup bar where users can swipe through a collection (like a music playlist), use the .popupItems(selection:items:) modifier inside your popup content view. The selection parameter must be a binding to the identifier of the currently selected item.

TabView {
  //Container content  
}
.popup(isBarPresented: $isPopupPresented, isPopupOpen: $isPopupOpen) {
  ContentView()
    .popupItems(selection: $currentSong) { 
      for song in playlist {
        PopupItem(
          id: song, 
          title: song.name, 
          subtitle: song.albumName, 
          image: song.art, 
          progress: playbackState.progress
        ) { 
          playbackButtons(for: song, with: playbackState) 
        }
      }
    }
}

Use the .popupBarContextMenu(menuItems:) modifier to attach a context menu to the popup bar.

.popup(isBarPresented: $isPopupPresented, isPopupOpen: $isPopupOpen) {
	//Popup content view
}
.popupBarContextMenu {
  Button {
    print("Action 1")
  } label: {
    Text("Action 1")
    Image(systemName: "globe")
  }
}

To replace the default popup bar UI with a custom SwiftUI view, use LNPopupCustomBarHostingController. Assign an instance of this controller to the customBarViewController property of the popupBar object on your LNPopupController.

tabBarController?.popupBar.customBarViewController = LNPopupCustomBarHostingController {
  MyCustomPlaybackControlsView()
}

You can host SwiftUI views within a popup by using LNPopupContentHostingController. This allows you to define your popup content using SwiftUI syntax and attach metadata via the .popupItem modifier.

To present the popup, use presentPopupBar(with:) on your LNPopupController (or tabBarController).

let controller = LNPopupContentHostingController {
  PlayerView(song: currentSong)
    .popupItem {
      PopupItem(id: "id", title: currentSong.name, subtitle: currentSong.albumName, image: currentSong.art)
    }
}

tabBarController?.presentPopupBar(with: controller)

For advanced control not exposed via SwiftUI, use .popupBarCustomizer(_:) to access the underlying UIKit LNPopupBar object. This is useful for modifying properties like gesture recognizer delegates.

Warning: This API accepts UIKit data types (e.g., UIColor, UIFont) rather than SwiftUI types. For appearance customization, prefer the SwiftUI-native APIs.

.popup(isBarPresented: $isPopupPresented, isPopupOpen: $isPopupOpen) {
  //Popup content view
}
.popupBarCustomizer { popupBar in
  popupBar.popupOpenGestureRecognizer.delegate = self.gestureRecognizerDelegateHelper
  popupBar.barHighlightGestureRecognizer.isEnabled = false
}