no rendered output

[devsnek]

terminal:

react devtools:

[Yomguithereal]

hello @devsnek. It will be hard for me to help you without any kind of code as I don't know what to make of your screenshots. However I see some katakana chars and I know blessed can have issues with non-ascii chars so you should maybe test the fullUnicode or forceUnicode screen settings documented here: https://github.com/chjj/blessed ?

[devsnek]

@Yomguithereal i use fullUnicode and forceUnicode. managed to get a simpler repro though:

const screen = blessed.screen({
  autoPadding: true,
  smartCSR: true,
  fullUnicode: true,
  forceUnicode: true,
  sendFocus: true,
  title: 'aaa',
});

render(
  <element>
    <box>hello</box>
    <box>hi</box>
  </element>
, screen);

[Yomguithereal]

@devsnek your example produce the correct result as blessed interpret this as "stack those two boxes on top of one another". Try this for instance:

const screen = blessed.screen({
  autoPadding: true,
  smartCSR: true,
  fullUnicode: true,
  forceUnicode: true,
  sendFocus: true,
  title: 'aaa',
});

render(
  <element>
    <box>hello</box>
    <box top="20%">hi</box>
  </element>
, screen);

One point you may have is that, if I recall correctly, blessed List widget is not very suited to React declarative logic because of its imperative implementation.

[devsnek]

How do i display lines of text without manually giving each one a top offset?

[Yomguithereal]

I haven't been using blessed since at least 2-3 years now so I may be forgetting something but I don't remember blessed having dynamic layout options. Which means you either need to give a top offset yourself (which is not too complicated to wrap as a custom component if your list don't need incremental updates), or wrap the list/table components using refs and hooks etc. to allow the imperative parts of blessed to be used declaratively within react's workflow.