0.0.107

Problem:

The content of style sheets was being set as a child of 'style', which
causes React to escape the content. This meant that the pointer-events
selectors were broken (">" became ">") and pointer-events were
disabled for the entire server-rendered document.

Solution:

Use 'dangerouslySetInnerHTML' to avoid the CSS text being escaped.

Fix #546

.github/CONTRIBUTING.md

@@ -28,25 +28,25 @@ yarn
 To run flow:
 
 ```
-npm run flow
+yarn flow
 ```
 
 To run the unit tests:
 
 ```
-npm run jest
+yarn jest
 ```
 
 …in watch mode:
 
 ```
-npm run jest:watch
+yarn jest:watch
 ```
 
 To run all automated tests:
 
 ```
-npm test
+yarn test
 ```
 
 ## Visual tests
@@ -54,19 +54,19 @@ npm test
 To run the interactive storybook:
 
 ```
-npm run docs:start
+yarn docs:start
 ```
 
 To generate a static build of the storybook:
 
 ```
-npm run docs:build
+yarn docs:build
 ```
 
 To run the performance benchmarks in a browser (opening `./benchmarks/index.html`):
 
 ```
-npm run benchmarks
+yarn benchmarks
 ```
 
 ## Compile and build
@@ -74,13 +74,13 @@ npm run benchmarks
 To compile the source code to `dist`:
 
 ```
-npm run compile
+yarn compile
 ```
 
 To create a UMD bundle of the library:
 
 ```
-npm run build
+yarn build
 ```
 
 ### Pre-commit
@@ -88,14 +88,14 @@ npm run build
 To format and lint code before commit:
 
 ```
-npm run precommit
+yarn precommit
 ```
 
 To format and lint the entire project:
 
 ```
-npm run fmt
-npm run lint
+yarn fmt
+yarn lint
 ```
 
 ### New Features

README.md

@@ -27,9 +27,11 @@ Native for Web: Playground](https://www.webpackbin.com/bins/-KgucwxRbn7HRU-V-3Bc
 To install in your app:
 
 ```
-npm install --save react@15.5 react-dom@15.5 react-native-web
+npm install --save react@15.6 react-dom@15.6 react-native-web
 ```
 
+NOTE: React Native for Web supports React/ReactDOM 15.4, 15.5, or 15.6.
+
 Read the [Getting Started](docs/guides/getting-started.md) guide.
 
 ## Documentation

docs/apis/AppRegistry.md

@@ -40,6 +40,9 @@ Runs the application that was registered under `appKey`. The `appParameters`
 must include the `rootTag` into which the application is rendered, and
 optionally any `initialProps`.
 
+On web, if the `rootTag` is a sub-section of your application it should be
+styled as `position:relative` and given an explicit height.
+
 static **unmountApplicationComponentAtRootTag**(rootTag: HTMLElement)
 
 To "stop" an application when a view should be destroyed, call

docs/components/TextInput.md

@@ -103,8 +103,11 @@ Callback that is called when the text input is focused.
 
 **onKeyPress**: ?function
 
-Callback that is called when a key is pressed. Pressed key value is passed as
-an argument to the callback handler. Fires before `onChange` callbacks.
+Callback that is called when a key is pressed. This will be called with `{
+nativeEvent: { key: keyValue } }` where keyValue is 'Enter` or 'Backspace' for
+respective keys and the typed-in character otherwise including ' ' for space.
+Modifier keys are also included in the nativeEvent. Fires before onChange
+callbacks.
 
 **onSelectionChange**: ?function
 

docs/guides/getting-started.md

@@ -189,7 +189,7 @@ AppRegistry.registerComponent('App', () => AppContainer)
 // prerender the app
 const { element, stylesheets } = AppRegistry.getApplication('App', { initialProps });
 const initialHTML = ReactDOMServer.renderToString(element);
-const initialStyles = stylesheets.map((sheet) => ReactDOMServer.renderToString(sheet)).join('\n');
+const initialStyles = stylesheets.map((sheet) => ReactDOMServer.renderToStaticMarkup(sheet)).join('\n');
 
 // construct HTML document
 const document = `

docs/guides/style.md

@@ -225,7 +225,8 @@ User Agent styles from (pseudo-)elements beyond the reach of React (e.g.,
 `html`, `body`) or inline styles (e.g., `::-moz-focus-inner`). The rest is
 handled at the component-level.
 
-### What about using DevTools?
+### What about using Dev Tools?
 
-It's recommended that you rely more on React DevTools and live/hot-reloading
-rather than inspecting and editing the DOM directly.
+React Dev Tools supports inspecting and editing of React Native styles. It's
+recommended that you rely more on React Dev Tools and live/hot-reloading rather
+than inspecting and editing the DOM directly.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.103",
+  "version": "0.0.107",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [
@@ -14,16 +14,16 @@
     "compile": "del ./dist && mkdir dist && babel src -d dist --ignore **/__tests__",
     "docs:build": "build-storybook -o ./docs/dist -c ./docs/storybook/.storybook",
     "docs:start": "start-storybook -p 9001 -c ./docs/storybook/.storybook --dont-track",
-    "docs:publish": "npm run docs:build && git checkout gh-pages && rm -rf ./storybook && mv docs/dist storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -",
+    "docs:publish": "yarn docs:build && git checkout gh-pages && rm -rf ./storybook && mv docs/dist storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -",
     "flow": "flow",
-    "fmt": "find benchmarks docs src -name '*.js' | grep -v -E '(node_modules|dist)' | xargs npm run fmt:cmd",
+    "fmt": "find benchmarks docs src -name '*.js' | grep -v -E '(node_modules|dist)' | xargs yarn fmt:cmd",
     "fmt:cmd": "prettier --print-width=100 --single-quote --write",
     "jest": "jest",
-    "jest:watch": "npm run test -- --watch",
-    "lint": "npm run lint:cmd -- benchmarks docs src",
+    "jest:watch": "yarn test -- --watch",
+    "lint": "yarn lint:cmd -- benchmarks docs src",
     "lint:cmd": "eslint --fix --ignore-path .gitignore",
     "precommit": "lint-staged",
-    "release": "npm run lint && npm run test && npm run compile && npm run build && npm publish",
+    "release": "yarn lint && yarn test && yarn compile && yarn build && npm publish",
     "test": "flow && jest"
   },
   "babel": {
@@ -57,12 +57,12 @@
     "animated": "^0.2.0",
     "array-find-index": "^1.0.2",
     "babel-runtime": "^6.23.0",
-    "create-react-class": "^15.5.3",
+    "create-react-class": "^15.6.0",
     "debounce": "1.0.2",
     "deep-assign": "^2.0.0",
     "fbjs": "^0.8.12",
     "hyphenate-style-name": "^1.0.2",
-    "inline-style-prefixer": "^3.0.5",
+    "inline-style-prefixer": "^3.0.6",
     "normalize-css-color": "^1.0.2",
     "prop-types": "^15.5.10",
     "react-timer-mixin": "^0.13.3"
@@ -72,33 +72,31 @@
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.5",
-    "babel-preset-react-native": "^1.9.2",
+    "babel-loader": "^7.1.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.6",
+    "babel-preset-react-native": "^2.0.0",
     "del-cli": "^1.0.0",
     "enzyme": "^2.8.2",
     "enzyme-to-json": "^1.5.1",
-    "eslint": "^3.19.0",
-    "eslint-config-prettier": "^2.1.1",
+    "eslint": "^4.0.0",
+    "eslint-config-prettier": "^2.2.0",
     "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-react": "^7.0.1",
+    "eslint-plugin-react": "^7.1.0",
     "file-loader": "^0.11.2",
-    "flow-bin": "^0.47.0",
+    "flow-bin": "^0.48.0",
     "jest": "^20.0.4",
-    "lint-staged": "^3.6.0",
-    "node-libs-browser": "^0.5.3",
+    "lint-staged": "^4.0.0",
     "prettier": "^1.4.4",
-    "react": "^15.5.4",
-    "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^15.5.4",
-    "react-test-renderer": "^15.5.4",
-    "url-loader": "^0.5.8",
-    "webpack": "^2.6.1",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-test-renderer": "^15.6.1",
+    "url-loader": "^0.5.9",
+    "webpack": "^3.0.0",
     "webpack-bundle-analyzer": "^2.8.2"
   },
   "peerDependencies": {
-    "react": "15.4.x || 15.5.x",
-    "react-dom": "15.4.x || 15.5.x"
+    "react": "15.4.x || 15.5.x || 15.6.x",
+    "react-dom": "15.4.x || 15.5.x || 15.6.x"
   },
   "author": "Nicolas Gallagher",
   "license": "BSD-3-Clause",

src/apis/Animated/index.js

@@ -1,3 +1,14 @@
+/**
+ * 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 Animated
+ * @noflow
+ */
+
 import Animated from 'animated';
 import Image from '../../components/Image';
 import ScrollView from '../../components/ScrollView';

src/apis/AppRegistry/AppContainer.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2016-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.
+ *
  * @flow
  */
 
@@ -41,7 +48,7 @@ export default class AppContainer extends Component {
 
   render() {
     return (
-      <View pointerEvents="box-none" style={styles.appContainer}>
+      <View pointerEvents="box-none" style={[styles.appContainer, StyleSheet.absoluteFill]}>
         <View
           children={this.props.children}
           key={this.state.mainKey}

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

@@ -9,69 +9,62 @@ exports[`apis/AppRegistry/renderApplication getApplication 1`] = `
 `;
 
 exports[`apis/AppRegistry/renderApplication getApplication 2`] = `
-Array [
-  <style
-    id="react-native-stylesheet-static"
->
-    html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
-    body{margin:0;}
-    button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
-    input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-    @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
-    @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
-    .rn-pointerEvents-105ug2t{pointer-events:auto !important;}
-    .rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
-    .rn-pointerEvents-633pao{pointer-events:none !important;}
-    .rn-pointerEvents-12vffkv{pointer-events:none !important;}
-    .rn-pointerEvents-12vffkv &gt; *{pointer-events:auto;}
-    .rn-pointerEvents-ah5dr5 &gt; *{pointer-events:none;}
-</style>,
-  <style
-    id="react-native-stylesheet"
->
-    .rn-bottom-1p0dtai{bottom:0px}
-    .rn-left-1d2f490{left:0px}
-    .rn-position-u8s1d{position:absolute}
-    .rn-position-bnwqim{position:relative}
-    .rn-right-zchlnj{right:0px}
-    .rn-top-ipm5af{top:0px}
-    .rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none}
-    .rn-backgroundColor-wib322{background-color:transparent}
-    .rn-color-homxoj{color:inherit}
-    .rn-font-1lw9tu2{font:inherit}
-    .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-borderTopStyle-1efd50x{border-top-style:solid}
-    .rn-borderRightStyle-14skgim{border-right-style:solid}
-    .rn-borderBottomStyle-rull8r{border-bottom-style:solid}
-    .rn-borderLeftStyle-mm0ijv{border-left-style:solid}
-    .rn-borderTopWidth-13yce4e{border-top-width:0px}
-    .rn-borderRightWidth-fnigne{border-right-width:0px}
-    .rn-borderBottomWidth-ndvcnb{border-bottom-width:0px}
-    .rn-borderLeftWidth-gxnn5r{border-left-width:0px}
-    .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-box;display:-moz-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-marginTop-1mnahxq{margin-top:0px}
-    .rn-marginRight-61z16t{margin-right:0px}
-    .rn-marginBottom-p1pxzi{margin-bottom:0px}
-    .rn-marginLeft-11wrixw{margin-left:0px}
-    .rn-minHeight-ifefl9{min-height:0px}
-    .rn-minWidth-bcqeeo{min-width:0px}
-    .rn-paddingTop-wk8lta{padding-top:0px}
-    .rn-paddingRight-9aemit{padding-right:0px}
-    .rn-paddingBottom-1mdbw0j{padding-bottom:0px}
-    .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>,
-]
+"<style id=\\"react-native-stylesheet-static\\">html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
+.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
+.rn-pointerEvents-633pao{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}</style>"
+`;
+
+exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
+"<style id=\\"react-native-stylesheet\\">.rn-bottom-1p0dtai{bottom:0px}
+.rn-left-1d2f490{left:0px}
+.rn-position-u8s1d{position:absolute}
+.rn-position-bnwqim{position:relative}
+.rn-right-zchlnj{right:0px}
+.rn-top-ipm5af{top:0px}
+.rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none}
+.rn-backgroundColor-wib322{background-color:transparent}
+.rn-color-homxoj{color:inherit}
+.rn-font-1lw9tu2{font:inherit}
+.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-borderTopStyle-1efd50x{border-top-style:solid}
+.rn-borderRightStyle-14skgim{border-right-style:solid}
+.rn-borderBottomStyle-rull8r{border-bottom-style:solid}
+.rn-borderLeftStyle-mm0ijv{border-left-style:solid}
+.rn-borderTopWidth-13yce4e{border-top-width:0px}
+.rn-borderRightWidth-fnigne{border-right-width:0px}
+.rn-borderBottomWidth-ndvcnb{border-bottom-width:0px}
+.rn-borderLeftWidth-gxnn5r{border-left-width:0px}
+.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-marginTop-1mnahxq{margin-top:0px}
+.rn-marginRight-61z16t{margin-right:0px}
+.rn-marginBottom-p1pxzi{margin-bottom:0px}
+.rn-marginLeft-11wrixw{margin-left:0px}
+.rn-minHeight-ifefl9{min-height:0px}
+.rn-minWidth-bcqeeo{min-width:0px}
+.rn-paddingTop-wk8lta{padding-top:0px}
+.rn-paddingRight-9aemit{padding-right:0px}
+.rn-paddingBottom-1mdbw0j{padding-bottom:0px}
+.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>"
 `;

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

