Problem with ScrollView and dynamic content

[chakkrachak]

Hello,

I have some problems with Node : when the content is changing, the bounds are not updating, leading to hidden content at the bottom of the screen.

Here is the code

import UIKit
import Render

struct ContainerState: StateType {
    var visible: Bool = true
}

class ScrollTestScreen: ComponentView<ContainerState> {
    override func render() -> NodeType {
        return Node<UIScrollView> { view, layout, size in
            layout.width = size.width
            layout.height = size.height
            layout.flex()
            view.onTap { _ in
                self.setState { state in
                    state.visible = !state.visible
                }
            }
        }.add(children: Array(0...(self.state.visible ? 60 : 30)).map { i in
            Node<UILabel>{ view, _, _ in
                view.text = "FOOBAR \(i)"
            }
        })
    }

}

class ViewController: UIViewController, ComponentController {
    typealias C = ScrollTestScreen
    lazy var component: ScrollTestScreen = ScrollTestScreen()

    override func viewDidLoad() {
        super.viewDidLoad()
        addComponentToViewControllerHierarchy()
        renderComponent()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    override func viewDidLayoutSubviews() {
        renderComponent()
    }

    func configureComponentProps() {
    }
}

The conditions are : Render 4.9, iOS 10.3 and iPhone SE

Is there something I am missing here ?

Thanks for this wonderful framework !

[jewilhel]

I'm experiencing the same problem while using a UIScollView. I have content that gets hidden outside the bounds of the scroll area, and when I try scrolling it back into bounds, I reach the end of the scroll area and partially see the hidden content, but on release it bounces back outside the visible area. I even tried setting the contentSize manually after adding new content, but it doesn't seem to do anything.

[jewilhel]

Hi Alex,
I'm sure you're very buy. Just wondering if this issue has any chance of being investigated soon. I'm building a messaging style app and was hoping to present something to my stakeholders. I've tried all sorts of things to get this working, but I think I'm having the same issues as above.

Thanks for your help!

Jason W.

[alexdrone]

So the immediate fix for this is to call renderComponent twice (sigh) - this is because of an issue on updating the contentSize on post-render.

I'm currently busy with v5.0 (that turned into a big re-design project that address all of the limitations of the current version + major performance improvements).
you can check it out in the "neutrino" folder.

[jewilhel]

That did work form me, except I had to call component.update() instead.
Thanks very much for the help. This will get me by for now.

[jewilhel]

I'm very interested to see whats coming in v5.0. I hope it becomes more possible to do animated transitions.

[chakkrachak]

Alright @alexdrone, thanks for your workaround ! I'll try it :)
Thanks @jewilhel for your insight :D I was happy to see I was not the only one who got this kind of issue.

[chakkrachak]

I just post the workaround here

import UIKit
import Render

struct ContainerState: StateType {
    var visible: Bool = true
}

class ScrollTestScreen: ComponentView<ContainerState> {
    override func render() -> NodeType {
        return Node<UIScrollView> { view, layout, size in
            layout.width = size.width
            layout.height = size.height
            layout.flex()
            view.onTap { _ in
                self.setState { state in
                    state.visible = !state.visible
                }
                self.update()
            }
        }.add(children: Array(0...(self.state.visible ? 60 : 30)).map { i in
            Node<UILabel>{ view, _, _ in
                view.text = "FOOBAR \(i)"
            }
        })
    }

}

class ViewController: UIViewController, ComponentController {
    typealias C = ScrollTestScreen
    lazy var component: ScrollTestScreen = ScrollTestScreen()

    override func viewDidLoad() {
        super.viewDidLoad()
        addComponentToViewControllerHierarchy()
        renderComponent()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    override func viewDidLayoutSubviews() {
        renderComponent()
    }

    func configureComponentProps() {
    }
}

[ngocdaothanh]

Thanks @chakkrachak. Just to confirm: in the code you share, the workaround is to call self.update() manually after updating the state?

[chakkrachak]

That's it :)