[CSS] "width: 100%" seems to not work inside of Unity

[kumorikuma]

I'm seeing an issue in a pretty simple example where setting a % on the width in CSS on a view object doesn't seem to work. In this example, the 'gradient-rule' class should stretch but it doesn't in Unity. It does however, render fine in the browser previewer.

Expected Behavior: a red box is rendered
Actual Behavior: red box is width 0 and not rendered

index.tsx

import { render } from '@reactunity/renderer';
import './index.scss';

function App() {
  return (<view className="black-bar">
    <view className="content">
      <h1 className="title">Title</h1>
      <view className="gradient-rule"></view>
      <p className="message">Message text</p>
    </view>
  </view>);
}

render(<App />);

index.scss

.black-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.gradient-rule {
  height: 4px;
  background-color: red;
  // align-self: stretch /* Works */
  width: 100%;  /* Doesn't work */
  // width: 250px;  /* Works */
}

[gkurt]

This seems to happen when the element has percentage width and its parent has auto width. I thought Yoga would handle this case, but apparently it does not. This requires multi-pass calculation so maybe they don't have it for performance reasons. I will open an issue in Yoga and try to fix this.