Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

content doesn't animate when header size changes. Header animation is janky #14

Open
chichkanov opened this issue Sep 18, 2024 · 3 comments
Labels
enhancement New feature or request

Comments

@chichkanov
Copy link

chichkanov commented Sep 18, 2024

  1. Add some toggle to trigger header height change
  2. Add .animation or change the toggle value using withAnimation {}
  3. Header size change animation is janky. Content (with yellow background) doesn't respect the animation and instantly moves to a new position

Environment: iOS18, iPhone 16 pro max simulator. Latest main branch, commit bb97ec4

Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2024-09-18.at.13.19.11.mp4

Code

import SwiftUI
import SwiftUIMaterialTabs

enum Tab: String, Hashable, CaseIterable {
    case first
    case second
}

struct ContentView: View {
    
    @State var selectedTab: Tab = .first
    
    @State var showMoreHeaderContent = false
            
    var body: some View {
        MaterialTabs(
            selectedTab: $selectedTab,
            headerTitle: { context in
                VStack {
                    Text("Material Tabs")
                        .font(.title)
                    
                    if showMoreHeaderContent {
                        Color.red.frame(height: 130)
                    }
                                     
                    Text("Some long long description bla\nsecond line of text bla bla bal")
                        .font(.callout)
                        .foregroundStyle(.secondary)
                }
                .animation(.bouncy, value: context.height)
                .frame(maxWidth: .infinity)
                .geometryGroup()
                .padding()
                .headerStyle(OffsetHeaderStyle(fade: true), context: context)
            },
            headerTabBar: { context in
                MaterialTabBar(selectedTab: $selectedTab, sizing: .equalWidth, context: context)
            },
            headerBackground: { context in
                Color.white
            },
            content: {
                firstTabContent()
                secondTabContent()
            }
        )
        .animation(.default, value: showMoreHeaderContent)
    }
    
    @ViewBuilder private func firstTabContent() -> some View {
        MaterialTabsScroll(tab: Tab.first) { _ in
            LazyVStack {
                Button("Show more content in header") {
                    showMoreHeaderContent.toggle()
                }
                .padding()
                
                ForEach(0..<100) { index in
                    Text("Row \(index)")
                        .padding()
                }
            }
            .background(Color.yellow.opacity(0.2))
        }
        .materialTabItem(tab: Tab.first, label: .secondary("First"))
    }
    
    @ViewBuilder private func secondTabContent() -> some View {
        MaterialTabsScroll(tab: Tab.second) { _ in
            LazyVStack {
                ForEach(0..<100) { index in
                    Text("Row \(index)")
                        .padding()
                }
            }
        }
        .materialTabItem(tab: Tab.second, label: .secondary("Second"))
    }
}
@wtmoose
Copy link
Member

wtmoose commented Sep 18, 2024

Dynamic header size isn't currently supported, so I'm labelling this as an enhancement.

Do you specifically need this or are you just testing? I'll need to get a handle on the complexity before I can commit to supporting it.

@chichkanov
Copy link
Author

chichkanov commented Sep 18, 2024

I wanted to use this library in my product, but discovered those issues which stop me from integrating it.

Yeah I understand that it might not be needed for everyone. This library is already pretty good for most of the users and doesn't have any SwiftUI analogues. Was hoping maybe this could be fixed.

@wtmoose
Copy link
Member

wtmoose commented Sep 18, 2024

I'm not saying I won't add it, but I haven't had time to consider the complexity yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants