Skip to main content

Built-in widgets

This page covers the basic built-in widgets. For the full list of components and APIs, see the Widget Example list here.

Text​

Shows simple text (the equivalent of an Android TextView within Litho).

Required Prop​

  • text: CharSequence - text to display.

Usage​

Text has numerous optional props that can be used style text, just as with TextView since both use android.text.Layout under the hood.

Text(
    text = "This is my example text",
    textSize = 12.sp,
    textColor = Color.RED,
    alignment = TextAlignment.CENTER,
),

Text alignment​

Use the alignment prop with a TextAlignment value to control horizontal alignment within the Text component's bounds. TextAlignment is RTL-aware: prefer TEXT_START / TEXT_END (which flip based on layout direction) over LEFT / RIGHT (which are absolute) for left-align / right-align. Use CENTER for centered text.

import com.facebook.litho.kotlin.widget.Text
import com.facebook.litho.widget.TextAlignment

Text(text = "Centered", alignment = TextAlignment.CENTER)
Text(text = "Left-aligned (RTL-aware)", alignment = TextAlignment.TEXT_START)
Text(text = "Right-aligned (RTL-aware)", alignment = TextAlignment.TEXT_END)

Emoji​

Emoji characters are just Unicode codepoints — render them with the Text component like any other string. No special widget is needed; textColor and other text props apply normally.

Text(text = "Hello 👋")  // "Hello 👋"

TextInput​

Renders an editable text input using an Android EditText.

Required Prop​

None.

Usage​

As this component is backed by Android's EditText, many native capabilities are applicable:

  • Use an android.text.InputFilter to set a text length limit or modify text input.
  • Change the input representation by passing an android.text.InputType constant.
  • For performance reasons, avoid recreating the Component with different props to change its configuration. Instead, use Event triggers OnTrigger to update text, request view focus or set selection. For example, TextInput.setText(c, "myTextInputKey", "myText").
TextInput(
    initialText = "Initial text",
    multiline = true,
    inputType = InputType.TYPE_CLASS_TEXT,
    inputFilter = InputFilter.LengthFilter(/* maxLength= */ 10),
    style = Style.width(200.dp),
),

Image​

Displays a drawable.

Required Prop​

  • drawable: Drawable - drawable to display.

Usage​

Image(
    drawable = drawableRes(R.drawable.ic_launcher),
    scaleType = ImageView.ScaleType.CENTER_CROP,
    style = Style.height(100.dp).width(100.dp),
),

Card​

The Litho equivalent of an Android CardView. Card applies borders with shadows/elevation to a given component. If your card is rendered on top of a dynamically coloured background that cannot be 'faked' using the Card component, use the less performant prop transparencyEnabled(true).

Required Prop​

  • child: Component - the component to decorate.

Usage​

Card(
    cardBackgroundColor = Color.YELLOW,
    cornerRadius = 5.dp,
    clippingColor = Color.RED,
    style = Style.width(120.dp).height(60.dp),
    child = {
      Column(
          style = Style.height(60.dp),
          alignItems = YogaAlign.CENTER,
          justifyContent = YogaJustify.CENTER,
      ) {
        child(Text("my content"))
      }
    },
),

SolidColor​

Renders a solid colored rectangle. Use SolidColor for colored placeholder rectangles and skeleton loaders. For dividers, separator lines, hairlines, and threading indicators, use HorizontalDivider or VerticalDivider; they preserve thickness while stretching on the correct axis.

Required Prop​

  • color: Int - color to display.

Usage​

Basic colored rectangle:

SolidColor(
    color = Color.RED,
    style = Style.height(40.dp).width(120.dp),

Skeleton loader placeholder (multiple SolidColor rectangles stacked vertically):

import com.facebook.litho.widget.SolidColor

Column(style = Style.padding(all = 16.dp).gap(column = 12.dp)) {
  child(SolidColor(color = Color.LTGRAY, style = Style.width(200.dp).height(50.dp)))
  child(SolidColor(color = Color.LTGRAY, style = Style.width(280.dp).height(50.dp)))
  child(SolidColor(color = Color.LTGRAY, style = Style.width(160.dp).height(50.dp)))
}

Import​

import com.facebook.litho.widget.SolidColor

Progress​

Renders an infinitely spinning progress bar backed by the Android's ProgressBar.

Required Prop​

None.

Usage​

Progress(style = Style.height(40.dp).width(40.dp)),

Spinner​

A simple spinner (dropdown) component. Derived from the standard Android Spinner.

Required Props​

  • options: List<String> - list of selection options.
  • selectedOption: String - the currently selected option.

Usage​

Spinner(
    options = myOptions,
    selectedOption = myOptions.get(0),
    onItemSelected = {},
    style = Style.width(200.dp),
),

HorizontalDivider​

A horizontal divider that fills its available width while preserving its requested thickness.

Required Prop​

None.

Usage​

HorizontalDivider(
    color = 0xFF0000FF.toInt(),
    thickness = 2.dp,
    style = Style.margin(vertical = 8.dp),
),

Import​

import com.facebook.litho.kotlin.widget.HorizontalDivider

VerticalDivider​

A vertical divider that fills its available height while preserving its requested thickness. Prefer it over adding flex(grow = 1f) to a SolidColor, which can grow the line's width in a row.

Required Prop​

None.

Usage​

VerticalDivider(
    color = 0xFF00FF00.toInt(),
    thickness = 2.dp,
    style = Style.margin(horizontal = 8.dp),
),

Import​

import com.facebook.litho.kotlin.widget.VerticalDivider

VerticalScroll​

Wraps another component, allowing it to be vertically scrollable. It's analogous to Android's ScrollView.

Required Prop​

  • child: Component - a component to vertically scroll.

Usage​

VerticalScroll(style = Style.height(120.dp).width(250.dp)) {
  Column { getComponents(this) }
},

HorizontalScroll​

Wraps another component, allowing it to be horizontally scrollable. It's analogous to Android's HorizontalScrollView.

Required Prop​

  • child: Component - a component to horizontally scroll.

Usage​

HorizontalScroll(style = Style.width(250.dp)) { Row { getComponents(this) } },

Recycler​

Recycler is the equivalent of Android's RecyclerView. It's recommended to use LazyList and LazyGrid for efficient list rendering, which use Recycler under the hood.

For legacy Sections-based lists, see RecyclerCollectionComponent in the Legacy Spec API section.