@@ -2,6 +2,7 @@
 
 import { getApplication } from '../renderApplication';
 import React from 'react';
+import ReactDOMServer from 'react-dom/server';
 
 const RootComponent = () => <div />;
 
@@ -10,6 +11,9 @@ describe('apis/AppRegistry/renderApplication', () => {
     const { element, stylesheets } = getApplication(RootComponent, {});
 
     expect(element).toMatchSnapshot();
-    expect(stylesheets).toMatchSnapshot();
+    stylesheets.forEach(sheet => {
+      const result = ReactDOMServer.renderToStaticMarkup(sheet);
+      expect(result).toMatchSnapshot();
+    });
   });
 });

src/apis/AppRegistry/index.js

@@ -3,6 +3,10 @@
  * 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 AppRegistry
  * @flow
  */
 

src/apis/AppRegistry/renderApplication.js

@@ -3,6 +3,9 @@
  * 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.
+ *
  * @flow
  */
 
@@ -34,7 +37,8 @@ export function getApplication(RootComponent: ReactClass<Object>, initialProps:
     </AppContainer>
   );
   const stylesheets = StyleSheet.getStyleSheets().map(sheet =>
-    <style id={sheet.id}>{sheet.textContent}</style>
+    // ensure that CSS text is not escaped
+    <style dangerouslySetInnerHTML={{ __html: sheet.textContent }} id={sheet.id} />
   );
   return { element, stylesheets };
 }

src/apis/AppState/index.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2016-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 AppState
  * @flow
  */
 

src/apis/AsyncStorage/index.js

@@ -3,8 +3,13 @@
  * 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 AsyncStorage
  * @flow
  */
