0.0.125

Check color is of type string before using `indexOf`.

Fix #630

README.md

@@ -3,19 +3,23 @@
 [![Build Status][travis-image]][travis-url]
 [![npm version][npm-image]][npm-url]
 
-"React Native for Web" brings [React Native][react-native-url]'s
-building blocks and touch handling to the Web.
+"React Native for Web" brings the platform-agnostic Components and APIs of
+[React Native][react-native-url] to the Web.
 
-* [UI Explorer and documentation](https://necolas.github.io/react-native-web/storybook/).
-* [React Native for Web: Playground](https://glitch.com/edit/#!/react-native-web-playground) using create-react-app.
+Browse the [interactive
+documentation](https://necolas.github.io/react-native-web/storybook/) or [try
+it out](https://glitch.com/edit/#!/react-native-web-playground) on Glitch.
 
-Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
+## Features
 
-[npm-image]: https://badge.fury.io/js/react-native-web.svg
-[npm-url]: https://npmjs.org/package/react-native-web
-[react-native-url]: https://facebook.github.io/react-native/
-[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
-[travis-url]: https://travis-ci.org/necolas/react-native-web
+* Interoperability with ReactDOM components.
+* Native-like touch handling.
+* Built-in integration with web accessibility APIs.
+* Built-in support for LTR and RTL layouts.
+* Built-in expressive and reliable subset of CSS.
+* Optimized, vendor-prefixed CSS with [good runtime performance](benchmarks/README.md).
+* Server-side rendering of HTML and critical CSS.
+* Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
 
 ## Quick start
 
@@ -27,12 +31,28 @@ Install in your existing app using `yarn` or `npm`:
 yarn add react@15.6 react-dom@15.6 react-native-web
 ```
 
-Then read the [Getting Started](docs/guides/getting-started.md) guide.
+Add the `react-native-web/babel` plugin to your Babel configuration. This will
+alias `react-native` to `react-native-web` and exclude any modules not required
+by the app.
+
+```json
+{
+  "plugins": [
+    "react-native-web/babel"
+  ],
+  "presets": [
+    "react-native"
+  ]
+}
+```
+
+See the [Getting Started](docs/guides/getting-started.md) guide for more details.
 
 ## Documentation
 
-The [UI Explorer](https://necolas.github.io/react-native-web/storybook/)
-interactively documents all the supported APIs and Components.
+The [interactive
+documentation](https://necolas.github.io/react-native-web/storybook/) shows all
+the supported APIs and Components.
 
 Guides:
 
@@ -46,7 +66,8 @@ Guides:
 
 ## Starter kits
 
-* [create-react-app](https://github.com/facebookincubator/create-react-app) ([on Glitch](https://glitch.com/edit/#!/react-native-web-playground))
+* [Glitch](https://glitch.com/edit/#!/react-native-web-playground)
+* [create-react-app](https://github.com/facebookincubator/create-react-app)
 * [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
 * [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack)
 
@@ -99,3 +120,9 @@ AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-ro
 ## License
 
 React Native for Web is [BSD licensed](LICENSE).
+
+[npm-image]: https://badge.fury.io/js/react-native-web.svg
+[npm-url]: https://npmjs.org/package/react-native-web
+[react-native-url]: https://facebook.github.io/react-native/
+[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
+[travis-url]: https://travis-ci.org/necolas/react-native-web

babel/index.js

@@ -5,6 +5,7 @@ const getDistLocation = importName => {
     // apis
     case 'Animated':
     case 'AppRegistry':
+    case 'AppState':
     case 'AsyncStorage':
     case 'BackAndroid':
     case 'Clipboard':

docs/storybook/2-apis/NetInfo/NetInfoScreen.js

@@ -20,7 +20,7 @@ const NetInfoScreen = () => (
         NetInfo asynchronously determines the online/offline status of the application.
       </AppText>
       <AppText>
-        Note that support for retrieving the connection type depends upon browswer support (and is
+        Note that support for retrieving the connection type depends upon browser support (and is
         limited to mobile browsers). It will default to <Code>unknown</Code> when support is
         missing.
       </AppText>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.123",
+  "version": "0.0.125",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [
@@ -12,7 +12,8 @@
   "scripts": {
     "benchmark": "cd benchmarks && yarn && webpack && open index.html",
     "build": "webpack --config webpack.config.js --sort-assets-by --progress",
-    "compile": "del ./dist && mkdir dist && babel src -d dist --ignore **/__tests__",
+    "clean-dist": "del ./dist && mkdir dist",
+    "compile": "babel src -d dist --ignore *-test.js",
     "docs:build": "cd docs && yarn build",
     "docs:start": "cd docs && yarn && yarn start",
     "docs:release": "cd docs && yarn release",
@@ -24,7 +25,7 @@
     "lint": "yarn lint:cmd -- babel benchmarks docs src",
     "lint:cmd": "eslint --ignore-path .gitignore --fix",
     "precommit": "lint-staged",
-    "release": "yarn lint && yarn test && yarn compile && yarn build && npm publish",
+    "release": "yarn clean-dist && yarn lint && yarn test && yarn compile && yarn build && npm publish",
     "test": "flow && jest"
   },
   "babel": {

src/apis/Keyboard/index.js

@@ -13,7 +13,9 @@
 import dismissKeyboard from '../../modules/dismissKeyboard';
 
 const Keyboard = {
-  addListener() {},
+  addListener() {
+    return { remove: () => {} };
+  },
   dismiss() {
     dismissKeyboard();
   },

src/components/ScrollView/ScrollViewBase.js

@@ -134,14 +134,39 @@ export default class ScrollViewBase extends Component {
       scrollEnabled,
       style,
       /* eslint-disable */
+      alwaysBounceHorizontal,
+      alwaysBounceVertical,
+      automaticallyAdjustContentInsets,
+      bounces,
+      bouncesZoom,
+      canCancelContentTouches,
+      centerContent,
+      contentInset,
+      contentInsetAdjustmentBehavior,
+      contentOffset,
+      decelerationRate,
+      directionalLockEnabled,
+      endFillColor,
+      indicatorStyle,
+      keyboardShouldPersistTaps,
+      maximumZoomScale,
+      minimumZoomScale,
       onMomentumScrollBegin,
       onMomentumScrollEnd,
       onScrollBeginDrag,
       onScrollEndDrag,
+      overScrollMode,
+      pinchGestureEnabled,
       removeClippedSubviews,
       scrollEventThrottle,
+      scrollIndicatorInsets,
+      scrollPerfTag,
+      scrollsToTop,
       showsHorizontalScrollIndicator,
       showsVerticalScrollIndicator,
+      snapToInterval,
+      snapToAlignment,
+      zoomScale,
       /* eslint-enable */
       ...other
     } = this.props;

src/components/ScrollView/index.js

@@ -137,6 +137,7 @@ const ScrollView = createReactClass({
       keyboardDismissMode,
       onScroll,
       pagingEnabled,
+      stickyHeaderIndices,
       /* eslint-enable */
       ...other
     } = this.props;

src/components/Touchable/TouchableWithoutFeedback.js

@@ -19,7 +19,7 @@ import StyleSheet from '../../apis/StyleSheet';
 import TimerMixin from 'react-timer-mixin';
 import Touchable from './Touchable';
 import warning from 'fbjs/lib/warning';
-import { bool, element, func, number, string } from 'prop-types';
+import { bool, func, number, string } from 'prop-types';
 
 type Event = Object;
 
@@ -33,7 +33,7 @@ const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
  * If you wish to have several child components, wrap them in a View.
  */
 
-/* eslint-disable react/prefer-es6-class */
+/* eslint-disable react/prefer-es6-class, react/prop-types */
 const TouchableWithoutFeedback = createReactClass({
   displayName: 'TouchableWithoutFeedback',
   mixins: [TimerMixin, Touchable.Mixin],
@@ -44,7 +44,6 @@ const TouchableWithoutFeedback = createReactClass({
     accessibilityRole: BaseComponentPropTypes.accessibilityRole,
     accessibilityTraits: BaseComponentPropTypes.accessibilityTraits,
     accessible: bool,
-    children: element,
     /**
      * Delay in ms, from onPressIn, before onLongPress is called.
      */
@@ -161,6 +160,7 @@ const TouchableWithoutFeedback = createReactClass({
     } = this.props;
 
     // Note(avik): remove dynamic typecast once Flow has been upgraded
+    // $FlowFixMe
     const child = React.Children.only(this.props.children);
     let children = child.props.children;
     warning(

src/components/UnimplementedView/index.js

@@ -11,18 +11,13 @@
  */
 
 import View from '../View';
-import { any, object } from 'prop-types';
 import React, { Component } from 'react';
 
 /**
  * Common implementation for a simple stubbed view.
  */
+/* eslint-disable react/prop-types */
 class UnimplementedView extends Component {
-  static propTypes = {
-    children: any,
-    style: object
-  };
-
   setNativeProps() {
     // Do nothing.
     // This method is required in order to use this view as a Touchable* child.

src/propTypes/ColorPropType.js

@@ -10,6 +10,9 @@
  * @flow
  */
 
+const isWebColor = (color: string) =>
+  color === 'currentcolor' || color === 'inherit' || color.indexOf('var(') === 0;
+
 const colorPropType = function(isRequired, props, propName, componentName, location, propFullName) {
   const normalizeColor = require('normalize-css-color');
   const color = props[propName];
@@ -35,8 +38,8 @@ const colorPropType = function(isRequired, props, propName, componentName, locat
     return;
   }
 
-  // Web supports additional color keywords and custom property values
-  if (color === 'currentcolor' || color === 'inherit' || color.indexOf('var(') === 0) {
+  if (typeof color === 'string' && isWebColor(color)) {
+    // Web supports additional color keywords and custom property values. Ignore them.
     return;
   }