Components and Props

In this section of the tutorial, you'll learn the basic Litho building blocks then create your first component that uses props.

Basic Litho building blocks

Basic Terminology

• Component - all user-interactable elements in the UI (such as buttons, checkboxes, scrollbars, lists, menus, and text fields) that you see in the application are components. To be used, a component must be placed in a container. For more information, see the Components page in the 'Main Concepts' section.
• Container component - arranges groups of components in a layout.
• Prop - an item of data that cannot be changed (making it 'immutable') during the associated component's lifecycle. For more information, see the Types of Props page in the 'Main Concepts' section.

To display the classic "Hello, World!" text on the screen with Litho, you need to integrate the Litho component hierarchy into your View hierarchy. To illustrate this, the "Hello, World" code (MyActivity.kt), from the Setting up the Project section of the tutorial, is shown below:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.facebook.litho.Component
import com.facebook.litho.ComponentScope
import com.facebook.litho.KComponent
import com.facebook.litho.LithoView
import com.facebook.litho.kotlin.widget.Text
import com.facebook.rendercore.dp

class MyActivity : AppCompatActivity() {

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

    val lithoView = LithoView.create(this /* context */, MyComponent())
    setContentView(lithoView)
  }
}

class MyComponent() : KComponent() {
  override fun ComponentScope.render(): Component {
    return Text(text = "Hello, World!", textSize = 50.dp)
  }
}

Key Points in MyActivity.kt

• LithoView - a hierarchy of Litho components is rendered using a LithoView.
• Text(...) - the 'Text' component (this is how you create an instance of a component (both built-in and those you define yourself).
• Text(...) - assigns values to the props text and textsize.

Create your first component

Previously, you used a built-in Text component. Now, you'll define your own using the following 'HelloComponent.kt' code. As with the above, your 'first' component can also declare props:

class HelloComponent(private val name: String) : KComponent() {

  override fun ComponentScope.render(): Component {
    return Text(text = "Hello $name!")
  }
}

Key Points in HelloComponent.kt

• KComponent - a class needed to extend in order to create components.
• val name - holds an immutable String prop named name that cannot be changed during the lifecycle of the component.
• render - function override that returns what your component should render.
• Text(...) - returns an instance of the Text component with its text prop set to the string "Hello $name'.

tip

Lots of code autocompletion and class templates can be found in the Litho Android Studio plugin!

Use you first component

To use your component, just replace the Text component in the "Hello, World!" example with an instance of your HelloComponent:

setContentView(LithoView.create(this, HelloComponent(name = "Linda")))

What next?

The next section of the tutorial Introducing Layout helps you become familiar with building layouts using Flexbox.

For more information, see the Components and Props pages of the 'Main Concepts' section.