zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-15 12:07:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

[change] Default flex-basis value of Views

Browse Source 
React Native has an implementation of flexbox that does not quite follow the
W3C spec for flexbox. Previously, React Native for Web attempted to replicate
the React Native rendering by setting flexBasis to 0%. However, this created
its own problems where views could collapse down to 0px in height on the web.
This patch relies sets the default flexBasis back to 'auto'. This will cause
different rendering inconsistencies with React Native, which can be addressed
by making changes to existing React Native styles. And ultimately, it is up to
Yoga to correct its flexbox implementation.

Fix #1640
Fix #1604
Fix #1264
Close #1265
This commit is contained in:
Nicolas Gallagher
2020-08-25 16:28:32 -07:00
parent bf2e10d482
commit 108366a724
3 changed files with 5 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
View File

@@ -11,7 +11,7 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
[stylesheet-group=\\"1\\"]{}
.css-view-1dbjc4n{-ms-flex-align:stretch;-ms-flex-direction:column;-ms-flex-negative:0;-ms-flex-preferred-size:auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-basis:auto;-webkit-flex-direction:column;-webkit-flex-shrink:0;align-items:stretch;border:0 solid black;box-sizing:border-box;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-height:0px;min-width:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;z-index:0;}
[stylesheet-group=\\"2\\"]{}
.r-flex-13awgt0{-ms-flex-negative:1;-ms-flex-positive:1;-ms-flex-preferred-size:0%;-webkit-box-flex:1;-webkit-flex-basis:0%;-webkit-flex-grow:1;-webkit-flex-shrink:1;flex-basis:0%;flex-grow:1;flex-shrink:1;}
.r-flex-13awgt0{-ms-flex-negative:1;-ms-flex-positive:1;-webkit-box-flex:1;-webkit-flex-grow:1;-webkit-flex-shrink:1;flex-grow:1;flex-shrink:1;}
[stylesheet-group=\\"2.2\\"]{}
.r-pointerEvents-12vffkv>*{pointer-events:auto;}
.r-pointerEvents-12vffkv{pointer-events:none!important;}"

13
packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js vendored
View File

@@ -42,7 +42,6 @@ describe('StyleSheet/createReactDOMStyle', () => {
describe('flexbox styles', () => {
test('flex: -1', () => {
expect(createReactDOMStyle({ flex: -1 })).toEqual({
flexBasis: 'auto',
flexGrow: 0,
flexShrink: 1
});
@@ -51,24 +50,21 @@ describe('StyleSheet/createReactDOMStyle', () => {
test('flex: 0', () => {
expect(createReactDOMStyle({ flex: 0 })).toEqual({
flexGrow: 0,
flexShrink: 0,
flexBasis: '0%'
flexShrink: 0
});
});
test('flex: 1', () => {
expect(createReactDOMStyle({ flex: 1 })).toEqual({
flexGrow: 1,
flexShrink: 1,
flexBasis: '0%'
flexShrink: 1
});
});
test('flex: 10', () => {
expect(createReactDOMStyle({ flex: 10 })).toEqual({
flexGrow: 10,
flexShrink: 1,
flexBasis: '0%'
flexShrink: 1
});
});
@@ -95,8 +91,7 @@ describe('StyleSheet/createReactDOMStyle', () => {
// can flex-shrink override the 'flex' expansion?
expect(createReactDOMStyle({ flex: 1, flexShrink: 2 })).toEqual({
flexGrow: 1,
flexShrink: 2,
flexBasis: '0%'
flexShrink: 2
});
});
});

3
packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js vendored
View File

@@ -106,15 +106,12 @@ const createReactDOMStyle = style => {
if (value > 0) {
resolvedStyle.flexGrow = value;
resolvedStyle.flexShrink = 1;
resolvedStyle.flexBasis = '0%';
} else if (value === 0) {
resolvedStyle.flexGrow = 0;
resolvedStyle.flexShrink = 0;
resolvedStyle.flexBasis = '0%';
} else if (value === -1) {
resolvedStyle.flexGrow = 0;
resolvedStyle.flexShrink = 1;
resolvedStyle.flexBasis = 'auto';
}
break;
}