Big Nerd Ranch

From the previous blog, how can we dismiss loadin spinner after data has been loaded. SectionLifecycle.dispatchLoadingEvent We can send loading event to GroupSection to stop loading. We can simple add one line of code to onDataLoaded(). HeroesComponent.dispatchLoadingEvent(c, false, LoadingEvent.LoadingState.SUCCEEDED, null) Your onDataLoaded() will look like following now. @OnEvent(HeroModel::c..

We are using static items for hero list. What do we do if I want to load data from a service. We are going to use same data but we will use data loader instead of hard coded data. Let's initialise hero data first. We need to provide @OnCreateInitialState annotate function to do this in HeroesComponentSpec. @GroupSectionSpec object HeroesComponentSpec { @OnCreateInitialState fun onCreateInitialSt..

We're going to display list of hero name, image and description on the screen. You can think I am gonna build RecyclerView using Litho. Let's define data class for hero first. data class Hero( val name: String, val description: String, @DrawableRes val image: Int)It's straightforward and let's prepare hero data. package com.mpark.android.marblecharacters class DataLoader { compan..

GroupSection Spec's Lifecylce looks like following: GroupSection Spect has lifecycle in order below: @OnCreateInitialState To set an initial value for a state, you have to write a method annotated with @OnCreateInitialState in your spec. The first parameter must be of type ComponentContext. StateValue and @Prop are allowed. For example, @LayoutSpec object CheckboxSpec { @OnCreateInitialState fun..

Let's implement CharactersComponentSpec to display text list. @OnCreateChildren internal fun onCreateChildren(c: SectionContext): Children { val builder: Children.Builder = Children.create() (1..10).forEach { builder.child( SingleComponentSection.create(c) .key(it.toString()) .component( Text.create(c) .text("Item$it") .textSizeSp(20f) .heightDip(48f) .build() ) .build() ) } return builder.build..

Litho is quite well optimised for list data and can have better performance when you display many data and complex layout on the screen. Of course, you can do simple screen like Hello word but Litho is more powerful when we use it for large dataset and complex UI. Big win of Litho is that it measure size and calculate positions and ready to draw in a background and job in UI thread becomes much ..

Setup My code is fully based on Kotlin. Latest version of Litho I am writing is 0.31.0 . Add the following dependencies to your app module build.gradle. //litho implementation 'com.facebook.litho:litho-core:0.31.0' implementation 'com.facebook.litho:litho-widget:0.31.0' compileOnly 'com.facebook.litho:litho-annotations:0.31.0' kapt 'com.facebook.litho:litho-processor:..