v3.0 suggestion 😉

[kylechandev]

What amazing awesome work this is!
Thank you very much for your hard work on v3.0 during this time! 😊

I'm already using v3.0 and I'd like to make some suggestions:

1⃣️ Bottom sheet background corner and shadow
In v3.0, support the new customBackground() modifier, but I only want to change the background corner like v2.x (Because I wish to preserve the built-in multi-platform compatible blur background effect). The same shadow is also. In this demo I found using .shadow directly to set the sheet shadow, but this causes my entire page to have a shadow as well (which is not expected).

2⃣️ [enableSwipeToDismiss] become hard to trigger
In v3.0, you need to swipe down very quickly to close the sheet (still may not dismiss), which in v2.0 there is no problem.

3⃣️ About [BottomSheet+ViewModifiers]
I don't feel this way is very good, because I may show multiple bottom sheets on one page with different behavior, which will make the call chain very long, currently my solution is this:

It's also possible that I'm using it incorrectly...

Finally, thank you for creating this awesome library! I love you!

My English is poor, hope to convey my thoughts... 😝

[kylechandev]

I found that v3.0 is a bit strange display on the ipad or mac. Its width is too small, causing some content to be squeezed and not displayed completely. I think it would be better to set the width to half the screen width, just like SwiftUI's sheet modal. And on the ipad, it pops up from the top corner of the screen, which feels a little weird, maybe it's better to pop up from the bottom like an iPhone, even can use sheet instead of display directly on ipad or mac, these are just some of my suggestions...

[lucaszischka]

Hello @kylechandev,
first of all, thank you for your feedback and suggestions. It is great to get feedback and to hear that you like my BottomSheet.

Next, as you can see, I changed this issue into a discussion, because I think this is the right place to discuss the suggested feedback and changes.

So lets start with your suggestions:

Regarding 1⃣:

I removed the old .shadow and .cornerRadius option, because all of this can be addressed with the new .customBackground() modifier.
I understand that you may not want to replace the default background and only want to change some of its properties. The problem is, that for example the next person may only want to change the material of the background and another one may only want to change its opacity and so on...
So one day I will end up with way too many view modifiers for changing background properties.
This is why i think the current implementation is great, so everything is customisable without too many individual modifiers to consider.

Could you please send a screenshot or explain what you mean by:

but this causes my entire page to have a shadow as well (which is not expected).

Attaching the shadow to the background set via .customBackground() won't work, because it is getting clipped, so even when setting a custom background you would need to apply the shaddow as shown in the example.

Regarding 2⃣:

Do you have flick through enabled? If so, is flick through also hard to trigger?
And by quick you mean far I guess, because the speed does not matter for my calculations, only the height does.

Regarding 3⃣:

Im not quite sure if I understand your problem correctly. Did you use version 2 before you started using version 3? How did your code look in version 2? Was your code better/cleaner in version 2?

Regarding your comment:

I tried to mimic apple apples BottomSheet (as seen in Maps) and not the one apple added in iOS 16. And I think it is a great match:

However if you don't want to use my BottomSheet on iPad or Mac you can use a conditional modifier:

extension View {
    /// Applies the given transform if the given condition evaluates to `true`.
    /// - Parameters:
    ///   - condition: The condition to evaluate.
    ///   - transform: The transform to apply to the source `View`.
    /// - Returns: Either the original `View` or the modified `View` if the condition is `true`.
    @ViewBuilder func `if`<Content: View>(_ condition: Bool, transform: (Self) -> Content) -> some View {
        if condition {
            transform(self)
        } else {
            self
        }
    }
}

and then use it like this:

ContentView()
    .navigationTitle("Hello World")
    .if(self.shouldApplyBottomSheet) { view in
        view
            .bottomSheet(...)
            .customBackground(...)
            // ...
    }
    .if(self.shouldApplyNormalSheet) { view in
        view
            .sheet(...)
            // ...
    }
    .accentColor(.red)
// ...

[kylechandev]

Hello @lucaszischka, Thank you for the relay 😊

1⃣️ Bottom Sheet shadow

If I add .shadow() like in the demo, the result will look like this(the page view also added the shadow, not just bottom sheet):

2⃣️ Swipe to dismiss

Whether I turn on flick through or not, the result looks the same. I know the swipe trigger is 0.3*sheetHeight, but the problem is that the swipe doesn't seem to follow the hand? This makes it difficult for bottom sheet to trigger swipeToDismiss (emmm...I don't know if the expression is accurate, can see the description in the picture):

Because the bottom sheet itself is not high, in this case, even if the finger has been swiped to the bottom of the screen, the sheet still cannot be dismissed.

2022-08-10.9.26.26.mov

3⃣️ About [BottomSheet+ViewModifiers]

Yes, I use BottomSheet from v2.x, In v2.x, can directly put modifier in param options:

Then use it like:
.bottomSheet($bottomSheetPositon, options: BottomSheetBehavior.defaultOptions()) { ... }

Because I will use multiple BottomSheets in one page, like:

