Add ability to customize Bottom Sheet opening and closing animation

Sources/BottomSheet/BottomSheet.swift

@@ -17,13 +17,15 @@ public struct BottomSheet<Content: View>: View {
     @State private var previousDragValue: DragGesture.Value?
 
     @Binding var isPresented: Bool
+    @State var gestureEnded: Bool
     private let height: CGFloat
     private let topBarHeight: CGFloat
     private let topBarCornerRadius: CGFloat
     private let content: Content
     private let contentBackgroundColor: Color
     private let topBarBackgroundColor: Color
     private let showTopIndicator: Bool
+    private let animation: Animation
 
     public init(
         isPresented: Binding<Bool>,
@@ -33,18 +35,21 @@ public struct BottomSheet<Content: View>: View {
         topBarBackgroundColor: Color = Color(.systemBackground),
         contentBackgroundColor: Color = Color(.systemBackground),
         showTopIndicator: Bool,
+        animation: Animation = .interactiveSpring(),
         @ViewBuilder content: () -> Content
     ) {
         self.topBarBackgroundColor = topBarBackgroundColor
         self.contentBackgroundColor = contentBackgroundColor
         self._isPresented = isPresented
+        self._gestureEnded = State(initialValue: true)
         self.height = height
         self.topBarHeight = topBarHeight
         if let topBarCornerRadius = topBarCornerRadius {
             self.topBarCornerRadius = topBarCornerRadius
         } else {
             self.topBarCornerRadius = topBarHeight / 3
         }
+        self.animation = animation
         self.showTopIndicator = showTopIndicator
         self.content = content()
     }
@@ -64,7 +69,7 @@ public struct BottomSheet<Content: View>: View {
                 .frame(height: self.height - min(self.draggedOffset*2, 0))
                 .background(self.contentBackgroundColor)
                 .cornerRadius(self.topBarCornerRadius, corners: [.topLeft, .topRight])
-                .animation(.interactiveSpring())
+                .animation(self.gestureEnded ? .interactiveSpring() : self.animation)
                 .offset(y: self.isPresented ? (geometry.size.height/2 - self.height/2 + geometry.safeAreaInsets.bottom + self.draggedOffset) : (geometry.size.height/2 + self.height/2 + geometry.safeAreaInsets.bottom))
             }
         }
@@ -75,8 +80,11 @@ public struct BottomSheet<Content: View>: View {
             .black
             .opacity(grayBackgroundOpacity)
             .edgesIgnoringSafeArea(.all)
-            .animation(.interactiveSpring())
-            .onTapGesture { self.isPresented = false }
+            .animation(self.gestureEnded ? .interactiveSpring() : self.animation)
+            .onTapGesture {
+                self.gestureEnded = false
+                self.isPresented = false
+            }
     }
 
     fileprivate func topBar(geometry: GeometryProxy) -> some View {
@@ -91,7 +99,6 @@ public struct BottomSheet<Content: View>: View {
         .gesture(
             DragGesture()
                 .onChanged({ (value) in
-
                     let offsetY = value.translation.height
                     self.draggedOffset = offsetY
 
@@ -105,6 +112,7 @@ public struct BottomSheet<Content: View>: View {
                             return
                         }
                     }
+                    self.gestureEnded = true
                     self.previousDragValue = value
 
                 })
@@ -113,6 +121,8 @@ public struct BottomSheet<Content: View>: View {
                     if offsetY > self.dragToDismissThreshold {
                         self.isPresented = false
                     }
+
+                    self.gestureEnded = false
                     self.draggedOffset = 0
                 })
         )

Sources/BottomSheet/ViewExtension.swift

@@ -17,6 +17,7 @@ public extension View {
         contentBackgroundColor: Color = Color(.systemBackground),
         topBarBackgroundColor: Color = Color(.systemBackground),
         showTopIndicator: Bool = true,
+        animation: Animation = .interactiveSpring(),
         @ViewBuilder content: @escaping () -> Content
     ) -> some View {
         ZStack {
@@ -28,6 +29,7 @@ public extension View {
                         topBarBackgroundColor: topBarBackgroundColor,
                         contentBackgroundColor: contentBackgroundColor,
                         showTopIndicator: showTopIndicator,
+                        animation: animation,
                         content: content)
         }
     }

iOS Example/Sources/ContentView.swift

@@ -26,7 +26,8 @@ struct ContentView: View {
                 height: 370,
                 topBarHeight: 16,
                 topBarCornerRadius: 16,
-                showTopIndicator: false
+                showTopIndicator: false,
+                animation: .spring()
             ) {
                 MapSettingView()
             }