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 com.facebook.litho.widget package in javadocs.

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.

A full list of the optional props is available in the javadocs.

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

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))

Image​

Displays a drawable.

Required Prop​

  • drawable: Drawable - drawable to display.

Usage​

Image(
    drawable = drawableRes(R.drawable.ic_launcher),
    scaleType = ImageView.ScaleType.CENTER_CROP)

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(cornerRadius = 5.dp, clippingColor = Color.RED, child = { Text("my content") })

SolidColor​

Renders solid color.

Required Prop​

  • color: Int - color to display.

Usage​

SolidColor(color = Color.RED)

Progress​

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

Required Prop​

None.

Usage​

Progress(indeterminateDrawable = drawableRes(R.drawable.ic_launcher))

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 = {})

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(100.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 { Row { getComponents(this) } }

Recycler​

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

To use the Recycler directly, see the RecyclerCollectionComponent page.