TabView is not allowing pagination

[bcardarella]

I've implemented the app here:

https://developer.apple.com/tutorials/develop-in-swift/design-an-interface

Which resulted in the following markup:

<TabView class="background(Gradient(colors:[Color(red:0.852,green:0.646,blue:0.847),Color(red:0.954,green:0.529,blue:0.385)])) tabViewStyle(.page) foregroundStyle(.black)">
  <VStack class="padding()">
    <ZStack>
      <RoundedRectangle cornerRadius="30" class="frame(width:150,height:150) foregroundStyle(.tint)" />
      <Image systemName="figure.2.and.child.holdinghands" class="font(.system(size:70)) foregroundStyle(.white)" />
    </ZStack>
    <Text class="font(.title) fontWeight(.semibold) padding(.top)">Welcome to MyApp</Text>
    <Text class="font(.title2)">Description text</Text>
  </VStack>
  <VStack class="padding()" spacing="30">
    <Text class="font(.title) fontWeight(.semibold) padding(.bottom) padding(.top,100)">Features</Text>
    <HStack class="padding() background(content:'round') foregroundStyle(.black)">
      <Image class="font(.largeTitle) frame(width:50) padding(.trailing,10)" systemName="person.2.crop.square.stack.fill"/>
      <Text>A multiline description about a feature paired with the image on the left.</Text>
      <Spacer />
      <RoundedRectangle template="round" cornerRadius="32" class="foregroundStyle(.tint) opacity(0.25) brightness(-0.4)" />
    </HStack>
    <HStack class="padding() background(content:'round') foregroundStyle(.black)">
      <Image class="font(.largeTitle) frame(width:50) padding(.trailing,10)" systemName="quote.bubble.fill"/>
      <Text>Short summary</Text>
      <Spacer />
      <RoundedRectangle template="round" cornerRadius="32" class="foregroundStyle(.tint) opacity(0.25) brightness(-0.4)" />
    </HStack>
    <Spacer />
  </VStack>
</TabView>

When paginating the screen snaps back to the first one:

https://github.com/liveview-native/liveview-client-swiftui/assets/18524/da73e885-8c32-470a-9949-663d94b5d22d

[bcardarella]

Note that this is using a modification to UtilityClasses that I'm going to propose

[bcardarella]

Just to confirm, I've implemented the exact same view in SwiftUI from the LVN markup:

        TabView {
            VStack {
                ZStack {
                    RoundedRectangle(cornerRadius: 30)
                        .frame(width: 150, height: 150)
                        .foregroundStyle(.tint)
                    Image(systemName: "figure.2.and.child.holdinghands")
                        .font(.system(size: 70))
                        .foregroundStyle(.white)
                }
                Text("Welcome to MyApp")
                    .font(.title)
                    .fontWeight(.semibold)
                    .padding(.top)
                Text("Description text")
                    .font(.title)
            }
            .padding()
            VStack(spacing: 30) {
                Text("Features")
                    .font(.title)
                    .fontWeight(.semibold)
                    .padding(.top)
                HStack {
                    Image(systemName: "person.2.crop.square.stack.fill")
                        .font(.largeTitle)
                        .frame(width: 50)
                        .padding(.trailing, 10)
                    Text("A multiline description about a feature paired with the image on the left.")
                    Spacer()
                }.padding()
                    .background(
                        RoundedRectangle(cornerRadius: 32)
                            .foregroundStyle(.tint)
                            .opacity(0.25)
                            .brightness(-0.4)

                    )
                HStack {
                    Image(systemName: "quote.bubble.fill")
                        .font(.largeTitle)
                        .frame(width: 50)
                        .padding(.trailing, 10)
                    Text("Short summary")
                    Spacer()
                }.padding()
                    .background(
                        RoundedRectangle(cornerRadius: 32)
                            .foregroundStyle(.tint)
                            .opacity(0.25)
                            .brightness(-0.4)
                        )
            }.padding()
        }
        .background(Gradient(colors: [Color(red: 0.852, green: 0.646, blue: 0.847), Color(red: 0.954, green: 0.529, blue: 0.385)]))
        .tabViewStyle(.page)
        .foregroundStyle(.white)

And it works just fine:

https://github.com/liveview-native/liveview-client-swiftui/assets/18524/3d0b00ce-8eae-4d31-89b2-2d8595287613

[carson-katri]

Try adding a tag attribute to each direct descendant of the TabView.

[bcardarella]

@carson-katri as in tag=true ?

[bcardarella]

@carson-katri adding tag="1" and tag="2" to direct descendant fixed the issue. What is casuing this? Can we address this?