Skip to main content

Coding Style

Content will be updated

This page was moved from the old website without any change and might be updated

Guidelines:#

  • Name your specs consistently with NAMEComponentSpec to generate a component called NAMEComponent.
  • The ComponentContext argument should be simply called c to make your layout code less verbose and more readable.
  • Use resource types (ResType.STRING, ResType.COLOR, ResType.DIMEN_SIZE, etc) where appropriate to make it easier to set prop values from Android resources.
  • Declare all required props first then optional ones (optional = true).
  • Declare common props (props defined for all Components on Component.Builder) after the component's own props.
  • Use static imports on all layout enums (YogaEdge, YogaAlign, YogaJustify, etc) to reduce your layout code and make it more readable.
  • Lifecycle methods, such as @OnCreateLayout, are static and package-private.
  • Use inline conditionals on optional children to keep the layout construction code fluent if possible.
  • If you are constructing a child container, add the container in the following line. This gives the code a layout like construction.

Here is some sample code with our styling guidelines:

@LayoutSpec
class MyComponentSpec {
@OnCreateLayout
static Component onCreateLayout(
ComponentContext c,
@Prop(resType = STRING) String title,
@Prop(optional = true) Drawable image) {
return Row.create(c)
.alignItems(CENTER)
.paddingRes(R.dimen.some_dimen)
.child(
Image.create(c)
.drawable(image)
.width(40)
.height(40)
.marginRes(RIGHT, R.dimen.my_margin))
.child(TextUtils.isEmpty(title) ? null :
Text.create(c)
.text(title)
.textColorAttr(R.attr.textColorTertiary)
.marginDip(5)
.flexGrow(1f))
.build();
}
}