(In v2.x)
PageView()
.bottomSheet($bottomSheetPosition1, options: BottomSheetBehavior.defaultOptions(contentPackInScrollView: true)) { ... }
.bottomSheet($bottomSheetPosition2, options: BottomSheetBehavior.defaultOptions(contentPackInScrollView: false)) { ... }
.bottomSheet($bottomSheetPosition3, options: BottomSheetBehavior.defaultOptions(contentPackInScrollView: true, autoDismiss: false)) { ... }

(In v3.0)
PageView()
.bottomSheet($bottomSheetPosition1) { ... }
.applyThisBottomSheetBehavior(allowContentDrag: false)
.bottomSheet($bottomSheetPosition2) { ... }
.applyThisBottomSheetBehavior(autoDismiss: false)
.bottomSheet($bottomSheetPosition3) { ... }
.applyThisBottomSheetBehavior(allowContentDrag: false, autoDismiss: false)

The applyThisBottomSheetBehavior is put in the first discussion, and if I did not create this extension, the whole call chain will become very very long... I mean that's it, but it's a small problem.

BottomSheet on IPad or Mac

I think it would be better to have the BottomSheet on the left in the Map App because people need to keep their attention on the map at all times. (In China, many Map App also do this, but only for Map Apps, and in Map App the BottomSheet is always displayed. But for ordinary Apps, it seems a bit uncomfortable, and in this case, the BottomSheet does not need to exist all the time, if it pops up or dismisses from the upper left corner frequently, the interaction feels a little strange. This is only my personal opinion, you can think about it, but don't let me.

Finally, Thank you for your efforts on BottomSheet! 😉

[lucaszischka]

Hey @kylechandev, thank you for your detailed answer!! It helps very much and now I understand every issue you had.

Regarding 1⃣️:

I will need time to investigate and to come up with a solution. I will tell you when I have an idea or solution.

Regarding 2️⃣:

I want to mention that is not calculated proportional to the BottomSheet height, but to the screen height. Nevertheless I understand the issue and I will probably add an modifier which can set the threshold.

Regarding 3️⃣:

I do not see the problem with the new version. I think your extension is a great way of making your code cleaner.
In the v2 you needed a complicated function to calculate the array and now you need an extension. I think this is acceptable. Therefore I will not convert back to the options.
Oh and btw. you also could do a custom BottomSheet wrapper if you want, but your solution works great too:

struct MyBottomSheet<MContent>: ViewModifer {
    @Binding var bottomSheetPosition: BottomSheetPosition

    var switchablePositions: [BottomSheetPosition]
    var title: String
    var mainContent: MContent
    
    var isSwipeToDismissEnabled: Bool
    // …

    func body(content: Content) -> some View {
    content
        // You don’t need to add the BottomSheet here
        .bottomSheet(bottomSheetPosition: self.$bottomSheetPosition, switchablePositions: self. switchablePositions, title: self.title, content: self.mainContent)
        .enableSwipeToDismiss(self.isSwipeToDismissEnabled)
        // …
    }
}

extension View {
    func myBottomSheet<MContent>(…) -> some View {
        modifier(MyBottomSheet(…))
    }
}

Regarding 4️⃣:

Thank you for your input. I understand why you think this behavior only makes sense for Map applications or applications where the BottomSheet is always shown. However I don’t think that I will change this behavior, because you still have the option to use a sheet on Mac and iPad and my BottomSheet on iPhone to archive the behavior you expect.
If I would remove this behavior it would not longer be possible to have a BottomSheet in the top left corner at all.
And because there are many people out there, who use my BottomSheet in a Map related application it would not be fair to change this behavior, especially since right now you can archive both.
So with the current implementation everyone should be happy :)

[WalterZou]

Regarding4️⃣ ：
Is it possible to support configuring the interaction behavior of the BottomSheet, such as configuring it to behave the same way on macOS as it does on iOS, i.e., entering from the bottom with a width of 100%? This is very useful in many scenarios.

[lucaszischka]

No currently not, however im open to a pull request. This could be implemented similar to .enableFloatingIPadSheet.

[dmikots]

Hi!
how to slow down the speed when swiping down?

[lucaszischka]

I’m not sure what you mean with “speed”, but maybe this is what you want:
.customAnimation(.linear.speed(0.5))

[lucaszischka]

Here are some news for you @kylechandev.

Regarding 1⃣️:

This will need to be worked on, but for now you can add the shadow to your .customBackground(). The problem is that I need to recoded much of the project for this to work properly; the issue is, that I will need to switch to an offset transition, add a shadow modifier and then I need to add the shadow hight to the offset transition. Otherwise I can not make the BottomSheet disappear completely (including the shadow). However this is much work and I have neither the motivation (after working more than one month on updating to version 3) nor time to work on this for now.

For any one reading this: Small fixes and changes will still be done, but fixing/adding shadows is too much work for now.

Regarding 2⃣:

The threshold can now be changed; please use .customThreshold(yourNewPercentage) to change it.

[dmikots]

Hi! How can I use with flags (true or false)?

[lucaszischka]

You can’t, because this is not toggling something, but changing a value. But you can do something like this:
.customThreshold(self.useCustomThreshold ? 0.2 : 0.3)
This works, like a toggle, because the default value is 0.3, so setting it to 0.3 doesn’t change anything.