Litho provides a number of build-in components. You can find the full list of components and APIs within our javadocs for the com.facebook.litho.widget package.
We'll show and explain here a list of the most basic widgets.
Font Size: bold italic Size Vertical Size: Horizontal Size: Border Border Radius: Border Size: Box Shadow Text Shadow Vertical Position: Horizontal Position: Blur Radius:TextTextInputImageCardSolidColorProgressSpinnerVerticalScrollHorizontalScrollRecycler
This is the most basic Litho component to show simple text. It's the equivalent of an Android
TextView within Litho.
CharSequence text: Text to display.
Text has numerous optional props you can use to style your text, same as
TextView since both use
android.text.Layout under the hood. A full list of them is available in the javadocs.
Most props directly accept resources ids too.
Component that renders an editable text input using an Android
Because this component is backed by Android's
EditText, many native capabilities are applicable!
- Use an
android.text.InputFilterto set a text length limit or modify text input.
- Change the input representation by passing an
- For performance reasons, avoid re-creating the Component with different props to change its configuration. You can instead use Event triggers
OnTriggerto update text, request view focus or set selection. e.g.
TextInput.setText(c, "myTextInputKey", "myText").
A component that is able to display drawable resources.
Drawable drawable: Drawable to display.
The Litho equivalent of an Android
Card applies borders with shadows/elevation to a given component.
If your card is rendered on top of a dynamically colored background which cannot be "faked" using the
Card component, use the less performant prop
Component content: The component to decorate.
A simple Component to render solid color.
int color: Color to display.
Renders an infinitely spinning progress bar backed by the Android's
A simple spinner (dropdown) component. Derived from the standard Android
List<String> options: List of possible options to select from.
String selectedOption: Currently selected option.
Component that wraps another component, allowing it to be vertically scrollable. It's analogous to Android's
Component childComponent: Component to vertically scroll.
Component that wraps another component, allowing it to be horizontally scrollable. It's
analogous to Android's
Component contentProps: Component to horizontally scroll.
Recycler is the equivalent of Android's
RecyclerView. We suggest you to use Sections for efficient lists rendering, which is using
Recycler under the hood.
However, if you really want to use
Recycler directly, we have an advanced guide dedicated to it.