0.9.2

[add] TextInput support for 'caretColor' CSS property
Close #1127
2026-04-03 22:49:22 +08:00 · 2018-10-09 18:02:55 -07:00 · 2018-10-09 17:59:57 -07:00 · 2018-10-09 17:54:10 -07:00 · 2018-10-09 17:46:19 -07:00 · 2018-10-09 17:37:02 -07:00
12 changed files with 54 additions and 24 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "private": true,
-  "version": "0.9.0",
+  "version": "0.9.2",
  "name": "react-native-web-monorepo",
  "scripts": {
    "clean": "del ./packages/*/dist",
--- a/packages/babel-plugin-react-native-web/package.json
+++ b/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.2",
  "description": "Babel plugin for React Native for Web",
  "main": "index.js",
  "devDependencies": {
--- a/packages/benchmarks/package.json
+++ b/packages/benchmarks/package.json
@@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "benchmarks",
-  "version": "0.9.0",
+  "version": "0.9.2",
  "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.2",
    "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.2",
    "css-loader": "^1.0.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "react-native-examples",
-  "version": "0.9.0",
+  "version": "0.9.2",
  "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.2"
  },
  "devDependencies": {
-    "babel-plugin-react-native-web": "0.9.0",
+    "babel-plugin-react-native-web": "0.9.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "file-loader": "^1.1.11",
    "webpack": "^4.8.1",
--- a/packages/react-native-web/package.json
+++ b/packages/react-native-web/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-native-web",
-  "version": "0.9.0",
+  "version": "0.9.2",
  "description": "React Native for Web",
  "module": "dist/index.js",
  "main": "dist/cjs/index.js",
--- a/packages/react-native-web/src/exports/TextInput/TextInputStylePropTypes.js
+++ b/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'])
 };

--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/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
--- a/packages/react-native-web/src/modules/ResponderEventPlugin/index.js
+++ b/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 (
--- a/packages/react-native-web/src/modules/applyLayout/index.js
+++ b/packages/react-native-web/src/modules/applyLayout/index.js
@@ -97,7 +97,9 @@ const applyLayout = Component => {
    function componentDidMount() {
      this._layoutState = emptyObject;
      this._isMounted = true;
-      observe(this);
+      if (this.props.onLayout) {
+        observe(this);
+      }
    }
  );

@@ -116,7 +118,9 @@ const applyLayout = Component => {
    componentWillUnmount,
    function componentWillUnmount() {
      this._isMounted = false;
-      unobserve(this);
+      if (this.props.onLayout) {
+        unobserve(this);
+      }
    }
  );

--- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
+++ b/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;
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "website",
-  "version": "0.9.0",
+  "version": "0.9.2",
  "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.2"
  },
  "devDependencies": {
-    "babel-plugin-react-native-web": "0.9.0",
+    "babel-plugin-react-native-web": "0.9.2",
    "url-loader": "^1.0.1",
    "webpack": "^4.8.1"
  }
--- a/packages/website/storybook/1-components/Touchable/examples/CustomStyleOverrides.js
+++ b/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: {
Author	SHA1	Message	Date
Nicolas Gallagher	a54bdeec09	0.9.2	2018-10-09 18:02:55 -07:00
atp	8fa7dc63ec	[add] TextInput support for 'caretColor' CSS property Close #1127	2018-10-09 17:59:57 -07:00
Bruno Lemos	d841db2337	[fix] VirtualizedList sticky header support The way that sticky headers work on web requires the ScrollView to apply 'position:sticky' to a clone of the element. This wasn't working for VirtualizedList because the style prop was not passed to the default CellRendererComponent implementation. Fix #1066 Close #1122	2018-10-09 17:54:10 -07:00
Rick	8e7d31cff5	[fix] ignore native-only TextInput props TextInput inherits ViewPropTypes but many of them do nothing (even in React Native). Close #1123	2018-10-09 17:46:19 -07:00
Nicolas Gallagher	0764687a8f	[fix] VirtualizedList disabled virtualization in tests Fix #1077 Close #1118	2018-10-09 17:37:02 -07:00
Charlie Croom	d31bdf2cf8	[fix] ResizeObserve only on elements using 'onLayout' prop Only observe nodes when the 'onLayout' prop is specified on the element. Fixes performance regression for browsers that rely on MutationObserver-based shim for ResizeObserver. Fix #1128 Close #1129	2018-10-09 17:31:32 -07:00
Nicolas Gallagher	1f3a77dada	0.9.1	2018-09-27 14:30:26 -07:00
Nicolas Gallagher	c3cbd53a8a	[fix] ResponderEventPlugin removal of emulated mouse events If the work related to a touch/press event takes a long enough time (i.e., CPU intensive, old device, etc.) the browser may produce emulated mouse events >500ms after the original touch event. This causes the related Responder events to fire twice. To avoid that happening, this patch increases the filter threshold used by the ResponderEventPlugin from 200ms to 1000ms. Fix #1078	2018-09-22 16:33:46 -07:00
Nicolas Gallagher	4f5ee15e4b	Fix website TouchableHighlight example	2018-09-22 16:20:49 -07:00