Add SwiftUI LottieView (#2092)

Example/iOS/AppDelegate.swift

@@ -2,6 +2,7 @@
 // Copyright © 2021 Airbnb Inc. All rights reserved.
 
 import Lottie
+import SwiftUI
 import UIKit
 
 @UIApplicationMain

Example/iOS/Configuration.swift

@@ -19,10 +19,29 @@ final class Configuration {
     }
   }
 
+  /// The rendering engine to use
+  static var previewImplementation: AnimationPreviewImplementation {
+    get {
+      AnimationPreviewImplementation(rawValue: UserDefaults.standard.string(forKey: #function) ?? "SwiftUI") ?? .swiftUI
+    }
+    set {
+      UserDefaults.standard.set(newValue.rawValue, forKey: #function)
+    }
+  }
+
   /// Applies the current configuration (stored in UserDefaults)
   /// to the singleton `LottieConfiguration.shared`
   static func applyCurrentConfiguration() {
     LottieConfiguration.shared.renderingEngine = renderingEngineOption
   }
 
 }
+
+// MARK: - AnimationPreviewImplementation
+
+enum AnimationPreviewImplementation: String, RawRepresentable {
+  /// Preview animations using the UIKit `AnimationPreviewViewController`
+  case uiKit = "UIKit"
+  /// Preview animations using the SwiftUI `AnimationPreviewView`
+  case swiftUI = "SwiftUI"
+}

Example/iOS/SwiftUI/AnimationPreviewView.swift

@@ -0,0 +1,25 @@
+// Created by Cal Stephens on 6/23/23.
+// Copyright © 2023 Airbnb Inc. All rights reserved.
+
+import Lottie
+import SwiftUI
+
+/// TODO: Implement functionality from UIKit `AnimationPreviewViewController`
+struct AnimationPreviewView: View {
+
+  let animationName: String
+
+  var body: some View {
+    VStack {
+      // TODO: Should `LottieView` take an optional `LottieAnimation` so it can support
+      // this sort of spelling without a forced-unwrap?
+      LottieView(animation: LottieAnimation.named(animationName)!)
+        .resizable()
+        .looping()
+    }
+    .navigationTitle(animationName.components(separatedBy: "/").last!)
+    .frame(maxWidth: .infinity, maxHeight: .infinity)
+    .background(Color(uiColor: .secondarySystemBackground))
+  }
+
+}

Example/iOS/ViewControllers/SampleListViewController.swift

@@ -4,6 +4,7 @@
 import Epoxy
 import EpoxyCollectionView
 import Lottie
+import SwiftUI
 import UIKit
 
 /// Displays a list of all of the sample Lottie animations
@@ -82,9 +83,17 @@ final class SampleListViewController: CollectionViewController {
             animationName: animationPath,
             title: animationName))
           .didSelect { [weak self] context in
-            self?.show(
-              AnimationPreviewViewController(animationPath),
-              sender: context.view)
+            let previewViewController: UIViewController
+            switch Configuration.previewImplementation {
+            case .swiftUI:
+              previewViewController = UIHostingController(
+                rootView: AnimationPreviewView(animationName: animationPath))
+
+            case .uiKit:
+              previewViewController = AnimationPreviewViewController(animationPath)
+            }
+
+            self?.show(previewViewController, sender: context.view)
           }
       }
   }
@@ -120,13 +129,23 @@ final class SampleListViewController: CollectionViewController {
       title: "Settings",
       image: UIImage(systemName: "gear")!,
       primaryAction: nil,
-      menu: UIMenu(
-        title: "Rendering Engine",
-        children: [
-          action(for: .automatic),
-          action(for: .mainThread),
-          action(for: .coreAnimation),
-        ]))
+      menu: UIMenu(children: [
+        UIMenu(
+          title: "Rendering Engine",
+          options: .displayInline,
+          children: [
+            action(for: .automatic),
+            action(for: .mainThread),
+            action(for: .coreAnimation),
+          ]),
+        UIMenu(
+          title: "Framework",
+          options: .displayInline,
+          children: [
+            action(for: .swiftUI),
+            action(for: .uiKit),
+          ]),
+      ]))
   }
 
   private func action(for renderingEngineOption: RenderingEngineOption) -> UIAction {
@@ -139,4 +158,14 @@ final class SampleListViewController: CollectionViewController {
       })
   }
 
+  private func action(for previewImplementation: AnimationPreviewImplementation) -> UIAction {
+    UIAction(
+      title: previewImplementation.rawValue,
+      state: Configuration.previewImplementation == previewImplementation ? .on : .off,
+      handler: { [weak self] _ in
+        Configuration.previewImplementation = previewImplementation
+        self?.configureSettingsMenu()
+      })
+  }
+
 }

Example/macOS/Base.lproj/Main.storyboard

@@ -1,7 +1,9 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.Storyboard.XIB" version="3.0" toolsVersion="11134" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" initialViewController="B8D-0N-5wS">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.Cocoa.Storyboard.XIB" version="3.0" toolsVersion="21701" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" initialViewController="B8D-0N-5wS">
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="11134"/>
+        <deployment identifier="macosx"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="21701"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
         <!--Application-->
@@ -618,7 +620,7 @@
                                         <menuItem title="Show Sidebar" keyEquivalent="s" id="kIP-vf-haE">
                                             <modifierMask key="keyEquivalentModifierMask" control="YES" command="YES"/>
                                             <connections>
-                                                <action selector="toggleSourceList:" target="Ady-hI-5gd" id="iwa-gc-5KM"/>
+                                                <action selector="toggleSidebar:" target="Ady-hI-5gd" id="iwa-gc-5KM"/>
                                             </connections>
                                         </menuItem>
                                         <menuItem title="Enter Full Screen" keyEquivalent="f" id="4J7-dP-txa">
@@ -673,7 +675,7 @@
                         <outlet property="delegate" destination="Voe-Tx-rLC" id="PrD-fu-P6m"/>
                     </connections>
                 </application>
-                <customObject id="Voe-Tx-rLC" customClass="AppDelegate" customModuleProvider="target"/>
+                <customObject id="Voe-Tx-rLC" customClass="AppDelegate" customModule="Example__macOS_" customModuleProvider="target"/>
                 <customObject id="YLy-65-1bz" customClass="NSFontManager"/>
                 <customObject id="Ady-hI-5gd" userLabel="First Responder" customClass="NSResponder" sceneMemberID="firstResponder"/>
             </objects>
@@ -703,7 +705,7 @@
         <!--View Controller-->
         <scene sceneID="hIz-AP-VOD">
             <objects>
-                <viewController id="XfG-lQ-9wD" customClass="ViewController" customModuleProvider="target" sceneMemberID="viewController">
+                <viewController id="XfG-lQ-9wD" customClass="ViewController" customModule="Example__macOS_" customModuleProvider="target" sceneMemberID="viewController">
                     <view key="view" wantsLayer="YES" id="m2S-Jp-Qdl">
                         <rect key="frame" x="0.0" y="0.0" width="480" height="270"/>
                         <autoresizingMask key="autoresizingMask"/>