Can't get basic layout to work

[A-Walrus]

Trying to have a row of squares with text centered within them. Can't seem to get it to work. I tried

  view.add(
    <Layout layout  gap={20} padding={20}>
      <Rect width={100} height={100} fill="gray" radius={15}><Txt>0</Txt></Rect>
      <Rect width={100} height={100} fill="gray" radius={15}><Txt>1</Txt></Rect>
      <Rect width={100} height={100} fill="gray" radius={15}><Txt>2</Txt></Rect>
      <Rect width={100} height={100} fill="gray" radius={15}><Txt>3</Txt></Rect>
    </Layout>
  );

which results in:

tried messing around with layout={false} on the children, and some other properties but nothing seems to work.

Any help appreciated, thanks!

[RithwikAnand]

You might want to try this:

    <Layout layout gap={20} padding={20}>
      <Rect width={100} height={100} fill="gray" radius={15} layout justifyContent="center" alignItems="center"><Txt>0</Txt></Rect>
      <Rect width={100} height={100} fill="gray" radius={15} layout justifyContent="center" alignItems="center"><Txt>1</Txt></Rect>
      <Rect width={100} height={100} fill="gray" radius={15} layout justifyContent="center" alignItems="center"><Txt>2</Txt></Rect>
      <Rect width={100} height={100} fill="gray" radius={15} layout justifyContent="center" alignItems="center"><Txt>3</Txt></Rect>
    </Layout>

[A-Walrus]

Thanks that works!
I'm still wondering if there is a nicer way to this, since if the Rects aren't in a layout the Txt is just naturally centered.
Shouldn't there be a way to tell the layout to stop propagating and treat the Rects like normal?

[aarthificial]

@A-Walrus
You can do that by setting layout={false} on the Txt itself. This will position it in the center of the Rect as if there was no layout.

[A-Walrus]

That doesn't seem to work:

export default makeScene2D(function*(view) {
  view.add(
    <Layout layout gap={20} padding={20}>
      <Rect width={100} height={100} fill="gray" radius={15}><Txt layout={false}>0</Txt></Rect>
      <Rect width={100} height={100} fill="gray" radius={15}><Txt layout={false}>1</Txt></Rect>
      <Rect width={100} height={100} fill="gray" radius={15}><Txt layout={false}>2</Txt></Rect>
      <Rect width={100} height={100} fill="gray" radius={15}><Txt layout={false}>3</Txt></Rect>
    </Layout>
  );
});

could this be a bug?

[aarthificial]

Apologies, I forgot that Txt nodes force-enable layout because they use it to lay out the text inside them.
Setting layout={false} would work if you had a different node inside, say a Circle.

Well then, justifyContent would be the way to go in this case.
Alternatively, you could wrap the Txt in it's own Layout and disable it this way:

<Rect width={100} height={100} fill="gray" radius={15}>
  <Layout layout={false}>
    <Txt>0</Txt>
  </Layout>
</Rect>

But that's probably more verbose than justifyContent + alignItems