dragIndicator animation bug.

[dortus47]

Describe the bug

Hello, I am developing the swiftui app using the bottom sheet library. Thank you for creating a good library.

While using the library, I experienced the same phenomenon as in the video below, but when I drag the bottom sheet, the animation of the dragIndicator is applied strangely and I can't find the right location. Can I remove the application of these animations?

Minimal reproduce-able code

                    .bottomSheet(bottomSheetPosition: $bottomSheetPosition, switchablePositions: [
                        .relative(0.4),
                        .relativeTop(0.9)
                    ]) {
                        listView
                    }

Expected behavior The bottom sheet contains a scroll view. This is happening when you drag this bottom sheet up and down.

Screenshots If applicable, add screenshots to help explain your problem.

https://user-images.githubusercontent.com/48409434/191205162-2744819c-b995-4a8a-8976-9197ce13863d.mov

Target version iOS:: 16.0 BottomSheet:: 3.0.2

[lucaszischka]

I can not reproduce this bug with the provided information and code. But maybe have a look at the .customAnimation(Animation?)modifier.

[dortus47]

@lucaszischka

https://user-images.githubusercontent.com/48409434/191394136-ad67a55f-83df-4251-8c4d-1f9fc0c0e501.mov

I'm sorry for the lack of examples in yesterday's post. I found the same phenomenon while looking at Word Search View among the examples posted on GitHub to reproduce it. Depending on the strength of dragging up and down, the drag indicator fluctuates heavily and is out of the specified range. If you don't mind, can I ask you to check it again? Thank you.

device:: iPhone 11 Pro OS:: iOS 16.0 BottomSheet:: 3.0.2

When you drag the bottom sheet after touching the scroll view inside the bottom sheet, the animation of the drag indicator seems to be weird.

struct ContentView: View {
    
    @State var bottomSheetPosition: BottomSheetPosition = .relative(0.4)
    @State var searchText: String = ""
    
    let backgroundColors: [Color] = [Color(red: 0.28, green: 0.28, blue: 0.53), Color(red: 1, green: 0.69, blue: 0.26)]
    let words: [String] = ["birthday", "pancake", "expansion", "brick", "bushes", "coal", "calendar", "home", "pig", "bath", "reading", "cellar", "knot", "year", "ink"]
    
    var filteredWords: [String] {
        self.words.filter({ $0.contains(self.searchText.lowercased()) || self.searchText.isEmpty })
    }
    
    
    var body: some View {
        //A green gradient as a background that ignores the safe area.
        LinearGradient(gradient: Gradient(colors: self.backgroundColors), startPoint: .topLeading, endPoint: .bottomTrailing)
            .edgesIgnoringSafeArea(.all)
        
            .bottomSheet(bottomSheetPosition: self.$bottomSheetPosition, switchablePositions: [
                .relativeBottom(0.125),
                .relative(0.4),
                .relativeTop(0.975)
            ], headerContent: {
                //A SearchBar as headerContent.
                HStack {
                    Image(systemName: "magnifyingglass")
                    TextField("Search", text: self.$searchText)
                }
                .foregroundColor(Color(UIColor.secondaryLabel))
                .padding(.vertical, 8)
                .padding(.horizontal, 5)
                .background(RoundedRectangle(cornerRadius: 10).fill(Color(UIColor.quaternaryLabel)))
                .padding([.horizontal, .bottom])
                //When you tap the SearchBar, the BottomSheet moves to the .top position to make room for the keyboard.
                .onTapGesture {
                    self.bottomSheetPosition = .relativeTop(0.975)
                }
            }) {
                //The list of nouns that will be filtered by the searchText.
                ForEach(self.filteredWords, id: \.self) { word in
                    Text(word)
                        .font(.title)
                        .padding([.leading, .bottom])
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .transition(.opacity)
                .animation(.easeInOut, value: self.filteredWords)
                .padding(.top)
            }
            .enableAppleScrollBehavior()
            .enableBackgroundBlur()
            .backgroundBlurMaterial(.systemDark)
    }
}

[lucaszischka]

I will have another look next week.

[bgeisb]

I'm facing the same issue, unfortunately.

Device: iPhone 14 Pro (Simulator) OS: iOS 16.1 BottomSheet: 3.1.0

Is there any progress so far, @lucaszischka?

[mchen-msrl]

Facing same issue on iOS 16

Device: iPhone 12 OS: iOS 16.1 BottomSheet: 3.1.0

[lucaszischka]

No I’m currently very busy currently. I don’t think there will be progress soon (as of me). However feel free to fix it yourself and make a pull request. Sorry.

[Urkman]

Iw there a solution for this or a hint for another lib?

[lucaszischka]

Maybe try adding .animation(nil) somewhere in the view hierarchy (as 'low'/'near' as possible by the dragIndicator view).