How to implement part of sections with LinearLayoutManager and part with GridLayoutManager?

Question

I have many different types of views in recycler spec.

@LayoutSpec
object AdPageSpec {
    @OnCreateLayout
    fun onCreateLayout(c: ComponentContext, @Prop model: List<AdPageItem>): ComponentLayout {
        return RecyclerCollectionComponent.create(c)
                .disablePTR(true)
                .section(
                        DataDiffSection.create<AdPageItem>(SectionContext(c))
                                .data(model)
                                .renderEventHandler(AdPage.onRender(c))
                                .build()
                )
                .buildWithLayout()
    }

    @OnEvent(RenderEvent::class)
    fun onRender(c: ComponentContext, @FromEvent model: AdPageItem): RenderInfo {
        when (model) {
            is TopDetailsItem -> ...
            is DescrItem -> ...
            is ParamItem -> ...
            is GridItem -> ...
        }

Everything works fine but at some point I need items to be laid in GridLayoutManager fashion.

Does anybody knows how to achieve this with litho?

Answer 1

The current 0.11.1-SNAPSHOT version of litho supports StaggeredGridRecyclerConfiguration which allows building such UI. Basically, we need to instantiate RecyclerCollectionComponent

RecyclerCollectionComponent.create(c)
                .recyclerConfiguration(
                        StaggeredGridRecyclerConfiguration<SectionBinderTarget>(3)
                )
                .section(...)
                .build()

And if we want an item to occupy full span we need to set isFullSpan when creating render info:

 @OnEvent(RenderEvent::class)
    fun onRender(c: SectionContext,
    ): RenderInfo {
        return when (model) {
            is ImagesItem -> ComponentRenderInfo.create()
                        .isFullSpan(true)
                        .component(...)
                        .build()
    }

Note that ViewRenderInfo is not supported yet, therefore you have to create your own MountSpecs for each custom view. But you can vote for this issue here