+
 import merge from 'deep-assign';
 
 const mergeLocalStorageItem = (key, value) => {

src/apis/BackAndroid/index.js

@@ -1,13 +1,12 @@
 /**
+ * Copyright (c) 2016-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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * web stub for BackAndroid.android.js
+ * LICENSE file in the root directory of this source tree.
  *
+ * @providesModule BackHandler
  * @flow
  */
 

src/apis/Clipboard/index.js

@@ -1,10 +1,17 @@
-/* global window */
 /**
+ * Copyright (c) 2016-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 Clipboard
  * @flow
  */
 
 export default class Clipboard {
-  static isSupported() {
+  static isAvailable() {
     return (
       typeof document.queryCommandSupported === 'function' && document.queryCommandSupported('copy')
     );

src/apis/Dimensions/index.js

@@ -3,6 +3,10 @@
  * 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 Dimensions
  * @flow
  */
 

src/apis/I18nManager/index.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2016-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 I18nManager
  * @flow
  */
 

src/apis/InteractionManager/index.js

@@ -1,7 +1,12 @@
 /**
+ * Copyright (c) 2016-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 InteractionManager
  * @flow
  */
 

src/apis/Linking/index.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2016-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 Linking
  * @flow
  */
 

src/apis/NetInfo/index.js

@@ -3,6 +3,10 @@
  * 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 NetInfo
  * @flow
  */
 

src/apis/PanResponder/index.js

@@ -1,19 +1,27 @@
-/* eslint-disable */
 /**
+ * Copyright (c) 2016-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 PanResponder
+ * @noflow
  */
 
 import TouchHistoryMath from '../../vendor/TouchHistoryMath';
 
-var currentCentroidXOfTouchesChangedAfter = TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;
-var currentCentroidYOfTouchesChangedAfter = TouchHistoryMath.currentCentroidYOfTouchesChangedAfter;
-var previousCentroidXOfTouchesChangedAfter =
+const currentCentroidXOfTouchesChangedAfter =
+  TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;
+const currentCentroidYOfTouchesChangedAfter =
+  TouchHistoryMath.currentCentroidYOfTouchesChangedAfter;
+const previousCentroidXOfTouchesChangedAfter =
   TouchHistoryMath.previousCentroidXOfTouchesChangedAfter;
-var previousCentroidYOfTouchesChangedAfter =
+const previousCentroidYOfTouchesChangedAfter =
   TouchHistoryMath.previousCentroidYOfTouchesChangedAfter;
-var currentCentroidX = TouchHistoryMath.currentCentroidX;
-var currentCentroidY = TouchHistoryMath.currentCentroidY;
+const currentCentroidX = TouchHistoryMath.currentCentroidX;
+const currentCentroidY = TouchHistoryMath.currentCentroidY;
 
 /**
  * `PanResponder` reconciles several touches into a single gesture. It makes
@@ -110,7 +118,7 @@ var currentCentroidY = TouchHistoryMath.currentCentroidY;
  * [PanResponder example in UIExplorer](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PanResponderExample.js)
  */
 
-var PanResponder = {
+const PanResponder = {
   /**
    *
    * A graphical explanation of the touch data flow:
@@ -222,16 +230,16 @@ var PanResponder = {
       touchHistory,
       gestureState._accountsForMovesUpTo
     );
-    var movedAfter = gestureState._accountsForMovesUpTo;
-    var prevX = previousCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
-    var x = currentCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
-    var prevY = previousCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
-    var y = currentCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
-    var nextDX = gestureState.dx + (x - prevX);
-    var nextDY = gestureState.dy + (y - prevY);
+    const movedAfter = gestureState._accountsForMovesUpTo;
+    const prevX = previousCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
+    const x = currentCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
+    const prevY = previousCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
+    const y = currentCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
+    const nextDX = gestureState.dx + (x - prevX);
+    const nextDY = gestureState.dy + (y - prevY);
 
     // TODO: This must be filtered intelligently.
-    var dt = touchHistory.mostRecentTimeStamp - gestureState._accountsForMovesUpTo;
+    const dt = touchHistory.mostRecentTimeStamp - gestureState._accountsForMovesUpTo;
     gestureState.vx = (nextDX - gestureState.dx) / dt;
     gestureState.vy = (nextDY - gestureState.dy) / dt;
 
@@ -273,12 +281,12 @@ var PanResponder = {
    *  are the responder.
    */
   create: function(config) {
-    var gestureState = {
+    const gestureState = {
       // Useful for debugging
       stateID: Math.random()
     };
     PanResponder._initializeGestureState(gestureState);
-    var panHandlers = {
+    const panHandlers = {
       onStartShouldSetResponder: function(e) {
         return config.onStartShouldSetPanResponder === undefined
           ? false
@@ -309,7 +317,7 @@ var PanResponder = {
       },
 
       onMoveShouldSetResponderCapture: function(e) {
-        var touchHistory = e.touchHistory;
+        const touchHistory = e.touchHistory;
         // Responder system incorrectly dispatches should* to current responder
         // Filter out any touch moves past the first one - we would have
         // already processed multi-touch geometry during the first event.
@@ -344,13 +352,13 @@ var PanResponder = {
       },
 
       onResponderStart: function(e) {
-        var touchHistory = e.touchHistory;
+        const touchHistory = e.touchHistory;
         gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
         config.onPanResponderStart && config.onPanResponderStart(e, gestureState);
       },
 
       onResponderMove: function(e) {
-        var touchHistory = e.touchHistory;
+        const touchHistory = e.touchHistory;
         // Guard against the dispatch of two touch moves when there are two
         // simultaneously changed touches.
         if (gestureState._accountsForMovesUpTo === touchHistory.mostRecentTimeStamp) {
@@ -363,7 +371,7 @@ var PanResponder = {
       },
 
       onResponderEnd: function(e) {
-        var touchHistory = e.touchHistory;
+        const touchHistory = e.touchHistory;
         gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
         config.onPanResponderEnd && config.onPanResponderEnd(e, gestureState);
       },

src/apis/PixelRatio/index.js

@@ -3,6 +3,10 @@
  * 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 PixelRatio
  * @flow
  */
 

src/apis/Platform/index.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2016-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 Platform
  * @flow
  */
 

src/apis/StyleSheet/StyleManager.js

@@ -1,6 +1,16 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import generateCss from './generateCss';
-import hash from './hash';
+import hash from '../../vendor/hash';
 import staticCss from './staticCss';
 
 const emptyObject = {};
@@ -34,6 +44,9 @@ const pointerEventsCss =
   `.${pointerEvents.boxOnly} > *{pointer-events:none;}`;
 
 export default class StyleManager {
+  cache = null;
+  mainSheet = null;
+
   constructor() {
     // custom pointer event values are implemented using descendent selectors,
     // so we manually create the CSS and pre-register the declarations

src/apis/StyleSheet/StyleRegistry.js

@@ -1,7 +1,16 @@
 /**
+ * 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.
+ *
  * WARNING: changes to this file in particular can cause significant changes to
  * the results of render performance benchmarks.
+ *
+ * @noflow
  */
+
 import createReactDOMStyle from './createReactDOMStyle';
 import flattenArray from '../../modules/flattenArray';
 import flattenStyle from './flattenStyle';
@@ -21,10 +30,8 @@ const createCacheKey = id => {
 const classListToString = list => list.join(' ').trim();
 
 export default class StyleRegistry {
-  constructor() {
-    this.cache = { ltr: {}, rtl: {} };
-    this.styleManager = new StyleManager();
-  }
+  cache = { ltr: {}, rtl: {} };
+  styleManager = new StyleManager();
 
   getStyleSheets() {
     return this.styleManager.getStyleSheets();

src/apis/StyleSheet/StyleSheetValidation.js

@@ -1,10 +1,10 @@
 /**
+ * Copyright (c) 2016-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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule StyleSheetValidation
  * @flow

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

@@ -22,36 +22,63 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
     expect(firstStyle).toEqual(secondStyle);
   });
 
-  test('flex', () => {
-    expect(createReactDOMStyle({ display: 'flex' })).toEqual({
-      display: 'flex',
-      flexShrink: 0
+  describe('flexbox styles', () => {
+    test('flex defaults', () => {
+      expect(createReactDOMStyle({ display: 'flex' })).toEqual({
+        display: 'flex',
+        flexShrink: 0,
+        flexBasis: 'auto'
+      });
     });
 
-    expect(createReactDOMStyle({ display: 'flex', flex: 1 })).toEqual({
-      display: 'flex',
-      flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: '0%'
+    test('flex property expansion', () => {
+      expect(createReactDOMStyle({ display: 'flex', flex: 1 })).toEqual({
+        display: 'flex',
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: '0%'
+      });
+
+      expect(createReactDOMStyle({ display: 'flex', flex: 10 })).toEqual({
+        display: 'flex',
+        flexGrow: 10,
+        flexShrink: 1,
+        flexBasis: '0%'
+      });
     });
 
-    expect(createReactDOMStyle({ display: 'flex', flex: 10 })).toEqual({
-      display: 'flex',
-      flexGrow: 10,
-      flexShrink: 1,
-      flexBasis: '0%'
+    test('flexBasis', () => {
+      // is flex-basis applied?
+      expect(createReactDOMStyle({ display: 'flex', flexBasis: '25%' })).toEqual({
+        display: 'flex',
+        flexShrink: 0,
+        flexBasis: '25%'
+      });
+
+      // can flex-basis override the 'flex' expansion?
+      expect(createReactDOMStyle({ display: 'flex', flex: 1, flexBasis: '25%' })).toEqual({
+        display: 'flex',
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: '25%'
+      });
     });
 
-    expect(createReactDOMStyle({ display: 'flex', flexShrink: 1 })).toEqual({
-      display: 'flex',
-      flexShrink: 1
-    });
+    test('flexShrink overrides', () => {
+      // is flex-shrink applied?
+      expect(createReactDOMStyle({ display: 'flex', flexShrink: 1 })).toEqual({
+        display: 'flex',
+        flexShrink: 1,
+        flexBasis: 'auto'
+      });
 
-    expect(createReactDOMStyle({ display: 'flex', flex: 1, flexShrink: 2 })).toEqual({
-      display: 'flex',
-      flexGrow: 1,
-      flexShrink: 2,
-      flexBasis: '0%'
+      // can flex-shrink override the 'flex' expansion?
+      expect(createReactDOMStyle({ display: 'flex', flex: 1, flexShrink: 2 })).toEqual({
+        display: 'flex',
+        flexGrow: 1,
+        flexShrink: 2,
+        flexBasis: '0%'
+      });
     });
   });
 

src/apis/StyleSheet/createReactDOMStyle.js

@@ -1,12 +1,20 @@
 /**
+ * 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.
+ *
  * The browser implements the CSS cascade, where the order of properties is a
- * factor in determining which styles to paint. React Native is different in
- * giving precedence to the more specific styles. For example, the value of
- * `paddingTop` takes precedence over that of `padding`.
+ * factor in determining which styles to paint. React Native is different. It
+ * gives giving precedence to the more specific style property. For example,
+ * the value of `paddingTop` takes precedence over that of `padding`.
  *
  * This module creates mutally exclusive style declarations by expanding all of
  * React Native's supported shortform properties (e.g. `padding`) to their
  * longfrom equivalents.
+ *
+ * @noflow
  */
 
 import normalizeValue from './normalizeValue';
@@ -138,9 +146,14 @@ const createReducer = (style, styleProps) => {
     switch (prop) {
       case 'display': {
         resolvedStyle.display = value;
-        // default of 'flexShrink:0' has lowest precedence
-        if (style.display === 'flex' && style.flex == null && style.flexShrink == null) {
-          resolvedStyle.flexShrink = 0;
+        // defaults of 'flexBasis:auto' and 'flexShrink:0' have lowest precedence
+        if (style.display === 'flex' && style.flex == null) {
+          if (style.flexShrink == null) {
+            resolvedStyle.flexShrink = 0;
+          }
+          if (style.flexBasis == null) {
+            resolvedStyle.flexBasis = 'auto';
+          }
         }
         break;
       }

src/apis/StyleSheet/flattenStyle.js

@@ -1,14 +1,15 @@
 /**
+ * Copyright (c) 2015-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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule flattenStyle
  * @flow
  */
+
 import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry';
 import invariant from 'fbjs/lib/invariant';
 

src/apis/StyleSheet/generateCss.js

@@ -1,3 +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.
+ *
+ * @noflow
+ */
+
 import hyphenateStyleName from 'hyphenate-style-name';
 import mapKeyValue from '../../modules/mapKeyValue';
 import normalizeValue from './normalizeValue';

src/apis/StyleSheet/i18nStyle.js

@@ -1,3 +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.
+ *
+ * @noflow
+ */
+
 import I18nManager from '../I18nManager';
 import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
 

src/apis/StyleSheet/index.js

@@ -1,6 +1,25 @@
+/**
+ * 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 StyleSheet
+ * @noflow
+ */
+
 import flattenStyle from './flattenStyle';
 import StyleRegistry from './registry';
 
+// allow component styles to be editable in React Dev Tools
+if (process.env.NODE_ENV !== 'production') {
+  const { canUseDOM } = require('fbjs/lib/ExecutionEnvironment');
+  if (canUseDOM && window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.resolveRNStyle = flattenStyle;
+  }
+}
+
 const absoluteFillObject = {
   position: 'absolute',
   left: 0,

src/apis/StyleSheet/normalizeValue.js

@@ -1,6 +1,16 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
 import unitlessNumbers from '../../modules/unitlessNumbers';
 
-const normalizeValue = (property, value) => {
+const normalizeValue = (property: string, value) => {
   if (!unitlessNumbers[property] && typeof value === 'number') {
     value = `${value}px`;
   }

src/apis/StyleSheet/registry.js

@@ -1,3 +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.
+ *
+ * @flow
+ */
+
 import StyleRegistry from './StyleRegistry';
 const registry = new StyleRegistry();
 export default registry;

src/apis/StyleSheet/staticCss.js

@@ -1,3 +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.
+ *
+ * @flow
+ */
+
 export default 'html{' + // css reset
   'font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;' +
   '-webkit-tap-highlight-color:rgba(0,0,0,0);' +

src/apis/UIManager/index.js

@@ -1,3 +1,14 @@
+/**
+ * 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 UIManager
+ * @noflow
+ */
+
 import requestAnimationFrame from 'fbjs/lib/requestAnimationFrame';
 import setImmediate from 'fbjs/lib/setImmediate';
 import setValueForStyles from '../../vendor/setValueForStyles';

src/apis/Vibration/index.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2016-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 Vibration
  * @flow
  */
 

src/components/ActivityIndicator/index.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2016-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 ActivityIndicator
  * @flow
  */
 

src/components/Button/index.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2016-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 Button
  * @flow
  */
 

src/components/FlatList/index.js

@@ -0,0 +1,2 @@
+import UnimplementedView from '../UnimplementedView';
+export default UnimplementedView;

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

@@ -1,10 +1,12 @@
 /* eslint-env jasmine, jest */
 
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import Image from '../';
 import ImageUriCache from '../ImageUriCache';
 import React from 'react';
 import { mount, render } from 'enzyme';
 
+const originalCanUseDOM = ExecutionEnvironment.canUseDOM;
 const originalImage = window.Image;
 
 describe('components/Image', () => {
@@ -113,6 +115,15 @@ describe('components/Image', () => {
       ImageUriCache.remove(uriTwo);
       expect(component.render().find('img').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

@@ -1,9 +1,17 @@
-/* global window */
 /**
+ * Copyright (c) 2016-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 Image
  * @flow
  */
 
 import applyNativeMethods from '../../modules/applyNativeMethods';
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import createDOMElement from '../../modules/createDOMElement';
 import ImageLoader from '../../modules/ImageLoader';
 import ImageResizeMode from './ImageResizeMode';
@@ -34,8 +42,8 @@ const ImageSourcePropType = oneOfType([
   string
 ]);
 
-const getImageState = (uri, isPreviouslyLoaded) => {
-  return isPreviouslyLoaded ? STATUS_LOADED : uri ? STATUS_PENDING : STATUS_IDLE;
+const getImageState = (uri, shouldDisplaySource) => {
+  return shouldDisplaySource ? STATUS_LOADED : uri ? STATUS_PENDING : STATUS_IDLE;
 };
 
 const resolveAssetDimensions = source => {
@@ -104,10 +112,10 @@ class Image extends Component {
     super(props, context);
     // If an image has been loaded before, render it immediately
     const uri = resolveAssetSource(props.source);
-    const isPreviouslyLoaded = ImageUriCache.has(uri);
-    this.state = { shouldDisplaySource: isPreviouslyLoaded };
-    this._imageState = getImageState(uri, isPreviouslyLoaded);
-    isPreviouslyLoaded && ImageUriCache.add(uri);
+    const shouldDisplaySource = ImageUriCache.has(uri) || !canUseDOM;
+    this.state = { shouldDisplaySource };
+    this._imageState = getImageState(uri, shouldDisplaySource);
+    shouldDisplaySource && ImageUriCache.add(uri);
   }
 
   componentDidMount() {

src/components/Modal/index.js

@@ -0,0 +1,2 @@
+import UnimplementedView from '../UnimplementedView';
+export default UnimplementedView;

src/components/Picker/index.js

@@ -0,0 +1,2 @@
+import UnimplementedView from '../UnimplementedView';
+export default UnimplementedView;

src/components/ProgressBar/index.js

@@ -1,4 +1,11 @@
 /**
+ * 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 ProgressBar
  * @flow
  */
 
@@ -11,7 +18,7 @@ import React, { Component } from 'react';
 import { bool, number } from 'prop-types';
 
 class ProgressBar extends Component {
-  _progressElement = null;
+  _progressElement: View;
 
   static displayName = 'ProgressBar';
 
@@ -80,10 +87,12 @@ const styles = StyleSheet.create({
   track: {
     height: 5,
     overflow: 'hidden',
-    userSelect: 'none'
+    userSelect: 'none',
+    zIndex: 0
   },
   progress: {
-    height: '100%'
+    height: '100%',
+    zIndex: -1
   },
   animation: {
     animationDuration: '1s',

src/components/RefreshControl/index.js

@@ -0,0 +1,2 @@
+import UnimplementedView from '../UnimplementedView';
+export default UnimplementedView;

src/components/ScrollView/ScrollViewBase.js

@@ -1,8 +1,10 @@
 /**
  * Copyright (c) 2016-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.
+ *
  * @flow
  */
 

src/components/ScrollView/index.js

@@ -3,7 +3,11 @@
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
  *
- * @flow
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule ScrollView
+ * @noflow
  */
 
 import createReactClass from 'create-react-class';

src/components/SectionList/index.js

@@ -0,0 +1,2 @@
+import UnimplementedView from '../UnimplementedView';
+export default UnimplementedView;

src/components/Slider/index.js

@@ -0,0 +1,2 @@
+import UnimplementedView from '../UnimplementedView';
+export default UnimplementedView;

src/components/StaticContainer/index.js

@@ -3,6 +3,10 @@
  * 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 StaticContainer
  * @flow
  */
 

src/components/StaticRenderer/index.js

@@ -3,6 +3,10 @@
  * 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 StaticRenderer
  * @flow
  */
 

src/components/StatusBar/index.js

@@ -1,4 +1,11 @@
 /**
+ * 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 StatusBar
  * @flow
  */
 

src/components/Switch/__tests__/__snapshots__/index-test.js.snap

@@ -6,7 +6,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
   style="height:20px;width:40px;"
 >
   <div
-    class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1dernwh rn-left-1d2f490 rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
+    class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1dernwh rn-left-1d2f490 rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-13qz1uu"
     style="background-color:rgba(147,147,147,1);border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;"
   />
   <div
@@ -26,7 +26,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
   style="height:20px;width:40px;"
 >
   <div
-    class="rn-alignItems-1oszu61 rn-backgroundColor-1hj8efq rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1dernwh rn-left-1d2f490 rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
+    class="rn-alignItems-1oszu61 rn-backgroundColor-1hj8efq rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1dernwh rn-left-1d2f490 rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-13qz1uu"
     style="border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;"
   />
   <div
@@ -47,7 +47,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
   style="height:20px;width:40px;"
 >
   <div
-    class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1dernwh rn-left-1d2f490 rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
+    class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1dernwh rn-left-1d2f490 rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-13qz1uu"
     style="background-color:rgba(147,147,147,1);border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;"
   />
   <div
@@ -67,7 +67,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
   style="height:20px;width:40px;"
 >
   <div
-    class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1dernwh rn-left-1d2f490 rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
+    class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1dernwh rn-left-1d2f490 rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-13qz1uu"
     style="background-color:rgba(163,211,207,1);border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;"
   />
   <div

src/components/Switch/index.js

@@ -1,4 +1,5 @@
 /**
+ * @providesModule Switch
  * @flow
  */
 
@@ -19,7 +20,7 @@ const thumbFocusedBoxShadow = `${thumbDefaultBoxShadow}, 0 0 0 10px rgba(0,0,0,0
 
 class Switch extends PureComponent {
   _checkboxElement: HTMLInputElement;
-  _thumbElement = null;
+  _thumbElement: View;
 
   static displayName = 'Switch';
 
@@ -31,7 +32,15 @@ class Switch extends PureComponent {
     onValueChange: func,
     thumbColor: ColorPropType,
     trackColor: ColorPropType,
-    value: bool
+    value: bool,
+
+    /* eslint-disable react/sort-prop-types */
+    // Equivalent of 'activeTrackColor'
+    onTintColor: ColorPropType,
+    // Equivalent of 'thumbColor'
+    thumbTintColor: ColorPropType,
+    // Equivalent of 'trackColor'
+    tintColor: ColorPropType
   };
 
   static defaultProps = {
@@ -62,10 +71,11 @@ class Switch extends PureComponent {
       thumbColor,
       trackColor,
       value,
-      // remove any iOS-only props
-      onTintColor, // eslint-disable-line
-      thumbTintColor, // eslint-disable-line
-      tintColor, // eslint-disable-line
+
+      // React Native compatibility
+      onTintColor,
+      thumbTintColor,
+      tintColor,
       ...other
     } = this.props;
 
@@ -74,8 +84,8 @@ class Switch extends PureComponent {
     const minWidth = multiplyStyleLengthValue(height, 2);
     const width = styleWidth > minWidth ? styleWidth : minWidth;
     const trackBorderRadius = multiplyStyleLengthValue(height, 0.5);
-    const trackCurrentColor = value ? activeTrackColor : trackColor;
-    const thumbCurrentColor = value ? activeThumbColor : thumbColor;
+    const trackCurrentColor = value ? onTintColor || activeTrackColor : tintColor || trackColor;
+    const thumbCurrentColor = value ? activeThumbColor : thumbTintColor || thumbColor;
     const thumbHeight = height;
     const thumbWidth = thumbHeight;
 
@@ -167,7 +177,7 @@ const styles = StyleSheet.create({
     height: '70%',
     margin: 'auto',
     transitionDuration: '0.1s',
-    width: '90%'
+    width: '100%'
   },
   disabledTrack: {
     backgroundColor: '#D5D5D5'

src/components/Text/TextPropTypes.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2015-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 TextPropTypes
  * @flow
  */
 

src/components/Text/TextStylePropTypes.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2015-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.
+ *
  * @flow
  */
 

src/components/Text/__tests__/__snapshots__/index-test.js.snap

@@ -1,14 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/Text prop "children" 1`] = `
-<div
-  class="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
-  dir="auto"
->
-  children
-</div>
-`;
-
 exports[`components/Text prop "onPress" 1`] = `
 <div
   class="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-cursor-1loqt21 rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"

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

@@ -1,13 +1,36 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render, shallow } from 'enzyme';
 import Text from '../';
 
 describe('components/Text', () => {
+  describe('rendered element', () => {
+    test('is a "div" by default', () => {
+      const component = shallow(<Text />);
+      expect(component.type()).toBe('div');
+    });
+
+    test('is a "span" when inside <Text>', () => {
+      const component = render(<Text children={<Text />} />);
+      expect(component.find('span').length).toEqual(1);
+    });
+
+    test('includes dir="auto" prop', () => {
+      const component = shallow(<Text />);
+      expect(component.prop('dir')).toBe('auto');
+    });
+
+    test('allows "dir" to be overridden', () => {
+      const component = shallow(<Text dir="rtl" />);
+      expect(component.prop('dir')).toBe('rtl');
+    });
+  });
+
   test('prop "children"', () => {
-    const component = render(<Text>children</Text>);
-    expect(component).toMatchSnapshot();
+    const children = <Text testID="1" />;
+    const component = shallow(<Text children={children} />);
+    expect(component.contains(children)).toEqual(true);
   });
 
   test('prop "numberOfLines"');

src/components/Text/index.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2015-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 Text
  * @flow
  */
 
@@ -46,6 +54,8 @@ class Text extends Component {
       ...otherProps
     } = this.props;
 
+    const { isInAParentText } = this.context;
+
     if (onPress) {
       otherProps.accessible = true;
       otherProps.onClick = onPress;
@@ -63,7 +73,9 @@ class Text extends Component {
       onPress && styles.pressable
     ];
 
-    return createDOMElement('div', otherProps);
+    const component = isInAParentText ? 'span' : 'div';
+
+    return createDOMElement(component, otherProps);
   }
 
   _createEnterHandler(fn) {

src/components/TextInput/TextInputState.js

@@ -1,8 +1,12 @@
 /**
- * Copyright (c) 2016-present, Nicolas Gallagher.
+ * Copyright (c) 2015-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 TextInputState
  * @flow
  */
 

src/components/TextInput/TextInputStylePropTypes.js

@@ -1,4 +1,10 @@
 /**
+ * Copyright (c) 2015-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.
+ *
  * @flow
  */
 

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

@@ -146,6 +146,71 @@ describe('components/TextInput', () => {
     }
   });
 
+  describe('prop "onKeyPress"', () => {
+    test('enter key', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyPress', { which: 13 });
+      function onKeyPress(e) {
+        expect(e.nativeEvent.key).toEqual('Enter');
+        done();
+      }
+    });
+
+    test('space key', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyPress', { which: 32 });
+      function onKeyPress(e) {
+        expect(e.nativeEvent.key).toEqual(' ');
+        done();
+      }
+    });
+
+    test('backspace key', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyDown', { which: 8 });
+      function onKeyPress(e) {
+        expect(e.nativeEvent.key).toEqual('Backspace');
+        done();
+      }
+    });
+
+    test('text key', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyPress', { which: 97 });
+      function onKeyPress(e) {
+        expect(e.nativeEvent.key).toEqual('a');
+        done();
+      }
+    });
+
+    test('target element is included', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyPress');
+      function onKeyPress(e) {
+        expect(e.nativeEvent.target).toBeDefined();
+        done();
+      }
+    });
+
+    test('modifier keys', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyPress', {
+        altKey: true,
+        ctrlKey: true,
+        metaKey: true,
+        shiftKey: true,
+        which: 97
+      });
+      function onKeyPress(e) {
+        expect(e.nativeEvent.altKey).toEqual(true);
+        expect(e.nativeEvent.ctrlKey).toEqual(true);
+        expect(e.nativeEvent.metaKey).toEqual(true);
+        expect(e.nativeEvent.shiftKey).toEqual(true);
+        done();
+      }
+    });
+  });
+
   test('prop "onSelectionChange"', done => {
     const input = findNativeInput(
       mount(<TextInput defaultValue="12345" onSelectionChange={onSelectionChange} />)
@@ -167,6 +232,8 @@ describe('components/TextInput', () => {
       );
       input.simulate('keyPress', { which: 13 });
       function onSubmitEditing(e) {
+        expect(e.nativeEvent.target).toBeDefined();
+        expect(e.nativeEvent.text).toBe('12345');
         done();
       }
     });

src/components/TextInput/index.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2015-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 TextInput
  * @flow
  */
 
@@ -219,7 +227,8 @@ class TextInput extends Component {
       onBlur: normalizeEventHandler(this._handleBlur),
       onChange: normalizeEventHandler(this._handleChange),
       onFocus: normalizeEventHandler(this._handleFocus),
-      onKeyPress: normalizeEventHandler(this._handleKeyPress),
+      onKeyDown: this._handleKeyDown,
+      onKeyPress: this._handleKeyPress,
       onSelect: normalizeEventHandler(this._handleSelectionChange),
       readOnly: !editable,
       ref: this._setNode,
@@ -267,15 +276,51 @@ class TextInput extends Component {
     }
   };
 
+  _handleKeyDown = e => {
+    const { onKeyPress } = this.props;
+    if (onKeyPress && e.which === 8) {
+      onKeyPress({ nativeEvent: { key: 'Backspace' } });
+    }
+  };
+
   _handleKeyPress = e => {
     const { blurOnSubmit, multiline, onKeyPress, onSubmitEditing } = this.props;
     const blurOnSubmitDefault = !multiline;
     const shouldBlurOnSubmit = blurOnSubmit == null ? blurOnSubmitDefault : blurOnSubmit;
+
     if (onKeyPress) {
-      onKeyPress(e);
+      let keyValue;
+      // enter
+      if (e.which === 13) {
+        keyValue = 'Enter';
+      } else if (e.which === 32) {
+        // space
+        keyValue = ' ';
+      } else {
+        // we trim to only care about the keys that has a textual representation
+        if (e.shiftKey) {
+          keyValue = String.fromCharCode(e.which).trim();
+        } else {
+          keyValue = String.fromCharCode(e.which).toLowerCase().trim();
+        }
+      }
+
+      if (keyValue) {
+        const nativeEvent = {
+          altKey: e.altKey,
+          ctrlKey: e.ctrlKey,
+          key: keyValue,
+          metaKey: e.metaKey,
+          shiftKey: e.shiftKey,
+          target: e.target
+        };
+        onKeyPress({ nativeEvent });
+      }
     }
+
     if (!e.isDefaultPrevented() && e.which === 13) {
       if (onSubmitEditing) {
+        e.nativeEvent = { target: e.target, text: e.target.value };
         onSubmitEditing(e);
       }
       if (shouldBlurOnSubmit) {

src/components/Touchable/BoundingDimensions.js

@@ -1,22 +1,21 @@
-/* eslint-disable */
-
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) 2015-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.
+ *
+ * @flow
  */
 
 import PooledClass from '../../vendor/PooledClass';
 
-var twoArgumentPooler = PooledClass.twoArgumentPooler;
+const twoArgumentPooler = PooledClass.twoArgumentPooler;
 
 /**
  * PooledClass representing the bounding rectangle of a region.
- *
- * @param {number} width Width of bounding rectangle.
- * @param {number} height Height of bounding rectangle.
- * @constructor BoundingDimensions
  */
-function BoundingDimensions(width, height) {
+function BoundingDimensions(width: number, height: number) {
   this.width = width;
   this.height = height;
 }
@@ -26,10 +25,6 @@ BoundingDimensions.prototype.destructor = function() {
   this.height = null;
 };
 
-/**
- * @param {HTMLElement} element Element to return `BoundingDimensions` for.
- * @return {BoundingDimensions} Bounding dimensions of `element`.
- */
 BoundingDimensions.getPooledFromElement = function(element) {
   return BoundingDimensions.getPooled(element.offsetWidth, element.offsetHeight);
 };

src/components/Touchable/Position.js

@@ -1,22 +1,17 @@
-/* eslint-disable */
-
 /**
  * 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.
+ *
+ * @noflow
  */
 
 import PooledClass from '../../vendor/PooledClass';
 
-var twoArgumentPooler = PooledClass.twoArgumentPooler;
+const twoArgumentPooler = PooledClass.twoArgumentPooler;
 
-/**
- * Position does not expose methods for construction via an `HTMLDOMElement`,
- * because it isn't meaningful to construct such a thing without first defining
- * a frame of reference.
- *
- * @param {number} windowStartKey Key that window starts at.
- * @param {number} windowEndKey Key that window ends at.
- */
 function Position(left, top) {
   this.left = left;
   this.top = top;

src/components/Touchable/Touchable.js

@@ -1,13 +1,15 @@
 /* eslint-disable */
+
 /**
+ * Copyright (c) 2016-present, Nicolas Gallagher.
  * Copyright (c) 2013-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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule Touchable
+ * @noflow
  */
 
 /* @edit start */
@@ -108,7 +110,7 @@ import View from '../../components/View';
 /**
  * Touchable states.
  */
-var States = {
+const States = {
   NOT_RESPONDER: 'NOT_RESPONDER', // Not the responder
   RESPONDER_INACTIVE_PRESS_IN: 'RESPONDER_INACTIVE_PRESS_IN', // Responder, inactive, in the `PressRect`
   RESPONDER_INACTIVE_PRESS_OUT: 'RESPONDER_INACTIVE_PRESS_OUT', // Responder, inactive, out of `PressRect`
@@ -122,7 +124,7 @@ var States = {
 /**
  * Quick lookup map for states that are considered to be "active"
  */
-var IsActive = {
+const IsActive = {
   RESPONDER_ACTIVE_PRESS_OUT: true,
   RESPONDER_ACTIVE_PRESS_IN: true
 };
@@ -131,20 +133,20 @@ var IsActive = {
  * Quick lookup for states that are considered to be "pressing" and are
  * therefore eligible to result in a "selection" if the press stops.
  */
-var IsPressingIn = {
+const IsPressingIn = {
   RESPONDER_INACTIVE_PRESS_IN: true,
   RESPONDER_ACTIVE_PRESS_IN: true,
   RESPONDER_ACTIVE_LONG_PRESS_IN: true
 };
 
-var IsLongPressingIn = {
+const IsLongPressingIn = {
   RESPONDER_ACTIVE_LONG_PRESS_IN: true
 };
 
 /**
  * Inputs to the state machine.
  */
-var Signals = {
+const Signals = {
   DELAY: 'DELAY',
   RESPONDER_GRANT: 'RESPONDER_GRANT',
   RESPONDER_RELEASE: 'RESPONDER_RELEASE',
@@ -157,7 +159,7 @@ var Signals = {
 /**
  * Mapping from States x Signals => States
  */
-var Transitions = {
+const Transitions = {
   NOT_RESPONDER: {
     DELAY: States.ERROR,
     RESPONDER_GRANT: States.RESPONDER_INACTIVE_PRESS_IN,
@@ -235,15 +237,15 @@ var Transitions = {
 // ==== Typical Constants for integrating into UI components ====
 // var HIT_EXPAND_PX = 20;
 // var HIT_VERT_OFFSET_PX = 10;
-var HIGHLIGHT_DELAY_MS = 130;
+const HIGHLIGHT_DELAY_MS = 130;
 
-var PRESS_EXPAND_PX = 20;
+const PRESS_EXPAND_PX = 20;
 
-var LONG_PRESS_THRESHOLD = 500;
+const LONG_PRESS_THRESHOLD = 500;
 
-var LONG_PRESS_DELAY_MS = LONG_PRESS_THRESHOLD - HIGHLIGHT_DELAY_MS;
+const LONG_PRESS_DELAY_MS = LONG_PRESS_THRESHOLD - HIGHLIGHT_DELAY_MS;
 
-var LONG_PRESS_ALLOWED_MOVEMENT = 10;
+const LONG_PRESS_ALLOWED_MOVEMENT = 10;
 
 // Default amount "active" region protrudes beyond box
 
@@ -311,7 +313,7 @@ var LONG_PRESS_ALLOWED_MOVEMENT = 10;
  *
  * @lends Touchable.prototype
  */
-var TouchableMixin = {
+const TouchableMixin = {
   /**
    * Clear all timeouts on unmount
    */
@@ -362,7 +364,7 @@ var TouchableMixin = {
    *
    */
   touchableHandleResponderGrant: function(e) {
-    var dispatchID = e.currentTarget;
+    const dispatchID = e.currentTarget;
     // Since e is used in a callback invoked on another event loop
     // (as in setTimeout etc), we need to call e.persist() on the
     // event to make sure it doesn't get reused in the event object pool.
@@ -374,7 +376,7 @@ var TouchableMixin = {
     this.state.touchable.touchState = States.NOT_RESPONDER;
     this.state.touchable.responderID = dispatchID;
     this._receiveSignal(Signals.RESPONDER_GRANT, e);
-    var delayMS = this.touchableGetHighlightDelayMS !== undefined
+    let delayMS = this.touchableGetHighlightDelayMS !== undefined
       ? Math.max(this.touchableGetHighlightDelayMS(), 0)
       : HIGHLIGHT_DELAY_MS;
     delayMS = isNaN(delayMS) ? HIGHLIGHT_DELAY_MS : delayMS;
@@ -384,7 +386,7 @@ var TouchableMixin = {
       this._handleDelay(e);
     }
 
-    var longDelayMS = this.touchableGetLongPressDelayMS !== undefined
+    let longDelayMS = this.touchableGetLongPressDelayMS !== undefined
       ? Math.max(this.touchableGetLongPressDelayMS(), 10)
       : LONG_PRESS_DELAY_MS;
     longDelayMS = isNaN(longDelayMS) ? LONG_PRESS_DELAY_MS : longDelayMS;
@@ -430,9 +432,9 @@ var TouchableMixin = {
       return;
     }
 
-    var positionOnActivate = this.state.touchable.positionOnActivate;
-    var dimensionsOnActivate = this.state.touchable.dimensionsOnActivate;
-    var pressRectOffset = this.touchableGetPressRectOffset
+    const positionOnActivate = this.state.touchable.positionOnActivate;
+    const dimensionsOnActivate = this.state.touchable.dimensionsOnActivate;
+    const pressRectOffset = this.touchableGetPressRectOffset
       ? this.touchableGetPressRectOffset()
       : {
           left: PRESS_EXPAND_PX,
@@ -441,12 +443,12 @@ var TouchableMixin = {
           bottom: PRESS_EXPAND_PX
         };
 
-    var pressExpandLeft = pressRectOffset.left;
-    var pressExpandTop = pressRectOffset.top;
-    var pressExpandRight = pressRectOffset.right;
-    var pressExpandBottom = pressRectOffset.bottom;
+    let pressExpandLeft = pressRectOffset.left;
+    let pressExpandTop = pressRectOffset.top;
+    let pressExpandRight = pressRectOffset.right;
+    let pressExpandBottom = pressRectOffset.bottom;
 
-    var hitSlop = this.touchableGetHitSlop ? this.touchableGetHitSlop() : null;
+    const hitSlop = this.touchableGetHitSlop ? this.touchableGetHitSlop() : null;
 
     if (hitSlop) {
       pressExpandLeft += hitSlop.left;
@@ -455,12 +457,12 @@ var TouchableMixin = {
       pressExpandBottom += hitSlop.bottom;
     }
 
-    var touch = TouchEventUtils.extractSingleTouch(e.nativeEvent);
-    var pageX = touch && touch.pageX;
-    var pageY = touch && touch.pageY;
+    const touch = TouchEventUtils.extractSingleTouch(e.nativeEvent);
+    const pageX = touch && touch.pageX;
+    const pageY = touch && touch.pageY;
 
     if (this.pressInLocation) {
-      var movedDistance = this._getDistanceBetweenPoints(
+      const movedDistance = this._getDistanceBetweenPoints(
         pageX,
         pageY,
         this.pressInLocation.pageX,
@@ -471,14 +473,14 @@ var TouchableMixin = {
       }
     }
 
-    var isTouchWithinActive =
+    const isTouchWithinActive =
       pageX > positionOnActivate.left - pressExpandLeft &&
       pageY > positionOnActivate.top - pressExpandTop &&
       pageX < positionOnActivate.left + dimensionsOnActivate.width + pressExpandRight &&
       pageY < positionOnActivate.top + dimensionsOnActivate.height + pressExpandBottom;
     if (isTouchWithinActive) {
       this._receiveSignal(Signals.ENTER_PRESS_RECT, e);
-      var curState = this.state.touchable.touchState;
+      const curState = this.state.touchable.touchState;
       if (curState === States.RESPONDER_INACTIVE_PRESS_IN) {
         // fix for t7967420
         this._cancelLongPressDelayTimeout();
@@ -590,7 +592,7 @@ var TouchableMixin = {
 
   _handleLongDelay: function(e) {
     this.longPressDelayTimeout = null;
-    var curState = this.state.touchable.touchState;
+    const curState = this.state.touchable.touchState;
     if (
       curState !== States.RESPONDER_ACTIVE_PRESS_IN &&
       curState !== States.RESPONDER_ACTIVE_LONG_PRESS_IN
@@ -617,9 +619,9 @@ var TouchableMixin = {
    * @sideeffects
    */
   _receiveSignal: function(signal, e) {
-    var responderID = this.state.touchable.responderID;
-    var curState = this.state.touchable.touchState;
-    var nextState = Transitions[curState] && Transitions[curState][signal];
+    const responderID = this.state.touchable.responderID;
+    const curState = this.state.touchable.touchState;
+    const nextState = Transitions[curState] && Transitions[curState][signal];
     if (!responderID && signal === Signals.RESPONDER_RELEASE) {
       return;
     }
@@ -663,17 +665,17 @@ var TouchableMixin = {
   },
 
   _savePressInLocation: function(e) {
-    var touch = TouchEventUtils.extractSingleTouch(e.nativeEvent);
-    var pageX = touch && touch.pageX;
-    var pageY = touch && touch.pageY;
-    var locationX = touch && touch.locationX;
-    var locationY = touch && touch.locationY;
+    const touch = TouchEventUtils.extractSingleTouch(e.nativeEvent);
+    const pageX = touch && touch.pageX;
+    const pageY = touch && touch.pageY;
+    const locationX = touch && touch.locationX;
+    const locationY = touch && touch.locationY;
     this.pressInLocation = { pageX, pageY, locationX, locationY };
   },
 
   _getDistanceBetweenPoints: function(aX, aY, bX, bY) {
-    var deltaX = aX - bX;
-    var deltaY = aY - bY;
+    const deltaX = aX - bX;
+    const deltaY = aY - bY;
     return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
   },
 
@@ -689,10 +691,10 @@ var TouchableMixin = {
    * @sideeffects
    */
   _performSideEffectsForTransition: function(curState, nextState, signal, e) {
-    var curIsHighlight = this._isHighlight(curState);
-    var newIsHighlight = this._isHighlight(nextState);
+    const curIsHighlight = this._isHighlight(curState);
+    const newIsHighlight = this._isHighlight(nextState);
 
-    var isFinalSignal =
+    const isFinalSignal =
       signal === Signals.RESPONDER_TERMINATED || signal === Signals.RESPONDER_RELEASE;
 
     if (isFinalSignal) {
@@ -714,13 +716,13 @@ var TouchableMixin = {
     }
 
     if (IsPressingIn[curState] && signal === Signals.RESPONDER_RELEASE) {
-      var hasLongPressHandler = !!this.props.onLongPress;
-      var pressIsLongButStillCallOnPress =
+      const hasLongPressHandler = !!this.props.onLongPress;
+      const pressIsLongButStillCallOnPress =
         IsLongPressingIn[curState] && // We *are* long pressing..
         (!hasLongPressHandler || // But either has no long handler
           !this.touchableLongPressCancelsPress()); // or we're told to ignore it.
 
-      var shouldInvokePress = !IsLongPressingIn[curState] || pressIsLongButStillCallOnPress;
+      const shouldInvokePress = !IsLongPressingIn[curState] || pressIsLongButStillCallOnPress;
       if (shouldInvokePress && this.touchableHandlePress) {
         if (!newIsHighlight && !curIsHighlight) {
           // we never highlighted because of delay, but we should highlight now

src/components/Touchable/TouchableHighlight.js

@@ -1,11 +1,12 @@
 /* eslint-disable */
+
 /**
+ * Copyright (c) 2016-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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule TouchableHighlight
  * @noflow
@@ -28,12 +29,12 @@ import { func, number } from 'prop-types';
 
 type Event = Object;
 
-var DEFAULT_PROPS = {
+const DEFAULT_PROPS = {
   activeOpacity: 0.85,
   underlayColor: 'black'
 };
 
-var PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
+const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
 
 /**
  * A wrapper for making views respond properly to touches.
@@ -62,7 +63,7 @@ var PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
  * > If you wish to have several child components, wrap them in a View.
  */
 
-var TouchableHighlight = createReactClass({
+const TouchableHighlight = createReactClass({
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
     /**
@@ -227,7 +228,7 @@ var TouchableHighlight = createReactClass({
   },
 
   _onKeyEnter(e, callback) {
-    var ENTER = 13;
+    const ENTER = 13;
     if ((e.type === 'keypress' ? e.charCode : e.keyCode) === ENTER) {
       callback && callback(e);
       e.stopPropagation();

src/components/Touchable/TouchableNativeFeedback.js

@@ -0,0 +1,2 @@
+import UnimplementedView from '../UnimplementedView';
+export default UnimplementedView;

src/components/Touchable/TouchableOpacity.js

@@ -1,11 +1,12 @@
 /* eslint-disable */
+
 /**
+ * Copyright (c) 2016-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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule TouchableOpacity
  * @noflow
@@ -22,11 +23,11 @@ import Touchable from './Touchable';
 import TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import View from '../View';
 
-var flattenStyle = StyleSheet.flatten;
+const flattenStyle = StyleSheet.flatten;
 
 type Event = Object;
 
-var PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
+const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
 
 /**
  * A wrapper for making views respond properly to touches.
@@ -49,7 +50,7 @@ var PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
  * },
  * ```
  */
-var TouchableOpacity = createReactClass({
+const TouchableOpacity = createReactClass({
   mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],
 
   propTypes: {
@@ -141,7 +142,7 @@ var TouchableOpacity = createReactClass({
   },
 
   _opacityInactive: function(duration: number) {
-    var childStyle = flattenStyle(this.props.style) || {};
+    const childStyle = flattenStyle(this.props.style) || {};
     this.setOpacityTo(childStyle.opacity === undefined ? 1 : childStyle.opacity, duration);
   },
 
@@ -150,7 +151,7 @@ var TouchableOpacity = createReactClass({
   },
 
   _onKeyEnter(e, callback) {
-    var ENTER = 13;
+    const ENTER = 13;
     if ((e.type === 'keypress' ? e.charCode : e.keyCode) === ENTER) {
       callback && callback(e);
       e.stopPropagation();

src/components/Touchable/TouchableWithoutFeedback.js

@@ -1,15 +1,15 @@
 /* eslint-disable */
 
 /**
+ * Copyright (c) 2016-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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule TouchableWithoutFeedback
- * @flow
+ * @noflow
  */
 
 import createReactClass from 'create-react-class';

src/components/Touchable/ensureComponentIsNative.js

@@ -1,11 +1,9 @@
-/* eslint-disable */
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) 2015-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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule ensureComponentIsNative
  * @flow
@@ -16,7 +14,7 @@ import invariant from 'fbjs/lib/invariant';
 const ensureComponentIsNative = (component: any) => {
   invariant(
     component && typeof component.setNativeProps === 'function',
-    'Touchable child must either be native or forward setNativeProps to a ' + 'native component'
+    'Touchable child must either be native or forward setNativeProps to a native component'
   );
 };
 

src/components/Touchable/ensurePositiveDelayProps.js

@@ -1,11 +1,9 @@
-/* eslint-disable */
 /**
  * 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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule ensurePositiveDelayProps
  * @flow

src/components/UnimplementedView/index.js

@@ -0,0 +1,49 @@
+/**
+ * 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. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule UnimplementedView
+ * @flow
+ */
+
+import View from '../View';
+import { any, object } from 'prop-types';
+import React, { Component } from 'react';
+
+/**
+ * Common implementation for a simple stubbed view.
+ */
+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.
+    // See ensureComponentIsNative.js for more info
+  }
+
+  render() {
+    return (
+      <View style={[unimplementedViewStyles, this.props.style]}>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+const unimplementedViewStyles = process.env.NODE_ENV !== 'production'
+  ? {
+      alignSelf: 'flex-start',
+      borderColor: 'red',
+      borderWidth: 1
+    }
+  : {};
+
+export default UnimplementedView;

src/components/View/ViewPropTypes.js

@@ -1,4 +1,12 @@
 /**
+ * Copyright (c) 2015-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 ViewPropTypes
  * @flow
  */
 

src/components/View/ViewStylePropTypes.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2015-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.
+ *
  * @flow
  */
 

src/components/View/__tests__/__snapshots__/index-test.js.snap

@@ -1,16 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/View prop "children" 1`] = `
-<div
-  class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
->
-  <div
-    class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-    data-testid="1"
-  />
-</div>
-`;
-
 exports[`components/View prop "hitSlop" handles partial offsets 1`] = `
 <div
   class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-zIndex-1lgpqti"
@@ -38,21 +27,3 @@ exports[`components/View prop "pointerEvents" 1`] = `
   class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-pointerEvents-ah5dr5 rn-position-bnwqim"
 />
 `;
-
-exports[`components/View rendered element is a "div" by default 1`] = `
-<div
-  class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-/>
-`;
-
-exports[`components/View rendered element is a "span" when inside <View accessibilityRole="button" /> 1`] = `
-<button
-  class="rn-alignItems-1oszu61 rn-appearance-30o5oe rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7"
-  role="button"
-  type="button"
->
-  <span
-    class="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-  />
-</button>
-`;

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

@@ -1,26 +1,26 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render, shallow } from 'enzyme';
 import View from '../';
 
 describe('components/View', () => {
   describe('rendered element', () => {
     test('is a "div" by default', () => {
-      const component = render(<View />);
-      expect(component).toMatchSnapshot();
+      const component = shallow(<View />);
+      expect(component.type()).toBe('div');
     });
 
     test('is a "span" when inside <View accessibilityRole="button" />', () => {
       const component = render(<View accessibilityRole="button"><View /></View>);
-      expect(component).toMatchSnapshot();
+      expect(component.find('span').length).toEqual(1);
     });
   });
 
   test('prop "children"', () => {
     const children = <View testID="1" />;
-    const component = render(<View>{children}</View>);
-    expect(component).toMatchSnapshot();
+    const component = shallow(<View>{children}</View>);
+    expect(component.contains(children)).toEqual(true);
   });
 
   describe('prop "hitSlop"', () => {

src/components/View/index.js

@@ -1,4 +1,9 @@
 /**
+ * Copyright (c) 2015-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * @providesModule View
  * @flow
  */
 
@@ -70,7 +75,9 @@ class View extends Component {
       otherProps.style.unshift(styles.hasHitSlop);
     }
 
+    // avoid HTML validation errors
     const component = isInAButtonView ? 'span' : 'div';
+
     return createDOMElement(component, otherProps);
   }
 }
@@ -83,7 +90,6 @@ const styles = StyleSheet.create({
     borderStyle: 'solid',
     boxSizing: 'border-box',
     display: 'flex',
-    flexBasis: 'auto',
     flexDirection: 'column',
     margin: 0,
     padding: 0,
@@ -95,7 +101,7 @@ const styles = StyleSheet.create({
   inline: {
     display: 'inline-flex'
   },
-  // this zIndex ordering positions the hitSlop above the View but behind
+  // this zIndex-ordering positions the hitSlop above the View but behind
   // its children
   hasHitSlop: {
     zIndex: 0

src/components/VirtualizedList/index.js

@@ -0,0 +1,2 @@
+import UnimplementedView from '../UnimplementedView';
+export default UnimplementedView;

src/index.js

@@ -32,19 +32,27 @@ import {
   // components
   ActivityIndicator,
   Button,
+  FlatList,
   Image,
   ListView,
+  Modal,
+  Picker,
   ProgressBar,
+  RefreshControl,
   ScrollView,
+  SectionList,
+  Slider,
   StatusBar,
   Switch,
   Text,
   TextInput,
   Touchable,
   TouchableHighlight,
+  TouchableNativeFeedback,
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
+  VirtualizedList,
 
   // propTypes
   ColorPropType,
@@ -89,19 +97,27 @@ const ReactNative = {
   // components
   ActivityIndicator,
   Button,
+  FlatList,
   Image,
   ListView,
+  Modal,
+  Picker,
   ProgressBar,
+  RefreshControl,
   ScrollView,
+  SectionList,
+  Slider,
   StatusBar,
   Switch,
   Text,
   TextInput,
   Touchable,
   TouchableHighlight,
+  TouchableNativeFeedback,
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
+  VirtualizedList,
 
   // propTypes
   ColorPropType,

src/module.js

@@ -27,21 +27,29 @@ export { default as Vibration } from './apis/Vibration';
 // components
 export { default as ActivityIndicator } from './components/ActivityIndicator';
 export { default as Button } from './components/Button';
+export { default as FlatList } from './components/FlatList';
 export { default as Image } from './components/Image';
 export { default as ListView } from './components/ListView';
+export { default as Modal } from './components/Modal';
+export { default as Picker } from './components/Picker';
 export { default as ProgressBar } from './components/ProgressBar';
+export { default as RefreshControl } from './components/RefreshControl';
 export { default as ScrollView } from './components/ScrollView';
+export { default as SectionList } from './components/SectionList';
+export { default as Slider } from './components/Slider';
 export { default as StatusBar } from './components/StatusBar';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
 export { default as TextInput } from './components/TextInput';
 export { default as Touchable } from './components/Touchable/Touchable';
 export { default as TouchableHighlight } from './components/Touchable/TouchableHighlight';
+export { default as TouchableNativeFeedback } from './components/Touchable/TouchableNativeFeedback';
 export { default as TouchableOpacity } from './components/Touchable/TouchableOpacity';
 export {
   default as TouchableWithoutFeedback
 } from './components/Touchable/TouchableWithoutFeedback';
 export { default as View } from './components/View';
+export { default as VirtualizedList } from './components/VirtualizedList';
 
 // propTypes
 export { default as ColorPropType } from './propTypes/ColorPropType';

src/modules/AccessibilityUtil/index.js

@@ -1,3 +1,13 @@
+/**
+ * Copyright (c) 2017-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.
+ *
+ * @flow
+ */
+
 import propsToAccessibilityComponent from './propsToAccessibilityComponent';
 import propsToAriaRole from './propsToAriaRole';
 import propsToTabIndex from './propsToTabIndex';

src/modules/AccessibilityUtil/propsToAccessibilityComponent.js

@@ -1,3 +1,13 @@
+/**
+ * Copyright (c) 2017-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.
+ *
+ * @noflow
+ */
+
 import propsToAriaRole from './propsToAriaRole';
 
 const roleComponents = {

src/modules/AccessibilityUtil/propsToAriaRole.js

@@ -1,3 +1,13 @@
+/**
+ * Copyright (c) 2017-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.
+ *
+ * @noflow
+ */
+
 const accessibilityComponentTypeToRole = {
   button: 'button',
   none: 'presentation'

src/modules/AccessibilityUtil/propsToTabIndex.js

@@ -1,3 +1,13 @@
+/**
+ * Copyright (c) 2017-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.
+ *
+ * @noflow
+ */
+
 import propsToAriaRole from './propsToAriaRole';
 
 const propsToTabIndex = props => {

src/modules/ImageLoader/index.js

@@ -1,3 +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.
+ *
+ * @noflow
+ */
+
 let id = 0;
 const requests = {};
 

src/modules/NativeMethodsMixin/index.js

@@ -1,8 +1,12 @@
 /**
- * Copyright (c) 2015-present, Nicolas Gallagher.
+ * Copyright (c) 2016-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 NativeMethodsMixin
  * @flow
  */
 

src/modules/ReactNativePropRegistry/index.js

@@ -1,11 +1,9 @@
-/* eslint-disable */
 /**
  * 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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule ReactNativePropRegistry
  * @flow
@@ -20,7 +18,7 @@ const createKey = id => `${prefix}-${id}`;
 
 export default class ReactNativePropRegistry {
   static register(object: Object): number {
-    let id = uniqueID++;
+    const id = uniqueID++;
     if (process.env.NODE_ENV !== 'production') {
       Object.freeze(object);
     }

src/modules/ScrollResponder/index.js

@@ -1,11 +1,10 @@
-/* eslint-disable */
 /**
+ * Copyright (c) 2016-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. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree.
  *
  * @providesModule ScrollResponder
  * @flow
@@ -15,13 +14,10 @@ import Dimensions from '../../apis/Dimensions';
 import findNodeHandle from '../findNodeHandle';
 import invariant from 'fbjs/lib/invariant';
 import Platform from '../../apis/Platform';
-import React from 'react';
 import TextInputState from '../../components/TextInput/TextInputState';
 import UIManager from '../../apis/UIManager';
 import warning from 'fbjs/lib/warning';
 
-// type Component = React.Component
-
 /**
  * Mixin that can be integrated in order to handle scrolling that plays well
  * with `ResponderEventPlugin`. Integrate with your platform specific scroll
@@ -102,7 +98,7 @@ import warning from 'fbjs/lib/warning';
 
 const emptyObject = {};
 
-var IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
+const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
 
 type State = {
   isTouching: boolean,
@@ -113,7 +109,7 @@ type State = {
 };
 type Event = Object;
 
-var ScrollResponderMixin = {
+const ScrollResponderMixin = {
   // mixins: [Subscribable.Mixin],
   scrollResponderMixinGetInitialState: function(): State {
     return {
@@ -228,7 +224,7 @@ var ScrollResponderMixin = {
    * @param {SyntheticEvent} e Event.
    */
   scrollResponderHandleTouchEnd: function(e: Event) {
-    var nativeEvent = e.nativeEvent;
+    const nativeEvent = e.nativeEvent;
     this.state.isTouching = nativeEvent.touches.length !== 0;
     this.props.onTouchEnd && this.props.onTouchEnd(e);
   },
@@ -241,7 +237,7 @@ var ScrollResponderMixin = {
 
     // By default scroll views will unfocus a textField
     // if another touch occurs outside of it
-    var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
+    const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
     if (
       !this.props.keyboardShouldPersistTaps &&
       currentlyFocusedTextInput != null &&
@@ -340,9 +336,9 @@ var ScrollResponderMixin = {
    * a touch has just started or ended.
    */
   scrollResponderIsAnimating: function(): boolean {
-    var now = Date.now();
-    var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
-    var isAnimating =
+    const now = Date.now();
+    const timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
+    const isAnimating =
       timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
       this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime;
     return isAnimating;
@@ -457,11 +453,11 @@ var ScrollResponderMixin = {
     width: number,
     height: number
   ) {
-    var keyboardScreenY = Dimensions.get('window').height;
+    let keyboardScreenY = Dimensions.get('window').height;
     if (this.keyboardWillOpenTo) {
       keyboardScreenY = this.keyboardWillOpenTo.endCoordinates.screenY;
     }
-    var scrollOffsetY = top - keyboardScreenY + height + this.additionalScrollOffset;
+    let scrollOffsetY = top - keyboardScreenY + height + this.additionalScrollOffset;
 
     // By default, this can scroll with negative offset, pulling the content
     // down so that the target component's bottom meets the keyboard's top.
@@ -548,7 +544,7 @@ var ScrollResponderMixin = {
   }
 };
 
-var ScrollResponder = {
+const ScrollResponder = {
   Mixin: ScrollResponderMixin
 };
 

src/modules/applyLayout/index.js

@@ -1,7 +1,10 @@
 /**
- * Copyright (c) 2016-present, Nicolas Gallagher.
+ * Copyright (c) 2015-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.
+ *
  * @flow
  */
 

src/modules/applyNativeMethods/index.js

@@ -2,6 +2,9 @@
  * Copyright (c) 2015-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.
+ *
  * @flow
  */
 

src/modules/createDOMElement/index.js

@@ -1,3 +1,13 @@
+/**
+ * Copyright (c) 2015-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.
+ *
+ * @noflow
+ */
+
 import '../injectResponderEventPlugin';
 
 import AccessibilityUtil from '../AccessibilityUtil';

src/modules/createDOMProps/index.js

@@ -1,3 +1,13 @@
+/**
+ * Copyright (c) 2015-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.
+ *
+ * @noflow
+ */
+
 import AccessibilityUtil from '../AccessibilityUtil';
 import StyleSheet from '../../apis/StyleSheet';
 import StyleRegistry from '../../apis/StyleSheet/registry';

src/modules/dismissKeyboard/index.js

@@ -1,3 +1,14 @@
+/**
+ * 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 dismissKeyboard
+ * @flow
+ */
+
 import TextInputState from '../../components/TextInput/TextInputState';
 
 const dismissKeyboard = () => {

src/modules/findNodeHandle/index.js

@@ -1,2 +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 findNodeHandle
+ * @noflow
+ */
+
 import { findDOMNode } from 'react-dom';
 export default findDOMNode;

src/modules/modality/index.js

@@ -1,7 +1,3 @@
-/* global document, window */
-
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-
 /**
  * Adapts focus styles based on the user's active input modality (i.e., how
  * they are interacting with the UI right now).
@@ -16,7 +12,12 @@ import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
  * 2. a focus event happened on an element which requires keyboard interaction (e.g., a text field);
  *
  * Based on https://github.com/WICG/focus-ring
+ *
+ * @noflow
  */
+
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
 const modality = () => {
   if (!canUseDOM) {
     return;

src/modules/multiplyStyleLengthValue/index.js

@@ -1,3 +1,13 @@
+/**
+ * Copyright (c) 2015-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.
+ *
+ * @noflow
+ */
+
 const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(%|\w*)/;
 
 const getUnit = str => str.match(CSS_UNIT_RE)[1];
@@ -6,9 +16,9 @@ const isNumeric = n => {
   return !isNaN(parseFloat(n)) && isFinite(n);
 };
 
-const multiplyStyleLengthValue = (value: String | Number, multiple) => {
+const multiplyStyleLengthValue = (value: string | number, multiple) => {
   if (typeof value === 'string') {
-    const number = parseFloat(value, 10) * multiple;
+    const number = parseFloat(value) * multiple;
     const unit = getUnit(value);
     return `${number}${unit}`;
   } else if (isNumeric(value)) {