nodegui / react-nodegui

Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀
https://react.nodegui.org
MIT License
6.18k stars 171 forks source link

Width Percentage #129

Open gluax opened 4 years ago

gluax commented 4 years ago

Describe the bug Having a View with a flex row layout and two children Views with different width: 'x%' fields doesn't render properly.

To Reproduce

import React from "react";
import {
  Renderer,
  Window,
  View,
} from "./index";

const App = () => {
  return (
    <Window styleSheet={containerStyle}>
      <View id="container">
            <View id="left"></View>
            <View id="right"></View>
          </View>
    </Window>
  );
};

const containerStyle = `
#container {
  flex: 1;
  flex-direction: row;
}

#left {
  background: red;
  flex: 1;
  width: '20%';
  height: '100%';
}

#right {
  background: green;
  flex: 1;
  width: '80%';
  height: '100%';
}
`;

Renderer.render(<App />);

Expected behavior The Views should use the specified width percentages.

Screenshots image

Desktop (please complete the following information):

kriptonhaz commented 3 years ago

do you start this project from CRA template? if so I encounter this problem too, but if I clone the repo with the version react nodegui 0.10.2 everything seems to be fine (using a percentage in style) but with the version from CRA template seems to be broken