0.8.8

Fix #1018

.github/CONTRIBUTING.md

@@ -4,7 +4,8 @@
 
 Before opening an issue, please search the [issue
 tracker](https://github.com/necolas/react-native-web/issues) to make sure your
-issue hasn't already been reported.
+issue hasn't already been reported. Please note that your issue may be closed
+if it doesn't include the information requested in the issue template.
 
 ## Getting started
 

.github/ISSUE_TEMPLATE/bug.md

@@ -4,29 +4,46 @@ about: "If something isn't working as expected \U0001F914"
 
 ---
 
+<!--
+Thank you for reporting an issue. Please note that an issue must include the
+information that is marked as REQUIRED below, or it may be closed.
+-->
+
 **The problem**
-A clear and concise description of the bug or problem.
+<!--
+REQUIRED: A clear and concise description of the bug or problem.
+-->
 
 **How to reproduce**
-Test case: <!-- FORK THIS TEMPLATE: https://codesandbox.io/s/6lx6ql1w5r -->
+<!--
+REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r
+
+Failing to include a reduced test case may result in the issue being closed,
+and will delay any potential fix. Your application or GitHub project is NOT
+considered a reduced test case. If the issue only affects certain browsers,
+providing screenshots is also helpful.
+-->
+Simplified test case: <!-- add link here -->
 
 Steps to reproduce:
 1.
 2.
 3.
 
-<!-- If applicable, add screenshots to help explain your problem. -->
-
 **Expected behavior**
-A clear and concise description of what you expected to happen.
+<!--
+REQUIRED: A clear and concise description of what you expected to happen.
+-->
 
 **Environment (include versions). Did this work in previous versions?**
 
-* OS:
+* React Native for Web (version): TBC
-* Device:
+* React (version): TBC
-* Browser:
+* Browser: TBC
-* React Native for Web (version):
+
-* React (version):
+<!--
+OPTIONAL:
 
 **Additional context**
 Add any other context about the problem here.
+-->

.github/ISSUE_TEMPLATE/feature.md

@@ -5,13 +5,13 @@ about: If you have a suggestion
 ---
 
 **Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is, e.g., I have an issue when [...]
+<!-- A clear and concise description of what the problem is, e.g., I have an issue when [...] -->
 
 **Describe a solution you'd like**
-A clear and concise description of what you want to happen. Add any considered drawbacks.
+<!-- A clear and concise description of what you want to happen. Add any considered drawbacks. -->
 
 **Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+<!-- Add any other context or screenshots about the feature request here. -->

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.8.3",
+  "version": "0.8.8",
   "name": "react-native-web-monorepo",
   "scripts": {
     "clean": "del ./packages/*/dist",
@@ -54,10 +54,10 @@
     "lint-staged": "^7.1.0",
     "npm-run-all": "^4.1.3",
     "prettier": "^1.12.1",
-    "react": "^16.3.2",
+    "react": "^16.4.1",
-    "react-art": "^16.3.2",
+    "react-art": "^16.4.1",
-    "react-dom": "^16.3.2",
+    "react-dom": "^16.4.1",
-    "react-test-renderer": "^16.3.2"
+    "react-test-renderer": "^16.4.1"
   },
   "workspaces": [
     "packages/*"

packages/babel-plugin-react-native-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-native-web",
-  "version": "0.8.3",
+  "version": "0.8.8",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {

packages/benchmarks/package.json

@@ -1,37 +1,37 @@
 {
   "private": true,
   "name": "benchmarks",
-  "version": "0.8.3",
+  "version": "0.8.8",
   "scripts": {
     "build": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
     "release": "yarn build && git checkout gh-pages && rm -rf ../../benchmarks && mv dist ../../benchmarks && git add -A && git commit -m \"Benchmarks deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
-    "aphrodite": "^2.2.0",
+    "aphrodite": "^2.2.2",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
-    "d3-scale-chromatic": "^1.2.0",
+    "d3-scale-chromatic": "^1.3.0",
-    "emotion": "^9.1.3",
+    "emotion": "^9.2.4",
-    "fela": "^6.1.7",
+    "fela": "^6.1.9",
     "glamor": "2.20.40",
     "radium": "^0.24.0",
-    "react": "^16.3.2",
+    "react": "^16.4.1",
-    "react-dom": "^16.3.2",
+    "react-dom": "^16.4.1",
-    "react-fela": "^7.2.0",
+    "react-fela": "^7.3.1",
-    "react-jss": "^8.4.0",
+    "react-jss": "^8.6.1",
-    "react-native-web": "0.8.3",
+    "react-native-web": "0.8.8",
-    "reactxp": "^1.1.1",
+    "reactxp": "^1.3.0",
-    "styled-components": "^3.2.6",
+    "styled-components": "^3.3.3",
-    "styled-jsx": "^2.2.6",
+    "styled-jsx": "^2.2.7",
     "styletron-engine-atomic": "^1.0.5",
-    "styletron-react": "^4.2.1"
+    "styletron-react": "^4.3.1"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.3",
+    "babel-plugin-react-native-web": "0.8.8",
-    "css-loader": "^0.28.11",
+    "css-loader": "^1.0.0",
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",
-    "webpack": "^4.8.1",
+    "webpack": "^4.15.1",
-    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^2.1.3"
+    "webpack-cli": "^3.0.8"
   }
 }

packages/benchmarks/webpack.config.js

@@ -20,7 +20,7 @@ module.exports = {
           'style-loader',
           {
             loader: 'css-loader',
-            options: { module: true, localIdentName: '[hash:base64:8]' }
+            options: { modules: true, localIdentName: '[hash:base64:8]' }
           }
         ]
       },

packages/examples/package.json

@@ -1,19 +1,19 @@
 {
   "private": true,
   "name": "react-native-examples",
-  "version": "0.8.3",
+  "version": "0.8.8",
   "scripts": {
     "build": "mkdir -p dist && cp -f src/index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
     "release": "yarn build && git checkout gh-pages && rm -rf ../../examples && mv dist ../../examples && git add -A && git commit -m \"Examples deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "react": "^16.3.2",
+    "react": "^16.4.1",
-    "react-dom": "^16.3.2",
+    "react-dom": "^16.4.1",
-    "react-native-web": "0.8.3"
+    "react-native-web": "0.8.8"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.3",
+    "babel-plugin-react-native-web": "0.8.8",
     "babel-plugin-transform-runtime": "^6.23.0",
     "file-loader": "^1.1.11",
     "webpack": "^4.8.1",

packages/react-native-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.8.3",
+  "version": "0.8.8",
   "description": "React Native for Web",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",

packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js

@@ -185,6 +185,16 @@ const createReducer = (style, styleProps) => {
         break;
       }
 
+      // TODO: remove once this issue is fixed
+      // https://github.com/rofrischmann/inline-style-prefixer/issues/159
+      case 'backgroundClip': {
+        if (value === 'text') {
+          resolvedStyle.backgroundClip = value;
+          resolvedStyle.WebkitBackgroundClip = value;
+        }
+        break;
+      }
+
       case 'display': {
         resolvedStyle.display = value;
         // A flex container in React Native has these defaults which should be

packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

@@ -330,18 +330,27 @@ describe('components/TextInput', () => {
     });
   });
 
-  test('prop "onSelectionChange"', done => {
+  describe('prop "onSelectionChange"', () => {
-    const input = findNativeInput(
+    test('is called on select', done => {
-      mount(<TextInput defaultValue="12345" onSelectionChange={onSelectionChange} />)
+      const input = findNativeInput(
-    );
+        mount(<TextInput defaultValue="12345" onSelectionChange={onSelectionChange} />)
-    input.simulate('select', {
+      );
-      target: { selectionStart: 0, selectionEnd: 3 }
+      input.simulate('select', {
+        target: { selectionStart: 0, selectionEnd: 3 }
+      });
+      function onSelectionChange(e) {
+        expect(e.nativeEvent.selection.end).toEqual(3);
+        expect(e.nativeEvent.selection.start).toEqual(0);
+        done();
+      }
+    });
+
+    test('is called on change', () => {
+      const onSelectionChange = jest.fn();
+      const input = findNativeInput(mount(<TextInput onSelectionChange={onSelectionChange} />));
+      input.simulate('change');
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
     });
-    function onSelectionChange(e) {
-      expect(e.nativeEvent.selection.end).toEqual(3);
-      expect(e.nativeEvent.selection.start).toEqual(0);
-      done();
-    }
   });
 
   describe('prop "onSubmitEditing"', () => {
@@ -368,6 +377,8 @@ describe('components/TextInput', () => {
 
     test('multi-line input with "blurOnSubmit" triggers "onSubmitEditing"', () => {
       const onSubmitEditing = jest.fn();
+      const preventDefault = jest.fn();
+
       const input = findNativeTextarea(
         mount(
           <TextInput
@@ -380,10 +391,13 @@ describe('components/TextInput', () => {
       );
 
       // shift+enter should enter newline, not submit
-      input.simulate('keyPress', { which: 13, shiftKey: true });
+      input.simulate('keyPress', { which: 13, preventDefault, shiftKey: true });
-      input.simulate('keyPress', { which: 13 });
-      expect(onSubmitEditing).toHaveBeenCalledTimes(1);
       expect(onSubmitEditing).not.toHaveBeenCalledWith(expect.objectContaining({ shiftKey: true }));
+      expect(preventDefault).not.toHaveBeenCalled();
+
+      input.simulate('keyPress', { which: 13, preventDefault });
+      expect(onSubmitEditing).toHaveBeenCalledTimes(1);
+      expect(preventDefault).toHaveBeenCalledTimes(1);
     });
   });
 

packages/react-native-web/src/exports/TextInput/index.js

@@ -183,6 +183,7 @@ class TextInput extends Component<*> {
       blurOnSubmit,
       clearTextOnFocus,
       onChangeText,
+      onLayout,
       onSelectionChange,
       onSubmitEditing,
       selection,
@@ -281,6 +282,7 @@ class TextInput extends Component<*> {
     if (onChangeText) {
       onChangeText(text);
     }
+    this._handleSelectionChange(e);
   };
 
   _handleFocus = e => {
@@ -375,6 +377,8 @@ class TextInput extends Component<*> {
 
     if (!e.isDefaultPrevented() && e.which === 13 && !e.shiftKey) {
       if ((blurOnSubmit || !multiline) && onSubmitEditing) {
+        // prevent "Enter" from inserting a newline
+        e.preventDefault();
         e.nativeEvent = { target: e.target, text: e.target.value };
         onSubmitEditing(e);
       }

packages/react-native-web/src/exports/View/filterSupportedProps.js

@@ -38,19 +38,21 @@ const whitelist = {
   pointerEvents: true,
   style: true,
   testID: true,
-  // escape-hatches for ScrollView
+  /* @platform web */
   onScroll: true,
   onWheel: true,
-  // escape-hatches for Touchable keyboard support
+  // keyboard events
   onKeyDown: true,
   onKeyPress: true,
   onKeyUp: true,
-  // escape-hatches for creating hover effects
+  // mouse events (e.g, hover effects)
+  onMouseDown: true,
   onMouseEnter: true,
   onMouseLeave: true,
   onMouseMove: true,
   onMouseOver: true,
   onMouseOut: true,
+  onMouseUp: true,
   // unstable escape-hatches for web
   className: true,
   href: true,

packages/react-native-web/src/modules/applyLayout/index.js

@@ -52,8 +52,10 @@ const observe = instance => {
 
   if (resizeObserver) {
     const node = findNodeHandle(instance);
-    node._layoutId = id;
+    if (node) {
-    resizeObserver.observe(node);
+      node._layoutId = id;
+      resizeObserver.observe(node);
+    }
   } else {
     instance._layoutId = id;
     instance._handleLayout();
@@ -64,8 +66,10 @@ const unobserve = instance => {
   delete registry[instance._layoutId];
   if (resizeObserver) {
     const node = findNodeHandle(instance);
-    delete node._layoutId;
+    if (node) {
-    resizeObserver.unobserve(node);
+      delete node._layoutId;
+      resizeObserver.unobserve(node);
+    }
   } else {
     delete instance._layoutId;
   }
@@ -131,11 +135,12 @@ const applyLayout = Component => {
           ) {
             this._layoutState = { x, y, width, height };
             const nativeEvent = {
-              layout: this._layoutState,
+              layout: this._layoutState
-              get target() {
-                return findNodeHandle(this);
-              }
             };
+            Object.defineProperty(nativeEvent, 'target', {
+              enumerable: true,
+              get: () => findNodeHandle(this)
+            });
             onLayout({ nativeEvent, timeStamp: Date.now() });
           }
         }

packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

@@ -399,7 +399,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     if (this._scrollRef && this._scrollRef.getScrollableNode) {
       return this._scrollRef.getScrollableNode();
     } else {
-      return ReactNative.findNodeHandle(this._scrollRef);
+      return findNodeHandle(this._scrollRef);
     }
   }
 
@@ -1058,8 +1058,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   _measureLayoutRelativeToContainingList(): void {
     UIManager.measureLayout(
-      ReactNative.findNodeHandle(this),
+      findNodeHandle(this),
-      ReactNative.findNodeHandle(
+      findNodeHandle(
         this.context.virtualizedList.getOutermostParentListRef(),
       ),
       error => {

packages/website/guides/getting-started.md

@@ -175,9 +175,13 @@ Please refer to the Jest documentation for more information.
 
 ```
 [options]
-module.name_mapper='(react-native)' -> 'react-native-web'
+module.name_mapper='^react-native$' -> 'react-native-web'
 ```
 
+You may also need to inlucde a custom libdef
+([example](https://gist.github.com/paularmstrong/f60b40d16fc83e1e8e532d483336f9bb))
+in your config.
+
 ## Multi-platform applications
 
 ### Web-specific code

packages/website/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "website",
-  "version": "0.8.3",
+  "version": "0.8.8",
   "scripts": {
     "build": "build-storybook -o ./dist -c ./storybook/.storybook",
     "start": "start-storybook -p 9001 -c ./storybook/.storybook",
@@ -10,12 +10,12 @@
   "dependencies": {
     "@storybook/addon-options": "^3.4.3",
     "@storybook/react": "^3.4.3",
-    "react": "^16.3.2",
+    "react": "^16.4.1",
-    "react-dom": "^16.3.2",
+    "react-dom": "^16.4.1",
-    "react-native-web": "0.8.3"
+    "react-native-web": "0.8.8"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.3",
+    "babel-plugin-react-native-web": "0.8.8",
     "url-loader": "^1.0.1",
     "webpack": "^4.8.1"
   }

packages/website/storybook/ui-explorer/UIExplorer.js

@@ -22,7 +22,7 @@ const Divider = () => <View style={styles.divider} />;
 
 const SourceLink = ({ uri }) => (
   <ExternalLink
-    href={`https://github.com/necolas/react-native-web/tree/master/packages/docs/storybook/${uri}`}
+    href={`https://github.com/necolas/react-native-web/tree/master/packages/website/storybook/${uri}`}
     style={styles.link}
   >
     View source code on GitHub