Skip to main content

Getting Started

This guide covers how to add Litho to your Android project.

Adding Litho Dependencies​

Litho is published to Maven Central. Add the dependencies to your module's build.gradle:

dependencies {
  implementation 'com.facebook.litho:litho-core:0.50.2'
  implementation 'com.facebook.litho:litho-widget-kotlin:0.50.2'
}

From Litho 0.51.0, Kotlin code that calls Litho hooks also has to be built with the Litho Gradle plugin. Apply it with the same version as the Litho dependencies, and add mavenCentral() to pluginManagement.repositories in settings.gradle:

plugins {
  id 'com.facebook.litho' version '<Litho version>'
}

Creating Your First Component​

Every Litho component extends KComponent() and overrides ComponentScope.render():

import com.facebook.litho.Component
import com.facebook.litho.ComponentScope
import com.facebook.litho.KComponent
import com.facebook.litho.kotlin.widget.Text
import com.facebook.rendercore.sp

class HelloWorldComponent : KComponent() {
    override fun ComponentScope.render(): Component {
        return Text(text = "Hello, World!", textSize = 24.sp)
    }
}

Displaying a Component in an Activity​

Use LithoView to display your component:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.facebook.litho.LithoView
import com.facebook.litho.kotlin.widget.Text
import com.facebook.rendercore.sp

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val lithoView = LithoView.create(this) {
            Text(text = "Hello, World!", textSize = 50.sp)
        }

        setContentView(lithoView)
    }
}

Adding Props and State​

Components can accept props (constructor parameters) and use hooks for state:

import com.facebook.litho.Column
import com.facebook.litho.Component
import com.facebook.litho.ComponentScope
import com.facebook.litho.KComponent
import com.facebook.litho.Style
import com.facebook.litho.core.padding
import com.facebook.litho.kotlin.widget.Text
import com.facebook.litho.useState
import com.facebook.litho.view.onClick
import com.facebook.rendercore.dp
import com.facebook.rendercore.sp

class GreetingComponent(
    private val name: String,
    private val style: Style = Style
) : KComponent() {
    override fun ComponentScope.render(): Component {
        val clickCount = useState { 0 }

        return Column(style = style + Style.padding(all = 16.dp)) {
            child(Text(
                text = "Hello, $name!",
                textSize = 24.sp
            ))
            child(Text(
                text = "Clicked ${clickCount.value} times",
                textSize = 16.sp,
                style = Style.onClick { clickCount.update { it + 1 } }
            ))
        }
    }
}

Using Layouts​

Use Row for horizontal layout and Column for vertical layout:

import com.facebook.litho.Column
import com.facebook.litho.Row
import com.facebook.litho.Style
import com.facebook.litho.core.margin
import com.facebook.litho.core.padding
import com.facebook.litho.flexbox.flex
import com.facebook.rendercore.dp
import com.facebook.yoga.YogaAlign

Column(
    alignItems = YogaAlign.CENTER,
    style = Style.padding(all = 16.dp)
) {
    child(Text(text = "Title"))
    child(Row(style = Style.margin(top = 8.dp)) {
        child(Text(text = "Left", style = Style.flex(grow = 1f)))
        child(Text(text = "Right"))
    })
}

Creating Scrollable Lists​

Use LazyList for efficient scrollable lists backed by RecyclerView:

import com.facebook.litho.widget.collection.LazyList

LazyList {
    children(items = users, id = { it.id }) { user ->
        UserRowComponent(name = user.name)
    }
}

Next Steps​