0.0.129

Add prefixes for flexbox (and other) support in IE10.

Ref #650

docs/storybook/3-demos/Game2048/Game2048.js

@@ -14,7 +14,6 @@
  * @providesModule Game2048
  * @flow
  */
-'use strict';
 
 import { any, func, object } from 'prop-types';
 import GameBoard from './GameBoard';

docs/storybook/3-demos/Game2048/GameBoard.js

@@ -14,7 +14,6 @@
  * @providesModule GameBoard
  * @flow
  */
-'use strict';
 
 // NB: Taken straight from: https://github.com/IvanVergiliev/2048-react/blob/master/src/board.js
 //     with no modification except to format it for CommonJS and fix lint/flow errors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.126",
+  "version": "0.0.129",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [

scripts/createPrefixer.js

@@ -7,7 +7,7 @@ const browserList = {
   firefox: 40,
   ios_saf: 7,
   safari: 7,
-  ie: 11,
+  ie: 10,
   ie_mob: 11,
   edge: 12,
   opera: 16,

src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap

@@ -38,7 +38,7 @@ exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
 .rn-textAlign-1ttztb7{text-align:inherit}
 .rn-textDecoration-bauka4{text-decoration:none}
 .rn-listStyle-1ebb2ja{list-style:none}
-.rn-alignItems-1oszu61{-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-alignItems-1oszu61{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
 .rn-borderTopStyle-1efd50x{border-top-style:solid}
 .rn-borderRightStyle-14skgim{border-right-style:solid}
 .rn-borderBottomStyle-rull8r{border-bottom-style:solid}
@@ -50,11 +50,10 @@ exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
 .rn-boxSizing-deolkf{box-sizing:border-box}
 .rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
 .rn-display-xoduu5{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}
-.rn-flexShrink-1qe8dj5{-webkit-flex-shrink:0;flex-shrink:0}
-.rn-flexShrink-1wbh5a2{-webkit-flex-shrink:1;flex-shrink:1}
-.rn-flexBasis-1mlwlqe{-webkit-flex-basis:auto;flex-basis:auto}
-.rn-flexBasis-1ro0kt6{-webkit-flex-basis:0%;flex-basis:0%}
-.rn-flexDirection-eqz5dr{-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-flexShrink-1pxmb3b{-ms-flex-negative:0 !important;-webkit-flex-shrink:0 !important;flex-shrink:0 !important}
+.rn-flexShrink-1awmn5t{-ms-flex-negative:1 !important;-webkit-flex-shrink:1 !important;flex-shrink:1 !important}
+.rn-flexBasis-7vfszb{-ms-flex-preferred-size:auto !important;-webkit-flex-basis:auto !important;flex-basis:auto !important}
+.rn-flexDirection-eqz5dr{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
 .rn-marginTop-1mnahxq{margin-top:0px}
 .rn-marginRight-61z16t{margin-right:0px}
 .rn-marginBottom-p1pxzi{margin-bottom:0px}
@@ -67,5 +66,6 @@ exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
 .rn-paddingLeft-gy4na3{padding-left:0px}
 .rn-zIndex-1lgpqti{z-index:0}
 .rn-zIndex-1wyyakw{z-index:-1}
-.rn-flexGrow-16y2uox{-webkit-flex-grow:1;flex-grow:1}</style>"
+.rn-flex-13awgt0{-ms-flex:1;-webkit-flex:1;flex:1}
+.rn-flexGrow-1m1wadx{-ms-flex-positive:1 !important;-webkit-flex-grow:1 !important;flex-grow:1 !important}</style>"
 `;

src/apis/Easing/index.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2016-present, Nicolas Gallagher.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule Easing
+ * @noflow
+ */
+
+import Easing from 'animated/lib/Easing';
+export default Easing;

src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js

@@ -26,44 +26,44 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
     test('flex defaults', () => {
       expect(createReactDOMStyle({ display: 'flex' })).toEqual({
         display: 'flex',
-        flexShrink: 0,
-        flexBasis: 'auto'
+        flexShrink: '0 !important',
+        flexBasis: 'auto !important'
       });
     });
 
     test('flex: -1', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: -1 })).toEqual({
         display: 'flex',
-        flexGrow: 0,
-        flexShrink: 1,
-        flexBasis: 'auto'
+        flexGrow: '0 !important',
+        flexShrink: '1 !important',
+        flexBasis: 'auto !important'
       });
     });
 
     test('flex: 0', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: 0 })).toEqual({
         display: 'flex',
-        flexGrow: 0,
-        flexShrink: 0,
-        flexBasis: 'auto'
+        flexGrow: '0 !important',
+        flexShrink: '0 !important',
+        flexBasis: 'auto !important'
       });
     });
 
     test('flex: 1', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: 1 })).toEqual({
         display: 'flex',
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: '0%'
+        flex: 1,
+        flexGrow: '1 !important',
+        flexShrink: '1 !important'
       });
     });
 
     test('flex: 10', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: 10 })).toEqual({
         display: 'flex',
-        flexGrow: 10,
-        flexShrink: 1,
-        flexBasis: '0%'
+        flex: 10,
+        flexGrow: '10 !important',
+        flexShrink: '1 !important'
       });
     });
 
@@ -71,16 +71,17 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
       // is flex-basis applied?
       expect(createReactDOMStyle({ display: 'flex', flexBasis: '25%' })).toEqual({
         display: 'flex',
-        flexShrink: 0,
-        flexBasis: '25%'
+        flexShrink: '0 !important',
+        flexBasis: '25% !important'
       });
 
       // can flex-basis override the 'flex' expansion?
       expect(createReactDOMStyle({ display: 'flex', flex: 1, flexBasis: '25%' })).toEqual({
         display: 'flex',
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: '25%'
+        flex: 1,
+        flexGrow: '1 !important',
+        flexShrink: '1 !important',
+        flexBasis: '25% !important'
       });
     });
 
@@ -88,16 +89,16 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
       // is flex-shrink applied?
       expect(createReactDOMStyle({ display: 'flex', flexShrink: 1 })).toEqual({
         display: 'flex',
-        flexShrink: 1,
-        flexBasis: 'auto'
+        flexShrink: '1 !important',
+        flexBasis: 'auto !important'
       });
 
       // can flex-shrink override the 'flex' expansion?
       expect(createReactDOMStyle({ display: 'flex', flex: 1, flexShrink: 2 })).toEqual({
         display: 'flex',
-        flexGrow: 1,
-        flexShrink: 2,
-        flexBasis: '0%'
+        flex: 1,
+        flexGrow: '1 !important',
+        flexShrink: '2 !important'
       });
     });
   });

src/apis/StyleSheet/createReactDOMStyle.js

@@ -158,29 +158,56 @@ const createReducer = (style, styleProps) => {
 
       case 'display': {
         resolvedStyle.display = value;
-        // defaults of 'flexBasis:auto' and 'flexShrink:0' have lowest precedence
-        if (style.display === 'flex') {
+        // A flex container in React Native has these defaults which should be
+        // set only if there is no otherwise supplied flex style.
+        if (style.display === 'flex' && style.flex == null) {
           if (style.flexShrink == null) {
-            resolvedStyle.flexShrink = 0;
+            resolvedStyle.flexShrink = '0 !important';
           }
           if (style.flexBasis == null) {
-            resolvedStyle.flexBasis = 'auto';
+            resolvedStyle.flexBasis = 'auto !important';
           }
         }
         break;
       }
 
+      // The 'flex' property value in React Native must be a positive integer,
+      // 0, or -1.
+      //
+      // On the web, a positive integer value for 'flex' is complicated by
+      // browser differences. Although browsers render styles like 'flex:2'
+      // consistently, they don't all set the same value for the resulting
+      // 'flexBasis' (See #616). Expanding 'flex' in 'StyleSheet' would mean
+      // setting different values for different browsers.
+      //
+      // This fix instead relies on the browser expanding 'flex' itself. And
+      // because the 'flex' style is not being expanded the generated CSS is
+      // likely to contain source order "conflicts". To avoid the browser
+      // relying on source order to resolve the styles, all the longhand flex
+      // property values must use '!important'.
       case 'flex': {
         if (value > 0) {
-          resolvedStyle.flexGrow = value;
-          resolvedStyle.flexShrink = 1;
-          resolvedStyle.flexBasis = '0%';
+          resolvedStyle.flex = value;
+          resolvedStyle.flexGrow = `${value} !important`;
+          resolvedStyle.flexShrink = '1 !important';
         } else if (value === 0) {
-          resolvedStyle.flexGrow = 0;
-          resolvedStyle.flexShrink = 0;
+          resolvedStyle.flexGrow = '0 !important';
+          resolvedStyle.flexShrink = '0 !important';
+          resolvedStyle.flexBasis = 'auto !important';
         } else if (value === -1) {
-          resolvedStyle.flexGrow = 0;
-          resolvedStyle.flexShrink = 1;
+          resolvedStyle.flexGrow = '0 !important';
+          resolvedStyle.flexShrink = '1 !important';
+          resolvedStyle.flexBasis = 'auto !important';
+        }
+        break;
+      }
+
+      case 'flexGrow':
+      case 'flexShrink':
+      case 'flexBasis': {
+        if (value != null) {
+          const hasImportant = `${value}`.indexOf('!important') > -1;
+          resolvedStyle[prop] = hasImportant ? value : `${value} !important`;
         }
         break;
       }

src/components/Image/__tests__/index-test.js

@@ -1,12 +1,10 @@
 /* eslint-env jasmine, jest */
 
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import Image from '../';
 import ImageUriCache from '../ImageUriCache';
 import React from 'react';
-import { mount, render, shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
-const originalCanUseDOM = ExecutionEnvironment.canUseDOM;
 const originalImage = window.Image;
 
 describe('components/Image', () => {
@@ -137,15 +135,6 @@ describe('components/Image', () => {
           .attr('src')
       ).toBe(uriTwo);
     });
-
-    test('is set immediately when rendered on the server', () => {
-      ExecutionEnvironment.canUseDOM = false;
-      const uri = 'https://google.com/favicon.ico';
-      const component = render(<Image source={{ uri }} />);
-      expect(component.find('img').attr('src')).toBe(uri);
-      expect(ImageUriCache.has(uri)).toBe(true);
-      ExecutionEnvironment.canUseDOM = originalCanUseDOM;
-    });
   });
 
   describe('prop "style"', () => {

src/components/Image/index.js

@@ -11,7 +11,6 @@
  */
 
 import applyNativeMethods from '../../modules/applyNativeMethods';
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import createElement from '../../modules/createElement';
 import { getAssetByID } from '../../modules/AssetRegistry';
 import ImageLoader from '../../modules/ImageLoader';
@@ -131,7 +130,7 @@ class Image extends Component {
     super(props, context);
     // If an image has been loaded before, render it immediately
     const uri = resolveAssetSource(props.source);
-    const shouldDisplaySource = ImageUriCache.has(uri) || !canUseDOM;
+    const shouldDisplaySource = ImageUriCache.has(uri);
     this.state = { shouldDisplaySource };
     this._imageState = getImageState(uri, shouldDisplaySource);
     shouldDisplaySource && ImageUriCache.add(uri);

src/components/RefreshControl/index.js

@@ -1,2 +1,55 @@
-import UnimplementedView from '../UnimplementedView';
-export default UnimplementedView;
+/**
+ * Copyright (c) 2017-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule RefreshControl
+ * @flow
+ */
+
+import ColorPropType from '../../propTypes/ColorPropType';
+import View from '../View';
+import ViewPropTypes from '../View/ViewPropTypes';
+import { arrayOf, bool, func, number, oneOf, string } from 'prop-types';
+import React, { Component } from 'react';
+
+class RefreshControl extends Component {
+  static propTypes = {
+    ...ViewPropTypes,
+    colors: arrayOf(ColorPropType),
+    enabled: bool,
+    onRefresh: func,
+    progressBackgroundColor: ColorPropType,
+    progressViewOffset: number,
+    refreshing: bool.isRequired,
+    size: oneOf([0, 1]),
+    tintColor: ColorPropType,
+    title: string,
+    titleColor: ColorPropType
+  };
+
+  render() {
+    const {
+      /* eslint-disable */
+      colors,
+      enabled,
+      onRefresh,
+      progressBackgroundColor,
+      progressViewOffset,
+      refreshing,
+      size,
+      tintColor,
+      title,
+      titleColor,
+      /* eslint-enable */
+      ...rest
+    } = this.props;
+
+    return <View {...rest} />;
+  }
+}
+
+export default RefreshControl;

src/components/Touchable/Touchable.js

@@ -12,6 +12,7 @@
  * @flow
  */
 
+import AccessibilityUtil from '../../modules/AccessibilityUtil';
 import BoundingDimensions from './BoundingDimensions';
 import findNodeHandle from '../../modules/findNodeHandle';
 import normalizeColor from 'normalize-css-color';
@@ -819,7 +820,11 @@ const TouchableMixin = {
         }
       }
       e.stopPropagation();
-      e.preventDefault();
+      // prevent the default behaviour unless the Touchable functions as a link
+      // and Enter is pressed
+      if (!(which === ENTER && AccessibilityUtil.propsToAriaRole(this.props) === 'link')) {
+        e.preventDefault();
+      }
     }
   }
 };

src/components/View/index.js

@@ -52,7 +52,10 @@ class View extends Component {
 
     if (process.env.NODE_ENV !== 'production') {
       React.Children.toArray(this.props.children).forEach(item => {
-        invariant(typeof item !== 'string', 'A text node cannot be a child of a <View>');
+        invariant(
+          typeof item !== 'string',
+          `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
+        );
       });
     }
 

src/module.js

@@ -12,7 +12,7 @@ export { default as AsyncStorage } from './apis/AsyncStorage';
 export { default as BackAndroid } from './apis/BackAndroid';
 export { default as Clipboard } from './apis/Clipboard';
 export { default as Dimensions } from './apis/Dimensions';
-export { default as Easing } from 'animated/lib/Easing';
+export { default as Easing } from './apis/Easing';
 export { default as I18nManager } from './apis/I18nManager';
 export { default as Keyboard } from './apis/Keyboard';
 export { default as InteractionManager } from './apis/InteractionManager';

src/modules/prefixStyles/static.js

@@ -2,6 +2,7 @@ import crossFade from 'inline-style-prefixer/static/plugins/crossFade';
 import cursor from 'inline-style-prefixer/static/plugins/cursor';
 import filter from 'inline-style-prefixer/static/plugins/filter';
 import flex from 'inline-style-prefixer/static/plugins/flex';
+import flexboxIE from 'inline-style-prefixer/static/plugins/flexboxIE';
 import flexboxOld from 'inline-style-prefixer/static/plugins/flexboxOld';
 import gradient from 'inline-style-prefixer/static/plugins/gradient';
 import imageSet from 'inline-style-prefixer/static/plugins/imageSet';
@@ -21,6 +22,7 @@ export default {
     cursor,
     filter,
     flex,
+    flexboxIE,
     flexboxOld,
     gradient,
     imageSet,
@@ -82,13 +84,13 @@ export default {
     columns: wm,
     columnSpan: wm,
     columnWidth: wm,
-    flex: w,
+    flex: wms,
     flexBasis: w,
-    flexDirection: w,
+    flexDirection: wms,
     flexGrow: w,
-    flexFlow: w,
+    flexFlow: wms,
     flexShrink: w,
-    flexWrap: w,
+    flexWrap: wms,
     alignContent: w,
     alignItems: w,
     alignSelf: w,
@@ -122,6 +124,7 @@ export default {
     wrapFlow: ms,
     wrapThrough: ms,
     wrapMargin: ms,
+    touchAction: ms,
     gridTemplateColumns: ms,
     gridTemplateRows: ms,
     gridTemplateAreas: ms,

src/vendor/warnValidStyle/index.js

@@ -11,8 +11,6 @@
  * @providesModule warnValidStyle
  */
 
-'use strict';
-
 var emptyFunction = require('fbjs/lib/emptyFunction');
 
 var warnValidStyle = emptyFunction;