Open kristianmandrup opened 8 years ago
@silvenon, @heldr do you think we could make our lib work for react-native?
@roylee0704 no idea, I have never played with React Native. But we can try :grin:
@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.
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/
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;
}
Neither do I played with react-native, but sounds a good start the code above
@kristianmandrup I might not be having time at the moment, but feel free to pr!
Just came across this one. It looks good: https://github.com/idibidiart/react-native-responsive-grid
What do you think?
@kristianmandrup I built react native support here 💪🏻 https://github.com/a-tokyo/react-native-flex-grid
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...