SwiftUI Toasts | Xcode 16

[@Kavsoft]

Inspiration 👇 x.com/emilkowalski_/status/1818747624088125509?s=46

[@fengye4917]

great job

[@yq_dev]

Long time no see, like your video , respect!!!

[@nitinbhatia493]

nice work

[@DEV_XO]

🔥🔥🔥

[@linhta2546]

Thank you for the amazing work! I wonder if there is a way to scroll the VStack when expanded in case there are too many items. I tried wrapping it in scroll view but the transition from ZStack to VStack doesn't look good

[@Kavsoft]

You can definitely change its behaviour to adapt into a scroll view, just make the following changes to the code, 1. Create a State variable called “height”, @State private var height: CGFloat = .zero 2. Now Wrap the layout { … } into a ScrollView, ScrollView(.vertical) { layout { … } } 3. Remove the onTapGesture from both the background and the layout instance. 4. Add the following lines of code in the respective places, a. Add these lines to the ScrollView, ScrollView { … } .rotationEffect(.init(degrees: 180)) .frame(height: isExpanded ? nil : height == 0 ? nil : height) .scrollClipDisabled() .scrollIndicators(.hidden) .scrollDisabled(!isExpanded) .allowsHitTesting(!toasts.isEmpty) .onTapGesture { isExpanded.toggle() } b. Add these lines to the layout (Inside the ScrollView), ScrollView(.vertical) { layout { … } .rotationEffect(.init(degrees: -180)) .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { newValue in height = newValue } } 5. Modify the DragGesture() to the following, DragGesture(minimumDistance: 30, coordinateSpace: .global) Also modify the xOffset to the following, let xOffset = value.translation.width < 0 ? value.translation.width + 20 : 0 6. Finally change all the instances of the bouncy animation to .snappy(duration: 0.3, extraBounce: 0) animation, since bouncy animation will have some bounce glitches with the scrollviews. By doing these steps, you can convert the toasts VStack into a ScrollView. Have a great day!

[@user32352]

does this work on the root level or only the screen you are on? if toast pops up and you navigate to a new page is it still visible?

[@nitinbhatia493]

same question I have too

[@Kavsoft]

Nope, this is more like per view context basis. Each view will have its separate toasts, but I do have a video that will create universal toasts and display at the top of the SwiftUI app. For more, check this video out, kzbin.info/www/bejne/mGeph4KOj7lridE

[@Kavsoft]

Additionally, I got many people asking this, so I will try to add a new version of code in my Patreon that will work like a universal toast!

[@Kavsoft]

I added a version that will work as a universal toast also with enabled scroll actions; check out the code in the patreon (link in the description).

[@nitinbhatia493]

❤ that so fast, will launch a video for that too ?

[@luunguyen8295]

How about the case when there're many toasts in VStackLayout and we need a ScrollView for it, can you help me build it?

[@Kavsoft]

You can definitely change its behaviour to adapt into a scroll view, just make the following changes to the code, 1. Create a State variable called “height”, @State private var height: CGFloat = .zero 2. Now Wrap the layout { … } into a ScrollView, ScrollView(.vertical) { layout { … } } 3. Remove the onTapGesture from both the background and the layout instance. 4. Add the following lines of code in the respective places, a. Add these lines to the ScrollView, ScrollView { … } .rotationEffect(.init(degrees: 180)) .frame(height: isExpanded ? nil : height == 0 ? nil : height) .scrollClipDisabled() .scrollIndicators(.hidden) .scrollDisabled(!isExpanded) .allowsHitTesting(!toasts.isEmpty) .onTapGesture { isExpanded.toggle() } b. Add these lines to the layout (Inside the ScrollView), ScrollView(.vertical) { layout { … } .rotationEffect(.init(degrees: -180)) .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { newValue in height = newValue } } 5. Modify the DragGesture() to the following, DragGesture(minimumDistance: 30, coordinateSpace: .global) Also modify the xOffset to the following, let xOffset = value.translation.width < 0 ? value.translation.width + 20 : 0 6. Finally change all the instances of the bouncy animation to .snappy(duration: 0.3, extraBounce: 0) animation, since bouncy animation will have some bounce glitches with the scrollviews. By doing these steps, you can convert the toasts VStack into a ScrollView. Have a great day!

[@danielcrompton7818]

Please explain the asymmetric transition at 7:36

[@Kavsoft]

It means that the view transitions will have two transitions, one for insertion and one for removal. For example, I can use this to push the view from the top when it’s inserted and slide it in the leading side when it’s removed.