0.8.9

Allow ScrollView to be scrolled from gestures originating in a
descendent ScrollView.

Fix #1042
Close #1043

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.8.5",
+  "version": "0.8.9",
   "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-art": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "react-test-renderer": "^16.3.2"
+    "react": "^16.4.1",
+    "react-art": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "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.5",
+  "version": "0.8.9",
   "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.5",
+  "version": "0.8.9",
   "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",
-    "classnames": "^2.2.5",
-    "d3-scale-chromatic": "^1.2.0",
-    "emotion": "^9.1.3",
-    "fela": "^6.1.7",
+    "aphrodite": "^2.2.2",
+    "classnames": "^2.2.6",
+    "d3-scale-chromatic": "^1.3.0",
+    "emotion": "^9.2.4",
+    "fela": "^6.1.9",
     "glamor": "2.20.40",
     "radium": "^0.24.0",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "react-fela": "^7.2.0",
-    "react-jss": "^8.4.0",
-    "react-native-web": "0.8.5",
-    "reactxp": "^1.1.1",
-    "styled-components": "^3.2.6",
-    "styled-jsx": "^2.2.6",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-fela": "^7.3.1",
+    "react-jss": "^8.6.1",
+    "react-native-web": "0.8.9",
+    "reactxp": "^1.3.0",
+    "styled-components": "^3.3.3",
+    "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.5",
-    "css-loader": "^0.28.11",
+    "babel-plugin-react-native-web": "0.8.9",
+    "css-loader": "^1.0.0",
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",
-    "webpack": "^4.8.1",
-    "webpack-bundle-analyzer": "^2.11.1",
-    "webpack-cli": "^2.1.3"
+    "webpack": "^4.15.1",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "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.5",
+  "version": "0.8.9",
   "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-dom": "^16.3.2",
-    "react-native-web": "0.8.5"
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-native-web": "0.8.9"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.5",
+    "babel-plugin-react-native-web": "0.8.9",
     "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.5",
+  "version": "0.8.9",
   "description": "React Native for Web",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",

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

@@ -266,7 +266,6 @@ const ScrollView = createReactClass({
 const commonStyle = {
   flexGrow: 1,
   flexShrink: 1,
-  overscrollBehavior: 'contain',
   // Enable hardware compositing in modern browsers.
   // Creates a new layer with its own backing surface that can significantly
   // improve scroll performance.

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 => {
-    const input = findNativeInput(
-      mount(<TextInput defaultValue="12345" onSelectionChange={onSelectionChange} />)
-    );
-    input.simulate('select', {
-      target: { selectionStart: 0, selectionEnd: 3 }
+  describe('prop "onSelectionChange"', () => {
+    test('is called on select', done => {
+      const input = findNativeInput(
+        mount(<TextInput defaultValue="12345" onSelectionChange={onSelectionChange} />)
+      );
+      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 });
-      expect(onSubmitEditing).toHaveBeenCalledTimes(1);
+      input.simulate('keyPress', { which: 13, preventDefault, shiftKey: true });
       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

@@ -282,6 +282,7 @@ class TextInput extends Component<*> {
     if (onChangeText) {
       onChangeText(text);
     }
+    this._handleSelectionChange(e);
   };
 
   _handleFocus = e => {
@@ -376,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;
-    resizeObserver.observe(node);
+    if (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;
-    resizeObserver.unobserve(node);
+    if (node) {
+      delete node._layoutId;
+      resizeObserver.unobserve(node);
+    }
   } else {
     delete instance._layoutId;
   }

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.5",
+  "version": "0.8.9",
   "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-dom": "^16.3.2",
-    "react-native-web": "0.8.5"
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-native-web": "0.8.9"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.5",
+    "babel-plugin-react-native-web": "0.8.9",
     "url-loader": "^1.0.1",
     "webpack": "^4.8.1"
   }