0.0.85

Fix #425

docs/components/View.md

@@ -213,6 +213,7 @@ Controls whether the View can be the target of touch events. The enhanced
 + `opacity`
 + `order`
 + `outline` ‡
++ `outlineColor` ‡
 + `overflow`
 + `overflowX` ‡
 + `overflowY` ‡

docs/guides/accessibility.md

@@ -39,7 +39,10 @@ using `aria-label`.
 
 In some cases, we also want to alert the end user of the type of selected
 component (i.e., that it is a “button”). To provide more context to screen
-readers, you should specify the `accessibilityRole` property.
+readers, you should specify the `accessibilityRole` property. (Note that React
+Native for Web provides a compatibility mapping of equivalent
+`accessibilityTraits` and `accessibilityComponentType` values to
+`accessibilityRole`).
 
 The `accessibilityRole` prop is used to infer an [analogous HTML
 element][html-aria-url] to use in addition to the resulting ARIA `role`, where

package.json

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

performance/README.md

@@ -22,18 +22,19 @@ Typical render timings*: mean ± two standard deviations
 
 | Implementation                       | Deep tree (ms)    | Wide tree (ms)    | Tweets (ms)       |
 | :--- | ---: | ---: | ---: |
-| `css-modules`                        |  `87.68` `±13.29` | `171.96` `±14.91` | |
-| `react-native-web/stylesheet@0.0.81` |  `90.59` `±12.03` | `190.37` `±19.65` | |
-| `react-native-web@0.0.81`            | `105.20` `±17.86` | `226.54` `±29.50` | `12.12` `±6.94ms` |
+| `css-modules`                        |  `87.67` `±15.22` | `170.85` `±16.87` | |
+| `react-native-web/stylesheet@0.0.84` |  `90.02` `±13.16` | `186.66` `±19.23` | |
+| `react-native-web@0.0.84`            | `102.72` `±19.26` | `222.35` `±18.95` | `12.81` `±5.45ms` |
 
 Other libraries
 
 | Implementation                       | Deep tree (ms)    | Wide tree (ms)    |
 | :--- | ---: | ---: |
-| `aphrodite@1.2.0`                    | `101.25` `±18.78` | `224.59` `±22.28` |
-| `glamor@3.0.0-1`                     | `143.39` `±23.05` | `275.21` `±21.10` |
-| `react-jss@5.4.1`                    | `142.27` `±16.62` | `318.62` `±26.19` |
-| `reactxp@0.34.3`                     | `221.36` `±23.35` | `472.61` `±40.86` |
-| `styled-components@2.0.0-7`          | `301.92` `±39.43` | `647.80` `±102.1` |
+| `styletron@2.5.1`                    |  `88.48` `±12.00` | `171.89` `±13.28` |
+| `aphrodite@1.2.0`                    | `101.32` `±20.33` | `220.33` `±31.41` |
+| `glamor@3.0.0-1`                     | `129.00` `±14.92` | `264.57` `±28.54` |
+| `react-jss@5.4.1`                    | `137.33` `±21.55` | `314.91` `±29.03` |
+| `reactxp@0.34.3`                     | `223.82` `±32.77` | `461.56` `±34.43` |
+| `styled-components@2.0.0-11`         | `277.53` `±28.83` | `627.91` `±43.13` |
 
 *MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56.

performance/src/components/View/styletron.js

@@ -6,7 +6,9 @@ import React from 'react';
 
 export const styletron = new Styletron();
 
-const View = ({ style, ...other }) => <div {...other} className={classnames(viewStyle, ...style)} />;
+const View = ({ style, ...other }) => (
+  <div {...other} className={classnames(viewStyle, ...style)} />
+);
 
 const viewStyle = injectStylePrefixed(styletron, {
   alignItems: 'stretch',

src/components/ScrollView/index.js

@@ -143,11 +143,7 @@ const ScrollView = createReactClass({
         children={this.props.children}
         collapsable={false}
         ref={this._setInnerViewRef}
-        style={[
-          styles.contentContainer,
-          horizontal && styles.contentContainerHorizontal,
-          contentContainerStyle
-        ]}
+        style={[horizontal && styles.contentContainerHorizontal, contentContainerStyle]}
       />
     );
 
@@ -232,16 +228,17 @@ const styles = StyleSheet.create({
     flex: 1,
     overflowX: 'hidden',
     overflowY: 'auto',
-    WebkitOverflowScrolling: 'touch'
+    WebkitOverflowScrolling: 'touch',
+    // Enable hardware compositing in modern browsers.
+    // Creates a new layer with its own backing surface that can significantly
+    // improve scroll performance.
+    transform: [{ translateZ: 0 }]
   },
   baseHorizontal: {
     flexDirection: 'row',
     overflowX: 'auto',
     overflowY: 'hidden'
   },
-  contentContainer: {
-    transform: [{ translateZ: 0 }]
-  },
   contentContainerHorizontal: {
     flexDirection: 'row'
   }

src/components/StatusBar/index.js

@@ -0,0 +1,14 @@
+import { Component } from 'react';
+
+class StatusBar extends Component {
+  static setBackgroundColor() {}
+  static setBarStyle() {}
+  static setHidden() {}
+  static setNetworkActivityIndicatorVisible() {}
+  static setTranslucent() {}
+  render() {
+    return null;
+  }
+}
+
+module.exports = StatusBar;

src/components/TextInput/index.js

@@ -147,6 +147,7 @@ class TextInput extends Component {
       style,
       /* eslint-disable */
       blurOnSubmit,
+      caretHidden,
       clearButtonMode,
       clearTextOnFocus,
       dataDetectorTypes,
@@ -163,6 +164,8 @@ class TextInput extends Component {
       selection,
       selectionColor,
       selectTextOnFocus,
+      textBreakStrategy,
+      underlineColorAndroid,
       /* eslint-enable */
       ...otherProps
     } = this.props;

src/components/View/ViewStylePropTypes.js

@@ -31,6 +31,7 @@ module.exports = {
   boxShadow: string,
   cursor: string,
   outline: string,
+  outlineColor: ColorPropType,
   perspective: oneOfType([number, string]),
   perspectiveOrigin: string,
   transitionDelay: string,

src/index.js

@@ -32,6 +32,7 @@ import Image from './components/Image';
 import ListView from './components/ListView';
 import ProgressBar from './components/ProgressBar';
 import ScrollView from './components/ScrollView';
+import StatusBar from './components/StatusBar';
 import Switch from './components/Switch';
 import Text from './components/Text';
 import TextInput from './components/TextInput';
@@ -87,6 +88,7 @@ const ReactNative = {
   ListView,
   ProgressBar,
   ScrollView,
+  StatusBar,
   Switch,
   Text,
   TextInput,

src/modules/AccessibilityUtil/propsToAriaRole.js

@@ -6,6 +6,7 @@ const accessibilityComponentTypeToRole = {
 const accessibilityTraitsToRole = {
   adjustable: 'slider',
   button: 'button',
+  header: 'heading',
   image: 'img',
   link: 'link',
   none: 'presentation',