0.9.6

Calculating the `location{X,Y}` values for events requires a call to
`getBoundingClientRect`. To prevent unnecessary performance costs, these values
are implemented as getters and will only make the DOM API call when accessed in
application code.

Close #1157

README.md

@@ -74,7 +74,7 @@ recipes" guide.
 Examples of using React Native for Web with other web tools:
 
 * [Docz](https://github.com/pedronauck/docz-plugin-react-native)
-* [Gatsby](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-react-native-web)
+* [Gatsby](https://github.com/slorber/gatsby-plugin-react-native-web)
 * [Next.js](https://github.com/zeit/next.js/tree/master/examples/with-react-native-web)
 * [Phenomic](https://github.com/phenomic/phenomic/tree/master/examples/react-native-web-app)
 * [Razzle](https://github.com/jaredpalmer/razzle/tree/master/examples/with-react-native-web)

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.9.0",
+  "version": "0.9.6",
   "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.9.0",
+  "version": "0.9.6",
   "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.9.0",
+  "version": "0.9.6",
   "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.5.1",
     "react-fela": "^7.3.1",
     "react-jss": "^8.6.1",
-    "react-native-web": "0.9.0",
+    "react-native-web": "0.9.6",
     "reactxp": "^1.3.0",
     "styled-components": "^3.3.3",
     "styled-jsx": "^2.2.7",
@@ -26,7 +26,7 @@
     "styletron-react": "^4.3.1"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.9.0",
+    "babel-plugin-react-native-web": "0.9.6",
     "css-loader": "^1.0.0",
     "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.9.0",
+  "version": "0.9.6",
   "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.5.1",
     "react-dom": "^16.5.1",
-    "react-native-web": "0.9.0"
+    "react-native-web": "0.9.6"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.9.0",
+    "babel-plugin-react-native-web": "0.9.6",
     "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.9.0",
+  "version": "0.9.6",
   "description": "React Native for Web",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",

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

@@ -8,11 +8,16 @@
  * @flow
  */
 
+let clipboardAvailable;
+
 export default class Clipboard {
   static isAvailable() {
-    return (
-      typeof document.queryCommandSupported === 'function' && document.queryCommandSupported('copy')
-    );
+    if (clipboardAvailable === undefined) {
+      clipboardAvailable =
+        typeof document.queryCommandSupported === 'function' &&
+        document.queryCommandSupported('copy');
+    }
+    return clipboardAvailable;
   }
 
   static getString(): Promise<string> {

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

@@ -279,15 +279,13 @@ const styles = StyleSheet.create({
     ...commonStyle,
     flexDirection: 'column',
     overflowX: 'hidden',
-    overflowY: 'auto',
-    touchAction: 'pan-y'
+    overflowY: 'auto'
   },
   baseHorizontal: {
     ...commonStyle,
     flexDirection: 'row',
     overflowX: 'auto',
-    overflowY: 'hidden',
-    touchAction: 'pan-x'
+    overflowY: 'hidden'
   },
   contentContainerHorizontal: {
     flexDirection: 'row'

packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js

@@ -32,11 +32,13 @@ describe('StyleSheet/i18nStyle', () => {
     test('converts end/start values', () => {
       const initial = {
         float: 'start',
-        textAlign: 'end'
+        textAlign: 'end',
+        transitionProperty: 'marginStart'
       };
       const expected = {
         float: 'left',
-        textAlign: 'right'
+        textAlign: 'right',
+        transitionProperty: 'marginLeft'
       };
       expect(i18nStyle(initial)).toEqual(expected);
     });
@@ -56,7 +58,8 @@ describe('StyleSheet/i18nStyle', () => {
         clear: 'left',
         float: 'left',
         textAlign: 'right',
-        textShadowOffset: { width: '1rem', height: 10 }
+        textShadowOffset: { width: '1rem', height: 10 },
+        transitionProperty: 'marginLeft'
       };
       expect(i18nStyle(initial)).toEqual(initial);
     });
@@ -116,11 +119,13 @@ describe('StyleSheet/i18nStyle', () => {
       test('converts end/start values', () => {
         const initial = {
           float: 'start',
-          textAlign: 'end'
+          textAlign: 'end',
+          transitionProperty: 'marginStart'
         };
         const expected = {
           float: 'right',
-          textAlign: 'left'
+          textAlign: 'left',
+          transitionProperty: 'marginRight'
         };
         expect(i18nStyle(initial)).toEqual(expected);
       });
@@ -140,7 +145,8 @@ describe('StyleSheet/i18nStyle', () => {
           clear: 'left',
           float: 'left',
           textAlign: 'right',
-          textShadowOffset: { width: '1rem', height: 10 }
+          textShadowOffset: { width: '1rem', height: 10 },
+          transitionProperty: 'marginLeft'
         };
         expect(i18nStyle(initial)).toEqual(initial);
       });
@@ -183,11 +189,13 @@ describe('StyleSheet/i18nStyle', () => {
       test('converts end/start values', () => {
         const initial = {
           float: 'start',
-          textAlign: 'end'
+          textAlign: 'end',
+          transitionProperty: 'marginStart'
         };
         const expected = {
           float: 'right',
-          textAlign: 'left'
+          textAlign: 'left',
+          transitionProperty: 'marginRight'
         };
         expect(i18nStyle(initial)).toEqual(expected);
       });
@@ -212,12 +220,14 @@ describe('StyleSheet/i18nStyle', () => {
         const initial = {
           float: 'left',
           textAlign: 'right',
-          textShadowOffset: { width: '1rem', height: 10 }
+          textShadowOffset: { width: '1rem', height: 10 },
+          transitionProperty: 'marginLeft'
         };
         const expected = {
           float: 'right',
           textAlign: 'left',
-          textShadowOffset: { width: '-1rem', height: 10 }
+          textShadowOffset: { width: '-1rem', height: 10 },
+          transitionProperty: 'marginRight'
         };
         expect(i18nStyle(initial)).toEqual(expected);
       });

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

@@ -116,6 +116,19 @@ const i18nStyle = originalStyle => {
       }
     }
 
+    // BiDi flip transitionProperty value
+    if (prop === 'transitionProperty') {
+      // BiDi flip properties
+      if (PROPERTIES_I18N.hasOwnProperty(value)) {
+        // convert start/end
+        const convertedValue = PROPERTIES_I18N[originalValue];
+        value = isRTL ? PROPERTIES_FLIP[convertedValue] : convertedValue;
+      } else if (isRTL && doLeftAndRightSwapInRTL && PROPERTIES_FLIP[originalValue]) {
+        value = PROPERTIES_FLIP[originalValue];
+      }
+    }
+
+    // Create finalized style
     if (isRTL && prop === 'textShadowOffset') {
       nextStyle[prop] = value;
       nextStyle[prop].width = additiveInverse(value.width);

packages/react-native-web/src/exports/Text/TextPropTypes.js

@@ -21,6 +21,7 @@ const TextPropTypes = {
   accessible: bool,
   children: any,
   importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),
+  nativeID: string,
   numberOfLines: number,
   onBlur: func,
   onContextMenu: func,

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

@@ -7,12 +7,14 @@
  * @flow
  */
 
+import ColorPropType from '../ColorPropType';
 import TextStylePropTypes from '../Text/TextStylePropTypes';
 import { oneOf } from 'prop-types';
 
 const TextInputStylePropTypes = {
   ...TextStylePropTypes,
   /* @platform web */
+  caretColor: ColorPropType,
   resize: oneOf(['none', 'vertical', 'horizontal', 'both'])
 };
 

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

@@ -175,8 +175,6 @@ class TextInput extends Component<*> {
     const {
       autoCorrect,
       editable,
-      /* eslint-disable */
-      inputAccessoryViewID,
       keyboardType,
       multiline,
       numberOfLines,
@@ -193,22 +191,34 @@ class TextInput extends Component<*> {
       selectTextOnFocus,
       spellCheck,
       /* react-native compat */
+      accessibilityViewIsModal,
+      allowFontScaling,
       caretHidden,
       clearButtonMode,
       dataDetectorTypes,
       disableFullscreenUI,
       enablesReturnKeyAutomatically,
+      hitSlop,
       inlineImageLeft,
       inlineImagePadding,
+      inputAccessoryViewID,
       keyboardAppearance,
+      needsOffscreenAlphaCompositing,
+      onAccessibilityTap,
       onContentSizeChange,
       onEndEditing,
+      onMagicTap,
       onScroll,
+      removeClippedSubviews,
+      renderToHardwareTextureAndroid,
       returnKeyLabel,
       returnKeyType,
+      scrollEnabled,
       selectionColor,
       selectionState,
+      shouldRasterizeIOS,
       textBreakStrategy,
+      textContentType,
       underlineColorAndroid,
       /* eslint-enable */
       ...otherProps

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

@@ -696,9 +696,16 @@ const TouchableMixin = {
     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 };
+    this.pressInLocation = {
+      pageX,
+      pageY,
+      get locationX() {
+        return touch && touch.locationX;
+      },
+      get locationY() {
+        return touch && touch.locationY;
+      }
+    };
   },
 
   _getDistanceBetweenPoints: function(aX: number, aY: number, bX: number, bY: number) {

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

@@ -38,6 +38,7 @@ export type ViewProps = {
   children?: any,
   hitSlop?: EdgeInsetsProp,
   importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants',
+  nativeID?: string,
   onBlur?: Function,
   onClick?: Function,
   onClickCapture?: Function,
@@ -87,6 +88,7 @@ const ViewPropTypes = {
   children: any,
   hitSlop: EdgeInsetsPropType,
   importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),
+  nativeID: string,
   onBlur: func,
   onClick: func,
   onClickCapture: func,

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

@@ -8,6 +8,7 @@ const whitelist = {
   children: true,
   disabled: true,
   importantForAccessibility: true,
+  nativeID: true,
   onBlur: true,
   onContextMenu: true,
   onFocus: true,

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

@@ -44,6 +44,9 @@ if (!ResponderEventPlugin.eventTypes.responderMove.dependencies) {
 }
 
 let lastActiveTouchTimestamp = null;
+// The length of time after a touch that we ignore the browser's emulated mouse events
+// https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events
+const EMULATED_MOUSE_THERSHOLD_MS = 1000;
 
 const originalExtractEvents = ResponderEventPlugin.extractEvents;
 ResponderEventPlugin.extractEvents = (topLevelType, targetInst, nativeEvent, nativeEventTarget) => {
@@ -55,7 +58,7 @@ ResponderEventPlugin.extractEvents = (topLevelType, targetInst, nativeEvent, nat
     lastActiveTouchTimestamp = Date.now();
   } else if (lastActiveTouchTimestamp && eventType.indexOf('mouse') > -1) {
     const now = Date.now();
-    shouldSkipMouseAfterTouch = now - lastActiveTouchTimestamp < 250;
+    shouldSkipMouseAfterTouch = now - lastActiveTouchTimestamp < EMULATED_MOUSE_THERSHOLD_MS;
   }
 
   if (

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

@@ -63,14 +63,15 @@ const observe = instance => {
 };
 
 const unobserve = instance => {
-  delete registry[instance._layoutId];
   if (resizeObserver) {
     const node = findNodeHandle(instance);
     if (node) {
+      delete registry[node._layoutId];
       delete node._layoutId;
       resizeObserver.unobserve(node);
     }
   } else {
+    delete registry[instance._layoutId];
     delete instance._layoutId;
   }
 };
@@ -97,7 +98,9 @@ const applyLayout = Component => {
     function componentDidMount() {
       this._layoutState = emptyObject;
       this._isMounted = true;
-      observe(this);
+      if (this.props.onLayout) {
+        observe(this);
+      }
     }
   );
 
@@ -116,7 +119,9 @@ const applyLayout = Component => {
     componentWillUnmount,
     function componentWillUnmount() {
       this._isMounted = false;
-      unobserve(this);
+      if (this.props.onLayout) {
+        unobserve(this);
+      }
     }
   );
 

packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js

@@ -183,6 +183,12 @@ describe('modules/createDOMProps', () => {
     expect(props['aria-hidden']).toEqual(true);
   });
 
+  test('prop "nativeID" becomes "id"', () => {
+    const nativeID = 'Example.nativeID';
+    const props = createProps({ nativeID });
+    expect(props.id).toEqual(nativeID);
+  });
+
   test('prop "testID" becomes "data-testid"', () => {
     const testID = 'Example.testID';
     const props = createProps({ testID });

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

@@ -77,6 +77,7 @@ const createDOMProps = (component, props, styleResolver) => {
     accessibilityLabel,
     accessibilityLiveRegion,
     importantForAccessibility,
+    nativeID,
     placeholderTextColor,
     pointerEvents,
     style: providedStyle,
@@ -164,10 +165,15 @@ const createDOMProps = (component, props, styleResolver) => {
   }
 
   // OTHER
+  // Native element ID
+  if (nativeID && nativeID.constructor === String) {
+    domProps.id = nativeID;
+  }
   // Link security and automation test ids
   if (component === 'a' && domProps.target === '_blank') {
     domProps.rel = `${domProps.rel || ''} noopener noreferrer`;
   }
+  // Automated test IDs
   if (testID && testID.constructor === String) {
     domProps['data-testid'] = testID;
   }

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

@@ -78,6 +78,7 @@ function normalizeTouchEvent(nativeEvent) {
     typeof nativeEvent.stopPropagation === 'function'
       ? nativeEvent.stopPropagation.bind(nativeEvent)
       : emptyFunction;
+  const singleChangedTouch = changedTouches[0];
 
   const event = {
     _normalized: true,
@@ -85,11 +86,15 @@ function normalizeTouchEvent(nativeEvent) {
     cancelable: nativeEvent.cancelable,
     changedTouches,
     defaultPrevented: nativeEvent.defaultPrevented,
-    identifier: undefined,
-    locationX: undefined,
-    locationY: undefined,
-    pageX: nativeEvent.pageX,
-    pageY: nativeEvent.pageY,
+    identifier: singleChangedTouch ? singleChangedTouch.identifier : undefined,
+    get locationX() {
+      return singleChangedTouch ? singleChangedTouch.locationX : undefined;
+    },
+    get locationY() {
+      return singleChangedTouch ? singleChangedTouch.locationY : undefined;
+    },
+    pageX: singleChangedTouch ? singleChangedTouch.pageX : nativeEvent.pageX,
+    pageY: singleChangedTouch ? singleChangedTouch.pageY : nativeEvent.pageY,
     preventDefault,
     stopImmediatePropagation,
     stopPropagation,
@@ -102,14 +107,6 @@ function normalizeTouchEvent(nativeEvent) {
     which: nativeEvent.which
   };
 
-  if (changedTouches[0]) {
-    event.identifier = changedTouches[0].identifier;
-    event.pageX = changedTouches[0].pageX;
-    event.pageY = changedTouches[0].pageY;
-    event.locationX = changedTouches[0].locationX;
-    event.locationY = changedTouches[0].locationY;
-  }
-
   return event;
 }
 
@@ -164,8 +161,12 @@ function normalizeMouseEvent(nativeEvent) {
     changedTouches: touches,
     defaultPrevented: nativeEvent.defaultPrevented,
     identifier: touches[0].identifier,
-    locationX: touches[0].locationX,
-    locationY: touches[0].locationY,
+    get locationX() {
+      return touches[0].locationX;
+    },
+    get locationY() {
+      return touches[0].locationY;
+    },
     pageX: nativeEvent.pageX,
     pageY: nativeEvent.pageY,
     preventDefault,

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

@@ -11,7 +11,7 @@
 import PropTypes from 'prop-types';
 import UIManager from '../../../exports/UIManager';
 
-const __DEV__ = process.env.NODE !== 'production';
+const __DEV__ = process.env.NODE_ENV !== 'production';
 const { checkPropTypes } = PropTypes;
 
 const Types = {

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

@@ -410,7 +410,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   }
 
   static defaultProps = {
-    disableVirtualization: false,
+    disableVirtualization: process.env.NODE_ENV === 'test',
     horizontal: false,
     initialNumToRender: 10,
     keyExtractor: (item: Item, index: number) => {
@@ -1562,6 +1562,7 @@ class CellRenderer extends React.Component<
       renderItem: renderItemType,
     },
     prevCellKey: ?string,
+    style: ?DangerouslyImpreciseStyleProp,
   },
   $FlowFixMeState,
 > {
@@ -1630,6 +1631,7 @@ class CellRenderer extends React.Component<
       index,
       inversionStyle,
       parentProps,
+      style,
     } = this.props;
     const {renderItem, getItemLayout} = parentProps;
     invariant(renderItem, 'no renderItem!');
@@ -1649,9 +1651,9 @@ class CellRenderer extends React.Component<
     );
     const cellStyle = inversionStyle
       ? horizontal
-        ? [{flexDirection: 'row-reverse'}, inversionStyle]
-        : [{flexDirection: 'column-reverse'}, inversionStyle]
-      : horizontal ? [{flexDirection: 'row'}, inversionStyle] : inversionStyle;
+        ? [styles.rowReverse, inversionStyle, style]
+        : [styles.columnReverse, inversionStyle, style]
+      : horizontal ? [styles.row, inversionStyle, style] : [inversionStyle, style];
     if (!CellRendererComponent) {
       return (
         <View style={cellStyle} onLayout={onLayout}>
@@ -1702,6 +1704,15 @@ const styles = StyleSheet.create({
   horizontallyInverted: {
     transform: [{scaleX: -1}],
   },
+  row: {
+    flexDirection: 'row'
+  },
+  rowReverse: {
+    flexDirection: 'row-reverse'
+  },
+  columnReverse: {
+    flexDirection: 'column-reverse'
+  }
 });
 
 export default VirtualizedList;

packages/website/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "website",
-  "version": "0.9.0",
+  "version": "0.9.6",
   "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.5.1",
     "react-dom": "^16.5.1",
-    "react-native-web": "0.9.0"
+    "react-native-web": "0.9.6"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.9.0",
+    "babel-plugin-react-native-web": "0.9.6",
     "url-loader": "^1.0.1",
     "webpack": "^4.8.1"
   }

packages/website/storybook/1-components/Text/TextScreen.js

@@ -116,6 +116,12 @@ const TextScreen = () => (
         ]}
       />
 
+      <DocItem
+        name="nativeID"
+        typeInfo="?string"
+        description="Used to locate this view from any native DOM code, or to define accessibility relationships. This is rendered to the native 'id' DOM attribute"
+      />
+
       <DocItem
         name="numberOfLines"
         typeInfo="?number"

packages/website/storybook/1-components/Touchable/examples/CustomStyleOverrides.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { processColor, StyleSheet, View, Text, TouchableHighlight } from 'react-native';
+import { StyleSheet, View, Text, TouchableHighlight } from 'react-native';
 
 export default class TouchableCustomStyleOverridesExample extends React.Component {
   buttons = ['One', 'Two', 'Three'];
@@ -26,7 +26,7 @@ export default class TouchableCustomStyleOverridesExample extends React.Componen
               key={button}
               onPress={this.select(button)}
               style={[styles.touchable, this.state[button] && styles.blue]}
-              underlayColor={processColor('#1B95E0', 0.125)}
+              underlayColor="#1b95e020"
             >
               <Text style={[!this.state[button] && styles.text]}>{button}</Text>
             </TouchableHighlight>
@@ -39,7 +39,7 @@ export default class TouchableCustomStyleOverridesExample extends React.Componen
 
 const styles = StyleSheet.create({
   blue: {
-    backgroundColor: processColor('#1B95E0', 0.25),
+    backgroundColor: '#1b95e040',
     borderColor: '#1B95E0'
   },
   text: {

packages/website/storybook/1-components/View/ViewScreen.js

@@ -119,6 +119,12 @@ const ViewScreen = () => (
         ]}
       />
 
+      <DocItem
+        name="nativeID"
+        typeInfo="?string"
+        description="Used to locate this view from any native DOM code, or to define accessibility relationships. This is rendered to the native 'id' DOM attribute"
+      />
+
       <DocItem name="onBlur" typeInfo="?function" />
       <DocItem name="onContextMenu" typeInfo="?function" />
       <DocItem name="onFocus" typeInfo="?function" />