Hi, I am considering to move from storyboards to Render for part of my app UI. Currently everything works fine for me and i managed to build some nice UI with it easily. The only thing that is missing is best practices on how to handle events. in my UI i have two buttons: one for signing in and one for signing up and i wanted to know what is the recommended way to handle the on tap event with Render. Please consider the fact that ReSwift is also big part in my architecture so when the user will click on sign in then i will dispach an action.

Thanks.

Hey, I have issue with TableNode again. This is the setup:

    override func render() -> NodeType {
        let table = TableNode(
            reuseIdentifier: "list-table",
            key: "list-table",
            in: self,
            cellReuseEnabled: true,
            autoDiffEnabled: false
        ) { view, layout, size in
            layout.width = size.width
            layout.height = size.height
            
            view.backgroundColor = .clear
        }
        
        let nodes = state.approvals.map { item -> NodeType? in
            do {
                return try self.nodeFactory.create(for: item, in: self)
            } catch let error {
                print(error)
                return nil
            }
        }.flatMap { $0 } // remove nils from array
        
        table.add(children: nodes)
        
        return table
    }

This is also what nodeFactory.create(for:, in:) does:

        let state = GenericApprovalsListItemState(
            id: entity.id,
            title: entity.headline,
            subtitle: entity.subheadline,
            iconName: entity.iconName,
            currency: nil,
            amount: nil,
            itemDescription: entity.itemDescription,
            note: entity.note,
            escalation: .none,
            attachments: nil
        )
        
        let component = GenericApprovalsListItemComponentView()
        
        return ComponentNode(
            component,
            in: parent,
            key: "list-item-midas-\(entity.id)",
            state: state
        )

I am just pushing a new state with updated array of items and adding the children. Every time all of them again - I hope that is right. It ends up with:

Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid update: invalid number of rows in section 0.  The number of rows contained in an existing section after the update (18) must be equal to the number of rows contained in that section before the update (0), plus or minus the number of rows inserted or deleted from that section (6 inserted, 0 deleted) and plus or minus the number of rows moved into or out of that section (0 moved in, 0 moved out).

Also setting up the contentInset does not seem to work.

Also is there a recommended way how to add UIRefreshControl?

Hey, I have a question regarding the usage of Render in UI framework for multiple apps. Is it possible to use stateless ComponentViews as usual UIViews without a need to call update?

For example: if you setup autolayout constraints and the layout is calculated and new frames set, can the ComponentView actually automatically update it-self?

I want to have a collection of UI components/views/bits available in a separate framework and work with them as usual UIViews without the developer knowing it is actually Render based component. Even if he is going to use them with Render himself.

I pulled the latest commit and I'm getting this error:

*** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [nan nan]' *** First throw call stack:

been trying to track down the reason. Nothings changed in my code.

I created an array of card components and configured and rendered them externally, then passed them into my Collection component as nodes where they are added as children to CollectionNode. When I run the app I have 8 cards in the elements array, but only 1 card will display on screen, which is unexpected. If I swipe up and cause the view to scroll upwards so that the non displaying cards move off screen and then back on again, the other cards appear where they are supposed to be.

I'm guessing the cards reentering the screen cause them to refresh/render whereas they initially did not. I looked for a way to update CollectionNode, but nothing I tried made a difference.

Here is my code if it helps:

import Foundation
import UIKit
import Render

struct CollectionState: StateType {
    var id: String = "collectionContainer"
    var elements: [NodeType] = [layoutBuilder("")]
    var layoutAs: String = "flow"
}

class CollectionContainer: ComponentView<CollectionState> {
    required init() {
        super.init()
        self.state = CollectionState()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("Not supported")
    }
    
    override func render() -> NodeType {
        
        let collection = CollectionNode(key: self.state.id, parent: self, create: {
            let collectionView = UICollectionView(frame: .zero, collectionViewLayout: self.setFlowLayout())
            collectionView.showsHorizontalScrollIndicator = false
            collectionView.showsVerticalScrollIndicator = false
            collectionView.clipsToBounds = false
            collectionView.backgroundColor = UIColor.clear
            collectionView.reloadData()
            return collectionView
            
        }) { (view, layout, size) in
            layout.percent.width = 100%
            layout.percent.height = 100%
            configs[self.state.layoutAs]!(layout)
        }
        return collection.add(children: self.state.elements)
    }
    
    func setFlowLayout() -> UICollectionViewLayout {
        let layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsetsMake(30, 10, 10, 10)
        layout.minimumInteritemSpacing = 10
        layout.minimumLineSpacing = 15
        return layout
    }
}

You'll notice I'm customizing the collectionView, CollectionNode is using with the create: closure so I can control the layout and set other properties, however not everything works as expected.

I tried to get access to the cell's view so that I could set clipsToBounds to False, since it clips the shadows off my cards, but I'm not sure how to properly customize cells using CollectionNode. As always your help is so appreciated! :)

Hi Alex, I have another question. I've been working with CollectionNode and got it working pretty well displaying a set of cards. I can display them in a grid layout and a vertical scrolling flow layout, but I haven't been able to figure out how to change the layout direction and display them in a horizontal scrolling flow layout like a carousel. Is this possible? I tried quite a few Yoga layout commands but wasn't able to change the flow direction.

Any help would be appreciated!

Jason W.

Hello,

since TableNode does not support UIRefreshControl for pull to refresh I tried using regular UITableView with ComponentTableViewCell but the height of the cells was not calculated properly :(

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 !

I was reading through the React documentation and they talked about adding lifecycle hooks to a class: https://facebook.github.io/react/docs/state-and-lifecycle.html

with componentDidMount() and componentWillUnmount()

These component methods would be very handy in addition to the willUpdate() and didUpdate() methods already available.

For example, I want to trigger animations when I create and present a component to the screen and also I want to trigger another just before the component is removed.

Thanks for your consideration! :)

Hello,

First off thanks for the AWESOME library! So I recently updated my version of Render from 3.2 to 4.3 which wasn't too bad but now it seems like the Yoga values I set for "layout" seem to now be ignored for any of my nested "children" components! Is this a known issue? I saw that in the notes for the 4.3 release this exact issue may have been fixed but I don't see any relevant code for the fix included with the commit? Any ideas? Cheers! -mo

So I was playing with the TableNode this whole day and did not manage to add UIRefreshControl so it stays there. Do you think you could implement this feature with TableNode?

Is logic/code behind Render generic enough to be cross-platform? Is Render tightly coupled with iOS components?

For example, if I want to render web components or run Render on Android, how can I use (or extend) Render to do that? How is Render compared to SwiftWebUI?