Does this work with flexbox for React Native? Would be awesome if it did...

[kristianmandrup]

Currently so cumbersome to do layout in React Native using styles. I've only found this one: https://github.com/jerolimov/react-native-layout

Which tries to achieve something similar...

[roylee0704]

@silvenon, @heldr do you think we could make our lib work for react-native?

[silvenon]

@roylee0704 no idea, I have never played with React Native. But we can try :grin:

[roylee0704]

@kristianmandrup, we heard you, any suggestions on how to make it to work for react-native? Because I personally have never played with React Native as well.

[kristianmandrup]

Perhaps look here: http://moduscreate.com/react-native-layout-system/ https://facebook.github.io/react-native/docs/style.html#content https://facebook.github.io/react-native/docs/view.html#style https://facebook.github.io/react-native/docs/flexbox.html#content

Some React Native layout systems: https://github.com/thewei/react-native-grid https://github.com/jerolimov/react-native-layout https://www.npmjs.com/package/react-layout-components

Made an issue https://github.com/kristoferjoseph/flexboxgrid/issues/164 about this

Would require another flexboxgrid.css made for the constraints imposed by the native flex model...

Playtime in the browser with native simulator :) https://rnplay.org/apps/cUZvnA

CSS can be used with https://github.com/sabeurthabti/react-native-css Any rem must be converted to "relative pixels" equivalent (ie. 16 px for each rem I think). flex-basis would just become flex I think?

http://stackoverflow.com/questions/32660706/react-native-stylesheet-what-does-flex1-do https://github.com/jmstout/react-native-viewport-units

Could also look here: https://github.com/necolas/react-native-web http://www.reactnative.com/a-whole-lotta-react-native-styles/

[kristianmandrup]

Something like the following is a start:

var {vw, vh, vmin, vmax} = require('react-native-viewport-units');

Would need the margin-left and such to be calculated relative to viewport size.

:root {
  --gutter-width: 1 * 16;
  --outer-margin: 2 * 16;
  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
  --half-gutter-width: calc((var(--gutter-width) * 0.5));
  --xs-min: 30;
  --sm-min: 48;
  --md-min: 64;
  --lg-min: 75;
  --screen-xs-min: var(--xs-min)em;
  --screen-sm-min: var(--sm-min)em;
  --screen-md-min: var(--md-min)em;
  --screen-lg-min: var(--lg-min)em;
  --container-sm: calc(var(--sm-min) + var(--gutter-width));
  --container-md: calc(var(--md-min) + var(--gutter-width));
  --container-lg: calc(var(--lg-min) + var(--gutter-width));
}

@custom-media --sm-viewport only screen and (min-width: 48em);
@custom-media --md-viewport only screen and (min-width: 64em);
@custom-media --lg-viewport only screen and (min-width: 75em);

.container-fluid {
  padding-right: var(--outer-margin, 2 * 16);
  padding-left: var(--outer-margin, 2 * 16);
}

.row {
  box-sizing: border-box;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: var(--gutter-compensation, -0.5 * 16);
  margin-left: var(--gutter-compensation, -0.5 * 16);
}


.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
  box-sizing: border-box;
  flex: 1;
  padding-right: var(--half-gutter-width, 0.5 * 16);
  padding-left: var(--half-gutter-width, 0.5 * 16);
}

.col-xs {
  flex: 1;
}

.col-xs-1 {
  flex: 8.333;
}

.col-xs-2 {
  flex: 16.666;
}

.col-xs-3 {
  flex: 25;
}

.col-xs-4 {
  flex: 33.333;
}

.col-xs-5 {
  flex: 41.667;
}

.col-xs-6 {
  flex: 50;
}

.col-xs-7 {
  flex: 58.333;
}

.col-xs-8 {
  flex: 66.667;
}

.col-xs-9 {
  flex: 75;
}

.col-xs-10 {
  flex: 83.333;
}

.col-xs-11 {
  flex: 91.667;
}

.col-xs-12 {
  flex: 100;
}

.col-xs-offset-0 {
  margin-left: 0;
}

.col-xs-offset-1 {
  margin-left: 8.333;
}

.col-xs-offset-2 {
  margin-left: 16.666;
}

.col-xs-offset-3 {
  margin-left: 25;
}

.col-xs-offset-4 {
  margin-left: 33.333;
}

.col-xs-offset-5 {
  margin-left: 41.667;
}

.col-xs-offset-6 {
  margin-left: 50;
}

.col-xs-offset-7 {
  margin-left: 58.333;
}

.col-xs-offset-8 {
  margin-left: 66.667;
}

.col-xs-offset-9 {
  margin-left: 75;
}

.col-xs-offset-10 {
  margin-left: 83.333;
}

.col-xs-offset-11 {
  margin-left: 91.667;
}

.start-xs {
  justify-content: flex-start;
  text-align: start;
}

.center-xs {
  justify-content: center;
  text-align: center;
}

.end-xs {
  justify-content: flex-end;
  text-align: end;
}

.top-xs {
  align-items: flex-start;
}

.middle-xs {
  align-items: center;
}

.bottom-xs {
  align-items: flex-end;
}

.around-xs {
  justify-content: space-around;
}

.between-xs {
  justify-content: space-between;
}

[heldr]

Neither do I played with react-native, but sounds a good start the code above

[roylee0704]

@kristianmandrup I might not be having time at the moment, but feel free to pr!

[Jonovono]

Just came across this one. It looks good: https://github.com/idibidiart/react-native-responsive-grid

What do you think?

[a-tokyo]

@kristianmandrup I built react native support here 💪🏻 https://github.com/a-tokyo/react-native-flex-grid