Skip to main content

Creating a Primitive Component

Primitive Components can be used to render views or drawables on the screen.

Comparison with KComponents​

There are several similarities between Primitive Components and KComponents:

  • They both consist of a render function that can use the component's props and hooks.
  • As with KComponents, Primitive Components are subject to rules for their use.
  • Just like KComponents, Primitive Components can be configured using common props and state.

Creating a Primitive Component​

The following example shows a Primitive Component that creates an ImageView to be rendered on the screen.

class SimpleImageViewPrimitiveComponent(private val style: Style? = null) : PrimitiveComponent() {

  override fun PrimitiveComponentScope.render(): LithoPrimitive {
    return LithoPrimitive(primitive = SimpleImageViewPrimitive, style = style)
  }
}

internal val PrimitiveComponentScope.SimpleImageViewPrimitive
  get() =
      Primitive(
          layoutBehavior = ImageLayoutBehavior,
          mountBehavior =
              MountBehavior(ViewAllocator { context -> ImageView(context) }) {
                bind(R.drawable.ic_launcher) { imageView ->
                  imageView.setImageDrawable(drawableRes(R.drawable.ic_launcher))
                  onUnbind { imageView.setImageResource(0) }
                }
              })
note

The above example explicitly creates a Primitive object. But for convenience, you can also pass layoutBehavior and mountBehavior directly to LithoPrimitive.

A Primitive represents a reusable unit responsible for hosting the logic to create, measure, and bind the content that the Primitive Component will render. For more information, see the Lifecycle of a Primitive Component page.

As can be seen from the above example, the render() function returns a LithoPrimitive that contains:

  • A Primitive object that describes a primitive to be rendered
  • A style object that is applied to the primitive component.
note

The render() method can be invoked from multiple threads. You should not assume it can only be called from the main thread. The implementation of render should not cause side-effects; essentially, it acts like a pure function.