0.8.7

Temporary work-around for a bug in inline-style-prefixer.

Fix #1014

.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:
-* Device:
-* Browser:
-* React Native for Web (version):
-* React (version):
+* React Native for Web (version): TBC
+* React (version): TBC
+* Browser: TBC
+
+<!--
+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.4",
+  "version": "0.8.7",
   "name": "react-native-web-monorepo",
   "scripts": {
     "clean": "del ./packages/*/dist",

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

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

packages/benchmarks/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "benchmarks",
-  "version": "0.8.4",
+  "version": "0.8.7",
   "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 -"
@@ -18,7 +18,7 @@
     "react-dom": "^16.3.2",
     "react-fela": "^7.2.0",
     "react-jss": "^8.4.0",
-    "react-native-web": "0.8.4",
+    "react-native-web": "0.8.7",
     "reactxp": "^1.1.1",
     "styled-components": "^3.2.6",
     "styled-jsx": "^2.2.6",
@@ -26,7 +26,7 @@
     "styletron-react": "^4.2.1"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.4",
+    "babel-plugin-react-native-web": "0.8.7",
     "css-loader": "^0.28.11",
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",

packages/examples/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-native-examples",
-  "version": "0.8.4",
+  "version": "0.8.7",
   "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 -"
@@ -10,10 +10,10 @@
     "babel-runtime": "^6.26.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "react-native-web": "0.8.4"
+    "react-native-web": "0.8.7"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.4",
+    "babel-plugin-react-native-web": "0.8.7",
     "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.4",
+  "version": "0.8.7",
   "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

@@ -368,6 +368,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 +382,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

@@ -376,6 +376,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/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),
-      ReactNative.findNodeHandle(
+      findNodeHandle(this),
+      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.4",
+  "version": "0.8.7",
   "scripts": {
     "build": "build-storybook -o ./dist -c ./storybook/.storybook",
     "start": "start-storybook -p 9001 -c ./storybook/.storybook",
@@ -12,10 +12,10 @@
     "@storybook/react": "^3.4.3",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "react-native-web": "0.8.4"
+    "react-native-web": "0.8.7"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.4",
+    "babel-plugin-react-native-web": "0.8.7",
     "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