Rive Button with state not working well when in a lazy scrollview

[rob-howard]

Description

I am implementing a button in a large scrollview LazyVStack that contains a button similar to a heart / like button for content.

I'm not sure if this is a Rive issue or an understanding issue on my part.

When the user taps the button, it will toggle state. Which seems to be working.

The issue is happens upon view loading, it does not seem to initialize in the proper state.

Provide a Repro

LazyVStack {
RiveLikeButtonView(fileName: fileName, text: "100", isLiked: isLiked) {
toggle()
}.id(1)
RiveLikeButtonView(fileName: fileName, text: "100", isLiked: isLiked) {
toggle()
}.id(2)
RiveLikeButtonView(fileName: fileName, text: "100", isLiked: isLiked) {
toggle()
}.id(3)
///.... a bunch of times to make it render off screen
}

Not working:

riveViewModel.view()
.onAppear {
print("on appear: (isLiked)")

                    // riveViewModel.setInput("hasLiked", value: isLiked)
                    // riveViewModel.reset()
                    riveViewModel.setInput("hasLiked", value: isLiked)
                }

Working: but not exactly sure why?

riveViewModel.view()
.onAppear {
print("on appear: (isLiked)")

                    riveViewModel.setInput("hasLiked", value: isLiked)
                    riveViewModel.reset()
                    riveViewModel.setInput("hasLiked", value: isLiked)
                }

Expected behavior

The state of the input for hasLiked to be reflected in the animation state machine.

Screenshots

actual: icons don't start in the proper state:

expected: icons in the proper state:

Device & Versions (please complete the following information)

• Device: ios simulator + live devices
• iOS version ios 17, 18 +

Additional context

[dskuza]

Can you share the .riv file you're using? I have an idea, but I just want to verify against the file you're using.

[rob-howard]

Here it is:

likebutton_reference.riv.zip

[dskuza]

Thanks! Can you share the .rev file (export for backup)? I'm wondering if there are improvements that can be made to the state machine that wouldn't require code workarounds.

[rob-howard]

likebutton.rev.zip

[dskuza]

Can you share some more of your code, such as RiveLikeButtonView and the toggle() function? I think I know what they are, but I'd just like to make sure. I think I have an idea as to what's going on, but I want to test out my theory before I can better explain. I'll also try an even simpler example on my end.

[rob-howard]

I took the example swift widgets and embedded this view in there instead:

import SwiftUI
import RiveRuntime

struct SwiftWidgets: DismissableView {
    
    /// lets UIKit bind to this to trigger dismiss events
    var dismiss: () -> Void = {}
    
    @State var isLiked: Bool = true
    @State var fileName: String = "likebutton_01"
    
    var body: some View {
        ZStack {
            Color.gray
                .ignoresSafeArea()
            
            ScrollView {
                VStack {
                    LazyVStack {
                        ForEach(1...200, id: \.self) { index in
                            RiveLikeButtonView(fileName: fileName, text: "\(index)", isLiked: isLiked) {
                                isLiked.toggle()
                            }
                            .id(index)
                        }
                    }
                    .padding()
                    Spacer().padding()
                }
            }
            .foregroundColor(.white)
        }
    }
}

struct RiveComponents_Previews: PreviewProvider {
    static var previews: some View {
        SwiftWidgets()
    }
}

import RiveRuntime
import SwiftUI

struct RiveLikeButtonView: View {
    private var fileName: String
    var text: String
    var isLiked: Bool

    @StateObject private var riveViewModel: RiveViewModel

    private var action: () -> Void

    private enum Constants {
        static let spacing: CGFloat = 4
        static let imageSize = CGSize(width: 60, height: 110)
    }

    init(fileName: String, text: String, isLiked: Bool, action: @escaping () -> Void) {
        self.fileName = fileName
        self.text = text
        self.isLiked = isLiked
        self.action = action
        _riveViewModel = StateObject(wrappedValue: RiveViewModel(fileName: fileName))
    }

    var body: some View {
        VStack(spacing: Constants.spacing) {
            if #available(iOS 17.0, *) {
                riveViewModel.view()
                    .frame(width: Constants.imageSize.width, height: Constants.imageSize.height)
                    .padding(.bottom, -6)
                    .onTapGesture {
                        action()
                    }
                    .onLongPressGesture {
                        action()
                    }
                    .onChange(of: isLiked, initial: false) {
                        riveViewModel.triggerInput("tapTrigger")
                    }
                    .onAppear {
                        // uncomment to "fix" the initial state
                        riveViewModel.setInput("hasLiked", value: isLiked)
                        riveViewModel.reset()
                        riveViewModel.setInput("hasLiked", value: isLiked)
                    }
            } else {
                // Fallback on earlier versions
                Text("version not supported")
            }
            Text(text)
                .foregroundColor(.white)
        }
    }
}