diff --git a/build/react-native-web.sh b/build/react-native-web.sh deleted file mode 100755 index 7de9a0725ea3..000000000000 --- a/build/react-native-web.sh +++ /dev/null @@ -1,10 +0,0 @@ -#!/usr/bin/env bash -cd ./node_modules/react-native-web && -npm install && -npm run compile && -rm -rf ./node_modules && -cd ./packages/react-native-web && -npm install --only=prod && -rm -rf ./node_modules/react ./node_modules/react-dom && -cd ../../ && -cp -R ./packages/react-native-web/* ./ diff --git a/package-lock.json b/package-lock.json index 43daf0380ec5..54c4a1f4ae4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15994,6 +15994,11 @@ "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz", "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw=" }, + "array-find-index": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz", + "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=" + }, "array-flat-polyfill": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/array-flat-polyfill/-/array-flat-polyfill-1.0.1.tgz", @@ -19545,6 +19550,15 @@ "sha.js": "^2.4.8" } }, + "create-react-class": { + "version": "15.7.0", + "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz", + "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==", + "requires": { + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + }, "create-react-context": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz", @@ -19616,6 +19630,15 @@ "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" }, + "css-in-js-utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz", + "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==", + "requires": { + "hyphenate-style-name": "^1.0.2", + "isobject": "^3.0.1" + } + }, "css-loader": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.4.tgz", @@ -25674,6 +25697,11 @@ "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==", "dev": true }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-corefoundation": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/iconv-corefoundation/-/iconv-corefoundation-1.1.6.tgz", @@ -25861,6 +25889,14 @@ "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==", "dev": true }, + "inline-style-prefixer": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.0.tgz", + "integrity": "sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg==", + "requires": { + "css-in-js-utils": "^2.0.0" + } + }, "inquirer": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz", @@ -33385,6 +33421,11 @@ "integrity": "sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ==", "dev": true }, + "normalize-css-color": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/normalize-css-color/-/normalize-css-color-1.0.2.tgz", + "integrity": "sha1-Apkel8zOxmI/5XOvu/Deah8+n40=" + }, "normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", @@ -37081,8 +37122,44 @@ } }, "react-native-web": { - "version": "git+https://github.com/Expensify/react-native-web.git#bfe201af25f9bd465af203b02fc978515b96e956", - "from": "git+https://github.com/Expensify/react-native-web.git#bfe201af25f9bd465af203b02fc978515b96e956" + "version": "0.15.7", + "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.15.7.tgz", + "integrity": "sha512-mrbQayl1luIO4Gfyw6KLdlWc30JcJOQgRn84iOj6dLJYVRwcE6W5U2Af68hQYFJsGgVb9sdlYC0ppfFM7ywqXQ==", + "requires": { + "array-find-index": "^1.0.2", + "create-react-class": "^15.7.0", + "deep-assign": "^3.0.0", + "fbjs": "^3.0.0", + "hyphenate-style-name": "^1.0.4", + "inline-style-prefixer": "^6.0.0", + "normalize-css-color": "^1.0.2", + "prop-types": "^15.6.0", + "react-timer-mixin": "^0.13.4" + }, + "dependencies": { + "fbjs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz", + "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==", + "requires": { + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } }, "react-pdf": { "version": "5.2.0", @@ -37210,6 +37287,11 @@ "use-latest": "^1.0.0" } }, + "react-timer-mixin": { + "version": "0.13.4", + "resolved": "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz", + "integrity": "sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==" + }, "react-web-config": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/react-web-config/-/react-web-config-1.0.0.tgz", diff --git a/package.json b/package.json index 93cae1a680dc..cb3c9a03b2ad 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ "license": "MIT", "private": true, "scripts": { - "postinstall": "./build/react-native-web.sh", "android": "npm run check-metro-bundler-port && react-native run-android", "ios": "npm run check-metro-bundler-port && react-native run-ios", "ipad": "npm run check-metro-bundler-port && react-native run-ios --simulator=\"iPad Pro (12.9-inch) (4th generation)\"", @@ -98,7 +97,7 @@ "react-native-safe-area-context": "^3.1.4", "react-native-screens": "^3.0.0", "react-native-svg": "^12.1.0", - "react-native-web": "git+https://github.com/Expensify/react-native-web.git#bfe201af25f9bd465af203b02fc978515b96e956", + "react-native-web": "0.15.7", "react-pdf": "^5.2.0", "react-plaid-link": "^3.2.0", "react-web-config": "^1.0.0", diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index 3c03837b12d3..a2dd20b2c999 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -13,10 +13,13 @@ const propTypes = { }).isRequired, }; +// This is adapted from https://codesandbox.io/s/react-native-dsyse +// It's a HACK alert since FlatList has inverted scrolling on web class InvertedFlatList extends React.Component { constructor(props) { super(props); + this.invertedWheelEvent = this.invertedWheelEvent.bind(this); this.list = undefined; } @@ -27,6 +30,28 @@ class InvertedFlatList extends React.Component { } else { this.props.innerRef(this.list); } + + if (this.list) { + this.list + .getScrollableNode() + .addEventListener('wheel', this.invertedWheelEvent); + + this.list.setNativeProps({ + style: { + transform: 'translate3d(0,0,0) scaleY(-1)', + }, + }); + } + } + + componentWillUnmount() { + this.list.getScrollableNode() + .removeEventListener('wheel', this.invertedWheelEvent); + } + + invertedWheelEvent(e) { + this.list.getScrollableNode().scrollTop -= e.deltaY; + e.preventDefault(); } render() {